Amazing Examples To Customize Blockquote Style In Blogger/BlogSpot

In this tutorial I will show how to change Blockquote with many different styles using some awesome designs , backgrounds and CSS 3 effects. Just follow these steps

 

Amazing Examples To Customize Blockquote Style In Blogger/BlogSpot

 

Step 1. Go to Blogger Dashboard > Template > Edit HTML

 

amazing-examples-to-customize

 

Step 2. Search this code ( CTRL + F )

 

]]></b:skin>

 

Step 3. Just above it, paste the following code

 

.code1{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}.code1: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)}.code2{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)}.code2: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)}.code3{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)}.code3: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)}.code4{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}.code4:hover{width:300px;color:#000;box-shadow:0 0 10px rgba(0,0,0,.3)}.code5{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}.code5: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}.code6{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 Save the Template.

 

Now every time you create a new post, switch to Edit HTML tab, and choose the style you like and add the red code to the beginning and end of the text you want to display in quote.

 

See the Pictures

image

 

Here are the Available Examples

 

Example 1.

 

image

 

<div class="code1"> YOUR TEXT HERE </div>

 

Example 2.

 

image

 

<div class="code2"> YOUR TEXT HERE </div>

 

Example 3.

 

image

 

<div class="code3"> YOUR TEXT HERE </div>

 

Example 4.

 

image

 

<div class="code4"> YOUR TEXT HERE </div>

 

Example 5.

 

image

 

<div class="code-5"> YOUR TEXT HERE </div>

 

Example 6.

 

image

 

<div class="code6"> YOUR TEXT HERE </div>

 

 

Enjoy…

comments powered by Disqus