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.

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/AVvXsEg3Dg5iQeKhKKHT-m5Z1r0EAF-bjLx4K3uuSZZwpfnitXgBkvmwTFBXuiuYz3TkfXv6du6-Rt438dqOp0nYuw3IWwc9GfAF0-xD5bwjYiV-W6C39MeWnJxLda6iMsn1autpq8mo06eGjWAX/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/AVvXsEgdZ8HIkXjPex17Bvn6mXsPUBtph7v1YgeS4CY8FhsJDu_vrQiNVAD7FCvXy58QtxMX9-gm8HGFjUOB4ORLb1uvK-FBhJYOZ7ufgeNzGgRjYH9GhlZPql1duBLcQdDqONlUqv2FdsxwtZ92/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/AVvXsEgMs7mya4-u6opHApbUgPe61xdjHXjF5xltaVJbolxyuV9oXkRQ-_zC1iZvPfpZ_NW3SREBupG4yXXrBhK7kKPdA6Yt_-lj1O6SijZEb693P3rp62jNLAB8fC52PJFGT4yFVLR5TG6ADY5j/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/AVvXsEiuO6h928UI_Py4TPAU_FP-wIHKLWNMuf59LTYPg8Pt2lflToE0Hu1TsgIGhZGBH-jk5_Qh0xFZqBGFTi4AWPQ3eGEjosB2BJ0rHZ_H2TvuKqcoX8_kH7uYSHKvn33zYAyF0jpCnztjcJ1a/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/AVvXsEiuO6h928UI_Py4TPAU_FP-wIHKLWNMuf59LTYPg8Pt2lflToE0Hu1TsgIGhZGBH-jk5_Qh0xFZqBGFTi4AWPQ3eGEjosB2BJ0rHZ_H2TvuKqcoX8_kH7uYSHKvn33zYAyF0jpCnztjcJ1a/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/AVvXsEgeaotYGEREmQofsehuNmlLJpU04Cay7Lfut3Z7M1erfrrvDSSNEAx7m-30w9-QV404r4tJj81l_xNpfGL4R8-0M6-1ovw82uzJllc0p5lBrQYY9KFTGn-oPQqIBfejAksIk6hcfai67hPl/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/AVvXsEgdZ8HIkXjPex17Bvn6mXsPUBtph7v1YgeS4CY8FhsJDu_vrQiNVAD7FCvXy58QtxMX9-gm8HGFjUOB4ORLb1uvK-FBhJYOZ7ufgeNzGgRjYH9GhlZPql1duBLcQdDqONlUqv2FdsxwtZ92/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.

Facebook
Twitter
Fans Page

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