adsadz18

Auto Scrolling Recent Posts Widget for Blogspot

recent-post-marque
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 anywhere below </head> tag (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;
}

Post a Comment

1 Comments