Stripe-ad ala navbar ini banyak digunakan oleh para blogger untuk membuat navigasi yang menarik pada blognya. Stripe-ad ini mirip sama yang ada pada template o-om yang lama, dan saya pun juga menggunakannya pada blog saya ini karena nggak tahan dengan godaan keindahannya.
1.Log in ke blogger.
2.Klik template » edit HTML » centang kotak Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya.
/*-- (mta bar) --*/
#mta_bar{background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/TIChde9sutI/AAAAAAAAGzk/5DJ4Cbds91E/s200/topnavbar-c.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:55%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:30%}
#mta_bar .right{font-family:verdana,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:#fff; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
#left_bar a{background:url('http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar2 a{background: url(http://2.bp.blogspot.com/_C6KkooKXCEw/TICuIqKZqRI/AAAAAAAAG0E/hfkQzQz7h20/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px}
.small-comment{
background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) no-repeat;
padding-left:8px;
height:20px;
line-height:14px;
float:right;
color:#FFF;
font-weight:bold;
font-size:11px;
margin-top:3px;
margin-left:10px;
}.small-comment div{
background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) top right no-repeat;
padding-right:8px;
height:20px;
}
#left_bar2 a:hover{text-decoration:underline; color:#fff}
#left_bar3 a{background: url(http://3.bp.blogspot.com/_C6KkooKXCEw/TIBf2gtK0UI/AAAAAAAAGwE/Wml7-gPP17U/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
.feed-small-right-feed,.small-right{font-size:11px;float:right;font-weight:700;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png) right 0 no-repeat;padding-right:20px;padding-bottom:15px}
#crosscol-wrapper{margin:0 20px;padding:10px 0 0}
#jarak_atas {width:2px;height:20px;}
#mta_bar{background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/TIChde9sutI/AAAAAAAAGzk/5DJ4Cbds91E/s200/topnavbar-c.png') repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:55%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:30%}
#mta_bar .right{font-family:verdana,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:#fff; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none}
#left_bar a{background:url('http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar2 a{background: url(http://2.bp.blogspot.com/_C6KkooKXCEw/TICuIqKZqRI/AAAAAAAAG0E/hfkQzQz7h20/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px}
.small-comment{
background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) no-repeat;
padding-left:8px;
height:20px;
line-height:14px;
float:right;
color:#FFF;
font-weight:bold;
font-size:11px;
margin-top:3px;
margin-left:10px;
}.small-comment div{
background:url(http://4.bp.blogspot.com/_C6KkooKXCEw/TICilRvoM4I/AAAAAAAAGzs/F1VwCZc7uzY/s200/smallcommentsx-c.png) top right no-repeat;
padding-right:8px;
height:20px;
}
#left_bar2 a:hover{text-decoration:underline; color:#fff}
#left_bar3 a{background: url(http://3.bp.blogspot.com/_C6KkooKXCEw/TIBf2gtK0UI/AAAAAAAAGwE/Wml7-gPP17U/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
.feed-small-right-feed,.small-right{font-size:11px;float:right;font-weight:700;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png) right 0 no-repeat;padding-right:20px;padding-bottom:15px}
#crosscol-wrapper{margin:0 20px;padding:10px 0 0}
#jarak_atas {width:2px;height:20px;}
4.Cari kode <body> dan letakkan tepat dibawahnya.
<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/fathur.rdr' rel='nofollow' target='_blank' title='Add me as friend on Facebook'>Facebook</a>
<a href='http://twitter.com/@Fathur_QNet' rel='nofollow' target='_blank' title='Follow me on Twitter'>Twitter</a>
<a href='http://www.facebook.com/LaNoHTC' rel='nofollow' target='_blank' title='Like Fans Page Me'>Fans Page</a>
</span></div>
<div id='left_bar'>
<span class='center'><a href='http://feeds.feedburner.com/Fahen' target='_blank;'>Gratis Berlangganan artikel FaHen via mail, join sekarang! </a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/fathur.rdr' rel='nofollow' target='_blank' title='Add me as friend on Facebook'>Facebook</a>
<a href='http://twitter.com/@Fathur_QNet' rel='nofollow' target='_blank' title='Follow me on Twitter'>Twitter</a>
<a href='http://www.facebook.com/LaNoHTC' rel='nofollow' target='_blank' title='Like Fans Page Me'>Fans Page</a>
</span></div>
<div id='left_bar'>
<span class='center'><a href='http://feeds.feedburner.com/Fahen' target='_blank;'>Gratis Berlangganan artikel FaHen via mail, join sekarang! </a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://2.bp.blogspot.com/_C6KkooKXCEw/Si0hpItyl-I/AAAAAAAAEYQ/kmsk9iVM9HM/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
Keterangan:
- Ganti kode yang berwarna hijau dengan url fans page facebook anda.
- Ganti kode yang berwarna biru dengan url twitter anda.
- Ganti tulisan yang berwarna merah dengan id feedburner anda.
5.Cari kode </head> dan letakkan kode dibawah ini tepat diatasnya.
<script src='http://stripe-ad-lano.googlecode.com/files/Stripe-Ad.js' type='text/javascript'/>
6.save template anda.
Demikianlah tutorial Cara Membuat Stripe Ad-Ala Navbar, mudah-mudahan artikel ini memberikan manfaat bagi anda.. :)
EmoticonEmoticon