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{
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;
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 nWidth = 100;
var nScrollDelay =
70;
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>
4.
Now save the
template
That’s it……………….
Happy Blogging!
By- TYD group
.jpg)
0 comments:
Post a Comment