Importance Of Blockquote And How To Customize Blockquote In Blogger ?

Importance Of Blockquote

Blockquote is to show special message or idea by author. It gives beautiful look to blogger post. Blockquote catch the eyes of the readers. In This blog blockquote to show special Tips and Tricks.

Today, in this tutorial i'll show you how to customize to match your blog layout and give it beautiful using some Html and CSS.

In this tutorail i will show you to customize blockquote in Blogger blog using some simple Html and CSS.

So lets get stared.

How To Customize Blockquote In Blogger Blog

1. Go to blogger blog > Template > Edit Html

2. Press ctrl+F Button and Search

]]></b:skin>

3. Just above it, paste the following code

/*tipsmeloud.blogspot.com blockquote*/ .code1{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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OSXl5NLh7yW5g0QJ4OhW01Kgbk9ehCasiCeTM3_M9vQ2c6n133tPBwcdLXdbX0RW0j9wclmkXVzSPpeUV4YaGHylxMblpuuEmrfIfx70dEbKyELoBbNIPiSvZp46WBzMgdw2YoomMK5o/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)}.code1:hover{overflow:auto;width:400px;height:auto;background:#f5f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OSXl5NLh7yW5g0QJ4OhW01Kgbk9ehCasiCeTM3_M9vQ2c6n133tPBwcdLXdbX0RW0j9wclmkXVzSPpeUV4YaGHylxMblpuuEmrfIfx70dEbKyELoBbNIPiSvZp46WBzMgdw2YoomMK5o/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)} .code2{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)}.code2: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)}

4. Now save the template

Tip :- When you create a new post, switch to Edit HTML tab, and choose from following two style you like and add according red code to the beginning and end of the text you want to display the style in your favorite quote.

Here are the Examples

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

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

About Nabeel Shoro

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.