3/06/2012

Membuat Dropdown menu dengan CSS di Blogger


Pengenalan Drop Down Menu


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



Memasang Drop Down Menu



Untuk membuatnya silahkan sobat login ke akun blogger, pastikan sebelum kalian mengedit template, kalian amankan dulu templatenya dengan menyeleksi semua, lalu kalian copy di Notepad, jika sewaktu waktu ada error, maka kalian bisa lebih mudah untuk mengembalikan jika terjadi error.



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 :



<div id="container">
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#">Roti</a></li>
<li><a href="#">Bahan»</a>
<ul class="navigation-3">
<li><a href="#">Coklat</a></li>
<li><a href="#">Sosis</a></li>
</ul>

</li>
<li><a href="#">Jus</a></li>
<li><a href="#">Susu»</a>
<ul class="navigation-3">
<li><a href="#">Sapi</a></li>
<li><a href="#">Wedhus</a></li>
<li><a href="#">Kerbau</a></li>
<li><a href="#">Tawon</a></li>
<li><a href="#">Ayam</a></li>
<li><a href="#">Indomilk</a></li>
<li><a href="#">Bawenmilk</a></li>
</ul>

</li>
</ul>

</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>

</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>

</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#">rahmancyber1</a></li>
<li><a href="#">rahmancyber2</a></li>
<li><a href="#">rahmancyber3</a></li>
<li><a href="#"> rahmancyber4»</a>
<ul class="navigation-3">
<li><a href="#">My Computer Dummies</a></li>
<li><a href="#">Dummy Blog</a></li>
<li><a href="#">Feed</a></li>
</ul>

</li>
</ul>

</li>
</ul>
</div>

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 NET
Belajar Ilmu - Menerapkan Ilmu - Mengamalkan Ilmu
Situs Website Utama : https://www.rahmancyber.net
Facebook, Instagram : @RahmanCyber
Youtube Channel : YouTube.Com/c/RahmanCyberNET atau YouTube.com/RahmanCyber
Tentang RahmanCyber | Peta Situs


Advertisement
Sobat, ditempat ini kita belajar bareng ya, saling berbagi ilmu di http://rahmancyber.net Apabila ada yang perlu di tambahkan atau ada kesalahan mohon di koreksi
Bagi yang menginginkan konten berupa video, bisa langsung kunjungi link Channel Youtube RahmanCyber NET
Matur Nuwun...

Sponsor Rahmancyber Network



Baca Juga

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 kita usahakan ringan agar mudah dipahami pembaca. Salam RahmanCyber Network

Rahmancyber Network

...
Berikut ini merupakan Bagian dari Rahmancyber Network

Whatsapp Button works on Mobile Device only