CARA MEMBUAT MENU DROP DOWN DI BLOG YANG KEREN

Menu drop down

Mungkin bagi para agan agan yang sudah mendalami tentang bloging atau bloger mungkin udah mahir tentan " cara membuat menu drop down di blog yang keren ". tapi bagi pemula mungkin susah susah gampang . kali ini sepiringilmuku.blogspot.com akan menjelaskan tentang cara yang akan saya ulas di atas tadi. perhatikan langkah langkah sebagai berikut.

1. Masuk blogger
2. Masuk di Template di dasbor anda

 3. Edit Html

 

4. Setelah ketemu copy paste html ini :

   nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:RED;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:balck !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}

4. Setelah itu letakkan yang saya beri lingkaran.

penempatan script

5. Setelah itu tambah widget di header

6. Copy paste scrip di bawah ini.

<nav>
<ul>
<li><a href='http://sepiringilmuku.blogspot.com/search/label/blog'>TUTORIAL BLOG</a></li>
<li><a href='http://sepiringilmuku.blogspot.com/search/label/windows'>WINDOWS</a></li><li><a href='http://sepiringilmuku.blogspot.com/search/label/'>ILMU</a></li><li><a href='#'>IKLAN</a></li>
<li class='sub'><a href='#'></a>
<ul>
<li> <a href='#'>CSS3</a></li>
<li> <a href='#'>HTML5</a></li>
<li> <a href='#'>Responsive</a></li>
<li> <a href='#'>SEO</a></li>
</ul>
</li>
</ul>
</nav>

seperti di gambar di bawah ini

 

lihat hasilnya seperti di bawah ini.

Menu drop down

Nah langkah langkah membuat menu drop down sudah selesai, semoga bermanfaat .

Untuk yang sedang ingin atau berminat mendapatkan dolar secara gratis klik bener di bawah ini.