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…

Read More

Google Translate Flags widget for Blogger

The Google Translate Widget allow users to translate your site or blog in many languages like English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese etc. This widget also auto detect your blog language and translate to the readers chosen language.

 

Google Translate Flags widget for Blogger

 

How To Add The Google Translate Widget To Blogger

 

Step 1. Go to Blogger Dashboard > layout > and Add a gadget

 

google-translate-widget-with-flags

 

Step 2. From the pop-up window choose HTML/JavaScript

 

google translate

 

Step 3. Paste the code below in Empty box

 

<script type="text/javascript">

function showHide(n){document.getElementById(n)&&(document.getElementById(n+"-show").style.display!="none"?(document.getElementById(n+"-show").style.display="none",document.getElementById(n).style.display="block"):(document.getElementById(n+"-show").style.display="inline",document.getElementById(n).style.display="none"))}

</script><style>

.google_translate img{margin:10px 20px 0 20px;height:24px;width:24px}.google_translate:hover img{filter:alpha(opacity=.3);-moz-opacity:.3;opacity:.3;border:0}.more{display:none;a.showLink,a.hideLink {text-decoration:none;color:#0880C4;padding-left:18px;background:transparent('down.gif')no-repeat left;}a.hideLink {background:transparent url('up.gif') no-repeat left;color:#0880C4;}a.showLink:hover,a.hideLink:hover {color:#0880C4;}</style><div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://4.bp.blogspot.com/-QPXkbtHOD4c/T5xODxO-FVI/AAAAAAAAARQ/1jye5k8T0DI/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink"

onclick="showHide('example');return false;">More</a>

<div id="example" class="more">

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://3.bp.blogspot.com/-0QwKU5U8K2k/T5xN5VZK2tI/AAAAAAAAARI/SvXac8-EQEg/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://4.bp.blogspot.com/-vJtqiSEPK0A/T5xNup0Q3vI/AAAAAAAAARA/SyuRn3jZjgk/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://2.bp.blogspot.com/-Em4KegbEBmk/T5xNjs5f_NI/AAAAAAAAAQ4/yLtUCDesqGs/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://2.bp.blogspot.com/-IVx5Fq_02dE/T5xNZIbiHzI/AAAAAAAAAQw/dvI6mI6z3Dw/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://2.bp.blogspot.com/-O932f9wBvk4/T5xNO_hx5uI/AAAAAAAAAQo/n8-iF7S_R8A/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://3.bp.blogspot.com/-es7IkxUUK_4/T5xNGn7TXYI/AAAAAAAAAQg/jAp6OM-Zj9Q/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<p><a href="#" id="example-hide" class="hideLink"

onclick="showHide('example');return false;">Hide / </a><a href="http://mybloggerdesk.blogspot.com"><font size="1px">Get this widget</font></a></p>

</div></div>

 

Step 4. Now Save and enjoy.

Read More

How to remove Blogger Picture/Image Shadow and Border

The default blogger templates show image border and shadow by default so if you want to remove this image border or shadow follow these steps:

 

how to remove borders or shadows around images in blogger blogspot

 

Step 1. Go to Blogger Dashboard  > Template > Customize > Advanced > Add CSS - paste the following code

 

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

 

Now Apply to blog, its remove image border or shadow

 

Alternate

 

Step 2. If the above method doesn't work use this second method

 

1. Go to Blogger Dashboard > Template > Edit HTML

 

how-to-remove-blogger-pictureimage

 

2. Search (CTRL + F) the following code

 

border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

 

3. Delete it and Save the template.

Read More

How to Add Simple Recent Post Widget to Blog/BlogSpot

This is a simple recent post widget for blogger which is used to display post title with snippets and it is easy to customize for applying different styles using some css codes for example like change the link or background color etc.

 

What you can do with this widget

 

  1. Display post title
  2. Change no of posts
  3. Change the no of characters, snippet etc.
  4. Showing post date

Its look like this

 

add recent posts widget for blogger blogspot

 

How to add Recent Posts Widget to Blogger

 

Step 1. Log Blogger Dashboard > Layout and click on Add a Gadget link

 

blogger-layout-add a gadget-how-to

 

Step 2. Pop-up window choose HTML/JavaScript

 

blogger-widgets-gadgets-tutorials

 

Step 3. Select and copy the below code and paste in HTML/JavaScript box

 

Option 1: Recent posts widget with snippets

 

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://mybloggerdesk.blogspot.com/2013/07/recent-comments-widget-for-blogger.html" target="_blank" title="Grab this Recent comments Widget">Recent Posts Widget</a> by <a href="http://mybloggerdesk.blogspot.com" title="Recent Posts Widget">Mybloggerdesk</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

 

Option 2: Recent Posts With Post Titles Only

 

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://mybloggerdesk.blogspot.com/2013/07/recent-comments-widget-for-blogger.html" title="Grab this Recent comments Widget" target="_blank">Recent Posts Widget</a> by <a href="http://mybloggerdesk.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

 

Optimize

 

  • Change 5 option 1 and, 10 option 2 which is used to display number of posts.
  • Change false to true if you want to display posts date
  • Change 100 option 1, if you want to display more characters
  • To change font size value in blue color
  • Replace the your-blog text with the name of your blog

Save and you are done

Read More

How to put AdSense ads on Blogger/BlogSpot

Google AdSense: It is used to earn money from your website or blog. This is very popular service to monetize your blog or website content. its also display targeted Google ads on your blog and they can generate revenue pay per click or impression basis. If you want to earn money on your blog , you should first Sign up Google AdSense program.

 

put adsense ads on blogger

 

Note: AdSense allow only 3 ad units, 3 link units and 2 search boxes

 

In this tutorial I will show how to add AdSense three ways

 

1. AdSense Gadget

 

This is the first method to add AdSense unit as a widget in any outside the blog post area. You can define position it by simply drag the page elements. Steps to add gadget

 

Step 1.  Go to Blogger Dashboard >> layout >> click on the "Add a Gadget" link

 

how to add adsense to blogger blogspot

 

Step 2. Pop-up window, select AdSense Gadget

Step 3. Configure ad format and Save, you are done.

 

2. Inline Ads

 

This Method display ad unit below each blog post

 

Step 1. Go to layout > Page Elements and click the Edit link in Blog Posts gadget.

 

how to add Adsense between blogger posts

 

Step 2. Check the (Show Ads Between Posts) box

 

how to put adsense ads between posts blogspot blogger

 

Step 3. Configure ad and Save.

 

3. AdSense code

 

The benefits of this method are;

 

  • You can place AdSense ad any where in your blog
  • Different ad formats etc..

To create an ad unit;

 

1. Go to Google AdSense website.

2. Click on ads tab and go to Ad units and then press the "New ad unit" button.

 

how to put adsense ad units in blogger blogspot

 

3. Choose your ad type, color, channel etc.

4. After finish, click on save and get code, ad copy the code.

 

To add an ad unit to your blog, with the following options

 

  • Paste the code in a HTML/JavaScript gadget
  • Paste the code direct in your template

Done..

Read More