How to Customize Blockquote Style in Blogger

This is post cum tutorial of customizing blockquote for blogger and blogspot domain, it also work for custom blogger domains. This short tutorial is unique and complete guide for blockquote customizing. Follow below steps to customise/customize. (Back up your Template)

How to Customize Blockquote Styles

Follow these below simple steps to add custom blockquotes styles to enhance beauty of webpages.
Step 1
Go to Blogger Dashboard > Template > Edit HTML.
Step 2
Search this code ( CTRL + F ).
]]></b:skin>
Step 3
Copy the below code one by one and paste the copied codes just above to the ]]></b:skin>.
Design 1 Teaching Lady
 .bq1{overflow:auto;width:250px;height:260px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#fff;margin:15px 35px 15px 15px;padding:15px 5px 10px 165px;clear:both;list-style-type:none;background:url(http://1.bp.blogspot.com/-0hmGWoHIzzw/T33HKCEE6UI/AAAAAAAABoY/q-hkpq3JFAU/s1600/teacher.png) repeat-y top left;border:1px solid #fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px}.bq1:hover{background:url(http://2.bp.blogspot.com/-lvYfexW_FJY/T33HMP7cWzI/AAAAAAAABoc/X-S1XOKu9aE/s1600/hover+html+teacher.png) repeat-y top left;color:#f1f1f1;border:1px solid #fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}.
Design 2 Notebook Page
bq2{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 60px;clear:both;color:#000;list-style-type:none;background:#f5f3f3 url(http://3.bp.blogspot.com/-gNZ5r7KaLIE/T33PEnGXSJI/AAAAAAAABoo/cDcreY3-mPc/s1600/notepad1.gif) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}.bq2:hover{overflow:auto;width:400px;height:auto;background:#f5f3f3 url(http://3.bp.blogspot.com/-gNZ5r7KaLIE/T33PEnGXSJI/AAAAAAAABoo/cDcreY3-mPc/s1600/notepad1.gif) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.1);-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}
Design 3 Revert Hover
.bq3{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;color:0:list-style-type :none;background:#fff;border:1px solid #eee;border-left:20px solid #000;border-right:20px solid #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}.bq3:hover{background:#000;color:#fff;border:1px solid #eee;border-left:20px solid #fff;border-right:20px solid #fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}
Design 4 Changing old paper
.bq4{color:#000;font-weight:bold;overflow:hidden;width:200px;height:300px;background-image:url(http://1.bp.blogspot.com/-2jbnIgBmtXE/T33WAang2BI/AAAAAAAABow/IuAbu9nzWVw/s1600/papyrus.jpg);margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;border:1px solid #000;border-right:10px solid #cfa372;list-style-type:none;transition:width 2s;text-position:fixed;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;box-shadow:10px 10px 5px #888}.bq4:hover{width:300px;color:#000;box-shadow:0 0 10px rgba(0,0,0,.3)}
Design 5 Command Prompt
.bq5{overflow:auto;width:570px;height:310px;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 15px 15px 15px;padding:20px 10px 0 35px;clear:both;color:#fff;list-style-type:none;background:#f7f7f7 url(http://2.bp.blogspot.com/-taPvvl_ckpM/T33X_sggZPI/AAAAAAAABo4/yKxXn49IF7s/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;border:1px solid #eee;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.bq5:hover{background:#fff url(http://2.bp.blogspot.com/-taPvvl_ckpM/T33X_sggZPI/AAAAAAAABo4/yKxXn49IF7s/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;border:1px solid #eee;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}.code-5{overflow:auto;width:542px;height:230px;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 15px 15px 15px;padding:20px 10px 0 0;clear:both;color:#96948a;list-style-type:none;background:#000;border:1px solid #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
Design 6 Simple Script Paper
.bq6{overflow:auto;width:360px;height:250px;font-family:"Arial";color:#47262e;margin:15px 35px 15px 15px;padding:25px 0 0 50px;clear:both;list-style-type:none;background:url(http://3.bp.blogspot.com/-LBm9I9TMM6g/T33wA7ME3TI/AAAAAAAABpI/sTgD4XwuQcA/s1600/blockquote.gif);background-repeat:no-repeat;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out}

Step 4
Now Format and Save the Template.

Placing  Customize blockquotes in your Post.

Here we created Six Custom blockquotes for you, you may add more designs of your own here.
Now according to your needs change tr-bq to bq1, bq2 or whichever you need.

  • <blockquote class="bq1"> YOUR TEXT HERE </blockquote>
  • <blockquote class="bq2"> YOUR TEXT HERE </blockquote>
  • <blockquote class="bq3"> YOUR TEXT HERE </blockquote>
  • <blockquote class="bq4"> YOUR TEXT HERE </blockquote>
  • <blockquote class="bq5"> YOUR TEXT HERE </blockquote>
  • <blockquote class="bq6"> YOUR TEXT HERE </blockquote>
Blogging Tips : Use kbd tag for keyboard button and blockquote/code for CSS, Javascript or any code.

Follow me on

google+ facebook twitter

Share Your Mind and Knowledge to Help Others