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 = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&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;
}
1 Comments
nice post about "Auto Scrolling Recent Posts Widget for Blogspot"
ReplyDeleteThanks,
Mcx Silver Tips Free Trial