Tuesday, November 6, 2012

Cara Membuat Stripe Ad-Ala Navbar

Setelah sekian lama saya ngurusin blog saya yang baru saya buat ternyata rasa rindu untuk ngeblog pada blog ini pun datang kembali  pada diri saya. Untuk mengobati rasa rindu itu, saya isi dengan mosting di blog ini. Sebelumnya saya minta maaf karena sudah lama tidak mosting di blog ini.

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.

stripe-ad

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 ]]> dan letakkan kode dibawah ini tepat diatasnya.

/*-- (mta bar) --*/
#mta_bar{background:#444 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlRzz4uiJ1bNuPMZaKZsAEi1MfZm4ncqHOhm_0QaIgb3IxQa6q_3c1oFUGqb2heA_o2YxoMDuBoGd8akCrkQ_-OlJ7bgVBkTuDdTBhjnqyDVFV68t_IDlxdX8Z1xLm52Yj-vmDeGSZV8cJ/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/AVvXsEgqoLjZ4QBY-SUYQlhy7Z7JORTKawwhWWnctt2jlc_iWke84u1Hu8YH_wl5b47YtCOKRNEQ3sfFfD4WKw47LQyI1lgcEV6Hn-A0wv5GBf5rTTPiZ1pvmXCJ6bS5FecRB4XNivqwqNFJaR-4/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/AVvXsEgo7HTzoxkg1G5t0uzzP1X1YAYzUMZwYV-bQWO7gmqyMFqdfay-evVIbu9K4vmh-brTZ4Yei2afyIlWsnSJaHYMuYTFmfAwRZXr8bEr0wdrvyOjzwEeW6L172tdkZVL2gfQ-N4IdDJjiIgb/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/AVvXsEgmw9LhIqNcWfB7qoyjK0qohdN0HWeiZMdhH3J0Xq1QKhtOq5AevmdCrdaGXVwOr5EhwvyNLAV8rX404-jWK6-lIoX37_PiaiazXnY43t5WK5RBxPMDNXL0zXbw-VDbt4Bnt95nTNxhDM9I/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/AVvXsEgmw9LhIqNcWfB7qoyjK0qohdN0HWeiZMdhH3J0Xq1QKhtOq5AevmdCrdaGXVwOr5EhwvyNLAV8rX404-jWK6-lIoX37_PiaiazXnY43t5WK5RBxPMDNXL0zXbw-VDbt4Bnt95nTNxhDM9I/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/AVvXsEhWajXzSO2-rk80mGlyPOQtSf0psp1NqQlUiIftutvW_grWi86EhYvp_J_jVkg_rm1onDt-VAojD9BdV8WpL8SoqiNk8r_sUDDvRj1GyoukXgUYGd2Gv0k2V57BbtbY0V-zFUUq2PSd_R2e/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/AVvXsEgqoLjZ4QBY-SUYQlhy7Z7JORTKawwhWWnctt2jlc_iWke84u1Hu8YH_wl5b47YtCOKRNEQ3sfFfD4WKw47LQyI1lgcEV6Hn-A0wv5GBf5rTTPiZ1pvmXCJ6bS5FecRB4XNivqwqNFJaR-4/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 dan letakkan tepat dibawahnya.



Gratis Berlangganan artikel B-digg via mail, join sekarang!

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 dan letakkan kode dibawah ini tepat diatasnya.


BAGUS.CO