Cara Membuat Menu Cantik - Tips Blogging

Cara Membuat Menu Cantik. Banyak koleksi menu blog keren yang sudah disharing oleh sobat-sobat blogger melalui blognya masing-masing. Karena seringnya gonta-ganti template saya juga mempunyai beberapa koleksi menu blog yang saya pakai untuk memadukan dengan template blog saya biar lebih kelihatan matching. Kemaren koleksi menu blog sudah saya bagikan kepada sobat MediaKU kalo belum baca silahkan buka artikel "membuat menu keren".

Perpaduan warna yang pas pada template blog akan menjadikan tampilan blog enak dilihat. Pengunjung senang dan betah melihatnya dan Anda sendiri juga pasti bangga mempunyai blog yang bagus.

OK untuk tips blogging mempercantik blog kali ini masih berkaitan dengan menu blog yang kemaren aku janjikan. Cara membuat menu cantik yang kemaren aku share kepada sobat MediaKU bernuansa tumbuhan dengan konsep mirip daun. Nah sekarang bentuk apalagi yang akan saya bagikan kepada sobat? Penasaran, langsung saja coba tips ngeblog cara membuat menu keren yang top banget dan aplikasikan di blog sobat. Mudah-mudahan cocok dengan desain serta warna dasar template milik sobat.

OK kalo sobat tertarik ingin mencoba membuat menu cantik ini silahkan ikuti langkah-langkah berikut:

1. Buka akun blogger Anda
2. Klik TEMPLATE >> EDIT HTML (centang Expand Widget Template)
3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

nav ul{ padding:0; margin:0; list-style:none}
nav li{float:left}
nav a{ float:left; color:#FFF; margin:0 5px; padding:3px; text-decoration:none; border:1px solid #831608; font:bold 14px Arial,Helvetica; background-color:#831608; background-image:-moz-linear-gradient(#bb413b,#831608); background-image:-webkit-gradient(linear,left top,left bottom,from(#bb413b),to(#831608)); background-image:-webkit-linear-gradient(#bb413b,#831608); background-image:-o-linear-gradient(#bb413b,#831608); background-image:-ms-linear-gradient(#bb413b,#831608); background-image:linear-gradient(#bb413b,#831608); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; text-shadow:0 -1px 0 rgba(0,0,0,.8); -moz-box-shadow:0 1px 0 rgba(255,255,255,0.3),0 3px 0 rgba(0,0,0,0.7),0 2px 2px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.5) inset; -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.3),0 3px 0 rgba(0,0,0,0.7),0 2px 2px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.5) inset; box-shadow:0 1px 0 rgba(255,255,255,0.3),0 3px 0 rgba(0,0,0,0.7),0 2px 2px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.5) inset}
nav a:hover{ background-color:#bb413b; background-image:-moz-linear-gradient(#831608,#bb413b); background-image:-webkit-gradient(linear,left top,left bottom,from(#831608),to(#bb413b)); background-image:-webkit-linear-gradient(#831608,#bb413b); background-image:-o-linear-gradient(#831608,#bb413b); background-image:-ms-linear-gradient(#831608,#bb413b); background-image:linear-gradient(#831608,#bb413b)}
nav a:active{ background:#bb413b; position:relative; top:2px; -moz-box-shadow:0 0 3px rgba(0,0,0,0.7) inset; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.7) inset; box-shadow:0 0 3px rgba(0,0,0,0.7) inset}
nav span{ border:1px dashed #eba1a3; display:inline-block; padding:4px 15px; cursor:pointer; background-color:#bb413b; background-image:-moz-linear-gradient(#d4463c,#aa2618); background-image:-webkit-gradient(linear,left top,left bottom,from(#d4463c),to(#aa2618)); background-image:-webkit-linear-gradient(#d4463c,#aa2618); background-image:-o-linear-gradient(#d4463c,#aa2618); background-image:-ms-linear-gradient(#d4463c,#aa2618); background-image:linear-gradient(#d4463c,#aa2618)}
nav a:hover span{ background-color:#bb413b; background-image:-moz-linear-gradient(#aa2618,#d4463c); background-image:-webkit-gradient(linear,left top,left bottom,from(#aa2618),to(#d4463c)); background-image:-webkit-linear-gradient(#aa2618,#d4463c); background-image:-o-linear-gradient(#aa2618,#d4463c); background-image:-ms-linear-gradient(#aa2618,#d4463c); background-image:linear-
gradient(#aa2618,#d4463c)}

Simpan dulu, sebelum melanjutkan ke langkah berikutnya.

Kalo sudah saatnya Anda buka menu TATA LETAK >> Add GADGET >> HTML/Javasript dan masukkan kode dibawah ini ke dalam kotak yang telah disediakan.

<nav>
<ul>
<li><a href="http://kucarikerja.blogspot.com/"><span>Loker SMP/SMA</span></a></li>
<li><a href="http://kucarikerja.blogspot.com/"><span>Low. CPNS</span></a></li>
<li><a href="http://kucarikerja.blogspot.com/"><span>Low. BUMN</span></a></li>
<li><a href="http://kucarikerja.blogspot.com/"><span>Soal CPNS</span></a></li>
<li><a href="http://kucarikerja.blogspot.com/" target="_blank"><span>Contoh Lam. Kerja</span></a></li>
</ul>
</nav>

Sebelum disimpan ubah dulu URLnya dengan URL punya sobat, baru kemudian disimpan. Lihat hasilnya, tampilan menunya keren kan??

OK silahkan otak-atik sendiri kode warnanya kalo ingin disesuaikan dengan warna dasar template blog Anda. Semoga tips blogging cara membuat menu cantik ini membantu mempercantik blog Anda.

Masukan alamat Email kamu disini untuk mendapatkan artikel terbaru..!