3/06/2012

Membuat Dropdown menu dengan CSS di Blogger


Nah kali ini membahas lebih sedikit tentang memperindah tampilan menu, salah satunya dengan drop down.   Menu navigasi yang terpasang diblog dimaksudkan untuk memudahkan pengunjung menelusuri isi blog, selain itu juga menjadi inti masuk search engine dalam menelusuri link yang ada di dalam blog.

Seperti dalam bahasan di jagat internet tentang menu navigasi horisontal bercabang dengan cabang hanya 1 level, dalam postingan ini kita mencoba membuat menu navigasi horisontal (drop down menu) dengan cabang hingga dua level. Script menu ini bersumber dari css menu maker.

Tampilan menu navigasi bisa dilihat pada gambar di bawah ini





Untuk membuatnya login ke akun blogger



1. Pilih Dashboard - Tataletak - Edit HTML

menu horisontalcari kode berikut:


]]>


2. Di bagian atas kode tersebut masukkan kode berikut

div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"





6. Pilih gadget html/javascript
masukkan script berikut :


Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.

Contoh blog yang memakai menu horisontal bisa dilihat disini menu horisontal





RahmanCyber Tutorial
Redaksi yang menulis berbagai Tutorial Berguna
http://www.rahmancyber.net
Facebook : /rahmancyber | Twitter : @RahmancyberNet


Advertisement
RahmanCyber Network merupakan sumber beragam informasi seputar Tips dan Trik, berbagai Info Terkini, dan Pengetahuan lainnya | Selamat datang di http://rahmancyber.net | Semoga yang kita sajikan pada situs ini bisa bermanfaat bagi para pembaca... ini channel youtube kita https://www.youtube.com/channel/UCR-cTDMxvNGfojd-1J3Rz2A? Jangan lupa... like and subscribenya ya.. hehe


Sponsor Rahmancyber Network





Post a Comment

Berilah Komentar di sini, Harap Jangan Nyepam ya...

Rahmancyber Network

...
Berikut ini merupakan Bagian dari Rahmancyber Network

Whatsapp Button works on Mobile Device only