5:39 PM
TestLab
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJUxoUxSYhaoao_m0PmM98NmGUde2vW1Fb1gC7zXEpLXyttmp5-uEKrMOnYw3FlJ_2_FKtYPkQcRJFw3MtEOCkCC0cmFYpJqLD4zllGrfea_SY6f_2WOP3fOAjMa3_o2ZpIoccKvJ46g/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;}
]]>
#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&callback=RecentPostsScrollerv2&max-results=10 " >
</script>
<a href="#" id="latesthackclose" onclick="return false;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiR5FZmU54LutmhAVIBT6DY4AJrz2989xzbFmN0cO1MO-Ixl1NcsdzF6-L3KRWQQVMjFyKtKqFgkV6aduWMM9VWJEGHFjwa0AhY8HNNhqVD6owVdhePTKA79fqHGTkrU7V7OrFuHdHdBQ/s1600/cancel.png"/>
</a>
</div>
Now save your template <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&callback=RecentPostsScrollerv2&max-results=10 " >
</script>
<a href="#" id="latesthackclose" onclick="return false;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiR5FZmU54LutmhAVIBT6DY4AJrz2989xzbFmN0cO1MO-Ixl1NcsdzF6-L3KRWQQVMjFyKtKqFgkV6aduWMM9VWJEGHFjwa0AhY8HNNhqVD6owVdhePTKA79fqHGTkrU7V7OrFuHdHdBQ/s1600/cancel.png"/>
</a>
</div>
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
