Add Sticky bar With Auto Scrolling Recent Post Widget To Blogger

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

This sticky bar with auto scrolling recent post widget is no so impressive on blogger. I am just sharing it. I have provided a demo for you. You may like this. You have to place the widget at the header, if there is an option to your template because This widget does not get placed at sticky position itself. A sticky bar may irritate your readers. So there is a cancellation button on the widget

View A Demo




Adding On Blogger

Blogger Dasgboard → Design → Add A Widget → Add HTML/Javascript Widget

Now copy and paste the following code in the widget

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="https://rafiblog.googlecode.com/svn/trunk/recensticky.js"></script><script src="https://rafiblog.googlecode.com/svn/trunk/sticky2.js"></script><style>#md-stickybar{background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFYTMyepUveJKUjmsr6FEDKp9Q018z4ABjCbTAI7V7hr46Bb_cCkEnn4opF3ahGfFgJlg_MxUg56mN4gTmheFzSCpyXTBricm2d8ihHT0QiCDd4nX2ZDTkkTYB4bO96lTmbzSbMMlxwc/s400/stickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#md-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#md-stickybar a:hover{text-decoration:underline;}#md-stickybar p{margin:0;list-style:none;}#md-stickybar img{vertical-align:middle;margin-right:6px;}#mdclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style><div id='md-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="http://edutechnet.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script> <noscript><a href="http://www.edutechnology.net/add-sticky-bar-with-auto-scrolling-recent-post-widget-to-blogger/">+ Grab this Widget</a></noscript><a href="#" id="mdclose"  onclick="return false;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZhY8B06XiMYYMdfrGDN3NjN1EbghvaakO5tbJrN810tQj4RZ85xBuGPDQuR1caKaQLvDCDmSlxUauH55jiIDssca8IgOkykYvK5n2hs6bbGzXNvo4Q47L3fBMLc3R8s4D-6d_WvzsaA/s400/cancel.png"/></a></div id='md-stickybar'>

Save the widget and done

you have to change the web address. Want to change the background color ? change the color code 000000. Want to change the Link color ? change the color code FFFFFF. Do you want to show more than 10 article on the widget change the value of 10. You are done.

Enjoyed the post ? You are welcomed to share the article to share with your friends

Tweet

This sticky bar with auto scrolling recent post widget is no so impressive on blogger. I am just sharing it. I have provided a demo for you. You may like this. You have to place the widget at the header, if there is an option to your template because This widget does not get placed at sticky position itself. A sticky bar may irritate your readers. So there is a cancellation button on the widget View A Demo Adding On Blogger Blogger Dasgboard → Design → Add A Widget → Add HTML/Javascript Widget Now copy and paste the following code in the widget <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="https://rafiblog.googlecode.com/svn/trunk/recensticky.js"></script><script src="https://rafiblog.googlecode.com/svn/trunk/sticky2.js"></script><style>#md-stickybar{background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWFYTMyepUveJKUjmsr6FEDKp9Q018z4ABjCbTAI7V7hr46Bb_cCkEnn4opF3ahGfFgJlg_MxUg56mN4gTmheFzSCpyXTBricm2d8ihHT0QiCDd4nX2ZDTkkTYB4bO96lTmbzSbMMlxwc/s400/stickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#md-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#md-stickybar a:hover{text-decoration:underline;}#md-stickybar p{margin:0;list-style:none;}#md-stickybar img{vertical-align:middle;margin-right:6px;}#mdclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style><div id='md-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="http://edutechnet.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script> <noscript><a href="http://www.edutechnology.net/add-sticky-bar-with-auto-scrolling-recent-post-widget-to-blogger/">+ Grab this Widget</a></noscript><a href="#" id="mdclose"  onclick="return false;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZhY8B06XiMYYMdfrGDN3NjN1EbghvaakO5tbJrN810tQj4RZ85xBuGPDQuR1caKaQLvDCDmSlxUauH55jiIDssca8IgOkykYvK5n2hs6bbGzXNvo4Q47L3fBMLc3R8s4D-6d_WvzsaA/s400/cancel.png"/></a></div id='md-stickybar'> Save the widget and done you have to change the web address. Want to change the background color ? change the color code 000000. Want to change the Link color ? change the color code FFFFFF. Do you want to show more than 10 article on the widget change the value of 10. You are done. Enjoyed the post ? You are welcomed to share the article to share with your friends