When people visit your blog it is important to keep them there for as long as possible, the longer someone is on your blog the more likely they will be to return and subscribe or follower.Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy.There are lots of recent posts gadgets and archive gadgets you can use but the one we will cover in this post will defiantly grab the attention of people on your blog.
In this post I want to share a nice stylish blogger post bar with auto scrolling that contain recent or latest post titles from your blog rss,the Widget appears anywhere on your blog either on page or post or template and I have also included a close button, May be not every visitor enjoys viewing that this bar on your page, so they deserve to be provided with an option to view or hide the bar,and it is Simply Awesome.
This recent posts widget is similar to the standard recent posts with text only but with one great twist.This gadget displays your most recent posts title with there link only that also smoothly scrolls through the posts.
Features:
1.) Simple And Stylish Widget.
2.) Short Code With A JavaScript File.
3.) Quick To Load And Easy To Install.
4.) No JQuery Code Or File Added.
5.) Info Text Also Added.
6.) Close Button Also Added.
7.) JavaScript File Is Hosted On GitHub, The Powerful Servers.
8.) You Can Customize A Lot Of Function Directly From Your Blog.
9.) Can Be Move In A DIV And Later You Can Add Extra CSS To It.
10.) All Post Title Will Scroll Smothly And Is Controllable.
11.) Increase Your Blog Pageviews.
12.) Decrease Your Bounce Rate.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <body> Code.
7.) Now Copy The Below Code And Paste It Before </body> Code..
8.) Click “Save Template” And Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Create A “New Post” Or “Edit” Some One Existing.
4.) Click “Edit HTML” Tab In The Post Editor.
5.) Now Copy The Below Code And Paste It There
8.) Click “Publish” Or “Update” To Done.
<div style="width:1007px;height:20px;position:relative;">
<script type="text/javascript">
var blog_url = "https://www.exeideas.com";
var latest_post = 10;
var background_color = "#E4E4E4";
var border_color = "#444444";
var scrolling_speed = "8";
var close_button = false;
var info_text = true;
</script>
<script src="https://raw.github.com/EXEIdeas/JS/master/Recent-Latest-Post-Scroll-Bar"></script>
</div>
<div style='clear:both;'/>
Customization:
1.) Change https://www.exeideas.com With Your Blog URL.
2.) Change 10 With Your Desire Latest Posts Count.
3.) Change #E4E4E4 With Your Desired Background Colour.
4.) Change #444444 With Your Desired Background Colour Desire.
5.) Change 8 With Your Desired Count To Change Speed.
6.) Change false With true To Show Close Button.
7.) Change true With false To Hide Info.
8.) Change “width:1007px;height:20px;position:relative;” With Your Desired CSS.
9.) Save And Done.
Great post! thanks for sharing its very useful to us. Keep your good work doing
Thanks For Liking And Visiting Our Blog…
A lot of great changes of my site due to your post.. Thanks a lot hope there’s more to come..
Thanks For Liking Our Widget And Using It On Your Blog, Be With Us To Get More Like This…
Nice and helpful post. Looking forward to more of such helpful posts coming from you.
Welcome Here And Thanks For Liking It, Be With Us To Get More Like This…
Hassan ,I have a problem in installing this notification bar in my blog http://hackersmeet.blogspot.com …it’s appearing in footer section than in header section what should i do now?
Because You Add This On Bottom, Just Before Body End Tag, Ad It To Above In Your Template…