Abc-Filefactory Portal | Entertainment is Guaranteed: Blogger Widgets And Helpness Tools

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
<br /><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLM7YsSdbetzGVsfvlFk3kTie9AlW5lxes5_X7aqAeMj9twzQz2sPS91lxMmQeY-BxpgxNeGqFafPXpSFrfUN-9WTNST2IYcTnhBDLqf8klmF9VMLoedZ2L8_FA6hJWnrohQ4DbbvfBto/s1600/FileZooby+Blogger+Lables.PNG" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLM7YsSdbetzGVsfvlFk3kTie9AlW5lxes5_X7aqAeMj9twzQz2sPS91lxMmQeY-BxpgxNeGqFafPXpSFrfUN-9WTNST2IYcTnhBDLqf8klmF9VMLoedZ2L8_FA6hJWnrohQ4DbbvfBto/s320/FileZooby+Blogger+Lables.PNG" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">We have recently Added </span><span style="font-family: Verdana, sans-serif;"> very
 useful SEO tricks for your blog's knowledge so that you make a perfect 
and SEO friendly blog in this age. So in this post i am going to show 
you that how to optimize Blog </span><span style="font-family: Verdana, sans-serif;">labels</span><span style="font-family: Verdana, sans-serif;"> because </span><span style="font-family: Verdana, sans-serif;">labels</span><span style="font-family: Verdana, sans-serif;"> are
 an important part of blogs every web owner use them for better 
navigation and with the help of labels every user and visitor easily 
find their categories where he/she want to go, but </span><span style="font-family: Verdana, sans-serif;">labels</span><span style="font-family: Verdana, sans-serif;"> are
 create much problems for search engine crawlers for prevent from this 
problem we have to fix/resolve this problem. Therefore i will tell you a
 method for optimizing blog </span><span style="font-family: Verdana, sans-serif;">labels</span><span style="font-family: Verdana, sans-serif;">  follow my this easy, simple and clean step;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>1.</b> Go to Blogger Dashboard> Template> Edit HTML</span><br />
<span style="font-family: Verdana, sans-serif;"><b>2.</b> Now find the below code              (<b><span style="color: blue;">Tip:</span></b> <b>Ctrl+F</b> )</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><a expr:href='data:label.url'</span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b>3.</b> Now replace the above code with the set of below code</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><a expr:href='data:label.url' rel='tag'</span></blockquote>
<br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;"><b>Note:</b></span> In default blogger template this issue already resolved, if you will not find  this code <span style="color: red;"><a expr:href='data:label.url'</span> then do not follow this method.</span></div>

Optimize your Blog Labels

We have recently Added very useful SEO tricks for your blog's knowledge so that you make a perfect and SEO friendly blog in thi...

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title" itemprop="name headline">
<br />
</h1>
<div class="post-body entry-content" id="post-body-1996784239554505392" itemprop="description articleBody">
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOSfpd3RENRjL8pI_ZYRUIJWPs75Wn7gWL2-WocHrggLXZkVSEa9JPwU91gP8xiJFnW6GGPIaKtzOi9GyJuJYmYdOoN0-2IE3Ru-B-PncI_dS1uCgcJMKnE2JUrL23_GuXL_YHlEvA2UHH/s1600/robot1.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOSfpd3RENRjL8pI_ZYRUIJWPs75Wn7gWL2-WocHrggLXZkVSEa9JPwU91gP8xiJFnW6GGPIaKtzOi9GyJuJYmYdOoN0-2IE3Ru-B-PncI_dS1uCgcJMKnE2JUrL23_GuXL_YHlEvA2UHH/s320/robot1.png" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">You know that it is a 
SEO training Section and in this post i tell you about Custom Robots. 
Robots.txt system is a best way to tell search engines whether they are 
allow to index a page in the search results or not. The bots are 
automated and before they access to your site, they check the robots.txt
 file to make sure whether they are allowed to crawl this page or not. 
Sometime, people do not want to stop searching engine from crawling 
their whole website. Therefore, today i will tell you a perfect method 
about Robots.txt file and Robot Header tags that how to create and add 
these features your blog. You have to only follow my instructions to 
make your blog perfect to Search Engines.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<h4 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">1. What is Custom robots.txt file and how to create and add it to your Blog?</span></h4>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Custom robots.txt</b>:
 This option provides you the ability to edit your whole robots.txt 
file. You can just type your content whether you want the content to be 
crawled by spiders or not. However, You can always undo your actions and
 can always revert back to normal. </span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>How to Add custom robots.txt to Blogger</b></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">i). Go to Blogger Dashboard> Settings> <b>Search Preferences</b></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">ii)</span><span style="font-family: Verdana, sans-serif;">. Now Click on Edit "<b>Custom robots.txt</b>"</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">iii)</span><span style="font-family: Verdana, sans-serif;">. Click on "<b>Yes</b>" to Edit this function</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">iv)</span><span style="font-family: Verdana, sans-serif;">. Now Add the below set of Code</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">User-agent: Mediapartners-Google</span><br />
<span style="font-family: Verdana, sans-serif;">Disallow:</span><br />
<span style="font-family: Verdana, sans-serif;">User-agent: *</span><br />
<span style="font-family: Verdana, sans-serif;">Disallow: /search</span><br />
<span style="font-family: Verdana, sans-serif;">Allow: /</span><br />
<span style="font-family: Verdana, sans-serif;">Sitemap: <span style="color: blue;">http://filezooby.blogspot.com</span>/feeds/posts/default?orderby=UPDATED</span></blockquote>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div>
<span style="font-family: Verdana, sans-serif;"><b><span style="font-weight: normal;">Now replace </span></b></span><span style="color: blue; font-family: Verdana, sans-serif;">http://filezooby.blogspot.com</span><span style="font-family: Verdana, sans-serif;"><b><span style="font-weight: normal;"> with your blog address and save it, you done it.</span></b></span></div>
<span style="font-family: Verdana, sans-serif;"><b>
Note:</b> Be careful about editing robots.txt. Any mistake can bring penalty for your blog indexing and crawling.<br />
</span><br />
<h4 style="text-align: left;">
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">2. What is Custom Robots Header tags and how to create and add it to your Blog?</span></span></h4>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b>Custom robots header tags</b>:
 This option is a bit completed. It does not provide you the ability to 
write your codes instead it provides few options with the check boxes. 
So, if have no idea about head tags then stay away from it.</span></span></div>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<span style="font-family: Verdana, sans-serif;">
</span>
<div>
<div style="font-family: 'Times New Roman';">
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b>How to Add custom Robots Header tags to Blogger</b></span></span></div>
<div style="font-family: 'Times New Roman';">
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">i). Go to Blogger Dashboard> Settings> <b>Search Preferences</b></span></span></div>
</div>
<span style="font-family: Verdana, sans-serif;">
<div>
<span style="font-family: Verdana, sans-serif;">ii). Now Click on Edit "</span><b>Custom robots header tags</b>"</div>
<div>
iii). And follow the below image and put the mark like the blow image</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhV544GzK2tnGzkbAHL8BG3sQDZTIOoLi_6QAeHg2kj5cIF-wfiCqbrAzKscxNB7UKl50eYCkSQDNWb2L8QQgKbWfA5AAEAcYRoeBTg84_iTj664bu0rm-KJTFOVLo_I1PQRIhnvMn7NgI/s1600/Blogger-seo-setting.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="407" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhV544GzK2tnGzkbAHL8BG3sQDZTIOoLi_6QAeHg2kj5cIF-wfiCqbrAzKscxNB7UKl50eYCkSQDNWb2L8QQgKbWfA5AAEAcYRoeBTg84_iTj664bu0rm-KJTFOVLo_I1PQRIhnvMn7NgI/s640/Blogger-seo-setting.jpg" width="620" /></a></div>
</span></div>
</div>
</div>
</div>

add Custom Robots .txt file and header tags to Blogger

You know that it is a SEO training Section and in this post i tell you about Custom Robots. Robots.txt system is a best way to tel...

novels

</div>
<div class="adsense">

<ins style="background-color: transparent; border: none; display: inline-table; height: 60px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><ins id="aswift_0_anchor" style="background-color: transparent; border: none; display: block; height: 60px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"></ins></ins>
</div>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>Adding
 Facebook like button on each post of blogger is slightly different than
 adding like button on websites. Let's see how can we add like button to
 each post. This is most reliable technique ever i have used.</b></span><br />
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"></span><span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>goto <a href="http://developers.facebook.com/docs/reference/plugins/like">Facebook developers</a> paste
 your url select your styles and generate the piece of code. Make sure 
that you don't include http:// in url as you can see in snap</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfbblPm9IHtEmaAMo9Icaj9VKCIcvm1t-NOMdhHHoY4WC9mJsd21qbGMz4ngSTjfXkuG7Vroh5c7LZHa8C9iQfosPkPWRL5zWWXhqYSenqWXE5H2oLgX7VZ0UoKLcPfMVCajo5L12Kf-E/s1600/z11111111111111111111111.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfbblPm9IHtEmaAMo9Icaj9VKCIcvm1t-NOMdhHHoY4WC9mJsd21qbGMz4ngSTjfXkuG7Vroh5c7LZHa8C9iQfosPkPWRL5zWWXhqYSenqWXE5H2oLgX7VZ0UoKLcPfMVCajo5L12Kf-E/s1600/z11111111111111111111111.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>now goto your blog and edit it's template in HTML i.e  Design >>> Edit HTML.</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrdGGZqwBUf981D-GI7xpJIVPsFIECKif89C5RT1qQtaOT1MgnpcRhnfSVFE3r2xDqZHF5ZsdIqWnrjQt5WOBZ5rl-K2wGobHzIgf0rVaBq-FDhYk4fvGxUXSTjkOcOJ9EBaPPKLAmWgOj/s1600/design1111111111111111.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrdGGZqwBUf981D-GI7xpJIVPsFIECKif89C5RT1qQtaOT1MgnpcRhnfSVFE3r2xDqZHF5ZsdIqWnrjQt5WOBZ5rl-K2wGobHzIgf0rVaBq-FDhYk4fvGxUXSTjkOcOJ9EBaPPKLAmWgOj/s1600/design1111111111111111.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>make sure you check expand widget templates.</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_e8mFUL1vwEU/TTrl7IICI2I/AAAAAAAAA8M/TesBep6MZh4/s1600/find.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="http://4.bp.blogspot.com/_e8mFUL1vwEU/TTrl7IICI2I/AAAAAAAAA8M/TesBep6MZh4/s320/find.gif" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_e8mFUL1vwEU/TTrl8ARWkXI/AAAAAAAAA8Q/PFUST8eSC6M/s1600/expand.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_e8mFUL1vwEU/TTrl8ARWkXI/AAAAAAAAA8Q/PFUST8eSC6M/s1600/expand.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>now find <data:post.body/></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_e8mFUL1vwEU/TTrl7IICI2I/AAAAAAAAA8M/TesBep6MZh4/s1600/find.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="http://4.bp.blogspot.com/_e8mFUL1vwEU/TTrl7IICI2I/AAAAAAAAA8M/TesBep6MZh4/s320/find.gif" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>and after this line write</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><div class ='facebooklike'></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b></div></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>and paste you code in this div.</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWLH-K1SmxyHTaO8A402lQQF5ArB4Aqmiceh1LZYOsa9LmxbveWDwTunmCuNIx2q4L65qjfOpPy_rj59kRQDDiNvbPb3tXS4sxBUYmiVpfDfpH-Vnvn05HW12wo-iVg6HcLwp2FV-2K2R/s1600/addcode.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWLH-K1SmxyHTaO8A402lQQF5ArB4Aqmiceh1LZYOsa9LmxbveWDwTunmCuNIx2q4L65qjfOpPy_rj59kRQDDiNvbPb3tXS4sxBUYmiVpfDfpH-Vnvn05HW12wo-iVg6HcLwp2FV-2K2R/s1600/addcode.gif" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>After pasting your code replace starting tags with &tl; and ending tags with &gt;</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>( < with &lt; and > with gt; ) and your url with <div:post.url/>.</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>Your code should look something like this.</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaKCyGSkZH5PAp3QmX61-nSeglZ8cYghs31YlNPlZSnkJzgg2LV9jiLqIyRg1D1BFIdZAqWqOLEbfog3F7rd_46sFshVrHqF4xaJJuDbTFTsIbV1U_hgMRif6pRZtTKNevX8I9ydFEsc0/s1600/last.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaKCyGSkZH5PAp3QmX61-nSeglZ8cYghs31YlNPlZSnkJzgg2LV9jiLqIyRg1D1BFIdZAqWqOLEbfog3F7rd_46sFshVrHqF4xaJJuDbTFTsIbV1U_hgMRif6pRZtTKNevX8I9ydFEsc0/s400/last.gif" width="400" /></a></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div style="text-align: left;">
<b style="font-family: Georgia, 'Times New Roman', serif;">Click Save Template and you're done now.</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_e8mFUL1vwEU/TTro1_A6HjI/AAAAAAAAA8c/XHqKdixwIdA/s1600/save.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="76" src="http://4.bp.blogspot.com/_e8mFUL1vwEU/TTro1_A6HjI/AAAAAAAAA8c/XHqKdixwIdA/s320/save.gif" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>now you will find like button on each post. </b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>If You Find Problems Please Let Meah Know In Comments</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>Thanks.</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b><br />
</b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><b>.................</b></span></div>
</div>
<div class="adsense">

</div>
</div>

How To : Adding Facebook Like Button On Blogger's Each Post.

Adding Facebook like button on each post of blogger is slightly different than adding like button on websites. Let's see...

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title">
This is another method of using the <b><i>:after</i></b> and <i><b>:before</b></i>
 properties and it will work without too many problems in any browser, 
including IE8. What this trick will do is to divide the header bar into 
left and right 
sections, where the left will contain an explanatory title and the 
right, a related link.<br />
<br />
The idea of generating Adobe-like Arrow Headers was actually discussed by <a href="http://css-tricks.com/adobe-like-arrow-headers" rel="nofollow" style="color: #0000ee; text-decoration: none;">css-tricks</a> and adapted to Blogger.<br />
<br />
</h3>
<h2>
<span style="color: orange;">How to Add Adobe-like Headers to Blogger</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxggFFx8aiBOHHW6iUjx2nLDvQRWzLSUqAxbsMtYd03kFWmzo8hAlev7jj8mpze7r_LPZj7kLdi7pCGMR3m3y-8okQ1yPsVN7tXtM0QvpXpgFlT1a9htHhw_VyUITphvajZuBz8yZhXwX/s1600/adobe-like-arrows-for-blogger-headings.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger tricks, blogger blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxggFFx8aiBOHHW6iUjx2nLDvQRWzLSUqAxbsMtYd03kFWmzo8hAlev7jj8mpze7r_LPZj7kLdi7pCGMR3m3y-8okQ1yPsVN7tXtM0QvpXpgFlT1a9htHhw_VyUITphvajZuBz8yZhXwX/s1600/adobe-like-arrows-for-blogger-headings.png" title="adobe like headers to Blogger sidebar" /></a></div>
<br />
<span style="color: #38761d;"><b>Step 1.</b></span> Log in to your <a href="https://www.blogger.com/home">Blogger dashboard</a> > go to <b>Template</b> > <b>Edit HTML,</b> then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:<br />
<blockquote class="tr_bq">
</head></blockquote>
<span style="color: #38761d;"><b>Step 2. </b></span>Just above it, copy and paste this code:<br />
<blockquote class="tr_bq">
 <style><br />
.module h2 { <br />
  background-color: #D5D5D5;<br />
  border-radius: 20px 0 0 20px;<br />
  color: #FFFFFF;<br />
  font-family: Verdana;<br />
  font-size: 14px;<br />
  line-height: 32px;<br />
  margin: 0;<br />
  padding: 0 0 0 20px;<br />
  text-shadow: 2px 1px 1px #222;<br />
}<br />
<br />
.module h2 a { <br />
    border-left: 5px solid #ffffff;<br />
    color: #101921;<br />
    float: right;<br />
    font-size: 14px;<br />
    text-decoration: none;<br />
    text-shadow: none;<br />
    padding: 0 10px;<br />
    position: relative;<br />
   -moz-transition: padding 0.1s linear;<br />
   -webkit-transition: padding 0.1s linear;<br />
   -ms-transition: padding 0.1s linear;<br />
   -o-transition: padding 0.1s linear;<br />
}<br />
.module h2 a:hover { <br />
  padding: 0 32px;<br />
}<br />
<br />
.module h2 a:before, .module h2 a:after {<br />
    content: &quot;&quot;;<br />
    height: 0;<br />
    position: absolute;<br />
    top: 50%;<br />
    width: 0;<br />
}<br />
.module h2 a:before {<br />
    border-bottom: 8px solid transparent;<br />
    border-right: 8px solid #ffffff; <br />
    border-top: 8px solid transparent;<br />
    left: -12px;<br />
    margin-top: -8px;<br />
}<br />
.module h2 a:after {<br />
    border-bottom: 6px solid transparent;<br />
    border-top: 6px solid transparent;<br />
    left: -6px;<br />
    margin-top: -6px;<br />
}<br />
<br />
.module.blue h2 a {background-color: #A2D5EC;}<br />
.module.blue h2 a:hover {background-color: #C5F0FF;}<br />
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}<br />
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}<br />
<br />
.module.yellow h2 a {background-color: #FCE98D;}<br />
.module.yellow h2 a:hover {background-color: #FFD700;}<br />
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}<br />
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}<br />
<br />
.module.green h2 a {background-color: #bada55;}<br />
.module.green h2 a:hover {background: #C7E176;}<br />
.module.green h2 a:after {border-right: 6px solid #bada55;}<br />
.module.green h2 a:hover:after {border-right-color: #C7E176;}<br />
<br />
.module.red h2 a {background-color: #F0A5B5;}<br />
.module.red h2 a:hover {background-color: #FFC7D2;}<br />
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}<br />
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}<br />
</style></blockquote>
<span style="color: #38761d;"><b>Step 3.</b></span> Save the Template.<br />
<br />
<div style="text-align: center;">
<i><b><span style="color: #666666;">Screenshot:</span></b></i></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-SWkr_Y-K5HKWR-AyPW7qVnHvLMtfNFYEbUZi4hkKHjU6cb9d-sJziaN_KLB3hJiJ4QZU2PgDv9xVA9tgRjrni1XptSruEB3VpInNx73gbbaxILgdp0lhguRO9OUhDVe3-gMEh7pKaCat/s1600/adobe-like-arrows-for-blogger-sidebar-headers.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-SWkr_Y-K5HKWR-AyPW7qVnHvLMtfNFYEbUZi4hkKHjU6cb9d-sJziaN_KLB3hJiJ4QZU2PgDv9xVA9tgRjrni1XptSruEB3VpInNx73gbbaxILgdp0lhguRO9OUhDVe3-gMEh7pKaCat/s1600/adobe-like-arrows-for-blogger-sidebar-headers.png" width="400" /></a></div>
<br />
<br />
<span style="color: #38761d;"><b>Step 4.</b></span> Now go to <b>Layout </b>and <i><b>Add a new HTML/JavaScript Gadget</b> </i>with one of the codes below for each of the widget title:<br />
<br />
Background in <span style="color: #3d85c6;"><b>blue</b></span>:<br />
<blockquote class="tr_bq">
<div class="module blue"><br />
<h2><b>Title in</b> <a href="<i><span style="color: blue;">Link URL</span></i>"><b>Blue</b></a></h2><br />
</div></blockquote>
Background in <b><span style="color: #f1c232;">yellow</span></b><span style="color: #3d85c6;">:</span><br />
<blockquote class="tr_bq">
<div class="module yellow"><br />
<h2><b>Title in</b> <a href="<span style="color: blue;"><i>Link URL</i></span>"><b>Yellow</b></a></h2><br />
</div></blockquote>
Background in <b><span style="color: #38761d;">green</span></b>:<br />
<blockquote class="tr_bq">
<div class="module green"><br />
<h2><b>Title in</b> <a href="<i><span style="color: blue;">Link URL</span></i>"><b>Green</b></a></h2><br />
</div></blockquote>
Background in <b><span style="color: #cc0000;">red</span></b>:<br />
<blockquote class="tr_bq">
<div class="module red"><br />
<h2><b>Title in</b> <a href="<i><span style="color: blue;">Link URL</span></i>"><b>Red</b></a></h2><br />
</div></blockquote>
<br />
<b>Note: </b>Change "<b>Title in</b>" text with your widget's title and <b>Blue</b>, <b>Yellow</b>, <b>Green </b>and <b>Red </b>with the text on the right, then add <i>a </i><span style="color: blue;"><i>Link URL</i></span> to it.<br />
<br />
<span style="color: #38761d;"><b>Step 5.</b></span> After you saved the 
HTML/Javascript gadgets containing the codes above, drag and drop them 
just above the widgets you want to show... and <b>Save the Arrangement</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE4GLgIcaGVwrCFdWOGFD-28jCruvwQvExqqJN2U2G_ZU-exchezIkWqXX-MJQIfjvRj1GlU1Gkm8-Jjx65mroyDw0RI1WS97Lal-NkGBm-UfnJZtv89CdQLSJsFlcfvbGf9GXMEW94AWz/s1600/save-blogger-arrangement.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger tutorials" border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE4GLgIcaGVwrCFdWOGFD-28jCruvwQvExqqJN2U2G_ZU-exchezIkWqXX-MJQIfjvRj1GlU1Gkm8-Jjx65mroyDw0RI1WS97Lal-NkGBm-UfnJZtv89CdQLSJsFlcfvbGf9GXMEW94AWz/s1600/save-blogger-arrangement.png" title="how to add adobe like arrow headers to blogger" width="320" /></a></div>
<br />
<b><span style="color: #3d85c6;">DEMO</span></b><br />
<br />
You can see how the sidebar titles has been replaced with some cool header bars on this <a href="http://helploggerdemo.blogspot.com/" style="color: #0000ee; text-decoration: none;">demo blog</a>.

</div>
<div class="post-body entry-content" id="post-body-3086839842001333096">
<div id="FloatingSocialButtons" style="margin-top: 3039.55px;">
<center>

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including...

novels

</div>
<div class="post-body entry-content" id="post-body-1271181592539982835">
<div id="FloatingSocialButtons" style="margin-top: 3957.55px;">
<center>

<div style="margin-top: 15px;">
<a class="PIN_1372747838081_pin_it_button PIN_1372747838081_pin_it_button_inline PIN_1372747838081_pin_it_above" data-pin-config="above" data-pin-log="button_pinit" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fhelplogger.blogspot.com%2F2012%2F03%2Fhideshow-widgetsgadgets-in.html&media=&description=" target="_blank"><span class="PIN_1372747838081_pin_it_button_count" id="PIN_1372747838081_pin_count_0"></span></a>
</div>
</center>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3lcO7MTeTPfK0izFHPUQGk0ZmYbcXeFR4oB26BM4dDMBzRDPEbxTfbI3g6uZUXrOG0zFQUxbpl2lrvd-WHZw9wcx7wu29Jv2nNgMTCGmXPMMqBb1QafbMRG_28ydMrYqilSnrIYWYE72/s1600/how+to+hide+show+blogger+widgets+in+homepage+posts+static+pages.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3lcO7MTeTPfK0izFHPUQGk0ZmYbcXeFR4oB26BM4dDMBzRDPEbxTfbI3g6uZUXrOG0zFQUxbpl2lrvd-WHZw9wcx7wu29Jv2nNgMTCGmXPMMqBb1QafbMRG_28ydMrYqilSnrIYWYE72/s200/how+to+hide+show+blogger+widgets+in+homepage+posts+static+pages.png" width="150" /></a></div>
As some of you may have noticed, all the widgets/gadgets you add to your
 blog, will be displayed on all the pages by default, including the 
homepage as well. And I'm sure very few know that AdSense could disable 
your account in case you've put ad units inside the content of your 
contact or privacy policy pages. Therefore, hiding certain elements 
inside your blog pages is not only a matter of design, but it is also a 
requirement.<br />
<br />
<b>To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.</b><br />
<br />
<span style="color: #3d85c6;"><b>Step 1.</b></span> Go to Blogger's <b>Dashboard</b> > <b>Layout</b><b> </b>and
 name the HTML/Javascript gadgets that you have already added. Doing 
this, it will be easier for you to identify the widgets that you have in
 your Blogger's template. Give it a unique title so that it does not 
match with any of the titles of any other widgets already added.<br />
<br />
<span style="color: #3d85c6;"><b>Step 2.</b></span> Next thing to do is to go to <b>Template </b>and click on <b>Edit HTML</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEijUStFTbo99j735ocM0LbUrj8J1N9nSxY181Y9msyN5tq_ypnLXPdoSWoFXn1SfWqvZg_qPEEAdm2AjHIUCi5Fv-lCIBxsaZLqN0dpU5_I5RH4YuEXvwzf0-l1_NclTpOelsMGuYL8_X/s1600/remove-blogger-labels.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEijUStFTbo99j735ocM0LbUrj8J1N9nSxY181Y9msyN5tq_ypnLXPdoSWoFXn1SfWqvZg_qPEEAdm2AjHIUCi5Fv-lCIBxsaZLqN0dpU5_I5RH4YuEXvwzf0-l1_NclTpOelsMGuYL8_X/s1600/remove-blogger-labels.png" width="320" /></a></div>
<br />
<br />
<span style="color: #3d85c6;"><b>Step 3.</b></span> Select the "<i>Expand Widget Templates</i>" checkbox.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKzj5warLKzQCukYZQ7-POAWebkaY4aiyW7Zt754nPVB4xXE74gcJ07O6EZGqdiTtkvefcjJfS53lbQVLkNcXjvwA3w0fyD17_4f4rqsO2x8dUruih_hK5ySRcS-KEZUBF7EGmSTHfoNI/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKzj5warLKzQCukYZQ7-POAWebkaY4aiyW7Zt754nPVB4xXE74gcJ07O6EZGqdiTtkvefcjJfS53lbQVLkNcXjvwA3w0fyD17_4f4rqsO2x8dUruih_hK5ySRcS-KEZUBF7EGmSTHfoNI/s1600/blogger-expand-widget-templates.png" width="320" /></a></div>
<br />
<br />
<span style="color: #3d85c6;"><b>Step 4.</b></span> Find the widget's title in the HTML by using Ctrl+F and entering the widget's name in the search box.<br />
Let's say that the title for one of my widgets is "<b>Recent Posts</b>". After searching for the widget's name, I will find a similar code in my template:<br />
<br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='<b>Recent Posts</b>' type='HTML'><br />
<b:includable id='main'><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
</b:includable><br />
</b:widget>  </blockquote>
<br />
This code represents the widget/gadget that I have added in the Page Elements location (Layout).<br />
<br />
<span style="color: #3d85c6;"><b>Step 5.</b></span> After you've found 
your widget's code, add the following conditional tags marked with red 
just below  and above  to hide the widget from specific pages or posts 
in Blogger. For instance, in case you want:<br />
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b>To show the widget only in Homepage:</b></span></span><br />
<br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b> <span style="color: #cc0000;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b><span style="color: #cc0000;"> </b:if></span></b><br />
</b:includable><br />
</b:widget></blockquote>
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b>To show Blogger widget only in post pages </b></span></span><br />
<br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b style="color: #cc0000;"><b:if cond='data:blog.pageType == "item"'></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b style="color: #cc0000;"></b:if></b><br />
</b:includable><br />
</b:widget></blockquote>
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b><span class="royalb">To show the widget in a specific page</span></b></span></span><br />
<span style="font-size: medium;"><b><span class="royalb"> </span></b> </span><br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b><span style="color: #cc0000;"><b:if cond='data:blog.url == "<u>URL of the page</u>"'></span></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b><span style="color: #cc0000;"> </b:if></span></b><br />
</b:includable><br />
</b:widget></blockquote>
<br />
<b>Note</b>: Replace <b style="color: #cc0000;">URL of the page</b> with the address of the page in which you want the widget to appear<br />
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b><span class="royalb">To hide a widget only in a particular page</span></b></span></span><br />
<br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b style="color: #cc0000;"> <b:if cond='data:blog.url != "URL of the page"'></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b><span style="color: #cc0000;"> </b:if></span></b><br />
</b:includable><br />
</b:widget> </blockquote>
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b><span class="royalb">To show widgets only in static pages</span></b></span></span><br />
<br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b style="color: #cc0000;"> <b:if cond='data:blog.pageType == "static_page"'></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b style="color: #cc0000;"></b:if></b><br />
</b:includable><br />
</b:widget>   <span class="royalb"></span></blockquote>
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b><span class="royalb">To hide widgets in Static Pages</span></b></span></span><br />
<br />
<blockquote class="tr_bq">
<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b style="color: #cc0000;"> <b:if cond='data:blog.pageType != "static_page"'></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b style="color: #cc0000;"> </b:if></b><br />
</b:includable><br />
</b:widget>   <span class="royalb"></span></blockquote>
<br />
<span style="color: #3d85c6;"><span style="font-size: medium;"><b><span class="royalb">To show widgets only in Archive Pages</span></b></span></span><br />
<br />
<blockquote class="tr_bq">
<span class="royalb"> </span><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br />
<b:includable id='main'><br />
<b style="color: #cc0000;"> <b:if cond='data:blog.pageType == "archive"'></b><br />
<br />
<b:if cond='data:title != ""'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b style="color: #cc0000;"> </b:if></b><br />
</b:includable><br />
</b:widget> </blockquote>
<br />
<span style="color: #3d85c6;"><b>Step 6.</b></span> After you have added the conditional tags, <b>Save Template</b> and view your blog.<br />
<br />
That's it!
</div>
</div>

Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by def...

novels

</div>
<div style="float: right; padding: 0px;">

<br />
</div>
<div dir="ltr" style="text-align: left;">
   <div dir="ltr" style="text-align: left;">
     <div dir="ltr" style="text-align: left;">
       <div dir="ltr" style="text-align: left;">
         <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTtHf8l79ABUCS7MJ4uVMpAJPVQw1tEVcaMyRuk9VjyQqsPbzF_Fru0SL0wVjzGW0-dIbEVfLGw2KHxA0FwqcddYZttDA86_b03zvS-kbQYK0-H-mu4tQVQCD_7iG2c5dKExs5t9O6utj/s1600/HTML+EnCoder+Desktop+Application.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTtHf8l79ABUCS7MJ4uVMpAJPVQw1tEVcaMyRuk9VjyQqsPbzF_Fru0SL0wVjzGW0-dIbEVfLGw2KHxA0FwqcddYZttDA86_b03zvS-kbQYK0-H-mu4tQVQCD_7iG2c5dKExs5t9O6utj/s320/HTML+EnCoder+Desktop+Application.png" width="320" /></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit; line-height: 21px;">Blogger
 Tricks HTML Parser or EnCoder Tool was created so Google Adsense can be
 added into the body of Blogger Templates. However, if anything you add 
Blogger Template gives an error, more likely than not putting it through
 the EnCoder would solve the problem. </span><span style="font-family: inherit; line-height: 21px;">While
 writing tutorials or asking a question, sometimes it becomes very 
necessary to post html and javascript codes in your blog comment forms 
powered by Blogger. You have seen many authors posting HTML effectively 
but when some of you try to do it, you get an error. This is because 
Blogger Comment form doesn't support direct posting of HTML and 
JavaScript. In order to help you to do that we will need to 
change/encode the same code into a text and then post it effectively 
without any error. Our Tools/App will help you to change HTML characters
 to simple text, which could be easily inserted in your blogger template
 and comment form. You can also use it to convert your adsense code into
 an embeddable form. </span></div>
<span style="font-family: inherit;">           </span><span style="background-color: white; color: #333333; font-family: inherit; line-height: 20px; text-align: justify;">We
 had been lucky to utilize this free service for blogger platform and 
create some amazing Desktop Tool with the help of our developer <a href="https://www.facebook.com/profile.php?id=100000690226644" rel="nofollow" target="_blank">Abdul Jabbar</a>. The HTML EnCoder has been Created by <a href="https://www.facebook.com/profile.php?id=100000690226644" rel="nofollow" target="_blank">Abdul Jabbar</a>. We say thanks to Abdul Jabbar For Precious Service and Efforts. </span>          <br />          <h1>
Copyrights</h1>
<div>
<span style="font-family: inherit;">Developers
 and niche bloggers are most welcome to share this  Tool/App with their 
readers and friends. Please attribute the credits back to Blogger Tricks
 blog as the only favor in return. It takes 6 Days of efforts to Making 
this tools. This Tool/App comes under a <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_GB" rel="license"><img alt="Creative Commons Licence" src="http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" /></a> This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_GB" rel="nofollow">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License</a>.</span>            <br />            </div>
</div>
</div>
<h1>
Tool/Apps Preview</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXLaICnEzck7Zyi5sVga1Me0LsAr6-PFIeLj2uT5cUdaz-aeUnSNSCZXNL1WJq8ZoLeYB8bXBBRaxKjY2XYfPtLebDV569H3zwHYuLjzs5c9I9y7M_QBwXo8dV70UW2LlBmXL0F-ah0zz/s1600/HTML+EnCoder+Preview.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXLaICnEzck7Zyi5sVga1Me0LsAr6-PFIeLj2uT5cUdaz-aeUnSNSCZXNL1WJq8ZoLeYB8bXBBRaxKjY2XYfPtLebDV569H3zwHYuLjzs5c9I9y7M_QBwXo8dV70UW2LlBmXL0F-ah0zz/s640/HTML+EnCoder+Preview.png" width="640" /></a></div>
<div>
       <br />        </div>
</div>
<h1>
Download</h1>
Direct Link:     <br />    <div class="separator" style="clear: both; text-align: center;">
<a href="https://doc-0k-2c-docsviewer.googleusercontent.com/viewer/securedownload/ot6lnajc6okkds3r8pmq5qj51tle1lue/vjn63puuhljf3t6kijbq0556bvqd3krr/1367504100000/ZXhwbG9yZXI=/AGZ5hq-ehRJ3RDbjEOc4dVPdqtKJ/MEJ5RDlzZlNWZUtHb01rUlJVVlZKVmsxemJsVQ==?hash=k94tvmlia162u4fstglm0vdcjqt64b4i&nonce=jfb0tpkhddi56&sec=AHSqidbfazeNmu9uTtm2_hcTlU9iY_vT3gq_G-6zHvTBvpp-AbFQH8fXtw75ZGjzghc5dSQ4Wf-e&a=dl&filename=HTMLEnCoder5.rar&rel=rar;r1;HTMLEnCoder.exe&user=AGZ5hq-ehRJ3RDbjEOc4dVPdqtKJ" rel="nofollow" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUnbbwtnfKu4UUwQIjC4-3ahTBcluUe9F-INj7qQA59bYZTuzLq2hLVMMVm_a78tMs2bGlo0ebqkzCGkxV2lUSrrXVsiS3wtmO2jUJ3-zI0D9U8WLvuxmbNE9pefml6xhXoHcyyRgUUiK/s200/Download+Button.png" width="200" /></a></div>
<br />    <div>
     <br />      </div>
<div>
We
 just hope this Application adds new fuel to your blogger powered blogs.
 We tried best to keep it working as efficient as possible. Let me know 
if you needed any help. We have some more interesting Apps coming Soon. 
Stay tuned! Subscribe our blog for stay updated.. Thanks for Reading our
 post...</div>
</div>
</div>

Download HTML Encoder Desktop Application

Blogger Tricks HTML Parser or EnCoder Tool was created so Google Adsense can be added i...

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.There are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I've found are not really suitable for a beginner.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Recent Post With Thumbnail Simple Spy" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgFMAbP2Gig50Jvhn-wGyw0SVVko9tPq65KKtXkmC_DI2ZCIOHcc8d3PgZD9edf4l9SK7KValNlp4IzJbtj5z3y9ICTaj4H4HVnvs6bVwoo3QbkbKk7r2sXb-sh5svX03tN8Y00SG6aM7/s1600/Recent+Post+With+Thumbnail+Simple+Spy.gif" title="Recent Post With Thumbnail Simple Spy" width="224" /></a></div>
<a href="http://www.blogger.com/null" name="more"></a><br />
<div style="text-align: center;">
<a class="button big green" href="http://24work.blogspot.com/p/animated-recent-posts-thumbnails-and.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<span style="font-size: large;"><b>How to Install Animated Recent posts for blogger with thumbnails and Simple Spy</b></span><br />
<br />
Now let's start adding it...  <br />
<br />
<br />
<b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. <br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZzKpCMUzCz2rf8w_m2aWsYlprFFlknb1fAB2ctSRZ_5ZLVvdSpCtq2ba6xcqcmI84eykCcpcFDxONG5_IQG_c6OnaxL3mqwsTRBVT75WrGtCk0cBnFGgyWxvQb_5ryUA-qZQq8XjCuUU/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div>
<br />
<br />
<b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br />
<br />
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIoxYYwPY4IQhJy5vUfQwfudQM_SuLY7sR9VP_K6lnNGmI0On6TXjajZ2GwAUqzpcaLoVUS2LauhLk1o3ANnyNmycbC6Fqu3EHHpA4c6aZ2PdIJ6oH-YYMZKhVGdKJuT-to7mQgMRgfcko/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div>
<br />
<br />
<b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below.  <br />
<br />
<br />
<b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br />
<br />
<br />
<br />
<div class="code">
<b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b><br />
<br />
<br />
<br />
<style type="text/css" media="screen"><br />
<br />
<br />
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'> <br />
<br />
imgr = new Array();<br />
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
showRandomImg = true;<br />
boxwidth = 255;<br />
cellspacing = 6;<br />
borderColor = "#232c35";<br />
bgTD = "#000000";<br />
thumbwidth = 70;<br />
thumbheight = 70;<br />
fntsize = 12;<br />
acolor = "#666";<br />
aBold = true;<br />
icon = " ";<br />
text = "comments";<br />
showPostDate = true;<br />
summaryPost = 40;<br />
summaryFontsize = 10;<br />
summaryColor = "#666";<br />
icon2 = " ";<br />
numposts = 10;<br />
<br />
<br />
<br />
<b style="background-color: cyan;"><span style="color: red;">home_page </span></b>= "<b><span style="color: red;">http://bdlab.blogspot.com/</span></b>";<br />
<br />
<br />
<br />
limitspy=4<br />
intervalspy=4000<br />
</script><br />
<div id="spylist"><br />
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com.js' type='text/javascript'></script><br />
<br />
</div></div>
<br />
<br />
And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br />
<br />
<br />
<b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br />
<br />
</b><br />
<br />
<blockquote>
<b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b></blockquote>
<br />
<br />
<br />
<br />
<br />
<br />
1. homepage address<br />
<br />
<span style="color: red;"><span style="background-color: cyan;">home_page</span> = “http://<b>bdlab</b>.blogspot.com/</span>”;<br />
<br />
<br />
2. Style<br />
<br />
from above style/css, you can change :<br />
<br />
<br />
width : 220px;<br />
<br />
width:208px:<br />
<br />
<br />
customize base on your template<br />
<br />
and<br />
<br />
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXRJmkqF3FupCl2BYu5bhSj2jtBfcO3BFGnOrZhyCE-u8AYho0NEuDl-J_tz95CWX-buJWP8clbFFY73HjJkG_Ivq25yDdNRj1szv75cHRr0jWV1MmfwrmheTowAECzq9m2IZVRTpmbLJw/s1600/24work-blogspot-com.jpg) repeat-x;<br />
<br />
<br />
Customize the colors of backuground<br />
<br />
<br />
3. image size<br />
<br />
thumbwidth = 70;<br />
<br />
thumbheight = 70;<br />
<br />
<br />
Match your needs<br />
<br />
<br />
4. How many post you will show<br />
<br />
numposts = 10;<br />
<br />
<br />
Base on what you need to show<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4 style="text-align: left;">
Stylish Scrolling Recent Posts Widget For Blogger</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Stylish Scrolling Recent Posts widget" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ye6bLlYfWDB0RRcoXcr5cfsPBFnu-Rx6dFSJiUmsrg5I3M3Axhxsofx_7JuLZVGWRHZ8ZIdAx4cNDyDrDCGvjlsaDzssRykwXe9qKVb2dRCif59c2POjn7UH9-ZVqVx-sADEEmlBe7LW/s1600/Stylish+Scrolling+Recent+Posts+widget.png" title="Stylish Scrolling Recent Posts widget" width="308" /></a></div>
<br />
<div style="text-align: center;">
<a class="button big green" href="http://24work.blogspot.com/p/stylish-scrolling-recent-posts-widget.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.<br />
<br />
2. Paste the following code in HTML/Javascript Box.<br />
<br />
<br />
<div class="code">
<b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b><br />
<br />
<br />
<style type="text/css" media="screen"><br />
#workwidget {<br />
overflow: hidden;<br />
margin-top: 5px;<br />
padding: 0px 0px;<br />
height: 385px;<br />
}<br />
<br />
#workwidget ul {<br />
width: 295px;<br />
overflow: hidden;<br />
list-style-type: none;<br />
padding: 0px 0px;<br />
margin: 0px 0px;<br />
}<br />
<br />
#workwidget li {<br />
width: 282px;<br />
padding: 5px 5px;<br />
margin: 0px 0px 5px 0px;<br />
list-style-type: none;<br />
float: none;<br />
height: 80px;<br />
overflow: hidden;<br />
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXRJmkqF3FupCl2BYu5bhSj2jtBfcO3BFGnOrZhyCE-u8AYho0NEuDl-J_tz95CWX-buJWP8clbFFY73HjJkG_Ivq25yDdNRj1szv75cHRr0jWV1MmfwrmheTowAECzq9m2IZVRTpmbLJw/s1600/24work-blogspot-com.jpg) repeat-x;<br />
border: 1px solid #ddd;<br />
}<br />
<br />
#workwidget li a {<br />
text-decoration: none;<br />
color: #4B545B;<br />
font-size: 15px;<br />
height: 18px;<br />
overflow: hidden;<br />
margin: 0px 0px;<br />
padding: 0px 0px 2px 0px;<br />
}<br />
<br />
#workwidget img {<br />
float: left;<br />
margin-top: 10px;<br />
margin-right: 15px;<br />
background: #EFEFEF;<br />
border: 0;<br />
}<br />
<br />
#workwidget img {<br />
-webkit-transition: all 0.5s ease;<br />
-moz-transition: all 0.5s ease;<br />
transition: all 0.5s ease;<br />
padding: 4px;<br />
background: #eee;<br />
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));<br />
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />
box-shadow: 0 0 3px rgba(0,0,0,.7);<br />
}<br />
<br />
#workwidget img:hover {<br />
-moz-transform: scale(1.2) rotate(-350deg);<br />
-webkit-transform: scale(1.2) rotate(-350deg);<br />
-o-transform: scale(1.2) rotate(-350deg);<br />
-ms-transform: scale(1.2) rotate(-350deg);<br />
transform: scale(1.2) rotate(-350deg);<br />
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />
}<br />
<br />
.spydate {<br />
overflow: hidden;<br />
font-size: 10px;<br />
color: #0284C2;<br />
padding: 2px 0px;<br />
margin: 1px 0px 0px 0px;<br />
height: 15px;<br />
font-family: Tahoma,Arial,verdana, sans-serif;<br />
}<br />
<br />
.spycomment {<br />
overflow: hidden;<br />
font-family: Tahoma,Arial,verdana, sans-serif;<br />
font-size: 10px;<br />
color: #262B2F;<br />
padding: 0px 0px;<br />
margin: 0px 0px;<br />
}<br />
<br />
<br />
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'><br />
imgr = new Array();<br />
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
showRandomImg = true;<br />
boxwidth = 255;<br />
cellspacing = 6;<br />
borderColor = "#232c35";<br />
bgTD = "#000000";<br />
thumbwidth = 50;<br />
thumbheight = 50;<br />
fntsize = 15;<br />
acolor = "#666";<br />
aBold = true;<br />
icon = " ";<br />
text = "comments";<br />
showPostDate = true;<br />
summaryPost = 40;<br />
summaryFontsize = 10;<br />
summaryColor = "#666";<br />
icon2 = " ";<br />
<span style="color: #b4a7d6;"><b>numposts = 10</b></span>;<br />
home_page = "<b><span style="color: red;">http://bdlab.blogspot.com</span></b>/";<br />
<b><span style="color: #ffe599;">limitspy=4</span></b>;<br />
<b><span style="color: #a2c4c9;">intervalspy=4000</span></b>;<br />
</script><br />
<br />
<div id="workwidget"><br />
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-3.js' type='text/javascript'></script><br />
</div></div>
<br />
<br />
<br />
<br />
<br />
And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br />
<br />
<br />
<br />
<br />
<br />
<b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span><br />
<br />
<br />
<br />
</b><br />
<br />
<br />
<br />
<blockquote>
<b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b></blockquote>
<br />
Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br />
<br />
<br />
You Can Also <span style="background-color: #38761d;"><span style="color: yellow;">CUSTOMIZE</span></span> The CODE According to Your Need<br />
<br />
<b><span style="color: #b4a7d6;">numposts = 10</span></b>; Total number of posts which you wants to scroll by this widget<br />
<b><span style="color: #ffe599;">limitspy=4</span></b>; Number of the posts to appear on the widget<br />
<b><span style="color: #a2c4c9;">intervalspy=4000</span></b>; Scrolling speed of the widget,if you decreased the value speed of widget will increases.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4 style="text-align: left;">
Add Animated Recent Post Widget Sliding Recent Post Widget for Bloggers</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Animated Recent Post Widget Sliding Recent Post Widget" border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLsW5NUhbl1UOxDKnA88jRe59PS4kRGudwDFxyt43tM0nM4C5GrN-V5pOkQ0yTIxW82EGRuC7yvhOFcv_kLi5TsDujR3Uuu7u1Ya2YEW0NGp4gnxtwmO50OGGPe1Tg4o79H2m0AYqaWAYd/s1600/Animated+Scrolling+Recent+Post+Widget.png" title="Animated Recent Post Widget Sliding Recent Post Widget" width="441" /></a></div>
<br />
<div style="text-align: center;">
<a class="button big green" href="http://24work.blogspot.com/p/add-animated-recent-post-widget-sliding.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
Go to blogger > Open layout tab<br />
<br />
Now Add A new HTML/JavaScript widget<br />
<br />
Now paste the code given below : <br />
<br />
<br />
<br />
<div class="code">
<b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b><br />
<br />
<br />
<style type="text/css"><br />
#rp_plus_img{height:377px;}<br />
#rp_plus_img li {height:60px;padding:5px;list-style:none;<br />
background-color:#ffffff;<br />
border:solid 1px #000000;}<br />
#rp_plus_img a{color:#00000;}<br />
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;<br />
text-align:justify;<br />
-moz-border-radius: 5px;}<br />
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}<br />
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-2.js"></script><br />
<script type="text/javascript"><br />
var speed = 1500;<br />
var pause = 3500;<br />
$(document).ready(function(){<br />
rpnewsticker();<br />
interval = setInterval(rpnewsticker, pause);<br />
});<br />
</script><br />
<ul id="rp_plus_img"><br />
<script style="text/javascript"><br />
var <span style="background-color: #f4cccc; color: #4c1130;"><b>numposts = 5</b></span>;<br />
var numchars = 0;<br />
</script><br />
<script src="<b><span style="color: red;">http://bdlab.blogspot.com</span></b>/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul></div>
<br />
<br />
<br />
<br />
And now click <b style="background-color: #ff7700; border: solid #993300 1px; color: white; margin: 2px; padding: 2px;"> Save </b><br />
<br />
<br />
<br />
<br />
<b><span style="color: red;">Note :If your template already have a jquery do not put again, just copy after it</span><br style="color: red;" /><span style="color: red;"> Html from above a few things could be replaced :</span></b><br />
<br />
<br />
<blockquote>
<b><span style="color: red;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script></span></b></blockquote>
<br />
<br />
Now Replace the <b><span style="color: red;">http://bdlab.blogspot.com</span></b> with your blog Url.<br />
<br />
<br />
<span style="background-color: #f4cccc;"><b><span style="color: #4c1130;">numposts = 5</span></b></span>; Total number of posts which you wants to scroll by this widget<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4 style="text-align: left;">
Stylish Animated Blogger Recent Posts Widget</h4>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bit.ly/vGLd4R" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Stylish Animated Blogger Recent Posts Widget" border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNdDuQmtYpkPpoJuGZr8GfIb-UvoSwxIfJjJu1VOGfaoFdtInPkckqdqYvsXBQHdfhK3dP_RSFKZeWr6EbIGRs594Tr2QaAtHG3OxFUL6Y-lUsMT6Inric-z2-yKEmnz9nGNfvji-bgxev/s1600/Stylish+Animated+Blogger+Recent+Posts+Widget.png" title="Stylish Animated Blogger Recent Posts Widget" width="266" /></a></div>
<br />
<div style="text-align: center;">
<a class="button big green" href="http://24work.blogspot.com/p/stylish-animated-blogger-recent-posts.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
Go to blogger > Open layout tab<br />
<br />
Now Add A new HTML/JavaScript widget<br />
<br />
Now paste the code given below : <br />
<br />
<br />
<div class="code">
<b><span style="color: red;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></span></b><br />
<br />
<br />
<style type="text/css" media="screen"><br />
#workwidget {<br />
overflow: hidden;<br />
margin-top: 5px;<br />
padding: 0px 0px;<br />
height: 385px;<br />
}<br />
<br />
#workwidget ul {<br />
width: 295px;<br />
overflow: hidden;<br />
list-style-type: none;<br />
padding: 0px 0px;<br />
margin: 0px 0px;<br />
}<br />
<br />
#workwidget li {      <br />
width:230px;      <br />
background: #1ed2f2;<br />
list-style-type: none;<br />
margin:0 0 5px 0px;<br />
padding:5px 5px 1px 10px !important;<br />
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px; <br />
}<br />
<br />
#workwidget li a {<br />
text-decoration: none;<br />
color: #4B545B;<br />
font-size: 15px;<br />
height: 18px;<br />
overflow: hidden;<br />
margin: 0px 0px;<br />
padding: 0px 0px 2px 0px;<br />
}<br />
<br />
#workwidget img {<br />
float: left;<br />
margin-top: 10px;<br />
margin-right: 15px;<br />
background: #EFEFEF;<br />
border: 0;<br />
}<br />
<br />
#workwidget img {<br />
-webkit-transition: all 0.5s ease;<br />
-moz-transition: all 0.5s ease;<br />
transition: all 0.5s ease;<br />
padding: 4px;<br />
background: #eee;<br />
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));<br />
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);<br />
box-shadow: 0 0 3px rgba(0,0,0,.7);<br />
}<br />
<br />
<br />
#workwidget  li:hover { <br />
background: #84f6f5;<br />
<br />
}<br />
<br />
#workwidget img:hover {<br />
-moz-transform: scale(1.2) rotate(-350deg);<br />
-webkit-transform: scale(1.2) rotate(-350deg);<br />
-o-transform: scale(1.2) rotate(-350deg);<br />
-ms-transform: scale(1.2) rotate(-350deg);<br />
transform: scale(1.2) rotate(-350deg);<br />
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);<br />
}<br />
<br />
.spydate {<br />
overflow: hidden;<br />
font-size: 10px;<br />
color: #0284C2;<br />
padding: 2px 0px;<br />
margin: 1px 0px 0px 0px;<br />
height: 15px;<br />
font-family: Tahoma,Arial,verdana, sans-serif;<br />
}<br />
<br />
.spycomment {<br />
overflow: hidden;<br />
font-family: Tahoma,Arial,verdana, sans-serif;<br />
font-size: 10px;<br />
color: #262B2F;<br />
padding: 0px 0px;<br />
margin: 0px 0px;<br />
}<br />
<br />
<br />
</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'><br />
imgr = new Array();<br />
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxD-5E3WqDMqRm6g7_5-wOCFMojcfXJztWXgNUtYc7R9a8YI693cf8YLU0BiIgsaU3JJLdlQMzx_BVc4zOpDYMi6vdNKEG6-FEVI-EHyvDIN56IMRkQPxJE_axCA03POtDgIT9uASJh6Pe/s1600/noimage.png";<br />
showRandomImg = true;<br />
boxwidth = 255;<br />
cellspacing = 6;<br />
borderColor = "#232c35";<br />
bgTD = "#000000";<br />
thumbwidth = 50;<br />
thumbheight = 50;<br />
fntsize = 15;<br />
acolor = "#666";<br />
aBold = true;<br />
icon = " ";<br />
text = "comments";<br />
showPostDate = true;<br />
summaryPost = 40;<br />
summaryFontsize = 10;<br />
summaryColor = "#666";<br />
icon2 = " ";<br />
<span style="background-color: magenta;">numposts = 10</span>;<br />
home_page = "<b><span style="color: red;">http://bdlab.blogspot.com/</span></b>";<br />
limitspy=4;<br />
intervalspy=4000;<br />
</script><br />
<br />
<div id="workwidget"><br />
<script src='http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts</div>
</div>
</div>

Animated Recent posts for Blogger with Thumbnails - Simple Spy

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and ge...

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
<br /></h1>
<div>
 </div>
<b>Note: we have released an <a href="http://developers.facebook.com/blog/post/472">updated version</a> of the comments plugin.</b>
<br />

Since Facebook Connect <a href="http://developers.facebook.com/news.php?blog=1&story=174">launched</a>, we've seen over 6,000 developers make their sites more social using <a href="http://developers.facebook.com/connect.php">Facebook Connect</a>.
 One of the most common features we've seen sites add with Facebook 
Connect is the ability to allow users to log in with a single click and 
comment with their real name and profile photo from their Facebook 
account.  Sites have seen as much as 40-50% more comments since they 
launched added these features.
<br />

Today, we're launching our first social widget for Facebook Connect, the
 Comments Box. The Comments Box is a great way for any website, blog or 
photo gallery to add social comments to their page in just a minute with
 a few lines of code. We want to help bring you social widgets that make
 it easier for users to communicate and share across your site and with 
their friends on Facebook.
<br />

With the Comments Box, Facebook users on your site can comment on your 
content, post those comments to their profiles, and share them with 
their friends on Facebook. The Comments Box allows non-Facebook users to
 make comments on your site as well. And via our APIs, you can access 
related comments made on Facebook as well to bring the conversation 
together.
<br />

To add the Comments Box to your site, follow these simple instructions:
<br />

<ol>
<li>Set up a basic <a href="http://www.facebook.com/developers/createapp.php">Connect application</a>. Take note of the API key and specify a callback URL to your website.</li>
<li>Download this <a href="http://www.somethingtoputhere.com/xd_receiver.htm">cross-domain receiver file</a>, and upload it to your website.</li>
<li>Add these snippets of code to each file where you want a Comments Box.</li>
<ul>
<li>Within the <html> tag, add:<tt> xmlns:fb="http://www.facebook.com/2008/fbml"</tt></li>
<li>Add the following code wherever you want a Comments Box to 
appear in your page. Replace '''YOUR_API_KEY_HERE''' with your API key, 
and include the path to the cross-domain receiver.</li>
</ul>
</ol>
<pre><script src=
"http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" 
type="text/javascript"></script>

<fb:comments></fb:comments>

That's it, your Comments Box is ready! For more detailed instructions, go to our <a href="http://wiki.developers.facebook.com/index.php/Comments_Box">Developer Wiki</a> or watch the video below.
<br />

The Comments Box comes with additional social features:
<br />

<ul>
<li>Fully customizable: Specify background color, text color, and other 
attributes by providing your own custom CSS to incorporate this best 
into your site.</li>
<li>Access to raw data: Query all comments via the <a href="http://wiki.developers.facebook.com/index.php/Comments.get">comments.get</a> API method or the <a href="http://wiki.developers.facebook.com/index.php/Comment_%28FQL%29">comment FQL table</a>.</li>
<li>Administration and moderation: Manage the privacy and permissions of your comment boxes on an individual or global basis.</li>
<li>Integrates seamlessly regardless of whether you do or don't have Facebook Connect already on your site.</li>
</ul>
This new Comments Box is just one of many social widgets that can help 
you easily integrate social features into your website with Facebook 
Connect.  There are many more plugins and widgets available in our 
Facebook Connect Plugins Directory that may also fit your needs, 
including plugins for Movable Type, and commenting systems by Disqus and
 JS-Kit. To learn more about using 4th party plugins and widgets, check 
out our <a href="http://wiki.developers.facebook.com/index.php/Facebook_Connect_Plugin_Directory">Facebook Connect Plugins Directory</a>.
  If you are building 4th party widgets for Facebook Connect, stay tuned
 for some exciting updates on the policies and implementation coming 
next week.
<br />

Here's to increasing the number of comments and conversations!
<br />

We're excited to see the various ways you'll incorporate the Comments Box in your websites. Please send us any feedback on the <a href="http://forum.developers.facebook.com/">Developer Forum</a>.
</div>

Commenting with Facebook Connect

Note: we have released an updated version of the comments plugin. Since Facebook Connect launched , we've seen over 6,000 de...

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
A reader asked me how to add a hunt box on the sect of blog denomination. I intellection I'd share my solve in this spot. Actually in these days the Spice Up Your Blog ads widget for the blogs are really hot to be seen and look well equipped ad box with some cool rates going high well with this post you can also get the same kind of ad widget as shown in the image beside even at your blog. This widget has got cool CSS effect  so that it makes all the advertisers think that this blog is well designed and developed and get cool advertisers.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuoJl4tDmoQTVeoCf27jZgPmZsT4jI3NytmV0vN_uFvkYyk3AYhZpw5MoMRiC0vyX0-I1nwgATI9_0Op1QL5_NSh-AO84yWhFETJmXRXiuSCiXRoD3nzYDnHFbMY7qkSqV684GbZwi4AG/s1600/Advertise+Here.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihuoJl4tDmoQTVeoCf27jZgPmZsT4jI3NytmV0vN_uFvkYyk3AYhZpw5MoMRiC0vyX0-I1nwgATI9_0Op1QL5_NSh-AO84yWhFETJmXRXiuSCiXRoD3nzYDnHFbMY7qkSqV684GbZwi4AG/s1600/Advertise+Here.jpg" /></a></div>
<br />
<center>
<a class="button blue big" href="http://bderodemo.blogspot.com/">View Live Demo</a></center>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<h2 class="h2title" id="style1" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqC6DRZfMDWQvWgxQA09PxzZoSu3yMMqGkUFiEizFXz3c1inpWLBGD2lL53HC5g4ITJfI2uLoUxHveaa7Lmd789aH7l6sgdHCNGDYCnnPiJVS7vu4gH5Yerluw3V6HLoHDIc56x2-pqko/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px;">
<span style="color: #25991c; font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="line-height: 20.796875px; text-transform: capitalize;">To do this just follow the steps given below: </span></span></h2>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li style="text-align: left;">Go to <b>Blogger > Layout > Edit HTML</b></li>
<li style="text-align: left;">Backup your template</li>
<li style="text-align: left;">Search for<b> ]]></b:skin></b> and just above <b>]]></b:skin></b> , paste the code below.</li>
</ul>
<blockquote>
<br />
/* -------------------bloggerheroe.com Ads------------------*/<br />
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}<br />
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}<br />
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}<br />
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}<br />
html><br />
<br />
body div.bsap_125 a.adhere{width:123px;height:123px;}<br />
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}<br />
div.bsap_468 img{border:0;clear:right;}<br />
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}<br />
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}<br />
html><br />
<br />
body div.bsap_728 a.adhere{width:726px;height:90px;}<br />
div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}<br />
div.bsap_728 img{border:0;clear:right;}<br />
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}<br />
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}<br />
html><br />
<br />
body div.bsap_336 a.adhere{width:334px;height:280px;}<br />
div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}<br />
div.bsap_336 img{border:0;clear:right;}<br />
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}<br />
div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}<br />
html><br />
<br />
body div.bsap_468 a.adhere{width:466px;height:58px;}<br />
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}<br />
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}<br />
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}<br />
.bsap .even{margin-right:0!important;}<br />
.bsap .ad1{background:#e42b2b!important;}<br />
.bsap .ad2{background:#ff8400!important;}<br />
.bsap .ad3{background:#a800ff!important;}<br />
.bsap .ad4{background:#49a7f3!important;}<br />
.bsap .ad5{background:#41d05f!important;}<br />
.bsap .ad6{background:#B24700!important;}<br />
.bsap .ad7{background:#FFE500!important;}<br />
.bsap .ad8{background:#007D47!important;}<br />
.bsap .ad9{background:#330000!important;}<br />
.bsap .ad10{background:#990000!important;}<br />
.bsap .ad11{background:#f70000!important;}</blockquote>
<ul>
<li>Click Save Template</li>
<li>Go to "Layout - Page Elements"=>Click on Add Gadget=>create new HTML / JavaScript widget</li>
<li>Copy the code in the field below and paste it in the new widget created:</li>
</ul>
<div>
<h4 style="background-attachment: scroll; background-color: white; background-image: url(http://2.bp.blogspot.com/-deTQEsM2ICs/UC54EbfEbkI/AAAAAAAAAiY/T9LeYROX6Ns/s1600/MBT+PostTitle+2.png); background-position: 5px 50%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; clear: both; margin: 10px 5px; padding: 6px 10px 2px 40px; text-shadow: rgb(204, 204, 204) 0px 1px 0px;">
<span style="color: magenta; font-family: Verdana;"><span style="font-size: large; line-height: 20.796875px;">The size of 125x125 Code</span></span></h4>
</div>
<blockquote>
<center><br />
<div id="bsap_125" class="bsap_125 bsap"><br />
<a href="<b><span style="color: magenta;">ADVERTISE URL</span></b>" class="<span style="color: blue;"><b>ad1</b></span>" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "<span style="color: red;"><b>IMAGE URL</b></span> "alt ="AdName"height =" 125 "width =" 125 "/> </a><br />
<a href="<b><span style="color: magenta;">ADVERTISE URL</span></b>" class="<span style="color: blue;"><b>ad2</b></span> even" title="Ad Title" target="_blank"> <img src = "<span style="color: red;"><b>IMAGE URL</b></span>"alt =" AdName "height =" 125 "width =" 125 "/> </a><br />
<a href="<span style="color: magenta;"><b>ADVERTISE URL</b></span>" class="<span style="color: blue;"><b>ad3</b></span>" title="AdTitle" target="_blank"> <img src = "<b><span style="color: red;">IMAGE URL</span></b> "alt =" AdName "height =" 125 "width =" 125 "/> </a><br />
<a href="<span style="color: magenta;"><b>ADVERTISE URL</b></span>" class="<span style="color: blue;"><b>ad4</b></span> even" title="Ad Title" target="_blank"> <img src = "<b><span style="color: red;">IMAGE URL</span></b>"alt =" AdName "height =" 125 "width =" 125 "/> </a><br />
</div></center></blockquote>
<h4 style="background-attachment: scroll; background-color: white; background-image: url(http://2.bp.blogspot.com/-deTQEsM2ICs/UC54EbfEbkI/AAAAAAAAAiY/T9LeYROX6Ns/s1600/MBT+PostTitle+2.png); background-position: 5px 50%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; clear: both; color: #0080ff; font-family: Verdana; line-height: 20.796875px; margin: 10px 5px; padding: 6px 10px 2px 40px; text-shadow: rgb(204, 204, 204) 0px 1px 0px;">
<span style="color: magenta; font-size: large;">The size of 468x60 Code</span></h4>
<blockquote>
<center><br />
<div id="bsap_468" class="bsap_468 bsap"><br />
<a href="<b><span style="color: magenta;">ADVERTISE URL</span></b>" class="<span style="color: blue;"><b>ad5</b></span>" title="Ad Title" id="bsa_1451626"<br />
target="_blank"> <img src = "<b><span style="color: red;">IMAGE URL</span></b> "alt ="AdName"height =" 60<br />
 "width =" 468 "/> </ a><br />
</ Div><br />
</ Center></blockquote>
<br />
<h4 style="background-attachment: scroll; background-color: white; background-image: url(http://2.bp.blogspot.com/-deTQEsM2ICs/UC54EbfEbkI/AAAAAAAAAiY/T9LeYROX6Ns/s1600/MBT+PostTitle+2.png); background-position: 5px 50%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; clear: both; color: #0080ff; font-family: Verdana; line-height: 20.796875px; margin: 10px 5px; padding: 6px 10px 2px 40px; text-shadow: rgb(204, 204, 204) 0px 1px 0px;">
<span style="color: magenta; font-size: large;">The size of 728x90 Code</span></h4>
<blockquote>
<center><br />
<div id="bsap_728" class="bsap_728 bsap"><br />
<a href="<b><span style="color: magenta;">ADVERTISE URL</span></b>" class="<span style="color: blue;"><b>ad6</b></span>" title="Ad Title" id="bsa_1451626"<br />
target="_blank"> <img src = "<span style="color: red;"><b>IMAGE URL</b></span> "alt ="AdName"height =" 90<br />
 "width =" 728 "/> </ a><br />
</ Div><br />
</ Center></blockquote>
<br />
<h4 style="background-attachment: scroll; background-color: white; background-image: url(http://2.bp.blogspot.com/-deTQEsM2ICs/UC54EbfEbkI/AAAAAAAAAiY/T9LeYROX6Ns/s1600/MBT+PostTitle+2.png); background-position: 5px 50%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; clear: both; color: #0080ff; font-family: Verdana; line-height: 20.796875px; margin: 10px 5px; padding: 6px 10px 2px 40px; text-shadow: rgb(204, 204, 204) 0px 1px 0px;">
<span style="color: magenta; font-size: large;">The size of 336x280Code</span></h4>
<blockquote>
<center><br />
<div id="bsap_336" class="bsap_336 bsap"><br />
<a href="<b><span style="color: magenta;">ADVERTISE URL</span></b>" class="<b><span style="color: blue;">ad8</span></b>" title="Ad Title" id="bsa_1451626"<br />
target="_blank"> <img src = "<b><span style="color: red;">IMAGE URL</span></b> "alt ="AdName"height =" 280<br />
 "width =" 336 "/> </ a><br />
</ Div><br />
</ Center></blockquote>
<br />
<h2 class="h2title" id="style1" style="background-attachment: scroll; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqC6DRZfMDWQvWgxQA09PxzZoSu3yMMqGkUFiEizFXz3c1inpWLBGD2lL53HC5g4ITJfI2uLoUxHveaa7Lmd789aH7l6sgdHCNGDYCnnPiJVS7vu4gH5Yerluw3V6HLoHDIc56x2-pqko/s1600/h2title+tickkkk.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; border-top-right-radius: 14px; border: 3px solid rgb(13, 112, 5); box-shadow: rgb(171, 171, 171) 3px 3px 3px; color: #25991c; font-family: Verdana; line-height: 20.796875px; margin: 0px 0px 1em; padding: 0px 1px 4px 34px; position: relative; text-shadow: rgb(0, 0, 0) 1px 1px 0px; text-transform: capitalize;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><span style="font-size: large;">MAKE THIS CHANGES</span></span></h2>
<div>
<ul>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="font-family: 'Times New Roman'; font-size: small;"><span style="color: magenta; font-weight: bold;">ADVERTISE URL - </span>Replace to your advertiser URL.</span></span></li>
<li><span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><span style="font-family: 'Times New Roman'; font-size: small;"><b style="color: red;">IMAGE URL - </b>Replace to your advertiser image ULR.</span></span></li>
</ul>
</div>
<div>
<b><span style="color: red;">NOTE: </span></b>The one Highlighted with <b><span style="color: blue;">BLUE</span></b> should be changed with any thing you like among ad1 - ad11 (It changes the color of the background image)</div>
<div>
</div>
</div>

Adding Ads Box with cool CSS effect as used in Spice Up Your Blog

A reader asked me how to add a hunt box on the sect of blog denomination. I intellection I'd share my solve in this spot. Actually in t...

novels

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdsyTXw3MluKIPyWupsLdDCrY2Qhkj8Z8sL1or6UFWh4ze3QeDaF69lh0QYRGxHRJUSg9HFetvj9x-j3xOZ5LOT6fjJi72emMBRkXhnmfCTCCVG1jlHDL1f2qWqqoUUAWokKKuX1sVBKtT/s1600/blogger+heroe+like+box+with+social+sharing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdsyTXw3MluKIPyWupsLdDCrY2Qhkj8Z8sL1or6UFWh4ze3QeDaF69lh0QYRGxHRJUSg9HFetvj9x-j3xOZ5LOT6fjJi72emMBRkXhnmfCTCCVG1jlHDL1f2qWqqoUUAWokKKuX1sVBKtT/s400/blogger+heroe+like+box+with+social+sharing.jpg" width="400" /></a></div>
<br />
<div class="TWtitle">
How To Add This Widget To Blogger?</div>
<ul>
<li>Fill up the required data in widget generator below</li>
<li>Click on "Generate" button to get 2 type of the code <b>1.CSS</b> & <b>2.HTML</b></li>
</ul>
<iframe allowtransparency="true" frameborder="0" height="720px" scrolling="no" src="http://dl.dropbox.com/u/81212926/bh%20like%20box%20beside%20social%20sharing.html" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 14px; line-height: 22.390625px; margin: 0px; outline: none; padding: 0px;" width="100%"></iframe><br />
<br />
<div class="TWtitle">
Ok ! What's Next ?</div>
<ul>
<li>Now Go to <b>Blogger Dashboard > Template</b></li>
<li>Click on <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b> button</li>
<li>Check <b>Expand Widget</b> Template checkbox.</li>
<li>Find below code in your blogs <b>HTML</b></li>
</ul>
<blockquote>
<div>
<div class='post-footer-line post-footer-line-1'/></div>
</blockquote>
<ul>
<li> Now copy and paste <b>"HTML"</b> Code just above it.</li>
<li>Next search for<span style="background-color: #d5a6bd;"> ]]></b:skin></span> in your blogs <b>HTML</b></li>
<li>Copy and paste <b>"CSS"</b> code just above it.</li>
</ul>
Now save your template and you have done !!<br />
<ul>
<li>If you have any doubts don't hesitate to ask.Please Comment.</li>
<li>Now If  You Enjoy This Post! Please Take 5 Seconds To Share It.</li>
</ul>
<br />
<center>
</center>
</div>

facebook like box widget beside social sharing box

How To Add This Widget To Blogger? Fill up the required data in widget generator below Click on "Generate" button to get...

novels

</div>
Google released Contact form for Blogger. and that i received several 
requests to create a contact form for Blogger on Static page instead 
widget, as a result of widget is on side bar and it’s not polite to 
contact or not friendly with guests who typically contact us from a 
stand alone page.<br />
<br />
Now, I even have a workaround answer can assist you show contact type for Blogger on static page with jQuery.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuk5acCYHaEZGdUcphsVihPdQDbGayWbdV36p1S5HZMpjNQFpjiu6O9ohnaNklLFzvGJv7Nb_GH_I0c41F8Tn2bLp1pcaLrWvjTJTSD0s2HyeNKDkN8Oejo3FBHimBZgUIVPteXcZnNF0E/s1600/contact-form-for-blogger-on-static-page-with-jquery.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuk5acCYHaEZGdUcphsVihPdQDbGayWbdV36p1S5HZMpjNQFpjiu6O9ohnaNklLFzvGJv7Nb_GH_I0c41F8Tn2bLp1pcaLrWvjTJTSD0s2HyeNKDkN8Oejo3FBHimBZgUIVPteXcZnNF0E/s400/contact-form-for-blogger-on-static-page-with-jquery.jpg" style="display: inline;" width="400" /></a></div>
<h2>
Adding Contact Form for Blogger Static Page with jQuery</h2>
<ul>
<li>Go to <b>Blogger > Template > Click Edit HTML</b>.</li>
<li>Find the tag <b></head></b> and insert before it with the below line:</li>
</ul>
<blockquote>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></div>
</blockquote>
<br />
<h2>
Add CSS and Javascript</h2>
<ul>
<li>Go to <b>Blogger > Template > Click Edit HTML</b>.</li>
<li>Find <b>]]></b:skin></b> ( by Ctrl+F) and add below code.</li>
</ul>
<blockquote>
.ContactForm {<br />
 display: none;<br />
}<br />
.blogger-heroe-contact .ContactForm {<br />
 display: block;<br />
}<br />
.widget.ContactForm .title {<br />
 display: none;<br />
}<br />
.widget.ContactForm * {<br />
 max-width: 100%;<br />
}</blockquote>
<br />
<ul>
<li>Next, please copy and paste the below code before <b></body></b> tag:</li>
</ul>
<blockquote>
<script type='text/javascript'><br />
//<![CDATA[<br />
$('.ContactForm').appendTo('.blogger-heroe-contact');<br />
//]]><br />
</script></blockquote>
<br />
<ul>
<li><b>Save template.</b></li>
</ul>
<h2>
Place below shortcode at any where you want to display contact form:</h2>
<blockquote>
<div>
 <div class="blogger-heroe-contact"></div></div>
</blockquote>
<ul>
<li>And your done.</li>
</ul>
</div>

How To Add Contact Form for Blogger Static Page with jQuery

Google released Contact form for Blogger. and that i received several requests to create a contact form for Blogger on Static pa...

Sort List by:
Sort List by Category:
Search with Keyword: