Cara Membuat Menu Navigasi Css

Sabtu, 27 November 2010

Mau tau kayak apa menu navigasinya ??? Klik Disini
Ok, langsung aja deh ikutin langkah-langkah berikut :

Langkah #1

  1. Silahkan Sign in di blogger dengan ID anda.
  2. Klik Layout.
  3. Kemudian klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).
  5. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>
  6. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>
  7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>

  1. Ubahlah kode yang berwarna hijau, sehingga kodenya menjadi seperti ini :
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='False' title='your blog title (Header)' type='Header'/>
</b:section>

  1. Kemudian klik Simpan Template.Silahkan tunggu beberapa saat.




Langkah #2

  1. Klik tab Elemen Halaman
  2. Lalu klik Tambahkan sebuah Elemen Halaman yang ada di bagian header (elemen paling atas).
  3. setelah munculwindow popup, klik TAMBAHKAN KE BLOG yang untuk HTML/JavaScript.
  4. Copy lalu paste kod berikut pada kolom yang tesedia (jangan lupa untuk merubah alamat gambarnya) :
  5. Klik tombol Simpan Peribahan.
  6. Selesai, silahkan lihat hasilnya.


Terkadang jika anda melakukan instalasi sesuai dengan langkah diatas, untuk beberapa template hasilnya kurang bagus. Oleh karena itu, saya akan mencoba menulis dengan cara lain. Namun cara ini hanya untuk Template Minima (template asli dari blogger).

Langkahnya sebagai berikut :

  1. Silahkan Sign in di blogger dengan ID anda.
  2. Klik Layout.
  3. Kemudian klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).
  5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :
  6. expand widget template
  7. Tunggu beberapa saat ketika proses sedang berlangsung
  8. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>
  9. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>
  10. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :
<div class='descriptionwrapper'>
<p class='description'><span><data:description/>>/span></p>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

  1. Hapus kode diatas, lalu ganti dengan kode berikut :
  2. Klik tombol Simpan Perubahan.
  3. Selesai. silahkan lihat hasilnya.



Agar mendapat variasi yang berbeda, sedikit akan saya tambahkan.

jika anda melakukan langkah di atas, maka hasil yang di dapat adalah tab-tab atau menu-menu akan mepet ke sebelah kiri, jika ingin sedikit menjorok ketengah anda harus menambahkan sedikit kode. kodenya yang ini :

#tabs6 {
float:left;width:100%;
background:#efefef;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
}


kode yang di tambahkan adalah seperti ini :

#tabs6 {
float:left;width:90%;
background:#efefef;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
padding-left:10% ;
}


Angka 10% adalah besarnya nilai jarak sela dari sebelah kiri, silahkan di ubah sesuai kebutuhan.

Untuk yang lainnya, silahkan anda otak-otik sendiri,
untuk hasil yang telah saya modif silahkan Klik Disini
Selamat berbingung ria !!! hehehe

0 komentar:

Posting Komentar