How To Make Static Bar In Blogspot?

on Wednesday, December 14, 2011


If you see Facebook, have a static bar when scrolling down. Today I will share with you how to apply the static bar like a Facebook in our Blogspot. Useful of static bar is for easy the visitor surfing and use any function in a blog.  One of them, also use this static bar to promote any advertisement per click.

Many of reason can be elaborated if the static bar give any advantage to admin and visitor. It’s depend how you can benefit it as well.  

For user Blogspot, you can click on Design tab, and click Add a Gadget then  choose HTML/JavaScript. Add code below.

<div id="topbar">
<div id="topbar-insert">
<div id="topbar-item">
    <div class="menu">
            <a href="#" title="">Home</a>
            <a href="#" title="">About</a>
            <a href="#" title="">Sitemap</a>
            <a href="#" title="">Contact Us</a>
        </div>  
<div class="follow-button">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=sakandownload&link_color=ffff00&text_color=ffffff" style="width:225px; height:20px;"></iframe>
        </div>
    </div>
</div>
</div>
<style type="text/css">
#topbar {
position: fixed;
width: 100%;
background-color: #FFFF5C;
height: 30px;
border-bottom: 1px solid #FFFF5C;
box-shadow: 0 1px 5px #FFFF5C;
clear: both;
z-index: 9999;
top: 0;
left: 0;
}
#topbar-insert {
width: 100%;
border-top: 1px solid #f7a95b;
border-bottom: 1px solid #f7a95b;
height: 28px;
}
#topbar-item {
width: 900px;
margin: 0 auto;
padding-top: 2px;
}
.menu {
float: left;
}
.menu a {
font-size: 12px;
font-weight: bold;
padding-right: 15px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #000000;
text-shadow: none;
}
.menu a:hover {
color: #fff;
}
.follow-button {
padding: 2px 0;
float: right;
top: 0;
}
</style>


If you see here, the code you can change it whatever you want. You can change colour, width, border, topbar and anything else what you can see here. Use Color Picker  for  choose favorite color in a blog. 


Credit : BloggingLife 

{ 0 comments... read them below or add one }

Post a Comment

 
© Sakan Download | All Rights Reserved