November 22, 2009

14 Amazing Examples To Customize Blockquote Style In Blogger!


Blockquotes with different styles A block quote or block quotation is an extract in a written document, set off from the main text as a distinct. We all quote great authors but we all must present these great words in an extra ordinary way using a beautiful blockquote. We have created simple CSS codes for around 14 Blockquotes, which are outstanding in look and feel. These blockquotes will give you an idea on how to create your own customized blockquote for your blogs and web pages.

Have a Look at each one of them. Details of adding the blockquote to your blogs and websites are given in the implementation and customization section.

Blockquote With a Fancy Border and Owl Image

owl

 Blockquote Code:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote With a Purple Corner Label and Border At Bottom

Purple-Scanned-Copy

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Jigsaw Blockquote With An Image At Right Corner

jigsaw

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquotes With Classic Left Borders

left-sided-brownish

 Blockquote Code:

.post blockquote {
background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

 

left-sided-green-black

 Blockquote Code:

blockquote {
background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

 

Blockquote With A Brown Corner Label

Brown-Scanned-copy

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquotes With Inverted Commas

 commas-navy-blue Blockquote Code:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

commas-orange

  Blockquote Code:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

commas-hands

 Blockquote Code:

.post blockquote {
  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s400/left.gif) no-repeat top left;
  text-indent: 65px;
color:#6299E4;
  }
  .post blockquote div {
    display: block;
    background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

commas-green  Blockquote Code:

.post blockquote {
  font: italic 1em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquote With Well Aligned Image At Top

 

Copyrighted-red

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Blockquote With Canopy Style Image At Top and Bottom

 

at-top-and-bottom

 Blockquote Code:

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}

.post blockquote div{
background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

 

Box Style Blockquote Surrounded By Borders

Copyrighted-orange

 Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrY8vdJeI/AAAAAAAACRc/8Ed9vrlWWGo/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

 

The Monkey Man Blockquote!!!

Once you get an idea on how to use these blockquotes then you can create artistic and some funny blockquotes like the one below,monkey-man

 Blockquote Code:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}

.post blockquote div{
background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding: 20px;
}

 

Implementation and Customization:-

Implementaion:-

Now To add One of these amazing and unique blockquotes to your blogs, do the following,

  1. Go to Blogger > Layout > Edit HTML
  2. Backup your template
  3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,
    .post-body blockquote { line-height:1.3em; }
    OR
    .post blockquote{ bla bla bla}
    If you couldn’t find such code then it is OK.
  4. Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code for one of your favourite blockquotes. I am giving a sample code below

.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Paste Image Link here) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;

}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Customization:-

Important areas to be customized are bolded. Where,

  • padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left
  • background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(Paste Image Link here)
  • font :- It includes font style, size and type respectively. Match the colours with the code above for reference.
  • color :- This refers to text colour. You can use a different font colour using our color chart
  • border :- This refers to border width, style and colour respectively.
  • All other blockquotes can be customized in similar way.

     5.      After customizing finally save your template and preview it to see the interesting new change.

Note:- For Blockquotes with inverted commas, canopy style and the Monkey Man, there is a little more coding required. Read below

Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,

Now Whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below,

<blockquote><div>Your Quote Will Be Here</div></blockquote>

 

Play With Each Blockquote Code!

To get more used to the codes above you need to play with some CSS using our HTML Editor.

Inside MBT HTML Editor paste the any of the blockquote codes above between <style> and </style>  and just below </style> paste this code,

<blockquote>Write Anything Here As a Text</blockquote>

For example for the Owl Blockquote paste the codes in this pattern,

<style>

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(file:///c:/Documents%20and%20Settings/mustafa.MYBLOGGERTRICKS/Desktop/blockquote/owl-icon-48.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

</style>

<blockquote>Write Anything Here As a Text</blockquote>

 

Start Playing! :- MBT HTML EDITOR

 

That’s All!

I have created all images with text “Copyrighted Coding” or “Scanned Copy” etc. If you want to write something else than use my images as reference size to create your own custom images.

I will publish two consecutive posts where I will share a blockquote with auto number list and a blockquote with a blinking bulb! Make sure you subscribe to be updated about latest CSS and HTML tricks related to Blogger.

Do not forget to tell us how useful or unique this post was for you.





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

139 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Replies
    1. This comment has been removed by the author.

      Delete
    2. Fantastic Blockquotes Styles.. Thanks alot Mustafa Bhai for Such a Nice Article!

      Regards:

      ▄▀▄▀▄▀▄ SEO Tips & Tricks ▄▀▄▀▄▀▄

      Delete
    3. HI Mohammad, Awesome Blockquote And added to my blog

      Delete
    4. *1. Win gifts with Fancy :
      http://cashbloggertricks.blogspot.com/2014/02/Fancy.html

      *2. How To Make $10 every day With Best 10 Paid-to-Click Websites :
      http://cashbloggertricks.blogspot.com/2014/01/ptc.html

      *3. Best 4 Sites To Make Money From short links :
      http://cashbloggertricks.blogspot.com/2014/02/Money-shortlinks.html

      *4. Download Apriezt Blogger Template For Free :
      http://cashbloggertricks.blogspot.com/2014/02/Apriezt-CashBloggerTricks.html

      Delete
  2. Coooooooooool....it's a great thing!

    Well...I tried the inverted comas one but the right side image (coma) doesn't show-up, why?

    ReplyDelete
  3. @googy

    In the edit html mode of your blogger editor add the div tags as explained in the above post in these words

    "Note:- For Blockquotes with inverted commas, canopy style and the Monkey Man, there is a little more coding required. Read below

    Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,

    Now Whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below,

    <blockquote><div>Your Quote Will Be Here</div></blockquote>
    "

    ReplyDelete
  4. Wow! great coding. I will try it on my blog. thanks for the tricks.

    ReplyDelete
  5. Mohd, Can you do one favor for me, I would like to get notified about your posts in my phone.

    like free sms alerts!!

    you cab use google sms labs

    I found a image file for that you may use if there is no copyright
    -----> http://4.bp.blogspot.com/_XdnyTQmPMFU/Sv-rZhA8lxI/AAAAAAAAHNo/o_Nom3zX4rk/s320/smsjpg.gif

    ReplyDelete
  6. @sreejesh

    Unfortunately We don't have this service in Pakistan :(

    ReplyDelete
  7. Wow amazing tips. Thanks for sharing this.

    ReplyDelete
  8. hmmm...its more creativity...saloom!!!

    ReplyDelete
  9. For some reason I picked the green quotations blockquote and theres a beginning green quotation but no ending one???

    ReplyDelete
  10. many blogs tricks here. thanks for the post customize it. thanks

    ReplyDelete
  11. nice tips n pic...
    i like it...

    thanks....

    ReplyDelete
  12. hello

    I'm having a bit of a problem. I have blogger template stretchy. and the background quoteblock that I use stretches way past the quote/text. Any way to just have the quote block around my text?

    thank you

    ReplyDelete
  13. hoello sir how do own create "blok quote" gif image

    ReplyDelete
  14. I to have a blog
    It is a games blog
    url: http://1gbgames.blogspot.com/
    so i want to get 2 blockquotes
    i.e.
    i want one blockquote for download link
    and other for description
    how can i do it
    i use pro blogger template

    ReplyDelete
  15. I to have a blog
    It is a games blog
    url: http://1gbgames.blogspot.com/
    so i want to get 2 blockquotes
    i.e.
    i want one blockquote for download link
    and other for description
    how can i do it
    i use pro blogger template

    ReplyDelete
  16. Nyce Post Very Help - Uzair's Full Free Games - Http://g2znovat.blogspot.com

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. I like that it walks you through the customization process of the designs! Great job!

    ReplyDelete
  19. thank you so much Mohammad Mustafa! I was really finding this trick... I ended up in creating my customized quote style but didn't know about |div>QUOTE</div| trick! Thanks a ton! :D

    ReplyDelete
  20. thanks for this! i'm gonna use the classic quote - works perfect and the color blends in with the entire look of my blog.

    ReplyDelete
  21. It seems that your blockquote script created a problem in the Firefox header. The css code appeared at the top of the header only in Firefox IE, Chrome and Safari were fine with it. Any ideas? Thanks! Have you confirmed it in Firefox?

    ReplyDelete
  22. This is the code I pasted right before skin:
    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;
    margin-bottom:20px;
    font : 16px Helvetica;
    margin-bottom:10px;
    }
    #related-posts .widget {
    list-style-type : none;
    margin : 5px 0 5px 0;
    padding : 0;
    }
    #related-posts .widget h2, #related-posts h2 {
    color : #940f04;
    font-size : 20px;
    font-weight : normal;
    margin : 5px 7px 0;
    padding : 0 0 5px;
    }
    #related-posts a {
    color : #3d85c6;
    font-size : 14px;
    text-decoration : none;
    }
    #related-posts a:hover {
    color : #054474;
    text-decoration : none;
    }
    #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : 0;
    }
    #related-posts ul li {
    display : block;
    background : url("http://4.bp.blogspot.com/_v5IxGTiMTD8/S86tvMfnwNI/AAAAAAAABCo/L5mp8kwzf0I/s400/listarrow.png") no-repeat 0 0;
    margin : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 1px;
    padding-left : 16px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
    }
    ].post-body:first-letter {
    float:left;
    color: #000000;
    background:#ffffff;
    line-height:80px;
    padding-top:1px;
    padding-right:5px;
    font-family:Georgia;
    font-size:100px;
    }
    blockquote {
    font: 15px normal Georgia;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
    padding-left: 15px;
    border-left: 6px solid #660000;
    }

    ReplyDelete
  23. thank you!
    it's working and it's helped a lot..

    ReplyDelete
  24. Thank you very much!
    It works perfectly!

    ReplyDelete
  25. Seriously, you should work at Google! You know better than them. Did you learn all these by yourself??

    ReplyDelete
  26. I really apologize I missed replying all those useful questions due to my business. If you guys can still read me then please let me know if I could be of any help.

    @Ayush

    That is an honour dear and surely respect from you side. But I am just as good as you are. Eager to learn and implement. Yes I learnt CSS and HTML by editing blogger templates just like you are doing now :)

    ReplyDelete
  27. Thanks Bro
    Using "Blockquotes With Classic Left Borders" XD

    ReplyDelete
  28. amazing tips. i use this blockquote in my website. thangks

    ReplyDelete
  29. Assalamu'alaikum.
    Thanks for this info, nice design. very useful for me.

    ReplyDelete
  30. Hello,,,,its is an awesome post....but it is not working in my blog,its working in new blog,but not my old one blog,plzzzzzz help.....really need this
    balani.abhi@gmail.com

    ReplyDelete
  31. Just superb ! The best Blockquotes i have ever seen on the net!
    Thanks a lot for sharing this ! God bless you !

    ReplyDelete
  32. i not found the blockquote at my edit html . so ?

    ReplyDelete
  33. how to use icons or something like that instead of bold circle.

    ReplyDelete
  34. Hello i have a problem with this code everything works fine but when i try tu put this line ]]> it disappear and only show me this ]]> can anybody tell me why this happens?

    ReplyDelete
  35. I'll try this trick bro.
    Thanks.

    ReplyDelete
  36. Love love love love love love this post!!!
    You are awesome Mr. Ahmed! I have search around this net to find a clue on this topic and fail, until I found your blog. Awesome job! Thanks for sharing this. I have bookmark your blog. Keep up the good job!

    ReplyDelete
  37. YAH!!!! I was looking for this.. thanks

    ReplyDelete
  38. main problem is only One such blockquote works for one template, i have gave 2 different name and try both, but one is fine but another one not aligning perfectly...but same code work when i tried only one at a time...Dont knw whats the main problem is....i have Waste 2 hr on this issue but not solved yet................

    Facebook Hacking

    ReplyDelete
  39. This post is what I looking for so far...
    Thank you very much.

    ReplyDelete
  40. its a silly ques. but HOW CAN I USE BLOCKQUOTES??? I don't know how to use them!

    ReplyDelete
  41. You have shared so many cool articles in this blog. Many of them are javascript based. I am wondering about my website's load time if I am going to implement all those cool widgets into my blog!!!! Thanks for the share mate. You are adorable.

    Regards,
    Admin of SEO Service Provider

    ReplyDelete
  42. I don't want to change blogger default quote style. I have already found so many cool widgets in this blog. I will implement those. Thanks though.

    Regards,
    Admin of SEO Service Provider

    ReplyDelete
  43. Bhaijaan, at forst it worked for me like a charm but now after like 20 try's I'm still not able to get that! It's not working on one of my particular Blog & I so really want it!

    ReplyDelete
  44. Spent some many hours but didn't work for me! :/

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. The above code(s) has to be pasted between <b:skin><![CDATA[/*

    ReplyDelete
  47. Arigato Gonzaimasu! Thanks Very Much :) its work!

    ReplyDelete
  48. download link of MTB html editor is not working, free software

    ReplyDelete
  49. Wow! It's a full package of Blockquote styles. Never seen a tutorial like this.
    Now I am in full love with this blog!
    Thanks Dear.

    ReplyDelete
  50. Well this kind of information is really worth searching for this. It’s good to have these kinds of articles around to keep the information flow steady. Helping those who really can make things right in the future, good work!
    Download free games

    ReplyDelete
  51. This post is what I looking for so far...
    Thank you very much.
    intellitheme bonus

    ReplyDelete
  52. Thank you much, i was looking for it. You are awesome i say, solution of everything is here.
    Blogging, SEO and Earning

    ReplyDelete
  53. Thanks muhammad
    VISIT me

    www.bbloggertutorials.blogspot.com

    ReplyDelete
  54. I have a problem, only div tag background works and the blockquote background doesnot work, (i.e.,) i applied canopy style, when i see the scripts in the blog post, its showing only the end image and not the start image. Can you guess wats the problem?

    ReplyDelete
  55. i want same blockquote like yours. please tell????

    ReplyDelete
  56. Really a great post. Good dude. Thanks for sharing such an useful information. Very interesting one......... by OPS 571 Final Exam provider.

    ReplyDelete
  57. i want to add a Block quote style which you are using currently. How can i create this style? Another thing is that , after writing the HTML Code when i click BLOCKQUOTE menu, html get disturb, it does not appear as it is appearing on your website. Means i want to show my "CSS Code" or "Java script Code" in a blocquote as i wrote them in my blogger post. but after selecting the block quote its size get disturb.Please reply, i am waiting.

    i have added a Blockquote style in my blogger, but you can see which problem i am facing, plz see my blog you can understad my problem..http://www.wpbloggertricks.com

    ReplyDelete
  58. Thanks.
    http://protrickshub.blogspot.com

    ReplyDelete
  59. Nice Post with information regarding use! The ways you have illustrated the information is impressive. Thanks!.. ..... by MGT 230 Final Exam provider.

    ReplyDelete
  60. I would prefer to categorical feeling you for the efforts you have got created in distributing this. i'm hoping an equivalent best work from you within the future.. by MGT 311 Entire Course

    ReplyDelete
  61. Everything is very open with a really clear description of the challenges. It was truly informative. Your site is very helpful. Thanks for sharing!. ..... by BIS 220 Week 5 provider.

    ReplyDelete
  62. Really awesome post and i take in added advantageous things from thisMuch appreciated and extend offering..by LDR 531 Entire Course

    ReplyDelete
  63. I would prefer to categorical feeling you for the efforts you have got created in distributing this. i'm hoping an equivalent best work from you within the future.by LDR 531 Week 6


    ReplyDelete
  64. Everything is very open with a really clear description of the challenges. It was truly informative. Your site is very helpful. Thanks for sharing!. ..... by Minecraft Skins

    ReplyDelete
  65. i would in future apply this to my blog, btw thanks

    Blogging Techniques

    ReplyDelete
  66. This comment has been removed by the author.

    ReplyDelete
  67. This comment has been removed by the author.

    ReplyDelete
  68. Attention:

    You may have a collection of 13 amazing examples of blogger blockquote style here

    $$$$$13 Amazing Examples of Styling Blogger blockquote$$$$$

    ReplyDelete
  69. Thank You Very Much I Found This Artical Very Help Full Keep it Up! Visit Down
    Download Latest Game here :: thank you vary :::

    ReplyDelete
  70. Such a nice post.Here New way of making money online.It's a new system to make money online that's been getting some great reviews and people should sign up today before everyone else does as its going viral.Join today hurry up and don't miss this opportunity.For more detail click here:- Earn With Online Survey

    ReplyDelete
  71. i wants to set boder to whole comments box and all replyes area like your this site...Please help me ..Btw...today you have shared very really nice tutorial, It helps me lots.Thanks,Earn Money Using Qadabra

    ReplyDelete
  72. helped me to improve.... Am new to the world of internet and its wide oppurtunities...... Make Money , Blogging Tips

    ReplyDelete
  73. Thanks for these beautiful quotes.. i tried 10th one ..
    Beauty Tips in Urdu

    ReplyDelete
  74. This comment has been removed by the author.

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. Sir I want to know that while using block quote "When I add code of a widget so that users can copy it instead of showing the code it start showing the widget"
    I am very worried please tell me how to show the only text of the widget need answers please it is necessary!
    Thanks in Advance to MBT

    ReplyDelete
  77. Sir I want to know that while using block quote "When I add code of a widget so that users can copy it instead of showing the code it start showing the widget"
    I am very worried please tell me how to show the only text of the widget need answers please it is necessary!
    Thanks in Advance to MBT

    ReplyDelete
  78. thanks for the great posts and great widgets you provide !!

    Thankyou very much vro notification, ap eamcet 2014

    ReplyDelete
  79. Want to get more than a dynamic list of blogger blockquote styles.

    Here is: 13 amazing examples to design blogger blockquotes!

    ReplyDelete
  80. Thanks MBT !
    I really loved the Codes you have here .
    My Fav was the 8th one ...

    warm regards from 8ruuux

    ReplyDelete
  81. I have problem having blockquote in my blog after I change a few things here and there in my template, then I gave up. So I tried not to use blockquote in my post. However, i ran into your blog and found this article. How I'm glad to meet this blog... :D
    Great work bro... great work!

    ReplyDelete
  82. A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great. Water Coolers Dealer

    ReplyDelete
  83. Very great post. I just stumbled upon your blog and wished to say that I have really loved browsing your blog posts. Clipping Path

    ReplyDelete
  84. Wao, right on target, this is the thing, i was looking from 3 days and MBT got it right as always,
    THanks for help
    My Site

    ReplyDelete
  85. Beautifull post. Thanks for sharing.....

    ReplyDelete
  86. please give me a code of your blackquote style

    ReplyDelete
  87. Nice Article also have a look over this article How to MultiWindow On Any Android Phone I am sure this will be much helpful for multitasking on any android phone!

    ReplyDelete
  88. At last i found this blockquote for.my blog
    Thank you so much.

    ReplyDelete
  89. I am a Big fan of yours... Thanks Buddy...!
    Visit Me At:
    http://www.webzineworld.net

    ReplyDelete
  90. NICE INFO BRO.......Write A Guest Post and Become Online Representative with us http://FLYERSTECH.COM

    ReplyDelete
  91. Thanks you...it is ver helpul post..

    Free Recharge Code Generator For India 2014 from www.freerechargeforindia.com

    Free Fileice LLC Working Downloader 2014 from
    www.fileicepirator.com

    All Type Of Free Internet Tricks 3G Tricks Pc Tricks Money Earning Tricks on www.oxhacks.blogspot.com

    ReplyDelete
  92. nice post :)

    for latest tips and tricks go Helper Tricks

    ReplyDelete
  93. Wow This is More Than Enough :) Now I am Just Like A Kid In Candy Store, Which One To Grab And Which One To Leave :) Long List of Creative Blockquote Styles..!! Now I can Also Create My Own Style..!! Thanks BudDy..!!
    Recently Posted: Blogger Search Preferences Settings
    7 Things To Do After Publishing New Blog Post

    ReplyDelete
  94. This is a fantastic tutorial!! Helped me a lot with designing my blog :) Thank you so much :)

    ReplyDelete
  95. Hi friends, your blog has lots of information to teach. I have also some tips & tricks about IPHONE, IPAD, ANDROID, BLOGGER, WINDOWS PHONE, WINDOWS 7, 8 & 8.1, WORDPRESS and many more. You can download free SOFTWARE, GAMES and SONGS for your PC and MOBILES.
    visit here: http://entertainment-plateform.blogspot.com

    ReplyDelete
  96. very nice blockquote for blogger, thank you...

    ReplyDelete
  97. Thanks for the beautifull Posts brother, . .

    ReplyDelete
  98. Thanks for sharing such kind of nice and wonderful collection......Nice post Dude keep it up.
    I have appreciate with getting lot of good and reliable and legislative information with your post......
    cute love quotes
    quotes about life
    famous quotes

    ReplyDelete
  99. This post is what I looking for so far...
    Thank you very much.Tiny Serval

    ReplyDelete
  100. Really cool! My favourite is the one with the owl image.
    Best HD Wallpapers for your Desktop

    ReplyDelete
  101. The financial organisation account {is normally|is generally|is typically} often some variety of confirming or even a bank account. merely simply is purchased in to our store at the side of your proof of money flow, your hottest regular bank assertion and you just current verify photograph ID or even passport. the actual amount and car title loans in mobile additionally Size Loan from the bank is a wonderful merchandise and services that would can enable varied men and ladies daily. Anytime emergencies happen, glimpse notice all folks.

    ReplyDelete
  102. Thanks for sharing :)
    http://tsc-pb.blogspot.de/

    ReplyDelete
  103. Hello i have a problem with this code everything works fine but when i try tu put this line ]]> it disappear and only show me this ]]> can anybody tell me why this happens?Thanks.
    Free Games

    ReplyDelete
  104. nice share, This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post. Androoms

    ReplyDelete
  105. Thanks for sharing such kind of nice and wonderful collection......Nice post Dude keep it up.

    I have appreciate with getting lot of good and reliable and legislative information with your post......!

    Samsung Galaxy S5 G900F

    ReplyDelete
  106. Hey check this blogger template created and modified by me...

    http://www.myblogtools.com/2014/08/b-press-blogger-templates-free-download.html

    ReplyDelete