If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:
How to Install Auto Scrolling Recent Posts WidgetAdding The Widget To Blogger
Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget
Copy the following code and paste inside an HTML/JavaScript widget
<script type='text/javascript'>
var jnWidth="100";
var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp8PZ9x4U8kkQFtgOB1v1Zr5QRrIr0AJgdPfF8ftBpi9Z_2y-s0bNZZZUNxcRTyOGvnvVe73F7fN4zbqEOXDAGQ6gJU01j6L6DKZXLBWWN8m4U_2a-e51hPb5LgxeGW1PNA4vqaQArbU0S/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/scrolling-recent-v3-ycode.js' ></script>
<script type='text/javascript' src="
http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>
Now Replace the
http://bdlab.blogspot.com with your blog Url.
And now click
Save Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size You can only modify the code with
red color (variables) according to your requirements, for ex. in case of "
var w2bScrollDelay", lower the number, higher the speed.
How to Install This Widget On 'Blogger' ?- Customize Options in Given Widget Generator Form
- Click on Generate Button
- Click Preview** Button to see your widget Preview
- Finally Click Add to Blogger Button to add this widget on Your blog
Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size This widget has automated MARQUEE Effect will result scrolling titles
<script type='text/javascript'>
var nMaxPosts = 10;
var nWidth = 100;
var nScrollDelay = 175;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/recentpostsscrollerv2-ycode.js' ></script>
<script type="text/javascript" src="
http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10 " ></script>
Now Replace the
http://bdlab.blogspot.com with your blog Url.
And now click
Save How To Add This Widget :
1. Customize Bellow form and Click on
Generate button.
2. And Click
Add to Blogger button to add this widget to your blog.
>> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget
Add marquee notification bar to blogger1. Go to Blogger
2. Login to your
Blogger dashboard2. Select Layout option and select
Add a gadget option.
3. Select an
HTML/JavaScript Gadget
5. In the
HTML/JavaScript widget paste following code and save it.
<style>
#wcnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px #444444;
-moz-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}
#wc-movtext
{
text-align:center;
padding:8px;
font-family: Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}
#wc-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#wc-movtext a:hover
{
color:yellow;
text-decoration:none;
}
</style>
<div id='wcnot-cont'>
<div id="wc-movtext">
<marquee behavior='alternate' direction="left"
onmouseover="this.stop();"
onmouseout="this.start();">
<p>
<a href="
http://bit.ly/wmV0kq" target="_blank"><b>
How to change mouse cursor in blogger blog to animated cursors</b></a>
| <a href="
http://bit.ly/x4d7ln" target="_blank"><b>
Numbered Page Navigation For Blogger New Script</b></a>
| <a href="
http://bit.ly/vGLd4R" target="_blank"><b>
Animated Recent posts for Blogger with Thumbnails - Simple Spy</b></a>
| <a href="
http://bit.ly/xqQlgS" target="_blank"><b>
17+ Featured Content Slider for Blogger Using jQuery</b></a>
</p>
</marquee>
</div>
<div>
Note: In the following code replace
Green color code with your post titles and
Red color code with links to these posts.
Many thanks to Harish for making this code and I just tested and modified to work on blogger