Add Sticky Bar with scrolling recent posts in blogger

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

How To Make Stylish Sticky Bar with scrolling recent posts for blogger

Go to Blogger Dashboard
Click on DropDown Menu and select Template
Backup your Template before making any changes to your blog
Now Click on Edit HTML --> Proceed --> Expand Widget Templates
Press Ctrl + F and search the code shown below

]]></b:skin>

Replace the above code with the code shown below

#latesthack-stickybar{background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HalUQSVmJi3MvR0rgEuNHIKiLYmPMe3SvRkY4bEfcqCGoncXvQ-gR9HweTZaciWB2cYoC7W8BbK-evq8y2JjV6AlwSrCZ62CMSNiMb3HAQh5WOzNE08lR14PxkdryOzSlkO91NwsBsM/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;}
]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src="http://js.howtouses.com/blogger/latesthackstickybar.js"></script>
<script src="http://js.howtouses.com/blogger/latesthackstickybar1.js"></script>

Now find the code shown below using Ctrl+F

<body>

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://latesthack.com/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/AVvXsEioFQxBVKiWAmjQk5vU9amsUy4folIUcd0_lfY_SUggVu4Uy3JjAxgXJQhASvL4cm1vuBznpYzG55fSHm6m7iFC3_FJ17ESdthTkg9LXc11XpflgvY00zorz7CPxzdOBoJS23eGCpdbmIQ/s1600/cancel.png"/>
</a>
</div>

Now save your template

Customization to the widget

Replace latesthack.com 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 charector
000000 is the background color of the sticky bar
FFFFFF is the color of the links

Like it? Share it.

Click to Add a New Comment

If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
Do NOT add links to the body of your comment as they will not be published.
Only the comments posted in ENGLISH will be approved.
If you have a problem check first the comments , maybe you will find the solution there.

19 comments

Sanjay

15 March 2012 at 00:21

what I was looking for soon I will try
Thanks

Murusawa-tech

8 May 2012 at 05:06

why the code not work in my template? no background colour and i can't setting a style colour of the text.

Unknown

8 May 2012 at 05:18 Author

@Murusawa Gilang SaputraYou have done something wrong with the widget

9 May 2012 at 07:46 Author

i have problem the 1 part of code ask me to close this tags
And this >>> The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.

How to solve this?

9 May 2012 at 08:24 Author

@Live_CyberDreamsPTYou have done something wrong with the widget. Try again with more attention.

dude pls forget it, i did sh1t 1st step lol bt fix it, thks for ur post :)

Anonymous

28 May 2012 at 22:25

Can you please tell me what it's called.. where on your right side, the Facebook, Twitter, and Google + picture.. when you click it it expands..

Can you tell me what it's called or if you have a link how to do it, that'd be great. Also wondering if that can be done on top instead of a stickey bar.

29 May 2012 at 04:24 Author

@Anonymous Go here http://www.latesthack.com/2012/04/how-to-add-3-in-1-floatingsliding.html to add that widget

Ritesh Oza

21 June 2012 at 22:50

Hi Sonu....

I was searching this widget for a long time..... Thank you very much !!
I want to ask you one question for my blog http://techguru2012.blogspot.com...

I want to replace ">>" with my favicon of blog. Please help me.

I am waiting for your reply.....

21 June 2012 at 23:01

Sonu...

In my blog http://techguru2012.blogspot.in when i am applying this.... My menu Script does not work... Please give me solution as soon as possible.....

Thanks...

22 June 2012 at 00:37 Author

@Ritesh Oza Replace >> with <img src='YOUR FAVICON URL'/>

22 June 2012 at 00:39 Author

@Ritesh Oza Send me your template

24 June 2012 at 20:51

@sonu

Didn't you received my mail ?

24 June 2012 at 23:46 Author

@Ritesh Oza Fixed and sent back to you

Ajinkya kambe

16 August 2012 at 07:20

thanks for this hack

6 October 2012 at 23:54

problem with second step step :O
it is like there is something written after body also, tag isn't closed with body
body expr:class='"loading" + data:blog.mobileClass'

6 October 2012 at 23:57

ok i've done that, it is showing posts from, i don't know whose blog...

7 October 2012 at 00:00

thanks, i'm done

20 April 2013 at 03:24

Thanks i've done very nice post by u..
Plz Help Me How to remove this word -> "Grab This Widget" from Sticky bar..