Pages

Wednesday, November 11, 2015

Auto Scrolling Recent Posts Widget For Blogger

 Auto scrolling recent posts widget for blogger blogs is one of the must have widgets for blogger. When placed in the right location, it brings about an increase in the blog's pageviews. It's auto scrolling effect is enough to easily get your readers attention on the most recent post on your blog. Other than increasing the blog's pageviews and bringing better chances of have the ads clicked, it can also reduce the blog's bounce rate as readers can view other posts of interest instead of leaving the blog after reading a particular post. In this post, different styles of the auto scrolling recent posts widget for blogger have been included. Also place one on your blog and see the positive effect it brings.

 Also Read: Sliding Recent Posts Widget For Blogger
                    Link to This Post Widget For Blogger
                    Numbered Page Navigation Widget For Blogger

How Add Auto Scrolling Recent Posts Widget In Blogger

  • From your blogger dashboard,
  • Navigate to layout.
  • Select 'Add a Gadget'.
  • Select 'HTML/Javascript.
  • Copy any of the code below and paste in the text field.

Style 1



<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://YOURURL.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script>
 



Style 2



<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/AVvXsEisGpIYdvuJNB6dAljUQBAljCvgDxg-X5QkaRSc9ze0SMB8m25orI_jxLUKCbOZnCeQHvpK81R7QMkUtj9tmjIm5eCk0AHJtYz5IIL91LgESaiHQLgAjGXUMKjl5EKU7Y0XlotcZd0r2owG/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://informationtutorial15.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://informationtutorial15.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://informationtutorial15.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://YOURURL.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>



Style 3



<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="YOUR-POST-URL" target="_blank"><b>POST-TITLE</b></a>

| <a href="YOUR-POST-URL" target="_blank"><b>POST-TITLE</b></a>

| <a href="YOUR-POST-URL" target="_blank"><b>POST-TITLE</b></a>

| <a href="YOUR-POST-URL" target="_blank"><b>POST-TITLE</b></a>



</p>
</marquee>
</div>
<div></div></div>


Also Read: Recommended Post Slide Out Widget For Blogger With Share Buttons
                   Most Commented Posts Widget For Blogger With Thumbnails
                   How to Customize Labels Cloud Widget In Blogger

  • In style 1 and style 2, Replace YOURURL with your website's address or URL.
  • In style 3, Replace YOUR-POST-URL with the link of the specific post and POST-TITLE with the title of the post.
  • Save the gadget.
  • For styles 1 and 2, Still in the layout section of your blog, you can change the location of the gadget (optional) by placing it above 'blog post' as shown in the image below. 



  •  Save the arrangement after changing its location.View your blog to note the changes with the auto scrolling recent posts widget.

    Posted by at
    Labels: , ,