Blogger in the world, efforts to enhance the look and add a blog with a variety of accessories is not a new thing. This does not aim to be pengunjng feel bored with our blog. And posting this time I try to share tips, tricks to create a buddy to Footer Navbar Navbar or Down. Navbar (navigation bar) always appears at the bottom of our blog, even if the page tergulung (scrolled) to the top and down.
to make the following I will show some of the steps. Firstly of course you must first login to your Blogger account. Open the dashboard and click on the Layout menu followed by the menu Edit HTML and check in Expand Template Widget. Then paste CSS code below exactly signs before ]]></b:skin>:
.rbbox2{border: 1px solid rgb(192, 192, 192);padding: 5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-rJvkl2CUpM_hHUbsLnSFeusF3ZriaS2gW5nTtyb38xT93p62bPjoG8LgJQKZPg9BjrvOZvVQkDJeUz6fC0FoZa-kM9T1V7X3Qpd6sD-H9bhxsrGRhTGZtUnG2nPImlyWfVWmmaG2tXQ/s1600/sidebar_top.jpg) repeat-x;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1;
height: 100%;
vertical-align: bottom;
}
#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1;
}
#navbar-footer a {
color: #333;
}
#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #f5f5f5;
background-color: #000000;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
SAVE
Next Step open the layout -> Page element, and add a new element select html / javascript paste this code in the contents :
SAVE and Preview<div id="navbar-footer">
<div class="rbbox2"><marquee direction="LEFT" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()"><span style="color: rgb(255, 255, 0); font-weight: bold;">My Adsense [ adsense code here] </span></marquee></div></div>
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Related Article for this post :
0 comments:
Post a Comment