Friday, April 20, 2012

Add Sticky bar With Auto Scrolling Recent Post Widget To Blogger


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


View 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('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://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="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/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

    0 comments:

    Click Here To add Comment