30.4.12

How to Add Stylish Sticky Bar With Scrolling Recent Posts in Blogger

Hai Friends today iam back again to Share An Awesome trick.Well this post is about How to add Awesome stylish Sticky Bar with Scrolling Recent posts To blogger.Well the Widget appears on the top of your Blog page and it is Simply Awesome.




HOW TO ADD STYLISH STICKY BAR WITH SCROLLING RECENT POSTS IN BLOGGER



HOW TO MAKE STYLISH STICKY BAR WITH SCROLLING RECENT POSTS FOR BLOGGER

    • Go to Blogger Dashboard --> Design --> Edit HTML
    • Backup your Template before making any changes to your blog
    • Now  Expand Widget Templates
    • Find the code shown below using [ctrl+F]
    • ]]></b:skin>
  • Replace the above code with the code shown below :.



#latesthack-stickybar{background:#000000 url('http://1.bp.blogspot.com/-vVMsayzZX_M/T090HEfvMbI/AAAAAAAAASc/gRz_q3K2Spo/s1600/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;}
#latesthack-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}
#latesthack-stickybar a:hover{text-decoration:underline;}
#latesthack-stickybar p{margin:0;list-style:none;}
#latesthack-stickybar img{vertical-align:middle;margin-right:6px;}
#latesthackclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}
]]>



Now find the code <body>  using Ctrl+F


Now Paste the following code after/below <body>


<div id='latesthack-stickybar'>

<script>

var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 100;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";

</script>

<script src="http://technouniversityworld.blogspot.in/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " >

</script>

<a href="#" id="latesthackclose" onclick="return false;">

<img src="http://4.bp.blogspot.com/-r2L8wiEO5YI/T093iVHY3MI/AAAAAAAAASk/fJKxxkIiPkE/s1600/cancel.png"/>

</a>

</div>


Now save your template

CUSTOMIZATION TO THE WIDGET


  • Replace My Blog url with your blog url
  • 10 is the No of posts you want to display
  • left is the direction of moving post title you can change it to right
  • 100 is the speed of moving post titles you can set it according to your need
  • For N the links will open in new window . If you want that the links open in same window then replace it with Y
  • >> is the bullet charector you can change it as you want
  • F40045 is the color of the bullet charestor
  • 000000 is the background color of the sticky bar
  • FFFFFF is the color of the links

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger