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.

Need Quick Help within 24 Hours? ASK NOW

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 »

61 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. HI Mohammad, Awesome Blockquote And added to my blog

      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 like that it walks you through the customization process of the designs! Great job!

    ReplyDelete
  16. 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
  17. 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
  18. 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
  19. 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
  20. thank you!
    it's working and it's helped a lot..

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

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

    ReplyDelete
  23. 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
  24. Thanks Bro
    Using "Blockquotes With Classic Left Borders" XD

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

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

    ReplyDelete
  27. 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
  28. Just superb ! The best Blockquotes i have ever seen on the net!
    Thanks a lot for sharing this ! God bless you !

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

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

    ReplyDelete
  31. 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
  32. I'll try this trick bro.
    Thanks.

    ReplyDelete
  33. 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
  34. YAH!!!! I was looking for this.. thanks

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

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

    ReplyDelete
  37. 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
  38. Spent some many hours but didn't work for me! :/

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

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

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

    ReplyDelete
  42. 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
  43. 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
  44. i want same blockquote like yours. please tell????

    ReplyDelete
  45. 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
  46. 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
  47. please give me a code of your blackquote style

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

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

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

    ReplyDelete
  51. Kia ap mujy mybloggertrick wala blackquote send kr skty hien us ki CSS coding

    ReplyDelete