Navigasi Dengan Css

Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.

Untuk template minima klasik :

1. Sig in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting
5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>
/* Navigasi buat si juleha ----------------------------------------------- */ #juleha{ height:25px; text-align: center; } #juleha a{ margin:0; font-size:1.2em; font-weight:bold; letter-spacing:-1px; background-color: #cccccc; color: #000000; padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right:4px; } #juleha a:hover{ text-decoration:none; padding:34px 5px 41px 5px; background-color: #0326FC; background-repeat: repeat-x; color:#A7FC03; padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right:4px; }
6. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :
<div id="header"> <h1 id="blog-title"> <ItemPage><a href="<$BlogURL$>"></ItemPage> <$BlogTitle$> <ItemPage></a></ItemPage> </h1> <id="description"><$BlogDescription$> <div id="juleha"> <a href="#" target="_blank">Link 1</a> <a href="#" target="_blank">Link 2</a> <a href="#" target="_blank">Link 3</a> <a href="#" target="_blank">Link 4</a> <a href="#" target="_blank">Link 5</a> </div> </div>
7. Klik tombol Pratinjau untuk melihat hasil perubahan
8. Jika sudah OK, klik tombol Simpan Perubahan Template
9. Selesai.

Untuk template minima baru :

1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>
/* Navigasi buat si juleha ----------------------------------------------- */ #juleha{ height:25px; text-align: center; } #juleha a{ margin:0; font-size:1.2em; font-weight:bold; letter-spacing:-1px; background-color: #cccccc; color: #000000; padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right:4px; } #juleha a:hover{ text-decoration:none; padding:34px 5px 41px 5px; background-color: #0326FC; background-repeat: repeat-x; color:#A7FC03; padding-top:2px; padding-bottom:2px; padding-left:4px; padding-right:4px; }
8. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> <div id="juleha"> <a href="#" target="_blank">Link 1</a> <a href="#" target="_blank">Link 2</a> <a href="#" target="_blank">Link 3</a> <a href="#" target="_blank">Link 4</a> <a href="#" target="_blank">Link 5</a> </div> </div> </div> </b:if>
9. Klik tombol Pratinjau untuk melihat perubahan
10. Bila sudah OK, klik tombol SIMPAN TEMPLATE
11. Selesai.

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer