Skip to main content

Auto Scrolling Recent Posts Widget For Blogger / Blogspot

Image
By
Auto Scrolling Recent Posts


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 Widget

Adding 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/AVvXsEjz9mg-fGkYb0hz-qg7BfZ6sM1DmVwDD29r81asjEVOYvQjNgutPEzjLB0sYVIft-L2lymSL11Ohu8m1ISNs-ga9rnnQYt2-NyEx24wWifsCU7Zfqh5YWCpyLQKkvvypEvW-KyENBNhBPFC/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  

ScrollAmount: (0 = No Scroll)
ScrollDelay: (0 = MaxScrollSpeed)

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' ?



  1. Customize Options in Given Widget Generator Form
  2. Click on Generate Button
  3. Click Preview** Button to see your widget Preview
  4. Finally Click Add to Blogger Button to add this widget on Your blog
**Note:- After changing any values, First Click Generate Button and then See Your Preview
 Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size 











Automatic scrolling Recent posts widget will give scrolling of post titles with links


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&amp;callback=RecentPostsScrollerv2&amp;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 blogger

1. Go to Blogger
2. Login to your Blogger dashboard
2. 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.

Add marquee notification bar to blogger





<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


Labels:

Comments

Post a Comment

Popular posts from this blog

How to unhide or show folders in mx player list

By Unknown
In this blog post, I tell you about how to Show or Hide folders from MX player list. There are two methods to Show folder from MX Player list. Method 1: Unhide / show folders If you want to temporarily Show / Unhide hidden folder from MX Player list, then go to Settings and untick Recognize .nomedia ".  Method 2: Permanently unhide / show folder: Open memory by any file explorer and I recommend X-Plore, and open the folder that is Hidden and find the file " .nomedia ". If you didn't find it, you should first enable "Show files hidden files that starts with .(dot)". Delete the file and you just need to refresh MX Player list to take changes. Note: MX Player always hide those folders which file " .nomedia " exists.
1 comment
Read more

Build the smart office of tomorrow with these gadgets

By
The notion of a smart home is one that has been gradually catching on and gaining momentum. Using home automation, you can create an environment in your home that is more comfortable, more aesthetic, and even more energy-efficient. Nowhere does this make more sense than in a “smart office.” In business, making small changes to processes and routines can potentially shave a huge amount of wasted time off your days and weeks. Plus, you get to feel like Tony Stark! Now more of us are working from home , creating a smart office that automatically adapts to our needs can help us to complete more work more quickly, and be left with more time at the end of the day to spend with our families. Plus, you get to feel like Tony Stark! Read on then, and we’ll explore how to create the perfect “smart office.” Smart office gadgets and features Smart display: Echo Show Smart displays include the likes of the Echo Show or a Google Home . These give you access to a virtual assistant wit...
Post a Comment
Read more

How to use a web API from your Android app

By
Credit: Adam Sinicki / Android Authority A Web API is an online “application programming interface” that allows developers to interact with external services. These are the commands that the developer of the service has determined will be used to access certain features of their program. It is referred to as an interface because a good API should have commands that make it intuitive to interact with. An example of this might be if we want to get information about a user from their social media account. That social media platform would likely have a web API for developers to use in order to request that data. Other commonly used APIs handle things like advertising ( AdMob ), machine learning ( ML Kit ), and cloud storage. It’s easy to see how interacting with these types of services could extend the functionality of an app. In fact, the vast majority of successful apps on the Play Store will use at least one web API! In this post, we’ll explore how to use a web API from withi...
Post a Comment
Read more