Latest Updates Widget for Blogger

Posted by Tushar Bedekar
 It is one of the most attractive widget for blogger , is provide a quick navigation system for your visitors . it look like as :





Procedure:
1.      Go to Template > Edit HTML

2.  Now past the billow code in CSS
                           Or    
       Search  “  ]]></b:skin>  “ and past the billow code just above it
Code:
.samazhlo {
background: #4371CF;
position:absolute;
float: left;
padding: 0 10px;
height: 32px;
line-height: 30px;
color: #FFF;
font-family: Oswald,arial,Georgia,serif;
text-transform: uppercase;
font-size: 10pt;
margin-right: 10px;}

.head_brnews{
height:30px;background:#fff;width:100%;max-width:1250px;margin:0 ;border-style: solid ;
border-width: 1px;border-color: #cccccc;overflow: hidden;width: auto;margin-top:10px;}
.breaking-news{
float:left;
height:30px;
position:relative;
overflow:hidden;
margin-bottom:20px;
}
.breaking-news h4{
background: #9EC22D;
display:block;
float:left;
padding:0 10px;
height:32px;
line-height:30px;
color:#FFF;
font-family: Oswald,arial,Georgia,serif;
text-transform:uppercase;
font-size:10pt;
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:13px;
font-family: 'Droid Serif', serif;
display:hidden;
}
.breaking-news span{
display:block;
float:left;
padding:1px 10px;
color:#333;
font-size:12px;
line-height:30px;
}
3.    Now  past the billow code any where Between  <head>  &  </head>   where u want the widget to be display
       for example past it after the navigation bar code  </div>
code:
<div class='head_brnews'>
<div class='breaking-news'><div class='samazhlo'>Latest Updates</div> 
<script src='https://dl.dropboxusercontent.com/u/80436322/autoscroll.js' type='text/javascript'/>

  <script type='text/javascript'>
       var nMaxPosts =6;
        var nWidth = 100;
        var nScrollDelay = 70;
        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>
4.   Now save the template
That’s it……………….
Happy Blogging!

   By- TYD group
back to top