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 ]]> 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;}
#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.
6.save template anda.
Demikianlah tutorial Cara Membuat Stripe Ad-Ala Navbar, mudah-mudahan artikel ini memberikan manfaat bagi anda.