Blog Tricks Center: Blogger Widgets

Add Stylish Scrolling Recent Post Widget To Your Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title" style="color: #333333; font-family: Arial, sans-serif; font-stretch: normal; line-height: 1.2em; margin: 0px 0px 7px; padding: 3px 0px;">
Add Stylish Scrolling Recent Post Widget To Your Blog</h2>
<div class="post-body entry-content" style="margin: 0px 0px 0.75em;">
<div dir="ltr" trbidi="on">
<div class="separator" style="clear: both; color: #333333; font-family: verdana; line-height: 1.6em; text-align: center;">
</div>
<div class="separator" style="clear: both; color: #333333; font-family: verdana; line-height: 1.6em; text-align: center;">
<img alt="Scrolling Recent Post Widget" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3MSPpfqydfJFnTKYWTXWaBFsTS89UfIKl7I4mlVYEMxWg2oy60RY_h0p4vQL6TQhyQ6g4vHh0IoSRlEo1Tr9-MKxPAPmMu3ACzyl_MvE4uaHJhEUxz3tMBloTO1GGHzPEino2K_OitI/s400/recent-post-widget.jpg" style="padding: 10px;" title="Scrolling Recent Post Widget" width="400" /></div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-8616135883183169"
 data-ad-slot="6839278135"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div style="color: #333333; font-family: verdana; line-height: 1.6em; text-align: justify;">
We have share with you amazing bloggers widgets such as Popular Post Widget orRecent Comment Widget to engage your visitors on your blog. The implementation of such plugins on your blog makes easy for your reader to browse through different content on your blog and helps to grow readership of your blog. Today i will share with you guys awesome scrolling recent post widget for your blog. So lets add this together on your blog. <center>
</center>
</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 style="display:inline-block;width:336px;height:280px"
 data-ad-client="ca-pub-8616135883183169"
 data-ad-slot="7224714538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<h4 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: verdana; line-height: 1.6em; padding: 3px;">
How To Add Scrolling Recent Post Widget ?</h4>
   1. Go to blogger > Layout    2. Then select Add Gadget and choose Html/Javascript <div class="separator" style="clear: both; color: #333333; font-family: verdana; line-height: 1.6em; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRNrKg7tK-rNd0FUSU1_CKJhgJzE2h_LheHlP__Q_5WiOFPbW1ss272YRpYSjXOhvvpFgMwMffN6pC-2O3H2vIeaoEaml9Ne5i8g17xE0THeKwSNiUqas_-f192995iMFfzHWT7ImyNw/s1600/blogger-widget.jpg" imageanchor="1" style="color: #0080ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRNrKg7tK-rNd0FUSU1_CKJhgJzE2h_LheHlP__Q_5WiOFPbW1ss272YRpYSjXOhvvpFgMwMffN6pC-2O3H2vIeaoEaml9Ne5i8g17xE0THeKwSNiUqas_-f192995iMFfzHWT7ImyNw/s1600/blogger-widget.jpg" style="border-width: 0px; padding: 10px;" /></a></div>
<div class="separator" style="clear: both; color: #333333; font-family: verdana; line-height: 1.6em;">
   3. Now Copy/Paste below code into the popup window.</div>
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAABk0nBRaAi0OlOaknQ2nU5uBG3QELEyTLWUtbWNVY3SVSLnq10JrnmT-Tvb6GSZNy4crJZeEb2shceM2ofzdZkZx3GSK5asiYn-Drr4NoTZ9a_rnRzlFtEiTyYtfLja7KbkCOExvpRE/s400/QUOTE1.gif); background-origin: initial; background-position: 0% 0%; background-repeat: repeat-y; background-size: initial; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 10px 20px; padding: 10px 20px 10px 45px;">
<script type='text/javascript'> var jnWidth="100"; var jnScrollAmount="1"; var jnScrollDelay="50"; var jnDirection="left"; var jntargetlink="yes"; var jnnumPosts="10"; var jnBulletchar =">>>"; var jnimagebullet="yes"; var jnimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOE_OL0-KKjpyrLdqTWSuFAXGazLv2PzwZHlVBcsJKdTXSF0szwzIo-7CSZE2cInrOx2HmTTQAstWXDPzI3pRTd3laU2_GdUFgZNooFCZUHA7_fvRN6_BbUf9F61IXxE3yEUnAwBonfQ/s1600/arrows_back_forward.gif"; var jnfontsize="16"; var jnbgcolor="red"; var jnlinkcolor="blue"; var jnlinkhovercolor="green"; </script> <a href="blogtrickscenter.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="#" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://mybloggersworld.com/" target="_blank" title="Latest Tips And Tricks"><img src="#" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /> <script type='text/javascript' src='https://www.dropbox.com/s/55dft39shztwdt1/recent-comment-scrolling.js' ></script> <script type='text/javascript' src="http://blogtrickscenter.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script></blockquote>
<ul style="color: #333333; font-family: verdana; line-height: 1.6em; list-style: none;">
<li style="background-attachment: scroll; background-clip: initial; background-image: url(https://lh4.googleusercontent.com/-JMhOvkhRXbA/TxNaK07ZlwI/AAAAAAAAAaY/NRfccFSQ8aw/h120/255.gif); background-origin: initial; background-position: 0px 4px; background-repeat: no-repeat; background-size: initial; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Change blogtrickscenter.blogspot.com to your blog Url. </li>
</ul>
   4. All done Enjoy!</div>
</div>
</div>

Add Stylish Scrolling Recent Post Widget To Your Blog (adsbygoogle = window.adsbygoogle …

Add Automatic "Read More" Button Blogger Tricks

22:22 Dinesh Soni 2

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Add Automatic "Read More" Button Blogger Tricks</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<div style="text-align: left;">
Add Automatic Read More Button in Blogger: Although it's not a Big Deal that How To Add Read More Button in Blogger but some new bloggers can't fix this Problem and they are randomly searching for this hack. Let me elaborate it for you People , this is not as hard as "mesothelioma trial attorney " this word .This Hack just add "read more" option in every post. Actually you may have seen in some Blogger Templates that when you post some contents , it just show the whole contents i.e article from Start to the end but this Hack will wind up the article and will not show the whole article but read more button will be present there.So let's add this read more button in blogger.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_10fDvG2rMghbkjAMKBWfW3QfMG87NRAdPxi3umFLC1wTwkyzh-3Qt-5PtVY5JbTO6xWeGgLRZ-NAdshMOWjZaB1b7CjeTwA7FlG1wZ8QCfMJh9HIj-3Q4_elG1va0ixuISeGkZT5zXT/s1600/thatsblogging-readmore.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_10fDvG2rMghbkjAMKBWfW3QfMG87NRAdPxi3umFLC1wTwkyzh-3Qt-5PtVY5JbTO6xWeGgLRZ-NAdshMOWjZaB1b7CjeTwA7FlG1wZ8QCfMJh9HIj-3Q4_elG1va0ixuISeGkZT5zXT/s1600/thatsblogging-readmore.jpg" /></a></div>
How To Add Automatic "Read More" Button/Hack In Blogger 
 
<ul style="text-align: left;">
<li>Go To Blogger Dashboard</li>
<li>EDIT HTML</li>
<li>Now Press CTRL+F and Search for </head></li>
<li>Now Copy the below Script and paste it above </head> tag.</li>
</ul>
<div>
 CODES ARE UPDATED WORKING 100%</div>
 
<div>
<script type='text/javascript'></div>
<div>
 
<div style="font-weight: bold;">
var thumbnail_mode = "no-float" ;</div>

<div style="font-weight: bold;">
summary_noimg = 400;  /* Summary length if no image*/</div>
<div style="font-weight: bold;">
summary_img = 300; /* Summary length with image*/</div>
<div style="font-weight: bold;">
img_thumb_height = 200; /*Image Height*/</div>
<div style="font-weight: bold;">
img_thumb_width = 200; /*Image Width*/</div>
<div style="font-weight: bold;">
</script></div>
<div style="font-weight: bold;">
<script type='text/javascript' src='http://iamifti.com/readmore_thatsblogging.js' ></script></div>
<div style="font-weight: bold;">
 </div>
<div>
<div>
<ul style="text-align: left;">
<li><div style="display: inline !important;">
<div style="display: inline !important;">
You can change the number in red to your desire number. If a post doesn't have images then the length of the summary will be surely 500. If a post contains image, then of course the text length will be 450, And the 1st image that will be displayed will have these dimensions: width= 120, and height= 100.</div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="6839278135" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</li>
<li><div style="display: inline !important;">
<div style="display: inline !important;">
Now Search for <data:post.body/></div>
</div>
</li>
<li><div style="display: inline !important;">
<div style="display: inline !important;">
Now Copy the Below Script and replace the above mentioned script with the below Script</div>
</div>
</li>
</ul>
<div>
<div>
<b:if cond='data:blog.pageType == &quot;item&quot;'></div>
<div>
<data:post.body/></div>
<div>
<b:else/></div>
<div>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'></div>
<div>
<data:post.body/></div>
<div>
<b:else/></div>
<div>
<div expr:id='&quot;summary&quot; + data:post.id'></div>
<div>
<data:post.body/></div>
<div>
</div></div>
<div>
<script type='text/javascript'></div>
<div>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</div>
<div>
</script></div>
<div>
<div style='clear: both;'/></div>
<div>
<a expr:href='data:post.url' >Read more...</a><a href="http://thatsblogging.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVYIWd7kVfw4AN44SJOudxI81HYTatf-3Wywi3OlPJzSnvBequyumsVS4mhkOj_sabqQucD9y5liJoLZd4LB9FJwo3Sty5yrnBW0elaRaeCVkWOMroel16pqKTkphhKhBjsM_aipAkZvY/s1600/1x1juice.png"></a></div>
<div>
</b:if></div>
<div>
</b:if></div>
</div>
</div>
</div>
<div>
<ul style="text-align: left;">
<li><div style="display: inline !important;">
<div style="display: inline !important;">
Now Save template and that's it ;)</div>
</div>
</li>
</ul>
</div>
<div>
 </div>
</div>
</div>

Add Automatic "Read More" Button Blogger Tricks (adsbygoogle = window.adsbygoogle || []).push({}); Add Automatic Read More Button in Blogger: Although it's not a Big Deal that How To Add Read More Button in Blogger but some new bloggers can't fix th…

Cool Advertise Here Text with Hover Effect - Blog Widgets

06:41 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Cool Advertise Here Text with Hover Effect - Blog Widgets</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgHHm00L0VQWyIqSKVxbN1m2DmzHdfhMI6OlwNyS3W8Wk9hXgGtBI-qKntdsThO4v-TkegLdD2hkxRuMkHc-1w9_zxADni-bFZneodumu7Ctdp9RV4w1y3Ow5WNinu5V3WstcXeD2YCMd/s1600/baw.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRgHHm00L0VQWyIqSKVxbN1m2DmzHdfhMI6OlwNyS3W8Wk9hXgGtBI-qKntdsThO4v-TkegLdD2hkxRuMkHc-1w9_zxADni-bFZneodumu7Ctdp9RV4w1y3Ow5WNinu5V3WstcXeD2YCMd/s1600/baw.PNG" width="400" /></a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: left;">
Keeping Affiliate and Link Selling in view the Ad which will be placed on your site should be an attractive One.Visitors really like creativity and awesomeness of any thing in Your Web Log,it is a common problem these days that every Blogger who Place ads in his/her blog is really a dull One.In This regards,we gonna help you to add a significant Style Advertise Banner which will surely help you to get some bounty from visitors and you will get alot of chances to get advertisement from different Companies.</div>
How To Add Cool Advertise Here Text With Hover Effect <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 style="display:inline-block;width:336px;height:280px"
 data-ad-client="ca-pub-8616135883183169"
 data-ad-slot="7224714538"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ul style="text-align: left;">
<li>Go To Blogger Dashboard.</li>
<li>Click On Layout</li>
<li>Click On Add a Widget at the Right Side-bar</li>
<li>A Box will Pops-up</li>
<li>Select HTML/JavaScript</li>
<li>Copy the Below Script and paste it over there</li>
</ul>
<div>
<style>#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}inf{color:#d2a}#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}</style><div id="text" class="rent"><a href="URL" target="blank"><blink>&#8669;</blink> Here is a free space. Contact <inf>α&#8574;мїη for more information</inf><blink>&#8668;</blink></a></div></div>
<div>
 </div>
 
<div>
Note: Change "URL" to the link of the Page where you want to redirect the visitors when they click the ad.Now Just hit Save and that's it ! Ask any Question freely ;) We are here to Solve Your Problems,Happy Blogging!</div>
<div>
<div>
Cool Advertise Here Text with Hover Effect</div>
<div>
Last Reviewed by Iftikhar on July 31 2013</div>
<div>
Rating: 4.5</div>
<div style="font-style: italic;">
 </div>
</div>
 
<div>
 </div>
 
</div>

Add Mouseover Animated Advertise Here Add Stylish Social Sharing Widget Best Advertise Here Text Blogger Widgets Floating Social Media Widget With Mouse Hover Effect Cool Advertise Here Text with Hover Effect - Blog Widgets

Cool Advertise Here Text with Hover Effect - Blog Widgets Keeping Affiliate and Link Selling in view the Ad which will be placed on your site should be an attractive One.Visitors really like creativity and awesomeness of any thing in Your Web Log,it…

Add Cool Drop Down Menu in Blogger Widget Collection

06:29 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Add Cool Drop Down Menu in Blogger Widget Collection</div>
<div style="text-align: left;">
Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down menu.Actually it is developed by the combination of CSS with HTML . Beautiful Colors combinations are used which makes it more significant drop down menu.Actually , drop down menu makes your blog navigative and easy to expand.This drop down menu is very stylish which means your Blog Beauty will increase by adding this menu.Moreover this menu will not slow your blog loading speed. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3s5eY_uSH7mIHES6dPIF8KkSRYLN5utIFfJcDcPvq-CIQyiJDBQaC30CAfdV_rEtMNaFx6SWcMmBTl5cCDII41ZZT9RPoxUzi6id8qs9vT1wSc__9OUHRoMjtJ70DKNah5VDDquL5Tpc/s1600/drop-down-thatsblogging-menu.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3s5eY_uSH7mIHES6dPIF8KkSRYLN5utIFfJcDcPvq-CIQyiJDBQaC30CAfdV_rEtMNaFx6SWcMmBTl5cCDII41ZZT9RPoxUzi6id8qs9vT1wSc__9OUHRoMjtJ70DKNah5VDDquL5Tpc/s1600/drop-down-thatsblogging-menu.PNG" width="640" /></a></div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="9792744538" style="display: inline-block; height: 90px; width: 120px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
How To Add Cool Drop Down Menu In Blogger 
 
<ul style="text-align: left;">
<li>Go To Blogger Dashboard</li>
<li>Click On Template</li>
<li>Edit HTML</li>
<li>Search For </header></li>
<li>Copy the Below Script and Add it below the Closing Header tag ( </header>)</li>
</ul>
 
 
<div id='menubor'></div><center><ul id='menu'> 
<li><a class='hmlink' href='#'>Home</a></li> 
<li><a class='winlink' href='#'>Blogger Templates</a></li> 
<li><a class='maclink' href='#'>Blogger Widgets</a></li> 
<li><a class='andlink' href='#'>How To Tuts</a></li> 
<li><a class='gamlink' href='#'>Privacy Policy</a></li> 
<li><a class='seclink' href='#'>Guest Post</a></li> 
<li><a class='linlink' href='#'>About</a></li> 
</ul></center> 
<style> 
#menu li {                
 display: inline;                
 list-style: none;                
 padding: 0;            
 }                    
 
 #menu li a {                                  
 padding: 15px 20px 15px 20px;                
 text-decoration: none;                
  color:white; 
  font-family: 'Noto Serif', serif; 
-moz-box-shadow: inset 0 0 13px -2px #000; 
-webkit-box-shadow: inset 0 0 13px -2px #000; 
box-shadow: inset 0 0 13px -2px #000; 
  font-size:18px; 
  -webkit-border-bottom-right-radius: 10px; 
-webkit-border-bottom-left-radius: 10px; 
-moz-border-radius-bottomright: 10px; 
-moz-border-radius-bottomleft: 10px; 
border-bottom-right-radius: 10px; 
border-bottom-left-radius: 10px; 
  transition: padding-bottom .666s; 
-webkit-transition: padding-bottom .666s; 
-moz-transition: padding-bottom .666s; 
-o-transition: padding-bottom .666s; 
-ms-transition: padding-bottom .666s; 
   
   
} 
 #menu li a:hover {                                  
 
  padding-bottom:20px; 
} 
.hmlink{ 
  background:#24459A; 
} 
.winlink{ 
  background-color: rgba(9,173,217,1); 
} 
.maclink{ 
  background-color: rgba(108,109,112,1); 
} 
  .weblink{ 
    background:#EEEE00; 
    color:black; 
  } 
.andlink{ 
  background-color: rgba(149,191,43,1); 
} 
.gamlink{ 
  background-color: rgba(212,2,43,1); 
} 
.seclink{ 
  background-color: rgba(0,158,62,1); 
} 
.linlink{ 
  background-color: rgb(123, 82, 138); 
} 
#menubor{ 
  border-top:1px solid black; 
  margin-bottom:-1px; 
} 
  .header-outer{ 
    padding-bottom:20px; 
  } 
</style> 
 
Changes 
 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ul style="text-align: left;">
<li>For Changing the Links Replace # with your Own Links and the Anchor text with your desired text</li>
<li>That's it , Save Your template and have fun !</li>
<li>If you are interested in adding extra <li> options for that add  <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.</li>
<li>After implementing the above step ,  you have to define the class in CSS for that define the class between the style container and hit save.</li>
<li>If you have any Question ask it freely !! Stay Blessed , Happy Blogging !</li>
</ul>
 
</div>

Add Dropdown Menus to Blogger Blogger Drop Down Menu tips Blogger Tricks Blogger Widgets Create a Drop Down Menu In Blogger How to add Menu Bars to Blogger Add Cool Drop Down Menu in Blogger Widget Collection

Add Cool Drop Down Menu in Blogger Widget Collection Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down men…

Arrow Key Navigation for Blogger widget

22:09 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Arrow Key Navigation for Blogger widget</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZ2ionbLEer0_j0UQJVOl85hJWa4YGB35rhh9o_OPQax_eFASSI0Mw0tzk2jgxeKyTFIfyo25AZqdjb2XgaaEV3dIi1s6OZQTFR1cZqp1KJpZjY2ZeWz1MmP2DH6eXZvchjmvB_9OMHSR/s1600/arrow-key-navigation-blogger%5B3%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZ2ionbLEer0_j0UQJVOl85hJWa4YGB35rhh9o_OPQax_eFASSI0Mw0tzk2jgxeKyTFIfyo25AZqdjb2XgaaEV3dIi1s6OZQTFR1cZqp1KJpZjY2ZeWz1MmP2DH6eXZvchjmvB_9OMHSR/s1600/arrow-key-navigation-blogger%5B3%5D.png" width="400" /></a></div>
<div style="text-align: center;">
 </div>
Navigating through a website using the keyboard arrow keys is really useful as you don't have to look around the page for the Newer or Older page links. You might have already seen this feature on many top blogs.It’s really easy to implement this feature on your Blogger Blog.You just have to add the arrow key navigation widget to your blogger blog. 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

This is a really simple and clean widget and you can see a demo of this widget right on this page. If you use the Right and Left arrow keys, you will be able to navigate to different pages on this blog. This works not just on the post pages, but also on the blog’s home page and label pages.The Arrow Key Navigation Widget will be disabled when you are typing something into a text box on the blog(This was done to avoid the page from being changed when the user is typing something into a text box and uses the arrow keys to move around this text.). 
 
Why should I add this widget 
 
This is a simple light weight widget which doesn’t depend on any external libraries and it’s really easy to install as well. It will give users a better experience when they are navigating across different pages of your blog.They won't have to scroll all the way down to the bottom of the page and look for the Older and Newer page links. 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-format="auto" data-ad-slot="6504860932" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
How to add this Widget 
 
You can add this widget by using the below one click installer. 
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<input name="go" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" value="Add Arrow Key Navigation Widget" /></div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Add the widget to your sidebar or footer and the Arrow Key Navigation will be activated on your Blog.The Widget title won’t appear on your Blog. So you can give it any appropriate name which will help you in identifying the widget on the layout page.</div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
How to let readers know of this Widget</div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
You might want to add some text to your blog which suggests that your Blog can be traversed using the keyboard arrow keys.Something message similar to “Use the Left or Right Arrow keys to navigate through this blog” might help.</div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
How to Remove the Widget</div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
If you want to remove this widget at any time, you can do that by removing the Arrow Page Navigation Widget from the Layout page.</div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
How this works</div>
<div style="background-color: white; border: 0px; font-stretch: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
If you are curious about how this works, then below is the actual code behind the widget. The code listens for Keyboard inputs and if detects an Arrow Key event, it will redirect the user to the newer or older page. The code picks the newer and older page links from the Blogger’s Page Navigation Links.</div>
<pre class="code" style="background: rgb(238, 238, 238); border: 2px solid rgb(231, 231, 231); color: #333333; font-size: small; font-stretch: inherit; line-height: 25px; margin-bottom: 10px; margin-top: 10px; overflow: auto; padding: 5px 10px; vertical-align: baseline;"><script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script></pre>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Please share your thoughts queries or suggestions :-) and if you need further help do let us know.</div>
</div>

Arrow Key Navigation for Blogger widget Best Blog Widgets For Free Blogger Widgets How to add Arrow Key Navigation How to Add Keyboard Navigation in Your Blogger top widget for blogger Arrow Key Navigation for Blogger widget

Arrow Key Navigation for Blogger widget Navigating through a website using the keyboard arrow keys is really useful as you don't have to look around the page for the Newer or Older page links. You might have already seen this feature on many top blo…

Blogger popup - Facebook popup with twitter follow button

21:52 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Blogger popup - Facebook popup with twitter follow button</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sFQAJXyXYGuuaZvL-VuRN1rv7cdWXZKjccVENP7Timk6H5miN6dGuuVmoZ1yPue_1LIoy_N6Jy9X9eRQcwYZbgaBa-_RXLVt3IEMfcQJ56K0wimy7n732saijbW4aNsJ9ztLGiBJy7ME/s1600/popup+like+box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sFQAJXyXYGuuaZvL-VuRN1rv7cdWXZKjccVENP7Timk6H5miN6dGuuVmoZ1yPue_1LIoy_N6Jy9X9eRQcwYZbgaBa-_RXLVt3IEMfcQJ56K0wimy7n732saijbW4aNsJ9ztLGiBJy7ME/s1600/popup+like+box.png" width="400" /></a></div>
Do you want to make more twitter followers, facebook likes & Email Subscribers? Then don't worry you don't need to install any popup windows and floating widget to your blog to get likes and flowers, here is a simple popup box which allows visitors to like with three option Email Subscription, Facebook like button & Twitter follower button in only one popup box. 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="7224714538" style="display: inline-block; height: 280px; width: 336px;"></ins> 
 
This popup widget was created with jquery & css, there is no close button and not timer. If any visitor want to close this popup just press ESC button on Keyboard or click anywhere on the page. 
 
<a href="http://www.tonzer-template.blogspot.com/" target="_blank">DEMO</a> 
 
 
The jquery call the popup when the page is load and it is very fast and quick, we have share a previous Facebook Popup like box, but there is only one option that is only facebook like button installed in that popup but now in this Simple popup box you will find three options that are Email Subscription form, Facebook like button & twitter follower button. The popup is easy to install to any blogger blog template no need to go to template, just copy and paste the code in html element. 
Installation Popup To Blogger 
Go to Layout 
Add Element > Html/Javascript 
Paste the code and save it 
 
Popup Subscription Box Code 
 
 
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="https://sites.google.com/site/blogtrickscenter.blogspot.in/Subscription-cbox.js"></script> 
 
<style> 
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 
    #cboxOverlay{position:fixed; width:100%; height:100%;} 
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;} 
    #cboxContent{position:relative;} 
    #cboxLoadedContent{overflow:auto;} 
    #cboxTitle{margin:0;} 
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} 
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 
    .cboxPhoto{float:left; margin:auto; border:0; display:block;} 
    .cboxIframe{width:100%; height:100%; display:block; border:0;} 
    #cboxOverlay{background:#000;opacity:0.5 !important;} 
    #colorbox{} 
          
 
#cboxLoadingOverlay{background:#fff;} 
          
 
#cboxLoadingGraphic{background:#fff;} 
           #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%;  font-weight:bold; color:#7C7C7C;} 
           #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} 
           #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; 
 
background:#fff; width:23px; height:23px; text-indent:-9999px;} 
           #cboxPrevious{left:0px; background-position: -51px -25px;} 
           #cboxPrevious.hover{background-position:-51px 0px;} 
           #cboxNext{left:27px; background-position:-75px -25px;} 
           #cboxNext.hover{background-position:-75px 0px;} 
           #cboxClose{right:0; background-position:-100px -25px;} 
           #cboxClose.hover{background-position:-100px 0px;} 
           .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} 
           .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} 
           .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} 
           .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} 
    /*-----------------------------------------------------------------------------------*/ 
    /*   sUBCRIPTION POPUP LIKEBOX FOR BLOGGER BY http://blogtrickscenter.blogspot.in/ <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-8616135883183169"
 data-ad-slot="6504860932"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
    /*-----------------------------------------------------------------------------------*/ 
    #mmk-subfb { 
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; 
width:540px; 
height:210px; 
box-shadow: inset 0px 0px 0px #404040; 
-webkit-box-shadow: inset 0px 0px 0px 0px #cccccc; 
-moz-box-shadow: inset 0px 0px 0px #cccccc; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
    } 
    #mmk-subfb a, 
    #mmk-subfb a:hover, 
    #mmk-subfb a:visited { 
        text-decoration:none; 
    } 
    .mdbox-title { 
background:#000; 
       color: #fff; 
 
       font-size: 20px !important; 
       font-weight: bold; 
       margin: 10px 0; 
    border:20px solid #ddd; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    box-shadow: 5px 5px 5px #CCCCCC; 
    padding:10px; 
    line-height:25px; font-family:arial !important; 
    } 
    .mdbox-tagline { 
       color: #999; 
       margin: 0; 
       text-align: center; 
    } 
    #mdsubs-container { 
        padding: 35px 0 30px 0; 
        position: relative; 
    } 
    a:link, a:visited { 
    border:none; 
    } 
    .demo { 
    display:none; 
    } 
 
.mmk-subemail{ 
background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvAlyBvgMVdMob5_Y9qCXvO-EnyMeiBH8gAVnpgi56s20zfsPG4Mv7zVfL2XFAdRD6Tvl0NoWR8FPkFrY5YdJTRc88E_KyzRzA6x7uTmu3ZFjGkqhDK-YIyCIVa6yOvYyTN3P_sRXGBr_/s1600/email.png) no-repeat 0px 12px ; 
width:300px; 
padding:10px 0 0 55px; 
float:center; 
font-size:1.4em; 
font-weight:bold; 
margin:0 0 10px 0; 
color:#686B6C; 
} 
.mmk-subemailsubmit{ 
background:#9B9895; 
cursor:pointer; 
color:#fff; 
border:none; 
padding:3px; 
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25); 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
font:12px sans-serif; 
} 
.mmk-subemailsubmit:hover{ 
background:#E98313; 
} 
.textarea{ 
padding:2px; 
margin:6px 2px 6px 2px; 
background:#f9f9f9; 
border:1px solid #ccc; 
resize:none; 
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); 
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); 
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px; 
width:170px; 
color:#666;} 
</style> 
 
 
<script type="text/javascript"> 
jQueryundefineddocument).readyundefinedfunctionundefined){ 
if undefineddocument.cookie.indexOfundefined'visited=flase') == -1) { 
var fifteenDays = 1000*60*60*24*30; 
var expires = new Dateundefinedundefinednew Dateundefined)).valueOfundefined) + fifteenDays); 
document.cookie = "visited=true;expires=" + expires.toUTCStringundefined); 
$.colorboxundefined{width:"600px", inline:true, href:"#mmk-subfb"}); 
} 
}); 
</script> 
<div style='display:none'> 
<div id='mmk-subfb' style='padding:10px; background:#f9f9f9;'> 
<center> 
Get Latest Updates Straight in your Inbox 
    by submitting your Email ID below. 
<div class="mmk-subemail"> 
Subscribe via Email 
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open undefined'http://feedburner.google.com/fb/a/mailverify?uri=qlgrr', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /> 
<input type="hidden" value="Blogspot/qlGrR" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input class="mmk-subemailsubmit" value="Submit" type="submit" /> 
</form> 
</div><div style='clear:both'></div> 
<div align="center"> 
<div style="border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;"></div> 
<div style='margin:5px 0px 50px 0px; padding:10px; float:none; width:470px;'> 
<div style='margin:0px 0px 0px 0px; padding:0px; float:left; width:252px; border-right:1px solid #ddd;'> 
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMy-Blogger-Trick%2F215750558457824&width=292&colorscheme=light&show_faces=false&border_color&stream=false&header=false&height=62' style='border:none; overflow:hidden; width:292px; height:62px;'></iframe> 
</div> 
<div style='margin:10px 30px 0px 0px; padding:0px; float:right; width:150px;'> 
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/mybloggertrick' rel='nofollow'></a> 
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> 
</div></div> 
<a style="padding:13px 5px 0px 5px; color:#A7A7A7; font-family:arial; font-size:10px; text-decoration:none; float:right;"  target="_blank"href="http://blogtrickscenter.blogspot.in/2013/04/facebook-popup-with-twitter-follow.html" target="_blank" rel="dofollow">Get This</a> 
</div></div> 
  <div style='clear:both'></div> 
</center> 
</div></div> 
<style>#cboxClose{display:none;}</style> 
 
 
Customization 
 
To change width of this popup Replace this width:540px; 
To change Background Replace this #f9f9f9 try our Html Color Generator 
 
Email Subscription  
 
Replace (http://feedburner.google.com/fb/a/mailverify?uri=qlgrr) with your feedburner link 
Replace Blogspot/qlGrR with your feedburner code. 
 
Facebook Like Button 
 
Replace (http%3A%2F%2Fwww.facebook.com%2Fpages%2FMy-Blogger-Trick%2F215750558457824)with your facebook like button link. this link you can find in facebook like box. 
 
Twitter follower button 
 
Replace mybloggertrick with your twitter user name 
 
 
 
Note: All work are copyrighted to his owner please do not remove our Credit link. 
<div>
 </div>
<div>
 </div>
</div>

add twitter follow button to blogger Add Twitter Popup Follower Box To Blogger Blogger Facebook popup Blogger Widgets Facebook popup Blogger popup Facebook popup with twitter follow button Blogger popup - Facebook popup with twitter follow button

Blogger popup - Facebook popup with twitter follow button Do you want to make more twitter followers, facebook likes & Email Subscribers? Then don't worry you don't need to install any popup windows and floating widget to your blog to get likes and …

Multi colored random posts Widget for Blogger

05:12 Dinesh Soni 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
Multi colored random posts Widget for Blogger </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-1AEsocz0kE6rvmk6SLPyoBIHo92kXVoX4UCDtOKnxYB2duwZnpl6paR-aYd0Y_kncoIIDhw81k_xjRDAh3IVEap_5LRvYib5KjXarIf0vq6K87SaI8JkFEwC9Nf8FtZ1AYWIegfTGTz/s1600/1G0vbXl.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-1AEsocz0kE6rvmk6SLPyoBIHo92kXVoX4UCDtOKnxYB2duwZnpl6paR-aYd0Y_kncoIIDhw81k_xjRDAh3IVEap_5LRvYib5KjXarIf0vq6K87SaI8JkFEwC9Nf8FtZ1AYWIegfTGTz/s1600/1G0vbXl.gif" width="351" /></a></div>
<div style="text-align: center;">
 </div>
Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Its let your users to spend more time in your Blog. Surely it increases your Blog's internal links that lets your blog higher traffic.This is the modified version of the Random posts widget we posted earlier, one of our visitor "Yogesh Gamer" asked me to make this widget like Multi colored Popular posts Widget. So after that I just tried and it got success. Please do check this widget and comment your suggestions... 
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-format="auto" data-ad-slot="6504860932" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<div style="text-align: center;">
Features of This Widget</div>
<div style="text-align: center;">
 Flat UI colors used (it will attract users attention)</div>
<div style="text-align: center;">
Automatic Post Numbering</div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
Sign In to Blogger Dashboard</div>
<div style="text-align: center;">
Go to Layout</div>
<div style="text-align: center;">
Click on Add Gadget and look for HTML/Javascript and select it</div>
<div style="text-align: center;">
Copy the below code inside it and click save</div>
<div style="text-align: center;">
 </div>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-8616135883183169" data-ad-slot="6839278135" style="display: inline-block; height: 90px; width: 728px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style type="text/css"> 
.noop-random-posts ul li { 
    list-style-image:none; 
}.noop-random-posts ul { 
list-style-type: none; 
margin: 0; 
padding: 5px 0; 
} 
.noop-random-posts ul li { 
border: 0 none; 
margin: 5px 0; 
padding: 10px; 
position: relative; 
} 
.noop-random-posts ul li:first-child { 
background: none repeat scroll 0 0 #FF4C54; 
width: 97%; 
} 
.noop-random-posts ul li:first-child:after { 
content: "1"; 
} 
.noop-random-posts ul li:first-child + li { 
background: none repeat scroll 0 0 #FF764C; 
width: 87%; 
} 
.noop-random-posts ul li:first-child + li:after { 
content: "2"; 
} 
.noop-random-posts ul li:first-child + li + li { 
background: none repeat scroll 0 0 #FFDE4C; 
width: 84%; 
} 
.noop-random-posts ul li:first-child + li + li:after { 
content: "3"; 
} 
.noop-random-posts ul li:first-child + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 81%; 
} 
.noop-random-posts ul li:first-child + li + li + li:after { 
content: "4"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li { 
background: none repeat scroll 0 0 #33C9F7; 
width: 78%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li:after { 
content: "5"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li { 
background: none repeat scroll 0 0 #7EE3C7; 
width: 75%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li:after { 
content: "6"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F6993D; 
width: 72%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after { 
content: "7"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #F59095; 
width: 69%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after { 
content: "8"; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li { 
background: none repeat scroll 0 0 #C7F25F; 
width: 66%; 
} 
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after { 
content: "9"; 
} 
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after { 
background: none repeat scroll 0 0 #353535; 
border-radius: 50% 50% 50% 50%; 
color: #FFFFFF; 
font-size: 25px; 
height: 30px; 
position: absolute; 
right: -17px; 
text-align: center; 
top: 1px; 
width: 30px; 
} 
.noop-random-posts ul li a { 
color: #444444; 
font-size: 13px; 
text-decoration: none; 
} 
</style> 
<div class="noop-random-posts"><script type="text/javascript"> 
    var randarray = new Array();var l=0;var flag; 
    var numofpost=5;function nooprandomposts(json){ 
    var total = parseInt(json.feed.openSearch$totalResults.$t,10); 
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} 
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); 
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; 
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; 
    document.write(item);}} 
    }document.write('</ul>');} 
    </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a> 
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div></div>

Blogger Design Blogger Security Blogger Special Tricks Blogger Tips Blogger Tricks Blogger Widgets Blogging Basic Tips blogging tricks CSS3 Increase traffic Style your Blog Template Tricks Multi colored random posts Widget for Blogger

Multi colored random posts Widget for Blogger Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, Most important feature of this widget is it lets your Blog visitors to surf more blog posts…