Auto Scrolling Recent Posts Widget for Blogger/Blogspot

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:

 Live Demo

How to Install Auto Scrolling Recent Posts Widget

Adding The Widget To Blogger

Go to Blogger >> template

Step 1  Copy the following code and paste inside an Template (script)

 <div class='head_brnews'>  
  <div class='breaking-news'>   
   <div class='samazhlo'>  
    Latest Post  
   </div>  
   <script src='https://dl.dropboxusercontent.com/u/80436322/autoscroll.js' type='text/javascript'/>  
   <script type='text/javascript'>  
    var nMaxPosts =8;  
    var nWidth = 100;  
    var nScrollDelay = 120;  
    var sDirection = &quot;left&quot;;  
    var sOpenLinkLocation = &quot;N&quot;;  
    var sBulletChar = &quot;&gt;&gt;&quot;;  
   </script>  
   <script src='/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=6' type='text/javascript'/>  
  </div>  
   </div>  

Step 2 Copy the following code and paste inside an Template (CSS)

 .head_brnews{  
       height:30px;  
       background:#fff;  
       width:100%;  
       max-width:1160px;  
       margin:15px auto;  
       border-style: solid ;  
       border-width: 1px;  
       border-color: #0080ff;  
       overflow: hidden;  
       width: 955px;  
       margin-top:15px;  
 }  
 .breaking-news{  
        float:left;  
        height:30px;  
        position:relative;  
        overflow:hidden;  
        margin-bottom:20px;  
 }  
 .breaking-news {  
         background: #fff;  
         display:block;  
         float:left;  
         padding:0 10px;  
         height:32px;  
         line-height:30px;  
         color:#000;  
         font-family: Oswald,arial,Georgia,serif;  
         text-transform:uppercase;  
         font-size:15px;  
         margin-right:10px  
 }  
 .breaking-news ul{  
          float:left  
 }  
 .breaking-news a:hover{  
            color:#333;  
 }  
 .breaking-news ul li{  
           float:left;  
           display:block;  
           list-style:none;  
 }  
 .breaking-news ul a{  
           padding:1px;  
           display:block;  
           color:#333;  
           white-space:nowrap;  
           float:left;  
           line-height:30px;  
           font-size:15px;  
           font-family: 'Droid Serif', serif;  
           display:hidden;  
 }  
 .breaking-news span{  
          display:block;  
          float:left;  
          padding:1px 10px;  
          color:#333;  
          font-size:15px;  
          line-height:30px;  
 }  
 .samazhlo{  
      background:#4371CF;  
      position:absolute;  
      left:0;  
      padding: 0 20px;  
      height: 32px;  
      line-height: 30px;  
      color: #FFF;  
      font-family: 'Yanone Kaffeesatz', sans-serif;  
      text-transform: uppercase;  
      font-size: 20px;  
      margin-right: 10px;  
 }