tHomBloG

Pengaturan css menu

pengaturan menu dengan css sederhana seperti yang saya gunakan di blogger template toko online versi thomblog adalah sebagai berikut:

Bagian pertama adalah pengaturan style css. Posisinya bersama pengaturan css lain di atas kode
]]></b:skin> atau di elemen html/javascript sidebar blog kamu.

/*Menu ----------------------------------------------- */ #menu { color: #8eb8d5; border-bottom: px solid #000000; clear:both; background:; margin-top:px; margin-bottom:-5px; line-height: 1.1em; letter-spacing:.1em; text-align: center; height:px; } a.navigation { color: #000000; background-color: #e6e6e6; margin: 1px; padding: 5px 5px 5px 5px; border-width: 0; text-transform: none; text-decoration: none; font-weight: bold; font-size:10pt; letter-spacing:0.5px; font-family:arial; } a.navigation:hover { background: #e1771e; color:#ffffff; text-decoration: none; } a.navigation:visited { border-left:1px solid $borderColor; border-right:px solid $borderColor; background: #e6e6e6; color:#ffffff; text-decoration: none; }

Kamu bisa mengubah kode-kode itu untuk mendapat bentuk tampilan menu yang lebih bervariasi.

Bagian kedua adalah isi menu dan linknya seperti contoh di bawah ini. Posisinya di bagian manapun di dalam html "body". Bisa di atas atau bawah header, di atas main-wrapper. Untuk mengeditnya kamu harus masuk ke RANCANGAN kemudian klik edit HTML dan temukan kode-kode seperti di bawah ini.

<div id='menu'> <a class='navigation' href='http://kristikindonesia.blogspot.com/'>Home</a> <a class='navigation' href='http://kristikindonesia.blogspot.com/search/label/indokristik'>Indokristik</a> <a class='navigation' href='http://kristikindonesia.blogspot.com/search/label/painting'>Painting</a> <a class='navigation' href='/search/label/kado'>Kado</a> </div>

Perubahan yang harus kamu lakukan adalah mengganti isi menu: home, indokristik, dsb dengan punya kamu sendiri. Dalam contoh menu ini isi menu saya hubungkan dengan label-label utama isi blog saya. Kamu bisa menghubungkannya dengan postingan tertentu atau bahkan blog lain.

Untuk menghidupkan menu ini, kamu harus mengganti alamat http blog saya dengan blog kamu sendiri, dan label-label sesuai yang ada di blog kamu. Selamat mencoba.

Keterangan lain soal menu dapat kamu baca juga di postingan Mengubah Menu Blog



tag css, tutorial | judul Pengaturan css menu