Customize Quotes in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="post-body entry-content"><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikT_gh3e3B0WlVCf46Pcm1FzXut0pUnDiCvYX2e-Sb8xcTo7Fzqkuxg6gOGVdCs7T7Svn6K9RD_z0jazKfP_kHUXCWowtY_Hz_qesvmi6L2S2bGlHeQVzacIaw-5wJLYMZY784j0KWWIsC/s1600-h/pocetna.gif" onblur="try {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5284864045547468162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikT_gh3e3B0WlVCf46Pcm1FzXut0pUnDiCvYX2e-Sb8xcTo7Fzqkuxg6gOGVdCs7T7Svn6K9RD_z0jazKfP_kHUXCWowtY_Hz_qesvmi6L2S2bGlHeQVzacIaw-5wJLYMZY784j0KWWIsC/s400/pocetna.gif" style="float: right; height: 200px; margin: 0pt 0pt 10px 10px; width: 200px;" /></a>We're going to learn how to customize the quotes in Blogger. By customize, I mean changing the looks of it, giving it some color, borders, background.....changing size of it, font, style...</div><br /><span style="color: purple;">WHAT ARE QUOTES?</span><br />Quotes are used for quoting. Heh. Quoting defines:<br /><br />► repeating or copying the words of another, usually with acknowledgment of the source<br />► citing or referring for illustration or proof<br />► repeating a brief passage or excerpt<br /><br /><span style="color: purple;">DEFAULT QUOTES IN BLOGGER AND HOW TO USE THEM</span><br />Default quotes ain't much of a fun. Really. They are rather dull. And blank.<br />When you're composing the Post, and want to make a quotation, you will:<br /><br />► highlight the part of the text that will be a quote<br />► and click on the <span style="font-style: italic;">quote</span> button in the Blogger toolbar<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXL3odTYKJDBH7vsdKwsNWM2_3Fk58cxymqNbNwrj5n96pzAjPj7fv04qdy0AZHf0KiSyOQmh3G8ujn75WWT0_Gi71fIoUWn7D-VenqWK0DvAO2_dwRKi40ZvjMJu5BW8Dv3TrCpp2cC-/s1600-h/postpost.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5284865665423695394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXL3odTYKJDBH7vsdKwsNWM2_3Fk58cxymqNbNwrj5n96pzAjPj7fv04qdy0AZHf0KiSyOQmh3G8ujn75WWT0_Gi71fIoUWn7D-VenqWK0DvAO2_dwRKi40ZvjMJu5BW8Dv3TrCpp2cC-/s400/postpost.gif" style="display: block; height: 204px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>This will change highlighted part into a quote, with a default design, and that is:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtSzvWlBsh_gc2SBSPosTj7rYIphp_EZtdKj5Vym68E5jjxTwW59pDa1FrnouN3dAnhgiSMg5W5Wb9pj6IWRuyBR4nbWuvBzJsM8Kpsz-_4Bhm92iXsvAQdDVr5kBN-k16yNFBBFgZvrE/s1600-h/primjerdef.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5284866254801592514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtSzvWlBsh_gc2SBSPosTj7rYIphp_EZtdKj5Vym68E5jjxTwW59pDa1FrnouN3dAnhgiSMg5W5Wb9pj6IWRuyBR4nbWuvBzJsM8Kpsz-_4Bhm92iXsvAQdDVr5kBN-k16yNFBBFgZvrE/s400/primjerdef.gif" style="display: block; height: 204px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br /><a name="more"></a>It just added some margins to it....not fun at all. I told you so.<br /><br /><span style="color: #ffcc00;">SO, WHAT CAN WE DO?</span><br />Well, a lot! First, let's see what part of the code (CSS style) we have to play with....<br /><div class="codeview">.post blockquote {<br />margin:1em 20px;<br />}<br />.post blockquote p {<br />margin:.75em 0;<br />}</div>...that's the one! You can find it easily going to LAYOUT ► EDIT HTML ► and scroll until you find it (use CTRL + F to make it easier)...<br />...yours may be a bit different (if you have customized template), but it will be something like that...<br /><br />I'll show you a few examples, and in each one, you will have to <span style="font-weight: bold;">DELETE</span> the code from above, and <span style="font-weight: bold;">REPLACE</span> it with the one from example.<br /><br />◄ <span style="color: purple;"><span style="font-weight: bold;">Borders, font styles and colors</span></span> ►<style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><table border="0" color="white"><tbody><tr><th align="center">Example 1</th><th align="center">Example 2</th><th align="center">Example 3</th><th align="center">Example 4</th></tr><tr><td><a href="http://i39.tinypic.com/2nv9g1f.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i39.tinypic.com/2nv9g1f.jpg" width="100" /></a></td><td><a href="http://i42.tinypic.com/2hf70n5.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i42.tinypic.com/2hf70n5.jpg" width="100" /></a></td><td><a href="http://i40.tinypic.com/icviwn.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i40.tinypic.com/icviwn.jpg" width="100" /></a></td><td><a href="http://i44.tinypic.com/2lax4ya.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i44.tinypic.com/2lax4ya.jpg" width="100" /></a></td></tr></tbody></table><br /></div><div style="text-align: center;">Example <span style="color: #ff99ff; font-size: 180%;">1.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />border-top: 1px solid #FF82AB;<br />border-left: 1px solid #FF82AB;<br />border-right: 2px solid #FF82AB;<br />border-bottom: 2px solid #FF82AB;<br />background: #ffffff;<br />margin: 6px 20px 6px 20px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />font-style:italic;<br />line-height:1.4em;<br />}</div></blockquote><div style="text-align: center;">Example <span style="color: #33ccff; font-size: 180%;">2.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />border:1px dashed #DC143C;<br />background: #EEE0E5;<br />margin: 6px 10px 6px 10px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />font-style:italic;<br />line-height:1.4em;<br />}</div></blockquote><div style="text-align: center;">Example <span style="color: #ffcc00; font-size: 180%;">3.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />color:#EE9A00;<br />border:5px dotted #000000;<br />background: #ffffff;<br />margin: 6px 6px 6px 6px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />line-height:1.4em;<br />}</div></blockquote><div style="text-align: center;">Example <span style="color: #33cc00; font-size: 180%;">4.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />color:#00CED1;<br />border-top: 2px solid #000000;<br />border-left: 2px solid #000000;<br />border-right: 1px solid #000000;<br />border-bottom: 1px solid #000000;<br />background: #ffffff;<br />margin: 6px 0px 6px 0px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />line-height:1.4em;<br />}</div></blockquote><br />...these are just examples, so you can see what variables you can adjust....<br />...change the colors (hex values)...<a href="http://zen-tek.blogspot.ro/2014/01/borders-in-blogger-template.html" target="_blank">change border styles</a>...<br />...font size, font style (<span style="font-style: italic;">italic</span>), font color (<span style="font-style: italic;">color</span>)...<br />...margins (the space between box and the post content)...<br />...padding (space between quote text and the borders)...<br /><br />◄ <span style="color: purple;"><span style="font-weight: bold;">Picture in the quotes</span></span> ►<style type="text/css">.nobrtable br { display: none }</style><br /><div class="nobrtable"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><table border="0"><tbody><tr><th align="center">Example 1</th><th align="center">Example 2</th><th align="center">Example 3</th><th align="center">Example 4</th></tr><tr><td><a href="http://i40.tinypic.com/34rzpy1.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i40.tinypic.com/34rzpy1.jpg" width="100" /></a></td><td><a href="http://i39.tinypic.com/2jcc32g.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i39.tinypic.com/2jcc32g.jpg" width="100" /></a></td><td><a href="http://i39.tinypic.com/2z9k0wi.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i39.tinypic.com/2z9k0wi.jpg" width="100" /></a></td><td><a href="http://i40.tinypic.com/2d92ovd.jpg" target="_blank" title="View"><br /><img alt="background" height="100" src="http://i40.tinypic.com/2d92ovd.jpg" width="100" /></a></td></tr></tbody></table><br /></div><div style="text-align: center;">Example <span style="color: #ff99ff; font-size: 180%;">1.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />color:#666666;<br />background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);<br />background-position:top left;<br />background-repeat:no-repeat;<br />margin: 6px 6px 6px 6px;<br />padding: 8px 0px 8px 74px;<br />font-size: 14px;<br />font-style:italic;<br />line-height:1.4em;<br />}</div></blockquote><div style="text-align: center;">Example <span style="color: #ffcc00; font-size: 180%;">2.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />border-top: 1px solid #FFF;<br />border-left: 1px solid #FFF;<br />border-right: 1px solid #666666;<br />border-bottom: 1px solid #666666;<br />background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);<br />background-position:top left;<br />background-repeat:repeat-y;<br />margin: 0 20px;<br />padding: 10px 20px 10px 45px;<br />font-size: 0.9em;<br />}</div></blockquote><div style="text-align: center;">Example <span style="color: #33ccff; font-size: 180%;">3.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);<br />background-repeat:no-repeat;<br />background-position:top center;<br />margin: 6px 6px 6px 6px;<br />padding: 8px 36px 8px 40px;<br />font-size: 14px;<br />line-height:1.4em;<br />}</div></blockquote><div style="text-align: center;">Example <span style="color: #ffcccc; font-size: 180%;">4.</span></div><blockquote class="tr_bq"><div class="codeview">.post blockquote {<br />color:#000000;<br />background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);<br />margin: 6px 6px 6px 6px;<br />padding: 8px 6px 8px 6px;<br />font-size: 14px;<br />line-height:1.4em;<br />}</div></blockquote>...remember to change the <span style="color: #cc66cc;">URL address of the pic</span> with your own...<br />...you have lots of options here....be creative...change....<br />...trial and error...<br /><br />If you have some doubts/questions, just ask....<br /><br />Smile!<br /><br /><br /></div></div>

Blogger Customize Customize Quotes Quotes Quotes in Blogger Customize Quotes in Blogger

We're going to learn how to customize the quotes in Blogger. By customize, I mean changing the looks of it, giving it some color, bord...

Read more »