Elegant Menu Navigasi

Kita tidak bisa membohongin kalau tampilan blog adalah salah satu senjata untuk menarik pengunjung, walaupun bukan pengunjung dari Search Engine. Memiliki Tampilan yang menarik dan beda dari yang lain, akan memudahkan pengunjung mengingat dan ada kemungkinan akan menjadi pengunjung tetap untuk blog sobat. Terkadang banyak blogger yang mengoptimalkan tampilan blognya berlebihan dengan menambahkan aksesoris yang tidak penting dan membuat blog lambat di akses, hal tersebut tidak akan menarik pengunjung ataupun mendapatkan pengunjung tetap.

Disini saya akan membahas tentang Memasang Elegant Menu Navigasi agar tampilan blog sobat lebih menarik dan tentunya tidak memberatkan blog sobat karena disini saya akan menggunakan CSS dan HTML saja. Pada kesempatan sebelumnya saja juga pernah membahasa tentang Menu Navigasi namun pada kesepatan sebelumnya menu navigasinya menggunakan CSS, HTML dan Javascript jadi akan sedikit memperlambat akses ke blog sobat, Kalau sekarang saya hanya menggunakan CSS dan HTML saja, oiya walaupun hanya menggunakan CSS dan HTML saja tapi tampilannya tidak kalah menarik dengan yang sebelumnya, g percaya? lihat aja demonya di bawah ini

 

• 
  Beranda
  Halaman depan
  
  
• 
  Trik CSS
  enjoy with css
  
  
• 
  Desain
  Desain your Template
  
  
• 
  Kontak Me
  Call if a problem
  
  

 

Bagaimana pendapat sobat? bagus bukan, sekarang mari kita lihat cara membuatnya, mudah kok cara membuatnya, ayo!

Langkah pertama kita harus login ke blogger.com tentunya dengan username dan password sobat y.

Setelah itu mari kita menuju element halaman dan tambahkan sebuah gadget (SARAN : tambahkan gadget yang ada di bawah header), pilih yang HTML/Javascript

Lalu masukan kode di bawah ini kedalamnya dan setelah itu Selesai deh, sekarang tinggal sobat memodifikasinya y dengan cara mengutak-ngatik CSS-nya

<style>
#elegantmenunav ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: 1px;
line-height: 0.4em;
border-top:5px dotted #262626;
border-bottom:5px dotted #262626;
float:left;
clear:both;
margin:0;
}
#elegantmenunav ul li{
float:left;
}
#elegantmenunav ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#262626;
width:120px;
}
#elegantmenunav ul li a span{
display:block;
}
#elegantmenunav ul li a span.title{
}
#elegantmenunav ul li a:hover span.title{
color:#262626;
text-shadow:2px 2px 2px #ff0000;
}
#elegantmenunav ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.2em;
color:#262626;
text-shadow:2px 2px 2px #ff0000;
visibility:hidden;
}
#elegantmenunav ul li a:hover span.text{
visibility:visible;
}
</style>

<div id='elegantmenunav'>
<ul>
<li><a href='http://oketrik.blogspot.com'>
<span class='title'>Beranda</span>
<span class='text'>Halaman depan</span>
</a>
</li>

<li><a href='http://oketrik.blogspot.com/search/label/Trik%20CSS'>
<span class='title'>Trik CSS</span>
<span class='text'>enjoy with css</span>
</a>
</li>
<li><a href='http://oketrik.blogspot.com/search/label/Design%20Template'>
<span class='title'>Desain</span>
<span class='text'>Desain your Template</span>
</a>
</li>
<li><a href='http://www.contactify.com/b6978'>
<span class='title'>Kontak Me</span>
<span class='text'>Call if a problem</span>
</a>
</li>
</ul>
</div>

Kalau sudah memodifikasinya lalu simpan deh dan sobat bisa melihat hasilnya

Benerkan mudah cara memasangnya? sebenarnya ada dua cara untuk Elegant Menu Navigasi tapi kalau saya pikir-pikir cara inilah yang paling mudah, kalau saya berikan cara yang satu lagi. nanti gak bisa pulang lagi kehabisan uang buat ngenet. billing udah tinggi saya harus pamit. Terima Kasih dan Happy Blogging ^)_(^

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg