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

5 tips to Voice Speech Recognition in Android Marshmallow

By Unknown
Android Marshmallow landed on our Android devices. The opportunity for us to offer a small compilation of tricks to try immediately. The latest version of the Google OS starts (very gently, unhurriedly) to be offered on other devices as Nexus. You will find on Android TM, in the coming weeks, a compilation of the best tips for Android 6.0 Marshmallow. It starts slowly with a video featuring the 10 essential tips & tricks of this new version of the little green robot OS. To continue, we offer a selection of five "tricks" on the management of the battery on Android 6.0 Marshmallow. To enjoy longer your newly updated mobile. Follow the guide. then continue with 5 tips to tame the super-assistant Google Now on Tap. Here you will find 5 "tips" to manage in the best way your applications. We then discuss the quick tips to navigate more easily on this version of the Google OS. We enchanters with features focused on safety and the protection of personal data. We co...
Post a Comment
Read more

Energy Android TV Play turns your TV into a Smart TV

By
ENERGY SISTEM Android Energy TV Play, you have a smart TV with Android operating system allows you to convert any traditional TV has announced the launch of a new product. Energy Android TV Play can be connected to the TV to enjoy f the size of a flash drive, a smart phone, a tablet and a computer unconsolidated is a lightweight device. System 1.6 GHz, DDR3 1GB of RAM and a dual-core processor can be expanded using external USB devices, which is the internal memory of 8 GB. It also integrates WiFi and a USB port for connecting external devices. One of its outstanding features, it is easily connected to the TV screen by screen cast application to display the contents of any terminal, making any phone or tablet is synchronized with iOS or Android. All ENERGY SISTEM products one click In addition, through streaming media service applications, images, video or other multimedia content, and game play is the ability to share. With integrated WiFi, the device you want from t...
Post a Comment
Read more

How to run Python apps on any platform

By
Credit: Adam Sinicki / Android Authority Want to know how to run Python? It sounds simple, but it can actually be tricky to figure this out. In this post, we’ll discuss how to test your Python code, as well as how to run Python in other contexts: online for example, or as a packaged app. Sometimes, the thing holding you back from learning to code can be extremely simple. I remember wanting to learn to program when I was younger – or learning to take what I’d learned from BASIC on the ZX Spectrum and apply that to a modern environment. My problem? I didn’t know “where” to program. Once I understood C# or Java, where would I enter the code and how would I run it? And whenever I asked someone, they would look at me blankly. What kind of a question is that? Thing is, I had never needed an IDE or an interpreter before. Machines like the ZX Spectrum and Tatung Einstein (any other Einstein users out there?) simply booted up with a prompt to code into! Many people have a similar iss...
Post a Comment
Read more