Cara Membuat Stripe Ad-Ala Navbar

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.

Dan saya mosting artikel ini karena ingin menjawab pertanyaan dari sobat blogger kita yang memberikan komentar-nya pada artikel saya yang berjudul cara membuat slider banner ads di blog dan insyaallah kali ini saya akan menjawab-nya. Untuk Membuat Stripe-Ad Ala Navbar Di Blog langkah-langkahnya tidaklah susah, berikut ini langkah-langkah cara membuatnya.

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Q0xhRvGwlCCCJQiDeYeX0hwoK13NL0xJj9c6yeKHffOGW_0cMJhhpHsms8tjmqoRAmf8W2OQmL_I5vi9T_2q7jyndd2wvWXxR6xtV32rJYObVkkdglXzb2h1-DhtLa2TgDRpUQYReoVj/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a-Rrs4Vf9-AxfcmPF8SEnMmWLb_LEQy56cs5TKnvgkjHA8j3_kJW_0KoQ-ZcFA_JX4INyJYApuOcNd4qkFqpZchQQ97w5Vq_m0ePh7RKVEOY826eSTB9qR1styjlTv9bhXZHxJH6a_ps/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIg4TAo3IvuUUOouqk3e5KgaB8jQB4bYQUAmrdYkkRUo5aTSWxhq8DED18SDBpcPUd263k5enntPlZ3NQ1Wduj76z164v87WFFUEbruNdHIzBd5fPw37S3YlyFnv5SwBdYn5Y6uJenJuI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ToiDSem_h0iPOQoa_2mhfDDIXDCm71faWiup5emCrChZzhynMublBdICzcyAaPSGxovdkz6952V6aDAk-AsrwPSOjRAZhR0tTAoZo04s3j137PLS1SmRZqxs2PJnHgNIRigwo2TiEQ1l/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ToiDSem_h0iPOQoa_2mhfDDIXDCm71faWiup5emCrChZzhynMublBdICzcyAaPSGxovdkz6952V6aDAk-AsrwPSOjRAZhR0tTAoZo04s3j137PLS1SmRZqxs2PJnHgNIRigwo2TiEQ1l/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0AA19_S35VrRzpal-fK9DCPzsO4PRCu3uE7VFP5TXMKjdh4JOJsgOc1DAoaEh52xVHIbRbIIv1H1AhsEFBsQxBlvJQidRN_Buvij6KqG7XQQ2MHLWmtuJ2DWCiadMuRlLVQ-nJTBz9wf/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a-Rrs4Vf9-AxfcmPF8SEnMmWLb_LEQy56cs5TKnvgkjHA8j3_kJW_0KoQ-ZcFA_JX4INyJYApuOcNd4qkFqpZchQQ97w5Vq_m0ePh7RKVEOY826eSTB9qR1styjlTv9bhXZHxJH6a_ps/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=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BvhIugqJ3HZRa3inpa2mWBNhOR8ORs41TtF8rZbdm0fym2Xg2S3_G93tpV9Y7H6uRrtgphWfxOxVLw-ePcTe-YFkuRgsuDl_lBwFZJaIoiF7Ds5xNfkCdOiKyo8d2LubLIOLU4EP2IwO/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.. :)