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

DROPDOWN
 



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


Posting Komentar

Untuk posting kode, bisa di parse dulu gan, pake tool parse yang udah disediakan di website ini https://www.rahmancyber.net/p/parse-code.html

agar kodenya tidak hilang... ^_^

Lebih baru Lebih lama

نموذج الاتصال