Cara membuat navbar cantik secantik miyabi maria ozawa

Gunanya navbar ini intuk share misalkan berlangganan artikel via email atau bisa juga share tentang link kesukaan
Untuk yang tertarik ingin memasangnya yuk kita ikuti langkah langkah berikut ini
1.Login ke akun blogger dashboard
2.Klik layout(tata letak)
3.Edit HTML centang expand template widget
4.Cari kode yang seperti ini ]]></b:skin>
5.Copy paste kode dibawah ini dan letakan pas di atas kode tadi

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzFhS70SXekr6nqrIIC_-5Wp3qqj408qG_NORNALbOAn7pLHe3VPmxny3fCkxLYs3OV3m1uU1gpszfnylatiF7pWavSrC46jGaWvKmRUBlbdSzdiC04TG13bxgu1vy-hZ9xGkSMGeVrE/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

6.Cari kode yang seperti ini </head>
7.Copy paste kode dibawah ini dan letakan tepat sibawah kode tadi

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

8.Cari kode yang seperti ini </body>
9.Copy paste kode dibawah ini dan letakan pas tepat dibawah kode yang tadi

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://masih-berharap.blogspot.com' target='_blank'>Blogger Bandung Nu Aing Aing Pisan Euy</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;masih-berharap.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6EGGLMo2nZ5hNXT7U4nF09iUlrW3l9aG9fckxB-WAjoCseUm4wtl3LFqbaVk_YweiGSQvw4a-CffvHH8gn5tzPkSuaM8aw0yJsIHzPhoxGAOiebS4LO2zYE-xqsHHV209iaH9DQoluI/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Save template beres dech.. untuk melihat demonya klik Disini click here
Catatan tulisan yang berwarna biru silahkan sobat ganti dengan apa yang di inginkan

Posted in: Free template.magazine.3kolom,Template magazine,Tip Blogging