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, Hal yang Kamu Perlu Tau, Belajar Agama Islam, berbagai Info, dan Pengetahuan lainnya | Selamat datang di http://rahmancyber.net | Semoga yang kita sajikan pada situs ini bisa bermanfaat bagi para pembaca... Disini kita juga menyediakan Video dibeberapa Tips, Tutorial dan Artikel Lainnya untuk memperjelas penyampaian. 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 merupakan media referensi yang membahas berbagai topik seperti Info, Tutorial, Tips, Trik, Belajar Bersama... mengapa tidak satu Niche saja yang dibahas di RahmanCyber?

karena disini kita mengutamakan artikel yang kaya dalam satu tempat, sehingga pengetahuan yang di share ke pengguna dapat bervariasi, dan pengguna hanya perlu menuju kategori yang dia senangi atau butuhkan sahaja.

artikel di Rahman Cyber dibuat secara manual dengan bahasa yang ringan agar mudah dipahami pembaca. RahmanCyber juga memiliki Sub Bagian yang membahas khusus Niche tertentu, Antara Lain : InteenBisnis ( Membahas Khusus tentang Bisnis ), R4CProject ( Galeri Video dan Desain Kreatif di RahmanCyber Network ), BagiDoang ( Merupakan Tempat berbagi Resource dan Unduhan RahmanCyber Network ), AkiraSasori ( Membahas tentang Lirik Lagu Populer dengan Terjemahan Bahasa Indonesia )


Saat ini RahmanCyber.NET juga dapat dinikmati melalui aplikasi android yang tersedia di Google Play Store, untuk mempermudah pembaca mendapatkan konten berkualitas.. insyaAllah.











Salam Founder
RahmanCyber Network






Rahmancyber Network

...
Berikut ini merupakan Bagian dari Rahmancyber Network

Whatsapp Button works on Mobile Device only