Amazing Examples To Customize Blockquote Style In Blogger/BlogSpot

<p>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</p><p> </p><p><a href="http://lh3.ggpht.com/-EQk-EPwnAgg/UfYxlwmtCyI/AAAAAAAADcg/EgqNDFqbLZY/s1600-h/image%25255B2%25255D.png"><img alt="Amazing Examples To Customize Blockquote Style In Blogger/BlogSpot" height="190" src="http://lh3.ggpht.com/-j-y2bbCNZXA/UfYxnM2w8uI/AAAAAAAADco/xKZ5FG64oR0/image_thumb.png?imgmax=800" style="margin-top: 70px; margin-right: auto; margin-left: auto; float: none; display: block;" title="Amazing Examples To Customize Blockquote Style In Blogger/BlogSpot" width="253"></a></p><p> </p><p><strong>Step 1.</strong> Go to <strong>Blogger Dashboard</strong> > <strong>Template</strong> ><strong> Edit HTML</strong></p><p> </p><p><a href="http://lh4.ggpht.com/-NMJ8Ncw1r5Y/UfYxn6f2azI/AAAAAAAADcw/zvXz2F9Wqak/s1600-h/blogger%25255B2%25255D.png"><img alt="amazing-examples-to-customize" height="174" src="http://lh5.ggpht.com/-KwmsSk867x8/UfYxowXXQLI/AAAAAAAADc4/qKVzC-KwYhg/blogger_thumb.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="amazing-examples-to-customize" width="336"></a></p><p> </p><p><strong>Step 2.</strong> Search this code ( CTRL + F )</p><p> </p><blockquote><p>]]></b:skin></p></blockquote><p> </p><p><strong>Step 3.</strong> Just above it, paste the following code</p><p> </p><blockquote style="height: 400px; overflow: scroll;"><p>.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgis253WLV-fDHkbDNMBKYTvEkWmzSV_iQ-aBjuDoVDkhxl2VuSsU1W7kszkuOLVMHGOtnF-7eySfdJyBWuhN_vgNEIbavIMNTbeV2srJQydAXbmP5R4FR2HXaKQW2-mcf53EnqkuvpkZI5/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinRp9N1sShoLhfwG5Kri3geZBidYLESZzzThm7rxuXRetPJqlrrzyexvhlSnm6hkRBhjJK-omRNOLI334qCBxsStXYeFhhngiZ3pryQlnWBRIbcTdX7NyrLZ4kLu8hPlDxa7eKaPe5MSam/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQFhmH4qgvRybUEdhKfceaht40VlVYLTiX3gYF1vwnApL-s5bRt463XjUqjVumgSzXV5_pZ8tjqgwHJOdh7CYhMnTq9UaRBXUP4aI79TMeOiFgPjIzGrYgTzqw7RkVmkBA2KlKkOuDcnuP/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQFhmH4qgvRybUEdhKfceaht40VlVYLTiX3gYF1vwnApL-s5bRt463XjUqjVumgSzXV5_pZ8tjqgwHJOdh7CYhMnTq9UaRBXUP4aI79TMeOiFgPjIzGrYgTzqw7RkVmkBA2KlKkOuDcnuP/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2WtIHdqNcWbdd7N9sVXLi2n9bVEACjtdnSDWOXU6hv6D1h32q5zkW5Nv0nr9-g7DJ0yg43HncEVV1bEHkDiE127uY5OK3-t_bX_23t-415MMdUgT-WF4P7UMezXA5uh3bznfxAS8AmZY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7GFx_C3ePENowAvNpQtcXUG7ZpW0x2BfjZ8_LNOnQNYrMntQnfGffkYeSCxXkXycCqEBaT-tK5v8pJYpjdwslABioEU9mvHWje4ID87xGw32mX2KhC4zpuuyHDfAlIU0jGcAXLrX9j9g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-7GFx_C3ePENowAvNpQtcXUG7ZpW0x2BfjZ8_LNOnQNYrMntQnfGffkYeSCxXkXycCqEBaT-tK5v8pJYpjdwslABioEU9mvHWje4ID87xGw32mX2KhC4zpuuyHDfAlIU0jGcAXLrX9j9g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIid4L-H1YlOAhlCSy7Sg4P51F718NimoADaGnXrrAM4V1r8KjcHX14m4VN1aGyogpCYgCtVhJ2pXle2F8GaHBQsAq_lB5qzeBSWLVhS8eCOg5KG2pkrg4tO5qSCOoS7jrysP4dQk4ERS/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}</p></blockquote><p> </p><p><strong>Step 4.</strong> Now <strong>Save</strong> the Template.</p><p> </p><p>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.</p><p> </p><p>See the Pictures</p><p><a href="http://lh4.ggpht.com/-i10zQM_OlHE/UfYxqEthRoI/AAAAAAAADdA/FWN5aDHVFbA/s1600-h/image%25255B5%25255D.png"><img alt="image" height="227" src="http://lh6.ggpht.com/-nxWCs_k4mLI/UfYxrhvxrFI/AAAAAAAADdI/7VRF84_Ire0/image_thumb%25255B1%25255D.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="image" width="395"></a></p><p> </p><p>Here are the Available Examples</p><p> </p><p><strong>Example 1.</strong></p><p> </p><p><a href="http://lh4.ggpht.com/-m9dOOCg5PGw/UfYxsjlb3mI/AAAAAAAADdQ/s-wuqT-zWqU/s1600-h/image%25255B8%25255D.png"><img alt="image" height="289" src="http://lh4.ggpht.com/-dXz3p71tQO8/UfYxtoi3WrI/AAAAAAAADdY/ejrHqtkyYYY/image_thumb%25255B2%25255D.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="image" width="399"></a></p><p> </p><blockquote><b><font color="#ff0000"><div class="code1"></font> </b>YOUR TEXT HERE <b><font color="#ff0000"></div></font></b></blockquote><p> </p><p><strong>Example 2.</strong></p><p> </p><p><a href="http://lh3.ggpht.com/-6cvSTo-rLV8/UfYxueYTgVI/AAAAAAAADdg/4ILKwtXXGFQ/s1600-h/image%25255B11%25255D.png"><img alt="image" height="339" src="http://lh3.ggpht.com/-9OY-pbvDbgU/UfYxvJ10pOI/AAAAAAAADdo/I3xQ4l_E3_U/image_thumb%25255B3%25255D.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="image" width="495"></a></p><p> </p><blockquote><b><font color="#ff0000"><div class="code2"></font></b> YOUR TEXT HERE <b><font color="#ff0000"></div></font> </b></blockquote><p> </p><p><strong>Example 3.</strong> </p><p> </p><p><a href="http://lh3.ggpht.com/-aoepORZZb2M/UfYxvzcVHGI/AAAAAAAADdw/Y580kHQsruM/s1600-h/image%25255B14%25255D.png"><img alt="image" height="345" src="http://lh5.ggpht.com/-v5Oz5wrDAdY/UfYxwSCRwAI/AAAAAAAADd4/CVGo2RSjXjo/image_thumb%25255B4%25255D.png?imgmax=800" style="margin: 0px; display: inline;" title="image" width="496"></a></p><p> </p><blockquote><b><font color="#ff0000"><div class="code3"></font></b> YOUR TEXT HERE <b><font color="#ff0000"></div></font></b></blockquote><p> </p><p><strong>Example 4.</strong> </p><p> </p><p><a href="http://lh5.ggpht.com/-_Do6wwGnqvs/UfYxxvWUwtI/AAAAAAAADeA/fzKa-YltIek/s1600-h/image%25255B17%25255D.png"><img alt="image" height="342" src="http://lh3.ggpht.com/-fkVtyTK3aHM/UfYxzHHIkJI/AAAAAAAADeI/Fs7Ao5YVrSg/image_thumb%25255B5%25255D.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="image" width="275"></a></p><p> </p><blockquote><b><font color="#ff0000"><div class="code4"></font></b> YOUR TEXT HERE <b><font color="#ff0000"></div></font></b></blockquote><p> </p><p><strong>Example 5.</strong> </p><p> </p><p><a href="http://lh6.ggpht.com/-uLPOsa64bvM/UfYxz00IkJI/AAAAAAAADeQ/qYU4YeS8DiU/s1600-h/image%25255B20%25255D.png"><img alt="image" height="341" src="http://lh5.ggpht.com/-3B-MNW1xSmk/UfYx0l6o7uI/AAAAAAAADeY/OmWLbEiYnx4/image_thumb%25255B6%25255D.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="image" width="620"></a></p><p> </p><blockquote><p><b></b><b><font color="#ff0000"><div class="code-5"></font></b> YOUR TEXT HERE <b><font color="#ff0000"></div></font></b></p></blockquote><p> </p><p><strong>Example 6.</strong> </p><p> </p><p><a href="http://lh6.ggpht.com/-uR8FHBWQEqA/UfYx1x14upI/AAAAAAAADeg/TCkG3untsoo/s1600-h/image%25255B23%25255D.png"><img alt="image" height="286" src="http://lh6.ggpht.com/-oe8DkvBweDc/UfYx3foqqvI/AAAAAAAADeo/DJONCrDeB84/image_thumb%25255B7%25255D.png?imgmax=800" style="margin-right: auto; margin-left: auto; float: none; display: block;" title="image" width="415"></a></p><p> </p><blockquote><b><font color="#ff0000"><div class="code6"></font></b> YOUR TEXT HERE<b><font color="#ff0000"> </div></font></b></blockquote><p> </p><p> </p><p>Enjoy�</p>

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....

Read more »

How To Remove Blogger Threaded Comments

<p>The Blogger Threaded commenting system allows to reader to reply other reader comments on it post. Blogger supports threaded commenting with two methods the first method is original comment and second method is  replies to that comment. If you wish remove threaded comments out of your blogger blog, apply these steps</p> <p> </p> <p><a href="http://lh6.ggpht.com/-adcDFhs23ho/Ue_T1fA17GI/AAAAAAAADTQ/FkCdmxsaix4/s1600-h/image%25255B4%25255D.png"><img alt="How To Remove Blogger Threaded Comments" height="184" src="http://lh3.ggpht.com/-az2_EdHajxo/Ue_T2U1eaRI/AAAAAAAADTY/Jv_U_2aQTjU/image_thumb%25255B6%25255D.png?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto" title="How To Remove Blogger Threaded Comments" width="247"></a></p> <p> </p> <p><strong>Step 1.</strong> Go To <strong>Blogger Dashboard</strong> > <strong>Template </strong>> <strong>Edit HTML</strong></p> <p> </p> <p><a href="http://lh6.ggpht.com/-FAax7OVYymI/Ue_T3JI6DhI/AAAAAAAADTg/z4AG3CdIofY/s1600-h/image%25255B8%25255D.png"><img alt="how-to-remove-blogger-threaded" height="174" src="http://lh3.ggpht.com/-jfV9F0U1Uv4/Ue_T4KT3KzI/AAAAAAAADTo/1_vI3g0-ROs/image_thumb%25255B8%25255D.png?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto" title="how-to-remove-blogger-threaded" width="336"></a></p> <p> </p> <p><strong>Step 2.</strong> Now Search ( CTRL + F ) the following code</p> <p> </p> <blockquote> <p><b:if cond='data:post.showThreadedComments'><br>            <b:include data='post' name='threaded_comments'/><br>          <b:else/><br>            <b:include data='post' name='comments'/><br>          </b:if><br>        </b:if><br>        <b:if cond='data:blog.pageType == &quot;item&quot;'><br>          <b:if cond='data:post.showThreadedComments'><br>            <b:include data='post' name='threaded_comments'/><br>          <b:else/><br>            <b:include data='post' name='comments'/><br>          </b:if><br>        </b:if></p></blockquote> <p> </p> <p><strong>Step 3.</strong> Now remove it (you will discover this code twice and change it out twice) and paste this code instead</p> <p> </p> <blockquote> <p><b:include data='post' name='comments'/><br>          </b:if><br>               <b:if cond='data:blog.pageType == &quot;item&quot;'><br>                     <b:include data='post' name='comments'/><br>        </b:if></p></blockquote> <p>  <p><strong>Step 4.</strong> Save the Template.

How To Remove Blogger Threaded Comments

The Blogger Threaded commenting system allows to reader to reply other reader comments on it post. Blogger supports threaded commenting with...

Read more »

Wrap text around AdSense block in left or right corner

<p>Maybe you have wondered a way to wrap text around an AdSense block. You'll have noticed that a lot of Word press blogs have ad units embedded in top left or right corner of the post content as shown within the image below</p> <p> </p> <p><a href="http://lh4.ggpht.com/-qOlGUNLbM7g/UeZyKcU43uI/AAAAAAAADOA/U3mTv2OYND4/s1600-h/image%25255B4%25255D.png"><img alt="Wrap text around AdSense block in left or right corner" height="245" src="http://lh5.ggpht.com/-aQmLg0JRI4c/UeZyLiZc-fI/AAAAAAAADOI/6l8NywGaF84/image_thumb%25255B5%25255D.png?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto" title="Wrap text around AdSense block in left or right corner" width="328"></a></p> <p> </p> <p>The main advantage of this AdSense ad placement is that it's the very best CTR on most of the blogs. Adding this ad unit is incredibly easy and needs a code snip before and once your regular AdSense ad script.</p> <p><br>If you would like to add a <strong>ad unit in right corner of your post</strong>, then include the below <font color="#ff0000"><strong>red</strong></font> lines in your ad code</p> <p> </p> <blockquote> <p><font color="#ff0000"><div style="float:right;"></font> <p>Your AdSense ad script <p><font color="#ff0000"></div></font></p></blockquote> <p> </p> <p>If you want to place ad left corner change the float tag to ( <font color="#ff0000">left</font> )</p> <p> </p> <blockquote> <p><div style="float:<font color="#ff0000">left</font>;"><br>Your AdSense ad script<br></div></p></blockquote> <p> </p> <p>The most applicable for this ad placement is 250�250 sq. ad unit. Inserting AdSense unit within the middle of the post, could disturb the reading flow, therefore i would suggest to possess ad units at the beginning of the post.</p> <p><br>If you've got any question adding this ad unit in your Blog post, simply leave a comment below.</p>

Wrap text around AdSense block in left or right corner

Maybe you have wondered a way to wrap text around an AdSense block. You'll have noticed that a lot of Word press blogs have ad units emb...

Read more »

Stylish Recent Comments Widget With Avatar For Blogger

<p>This is the tutorial for adding Recent Comment widget with round circle avatars to your blogger or blogspot blogs. This can be an easy method, adding some markup language codes to your Blog layout. You can also change default Avatar Image. This can be a popular widget that will increase your guests comments. This widget looks like below image.</p> <p> </p> <p><a href="http://lh5.ggpht.com/-W7KmZw7xpDM/UeQWSsDibTI/AAAAAAAADMA/X3UDlYjr6Xg/s1600-h/image5.png"><img alt="Stylish Recent Comments Widget With Avatar For Blogger" height="69" src="http://lh5.ggpht.com/-MEMUrc0bZw0/UeQWTmf-k5I/AAAAAAAADMI/0uZ4FhKwxsY/image_thumb8.png?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto" title="Stylish Recent Comments Widget With Avatar For Blogger" width="289"></a></p> <p> </p> <p><strong>How to add recent comments widget with avatars</strong></p> <p> </p> <p><strong>Step 1.</strong> Go to <strong>Blogger Dashboard </strong>>> <strong>Layout</strong> and click on </p> <p><strong>Add a Gadget</strong></p> <p><strong></strong> </p> <p><a href="http://lh5.ggpht.com/-an3QubJGYNQ/UeQWUN9MxEI/AAAAAAAADMQ/VhLpV4c3J1U/s1600-h/image12.png"><img alt="How to add recent comments widget with avatars" height="151" src="http://lh4.ggpht.com/-Nx2ap-bGiYI/UeQWUz3gtXI/AAAAAAAADMY/xUodbaAIlJ4/image_thumb16.png?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto" title="How to add recent comments widget with avatars" width="473"></a></p> <p> </p> <p><strong>Step 2.</strong> Now Click on <strong>HTML/Javascript</strong></p> <p><strong></strong> </p> <p><a href="http://lh6.ggpht.com/-68Ajz3vIy8o/UeQWVoLH79I/AAAAAAAADMg/xp7pQjqjjNI/s1600-h/image18.png"><img alt="recent comments widget with avatars" height="252" src="http://lh6.ggpht.com/-Bzx9BRuE7KY/UeQWWeGMcVI/AAAAAAAADMo/BRT_3KznZaY/image_thumb23.png?imgmax=800" style="display: block; float: none; margin-left: auto; margin-right: auto" title="recent comments widget with avatars" width="295"></a></p> <p> </p> <p><strong>Step 3.</strong> Copy and Paste the below code in empty box</p> <p> </p> <blockquote> <p><style type="text/css"><br>ul.w2b_recent_comments {<br>    list-style: none;<br>    margin: 0;<br>    padding: 0;<br>}</p> <p>.w2b_recent_comments li {<br>    background: none !important;<br>    margin: 0 0 6px !important;<br>    padding: 0 0 6px 0 !important;<br>    display: block;<br>    clear: both;<br>    overflow: hidden;<br>    list-style: none;<br>}</p> <p>.w2b_recent_comments li .avatarImage {<br>    padding: 3px;<br>    background: #fefefe;<br>    -webkit-box-shadow: 0 1px 1px #ccc;<br>    -moz-box-shadow: 0 1px 1px #ccc;<br>    box-shadow: 0 1px 1px #ccc;<br>    float: left;<br>    margin: 0 6px 0 0;<br>    position: relative;<br>    overflow: hidden;<br>}</p> <p>.avatarRound {<br>    -webkit-border-radius: 100px;<br>    -moz-border-radius: 100px;<br>    border-radius: 100px;<br>}</p> <p>.w2b_recent_comments li img {<br>    padding: 0px;<br>    position: relative;<br>    overflow: hidden;<br>    display: block;<br>}</p> <p>.w2b_recent_comments li span {<br>    margin-top: 4px;<br>    color: #666;<br>    display: block;<br>    font-size: 12px;<br>    font-style: italic;<br>    line-height: 1.4;<br>}<br></style><br><script type="text/javascript"><br>//<![CDATA[<br>/**<br>* Recent Comments Widget with Avatar for Blogger<br>* Version    : 1.3<br>* Author     : Harish<br>* Author Url     : <a href="http://mybloggerdesk.blogspot.com/" title="http://mybloggerdesk.blogspot.in/">http://mybloggerdesk.blogspot.com/</a><br>* (c) 2012 allrightsreserved.<br>*<br>*    --==Options==--<br>*         var     numComments     = <font color="#ff0000">5</font>,<br>*             showAvatar     = true,<br>*             avatarSize     = <font color="#ff0000">60</font>,<br>*             roundAvatar    = true,<br>*             showMorelink    = false,<br>*             moreLinktext    = "More &raquo;"<br>*             characters     = 40,<br>*             defaultAvatar     = "<font color="#ff0000">http://www.gravatar.com/avatar/?d=mm</font>",<br>*             hideCredits    = false;<br>* <br>*/</p> <p>eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|w2b_recent_comments|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))</p> <p>//]]><br></script><br><script type="text/javascript" src="http://<font color="#ff0000">your-blog</font>.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=<font color="#ff0000">5</font>"></script></p></blockquote> <p> </p> <p><font color="#ff0000"><strong>Note:</strong></font> Replace <font color="#ff0000">your-blog</font> with the name of your blog</p> <p> </p> <p>Replace <font color="#ff0000"><strong>5</strong></font> value in red to change the number of comments of you want to appear in your blog <font color="#00ff00"><font color="#c0504d">numComments </font> </font>= <font color="#ff0000">5</font> and &<font color="#c0504d">max-results</font>=<font color="#ff0000">5</font></p> <p><font color="#ff0000"></font> </p> <p>To change the <strong>avatar</strong> replacing the following address </p> <p> </p> <p><font color="#ff0000">http://www.gravatar.com/avatar/?d=mm</font></p> <p> </p> <p>To change the avatar size Replace <strong><font color="#ff0000">60</font> </strong>value in red</p> <p> </p> <p>Now <strong>Save</strong> the Template</p>

Stylish Recent Comments Widget With Avatar For Blogger

This is the tutorial for adding Recent Comment widget with round circle avatars to your blogger or blogspot blogs. This can be an easy metho...

Read more »

How to submit your Blogger Sitemap to Google Webmaster

<p><font size="3"><strong>What is sitemap?</strong></font></p> <p><font size="3"></font> </p> <p align="justify"><a href="http://lh3.ggpht.com/-GXZ2T2D4jck/Ua9FrOp317I/AAAAAAAAC7U/M_sen1cdYjA/s1600-h/image%25255B27%25255D.png"><img align="left" alt="Blogger Sitemap" border="0" height="213" src="http://lh6.ggpht.com/-X8ueZg1DplY/Ua9Fr1P3LMI/AAAAAAAAC7c/BDIvFsAOL08/image_thumb%25255B23%25255D.png?imgmax=800" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; float: left; padding-top: 0px; padding-left: 0px; margin: 0px 22px 0px 0px; border-left: 0px; display: inline; padding-right: 0px" title="Blogger Sitemap" width="209"></a><font size="3">Sitemap is a text file it contain list of web pages that exist on your website or blog. Sitemaps helps visitors and search engines (www.google.com) to find your website pages. It helps Google indexing pages on your website and also discoverable by search engines.</font> <p> </p> <p align="justify"><font size="3">If you are a new blogger then you should be aware with the Google Webmaster Tools. This might be a good tool that is provided by Google itself. It assists your blog site becoming listed in Google and improves its crawling rate. You simply have to validate your blog site ownership in Google Webmaster Tools and then submit a simple sitemap. Anytime you upgrade your blog with brand new articles, your sitemap helps to index them easily in search engines.</font> <p align="justify"><font size="3"></font>  <hr> <p align="justify"><font size="3"></font>  <p align="justify"><strong><font size="3">How to </font><font size="3">Submit Blogger Sitemap To Google Webmaster Tools</font></strong> <p align="justify"><font size="3"></font>  <p align="justify"><font size="3">Step 1. Sign in <a href="http://www.google.com/webmasters/" rel="nofollow" target="_blank" title="Google Webmaster Tool">Google Webmaster Tool</a></font> <p align="justify"><font size="3"></font>  <p align="justify"><font size="3">Step 2. Click on your Blog or Website.</font> <p align="justify"><font size="3"></font>  <p align="justify"><font size="3">Step 3. Go to > <strong>Optimization</strong> > <strong>Sitemaps</strong>. In the Right hand click on <strong>Add Sitemap</strong></font> <p align="justify"><strong><font size="3"></font></strong>  <p align="justify"><a href="http://lh4.ggpht.com/-IcKRH1_tG2A/Ua9FshbGY7I/AAAAAAAAC7k/lo2P_rsYKn0/s1600-h/image%25255B19%25255D.png" target="_blank"><img alt="How to submit your Blogger Sitemap" border="0" height="395" src="http://lh5.ggpht.com/-V5XX-3c1yrA/Ua9FtUFgKDI/AAAAAAAAC7s/ITGRRNc4oBM/image_thumb%25255B17%25255D.png?imgmax=800" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" title="How to submit your Blogger Sitemap" width="949"></a> <p> </p> <p><font size="3">Add each of the following codes</font></p> <p> </p><blockquote><p>/atom.xml?redirect=false&start-index=1&max-results=500<br>/atom.xml?redirect=false&start-index=501&max-results=500<br>/atom.xml?redirect=false&start-index=1001&max-results=500</p></blockquote> <p>  <p><font size="3">Step 4. Now you are done.</font>

How to submit your Blogger Sitemap to Google Webmaster

What is sitemap?   Sitemap is a text file it contain list of web pages that exist on your website or blog. Sitemaps helps visitors and sea...

Read more »

How to Add Related Posts Widget to Blogger with Thumbnails

<p><font size="3">Related posts widget is the most popular way to display similar related links below posts area. This is a simple hack to add some CSS and script code to display the related posts with thumbnails. With this hack many readers remain on your website for longer periods of time.</font> <p>  <p><a href="http://lh6.ggpht.com/-K8USkFzSnyw/UaX-8aS3kFI/AAAAAAAACNc/22qiRmujO9w/s1600-h/image22.png"><img alt="Add Related Posts Widget to Blogger with Thumbnails" border="0" height="256" src="http://lh5.ggpht.com/-HJFwn3K1QRE/UaX--G3nUYI/AAAAAAAACNk/ECNdUjHYHCY/image_thumb19.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" title="Add Related Posts Widget to Blogger with Thumbnails" width="592"></a> <p><b></b>  <p><font size="3"><b>Steps:  </b>Add the Related Posts widget to Blogger. </font> <p><font size="3">  </font> <p><font size="3"><strong>Step 1.</strong> Go To Blogger <b>Dashboard </b>><b> Template</b> > <b>Edit HTML</b> </font> <p><strong></strong><font size="3">  </font> <p><font size="3"><strong>Step 2.</strong> Search (CTRL + F) below tag.</font> <p> </p><blockquote><p></head></p></blockquote> <p>  <p><font size="3"><strong>Step 3.</strong> Copy and paste the below code above <b></head></b> tag</font> <p> </p><blockquote><p><!--Related Posts with thumbnails Scripts and Styles Start--><br><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br><style type='text/css'><br>#related-posts {<br>float:center;<br>text-transform:none;<br>height:100%;<br>min-height:100%;<br>padding-top:5px;<br>padding-left:5px;<br>}<br>#related-posts h2{<br>font-size: 18px;<br>letter-spacing: 2px;<br>font-weight: bold;<br>text-transform: none;<br>color: #5D5D5D;<br>font-family: Arial Narrow;<br>margin-bottom: 0.75em;<br>margin-top: 0em;<br>padding-top: 0em;<br>}<br>#related-posts a{<br>border-right: 1px dotted #DDDDDD;<br>color:#5D5D5D;<br>}<br>#related-posts a:hover{<br>color:black;<br>background-color:#EDEDEF;<br>}<br></style><br><script type='text/javascript'><br>var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLnr3hWLBsDsrgZt19sZOS9vIx9fpFSYy5UWi-5OvG8PNaHPFUpJ47TTPAIAXNytZwi7LYSPyB9nO8tRAlP5QykXHIzc77mpGPllX279I3Ou4F1N7WI-kv27F52_sLddZx1EjEVx_jzpFL/s1600/no_image.jpg&quot;;<br><b>var maxresults</b>=<b><font color="#ff0000">5</font></b>;<br>var splittercolor=&quot;#DDDDDD&quot;;<br>var relatedpoststitle=&quot;Related Posts&quot;;<br></script><br><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><br><!-- remove --></b:if><br><!--Related Posts with thumbnails Scripts and Styles End--></p></blockquote> <p> </p> <p><font size="3">More than <strong>5 </strong>posts to change the  (<strong>var maxresults=5</strong>) above code</font></p> <p><font size="3"></font> </p> <p><font size="3"><strong>Step 4.</strong> Now Find the following line.</font></p> <p> </p><blockquote><p><div class='post-footer'></p></blockquote> <p> </p> <p><font size="3"><strong>Step 5.</strong>  Paste the below code above this tag <strong>(<div class='post-footer'>)</strong></font></p> <p><strong></strong> </p><blockquote><p><b:if cond='data:blog.pageType == &quot;item&quot;'><br><div id='related-posts'><br><b:loop values='data:post.labels' var='label'><br><b:if cond='data:label.isLast != &quot;true&quot;'><br></b:if><br><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;<b>max-results=6</b>&quot;' type='text/javascript'/></b:loop><br><script type='text/javascript'><br>removeRelatedDuplicates_thumbs();<br>printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br></script><br></div><div style='clear:both'/><br><!-- remove --></b:if><br><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br><a href='http://mybloggerdesk.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZobq7REeo_tONw27KnOZjJWe3EgDCIUk5fBtbWNmtq1Vxvq9wUNrHLcyCml_plw7Wn_HbTOkGc4ZwT1LZgjFywlr5ooX8YzqV0-NseSw1Y7nBHyCmNK0ds2CD1AYY_-Hy1jy_dqCXUF1/s1600/best+blogger+tips.png'/></a><br></b:if></b:if><br></p></blockquote> <p> </p> <p><font size="3"><strong>Step 6.</strong> Now <strong>Save</strong> the template and see the changes.</font></p>

How to Add Related Posts Widget to Blogger with Thumbnails

Related posts widget is the most popular way to display similar related links below posts area. This is a simple hack to add some CSS and sc...

Read more »

How Add Automatic Read More With Thumbnail To Blogger

Read More feature not present mostly in default blogger template. But simply such of codes users can add read more feature to our blogger template with thumbnail. You need to add some code in blogger template to add the read more feature. This is simple and easy tutorial. First of all do this below steps make sure backup your blogger template first.<br /><br /><br /><img alt="How To Add Read More With Thumbnail To Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGAeau_nGxHVDzJvR3KjEa-bX2ySUf10XUpCyyLbFEAD6TMlx_OT9CzR_Y5dCmWlahyphenhyphenrafBixKbnA167kX4uU3g4eTeqzeawd_ghMZwqKwBeaHw0UuPaSwq5eyaTnJafrwoSwAhyphenhyphenTHXA/s1600/How-Add-Automatic-Read-More-With-Thumbnail-To-Blogger.jpg" title="How To Add Read More With Thumbnail To Blogger" /><br /><br /><h4>Read More Feature add Steps:</h4><br />Step: 1  Go to "<b>Template</b>" --> "<b>Edit HTML</b>" of your blog.<br /><br />Step: 2  Click on "<b>Expand Widget Templates</b>"<br /><br />Step: 3  Find <b></head></b> tag : shortcut key Press <b>Ctrl+F</b><br /><b><br /></b>Step:4  Now add the below code before<b> </head> </b>tag<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbv5y4eGpc-i_xkFAtWtI7sWJSXkPzjSLKQfRRVrdweNK3EYTuxjuu0W2WivnwkqUASIgAKpo4bJBZGQu9Im9Kx8VyXnsihsIYbNOqg_vaBT94F5ztv6VzhpGfkND5Zgv0LZ-uGEUVSs/s1600/readmore-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbv5y4eGpc-i_xkFAtWtI7sWJSXkPzjSLKQfRRVrdweNK3EYTuxjuu0W2WivnwkqUASIgAKpo4bJBZGQu9Im9Kx8VyXnsihsIYbNOqg_vaBT94F5ztv6VzhpGfkND5Zgv0LZ-uGEUVSs/s1600/readmore-1.png" /></a></div><br /><blockquote class="tr_bq"><script type='text/javascript'><br />summary_noimg = <span style="color: red;">250</span>;<br />summary_img = <span style="color: red;">200</span>;<br />img_thumb_height = <span style="color: red;">150</span>;<br />img_thumb_width = <span style="color: red;">150</span>;<br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />function removeHtmlTag(strx,chop){<br /> if(strx.indexOf("<")!=-1)<br /> {<br />  var s = strx.split("<");<br />  for(var i=0;i<s.length;i++){<br />   if(s[i].indexOf(">")!=-1){<br />    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br />   }<br />  }<br />  strx =  s.join("");<br /> }<br /> chop = (chop < strx.length-1) ? chop : strx.length-2;<br /> while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;<br /> strx = strx.substring(0,chop-1);<br /> return strx+'...';<br />}<br />function createSummaryAndThumb(pID){<br /> var div = document.getElementById(pID);<br /> var imgtag = "";<br /> var img = div.getElementsByTagName("img");<br /> var summ = summary_noimg;<br /> if(img.length>=1) {<br />  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';<br />  summ = summary_img;<br /> }<br /> var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br /> div.innerHTML = summary;<br />}<br />//]]><br /></script></blockquote><br /><br />Step: 5  Now find the    <b><data:post.body/>      </b>tag<br /><br />Step: 6 <b>Replace</b> the above <b>tag</b> with below code<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj28kVdxkbr1PaWr_I7rttcAr9fi-4-yiMP0iLuqLLMuPbaH0GCQXzi8rMWUJP68vxfvvHeJKgz-7i6ko30eVZvMHjKeOlJ9IiGYCoTaw6jDkkkkjUdlC9z4oCYzksYOWsi3QgQZ28SEgQ/s1600/Readmore.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj28kVdxkbr1PaWr_I7rttcAr9fi-4-yiMP0iLuqLLMuPbaH0GCQXzi8rMWUJP68vxfvvHeJKgz-7i6ko30eVZvMHjKeOlJ9IiGYCoTaw6jDkkkkjUdlC9z4oCYzksYOWsi3QgQZ28SEgQ/s320/Readmore.png" width="320" /></a></div><br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != "static_page"'><br /><b:if cond='data:blog.pageType != "item"'><br /><div expr:id='"summary" + data:post.id'><data:post.body/></div><br /><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /></b:if><br /></b:if><br /><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br /><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if><br /><b:if cond='data:blog.pageType != "static_page"'><br /><b:if cond='data:blog.pageType != "item"'><br /><div style='float:right;margin-right:10px;margin-top:5px;'><br /><a expr:href='data:post.url'>Read More</a><br /></div><br /></b:if><br /></b:if></blockquote><br /><br />Step: 7  Now <b>save </b>your template and see the Result:<br /><br /><h4>Additional Changes:</h4><br />Below show four additional changes your can change own your need. These lines are a part of first code section.<br /><br />summary_noimg = <span style="color: red;">250</span>;           (numbers of characters to display without image)<br />summary_img = <span style="color: red;">200</span>;               (numbers of characters to display with image)<br />img_thumb_height = <span style="background-color: white;"><span style="color: red;">150</span></span>;         (image thumbnail height)<br />img_thumb_width = <span style="color: red;">150</span>;          (image thumbnail width)<br /><br />Good luck!!

How Add Automatic Read More With Thumbnail To Blogger

Read More feature not present mostly in default blogger template. But simply such of codes users can add read more feature to our blogger te...

Read more »