5 Apr 2013

Membuat Menu Navigasi Di atas Header Utama Blog

Siang blog lover..
Masih berusaha membuat blog kita menjadi blog yang menarik untuk dilihat.
semoga semakin kesini tampilan blog admin semakin jelas dan ga berubah-ubah. aamiin.

Kali ini admin ingin menjelaskan tutorial menambahkan menu navigasi diatas header.

Lihat pada tanda diatas.
Cara membuatnya adalah:
1. Kalian masuk kedalam dashboard blog kalian
2. masuk kedalam template blog kalian, kemudian pilih edit html
3. cari kode ]]></b:skin>
kemudian copi paste kode dibawah ini diatas kode skin tadi:
.toppic{width:100%;margin:0 auto;border-bottom:0px solid #666;}.topnav{background:#ffffff;width: 960px;height:32px;overflow: hidden;margin:0 auto; padding:10px 10px 0px 10px; }.toppic{background:#ffffff;width:1000px;margin:0 auto;border-bottom:1px solid #999;}.topnav{width: 960px;height:20px;overflow: hidden;margin:0 auto;  padding:0px 0px 10px 10px; }.menupic{background:#fff;width:960px;margin:0 auto;}

4. Selanjutnya, kalian cari kode body, <body> di edit html kalian, selanjutnya, copi paste koding dibawah ini dibagian setelah body:
<div class='toppic'><div class='topnav'><div style='font: 11px Arial;float:left;padding-top:3px;letter-spacing:.01em;color:#000000;'>Wellcome  |  Members area  :  <a href='http://www.blogger.com' title='log in to blogger'>Register</a>  |  <a href='http://www.blogger.com' title='log in to blogger'>Sign in</a> </div>
<div style='font: 11px Arial;float:right;padding-top:3px;letter-spacing:.01em;color:#000000;'> <a href='http://hanapert.blogspot.com/' title='Home'>Home</a>  |  <a href='http://hanapert.blogspot.com/p/blog-page.html' title='Site Map'>Site Map</a>  | <a href='http://hanapert.blogspot.com/p/nama-hana-pertiwi-lahir-di-cilacap.html' title='Biodata'>Biodata</a> | <a href='http://hanapert.blogspot.com/p/tentang-e-mines.html' title='Tentang'>Tentang</a>

Setelah selesai klik simpan, dan lihat perubahan yang terjadi di blog kalian. Sebelumnya kalian ubah page html nya sesuai  dengan kebutuhan kalian.

Terima Kasih telah berkunjung, jangan lupa kasih komentar

0 komentar:

Posting Komentar