Sticky Bar with Auto Recent Post for blogger with Marquee Feature

Leave a Comment

Another Sticky Bar Section for Blogger and Web site. 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 Demo first !

How to Add Sticky Bar with Auto Recent Post for blogger with Marquee Feature :
  • Go to Blogger.
  • Then Layout >> Add a Gadget >> Add HTML/javaScript widget.
  • Now copy and paste the code below in your widget box.

<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('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/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://www.coderdesire.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script> <noscript><a href="http://www.coderdesire.com/2012/11/sticky-bar-with-auto-recent-post-for.html">+ Grab this Widget</a></noscript><a href="#" id="mdclose"  onclick="return false;"><img src="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a></div id='md-stickybar'>
  • Save and you are Done !

Customization:
  1. Replace this feed http://www.coderdesire.com/feeds/posts/default url with your feed Url.
  2. You can change your background:#000000 backround color which suit your design.

0 comments:

Post a Comment