Pages

Subscribe:

ShoutMix chat widget

Rabu, 02 Februari 2011

CSS menu : tabs6

CSS menu : tabs6

Untuk tulisan pertama mengenai menu navigasi, yang saya bahas adalah menu navigasi yang di beri nama Tabs6. Ini bukan buatan kang rohman, namun buatan orang lain yang sudah di modifikasi agar bisa di pake di blogspot. Namun untuk menghargai desainer nya, tolong jangan di hilangkan credit pada kode css nya ya. Untuk demo menu navigasi ini silahkan klik tombol berikut :

Jika anda merasa tertarik dengan menu navigasi di atas, silahkan baca sampai dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di dapat bisa berbeda dengan contoh diatas karena faktor desain template yang berbeda-beda, oleh kerena itu ada kemungkinan anda harus sedikit merubah kode yang saya berikan agar cocok dengan template anda. Berikut adalah langkahnya : Pertama Klik kanan pada kedua gambar di bawah ini, lalu Save Picture As... save di komputer anda.
tableft6.gif tabright6.gif
tableft6.gif tabright6.gif
Kemudian simpan pada image hosting yang biasa anda gunakan, misalkan di photobucket atau google pages dan lain-lain. Lalu anda catat alamat dari kedua gambar tersebut. Contoh, saya mempunyai alamat gambar untuk kedua gambar di atas sebagai berikut : http://ahom24.googlepages.com/tableft6.gif http://ahom24.googlepages.com/tabright6.gif Sebenarnya anda boleh saja menggunakan kedua alamat tersebut, namun saya khawatir jika terlalu banyak yang memakai alamat tersebut bisa terjadi limited band with sehingga gambar tidak dapat tampil dan menu anda jadi tidak bagus, jadi sebaiknya pake alamat sendiri Berikut adalah salah satu cara menginstall menu tabs6 : 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 ]]>
  6. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]>
  7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :
  8. 1' showaddelement='no'> true' title='your blog title (Header)' type='Header'/>
  9. Ubahlah kode yang berwarna hijau, sehingga kodenya menjadi seperti ini :
  10. 2' showaddelement='yes'> false' title='your blog title (Header)' type='Header'/>
  11. 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.

0 comments: