Bagi anda yang ingin memasang tab menu di bagian headernya, saya sarankan untuk memasang menu drop down ini di blognya. Seperti ini contohnya.Bagaimana cara untuk membuat menu drop down ini? tentu saja banyak cara untuk membuatnya, namun dalam kesempatan ini saya akan menuliskan dengan dua langkah. beginilah caranya :
A. Langkah pertama :
1. Login ke blogger dengan ID anda
2. Setelah berada pada halaman dashboard, klik Layout.
3. Kemudian klik tab edit HTML.
4. aya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
5. Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]>
6. Copy kode di bawah ini, lalu paste di atas kode : ]]>
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}
#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}
#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}
#menu dt a, #menu dt a:visited {display:block; color:#444;}
#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}
#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}
#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}
7. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :
8. Ubahlah kode yang saya cetak biru terang, sehingga kodenya menjadi seperti ini :
Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.
B. Langkah kedua :
Klik pada tab elemen Halaman yang berada di bagian Header. Perhatikan gambar gambar Page Element berikut ini
Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:
Setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:
Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :
5. Klik tombol Simpan Template
6. Selesai.
Catatan : Jika template anda tidak ada element add Page Element pada bagian header, anda dapat download Template berikut ini yang menggunakan add Page Elememt pada bagian headernya
A. Langkah pertama :
1. Login ke blogger dengan ID anda
2. Setelah berada pada halaman dashboard, klik Layout.
3. Kemudian klik tab edit HTML.
4. aya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
5. Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]>
6. Copy kode di bawah ini, lalu paste di atas kode : ]]>
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}
#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}
#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}
#menu dt a, #menu dt a:visited {display:block; color:#444;}
#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}
#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}
#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}
7. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :
8. Ubahlah kode yang saya cetak biru terang, sehingga kodenya menjadi seperti ini :
Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.
B. Langkah kedua :
Klik pada tab elemen Halaman yang berada di bagian Header. Perhatikan gambar gambar Page Element berikut ini
Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:
Setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:
Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :
5. Klik tombol Simpan Template
6. Selesai.
Catatan : Jika template anda tidak ada element add Page Element pada bagian header, anda dapat download Template berikut ini yang menggunakan add Page Elememt pada bagian headernya
