Cara Membuat Stripe Bar Blogger

Untuk tutorial Blog kali ini saya akan menjelaskan cara membuat Stripe Bar . Ini sebagai request sobat2 blogger lewat email, banyak banget yang pengen tau caranya bikin Stripe Bar.

Sudah pada tau kan yang namanya Stripe Bar? .


Stripe Bar bentuknya merip sekali dengan default navigation bar pada blogger. Stripe Bar dapat kita manfaatkan untuk meletakkan link iklan, informasi, Feed dan informasi lainnya sesuai keinginan anda, yang jelas dengan Stripe Bar link kita akan mudah di lihat pengunjung. Dilengkapi dengan icon close, stripe ini dapat ditutup bila dirasa mengganggu.


Cara pemasangan Stripe Bar untuk Blogger
1. Login Akun Blogger anda dulu
2. Masuk Editor HTML (Edit HTML)
3. Cari (CTRL + F) kode ]]></b:skin> kemudian letakkan script CSS berikut diatas kode ]]></b:skin>

HTML Spoiler:

#mta_bar { background:#FFFFE1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjih87MKvEb7RgRo2HzS5r_Rmu4211uv0mQQkkV6MDCvV5ipEQPn3eMpO4cKkidRcJzDU8lNVZ8_GmYsGCW6MS0kJb4t8U1SlhSPfTyvIIYreq9WdENviZ6oDkTCzRkzdm_YGT-1N4K0Y4Y/s400/wow.gif?imgmax=800') repeat-x; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; 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 .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#fff; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; width:20%}
#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/AVvXsEgJ0ERUO91qb41RP-ykn24UWFMPGwdQadfYhw3ETqXld-1ulJs37uCQ330wBxzIIJlPNZo0MtdXgGrlAowgR2Wc9vBEyVIGZ8RoHzvtTQaC6l5_DL2cf6xV1S39ja_4I7PhjqOnSaKvWGyK/s400/stripead-feed.gif') no-repeat; text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:underline; color:#fff}
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

4. Selanjutnya masukkan kode berikut sebelum kode </head>

HTML Spoiler:

<script src='http://grandisk.xtgem.com/stripe-blog-triks.js' type='text/javascript'/>

5. Langkah selanjutnya letakkan kode berikut sebelum kode </body>

HTML Spoiler:

<div id='mta_bar'>
<div id='left_bar'><span class='center'><a href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/blog-triks' target='_blank'>Gratis Berlangganan Blog-Triks Article Via Email, Join Now!!!
</a></span> </div>

<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blog-triks.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7ert6PDnKsPNtj8FAIV2lDud5tekvVJgd6GZ5RZbiC94WdX2NCvsaFew_ik9Ra8xJQ5wPGcVLy6eta4FIAWQYw2_GGdo4EJbYuKP8qDP-gSOAU59vQJ8IJvW0mZR50-ZwEePZCfKSvzh/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

> untuk script HTTP dan Kata-kata strip barnya bisa anda ubah sesuai kebutuhan
> Sekarang jadi deh Strip Bar yang kita mau
> Gampangkan.......ok d selamat mencoba