Cara membuat menu dropdown selamat siang kawan .. admin blog Mahadewa pulsa jasa website pada siang hari ini blog agen pulsa akan membuat panduan Blogger tentang Cara membuat menu dropdown.
sebuah menu pada blogger baik blogspot maupun yang sudah doamin dotcom.
menu sebenarnya sudah ada menu dari bawaan blogger, namun jika di antara kalian belum puas dengan menu tampilan bawaan blogger, kita bisa membuat menu dengan tampilan yang berbeda dengan menu bawaan dari blogger, karena menu bawaan dari blogger tampilanya hanya standart tidak ada sub menu nya atau tidak ada dropdown nya.
yang di maksud dengan dropdown adalah kita bisa memasukan menu yang lainya dalam satu kolom menu tersebut jika krusor mouse di letahkan di salah satu kolom menu yang sudah di buat dropdownya maka akan tampil sub menu yang lainya untuk lebih jelasnya perhatikan gambar di bawah ini
fungsi membuat menu dropdown adalah yang diantaranya membuat simpel tampilan menu blog itu sendiri bisa mengurangi banyak tempat karena menunya bisa di tempatkan dalam satu kolom judul halaman dan fungsi yang lainya kalau menurut saya bisa menambah ke unikan dari blog itu sendiri
saya kira ulasan tentang menu dropdown sudah cukup tapi jika masih ada yang ingin di tanyakan silahkan berkomentar saja nanti saya akan menjawab nya
dan untuk cara membuat menu dropdown selengkapnya silahkan ikuti langkah-langkahnya di bawah ini :
1. buka blog anda melalui www.blogger.com lalu klik desain untuk menuju dashbord Blog
2. pilih template dan klik edit HTML
3. lalu cari di kode HTML kode ini ]]</b:skin>
4. copy kode di bawah ini dan letahkan di atas kode ]]</b:skin>
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:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !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);}
5. selanjutnya cari lagi kode di HTML kode ini </head>
6. lalu kopy semua kode di bawah ini dan letahkan di bawah kode </head>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/search/label/Tutorial'>Tutorial</a></li>
<li class='sub'><a href='/search/label/Template'>Template</a><ul>
<li><a href='/search/label/CSS3'>CSS3</a></li>
<li><a href='/search/label/HTML5'>HTML5</a></li>
<li><a href='/search/label/Responsive'>Responsive</a></li>
<li><a href='http://jasabikin-website.blogspot.com/2014/05/mengecek-score-seo-blog.html' target='_blank'>SEO</a></li>
</ul>
</li>
</ul>
</nav>
Keterangan :
sebuah menu pada blogger baik blogspot maupun yang sudah doamin dotcom.
menu sebenarnya sudah ada menu dari bawaan blogger, namun jika di antara kalian belum puas dengan menu tampilan bawaan blogger, kita bisa membuat menu dengan tampilan yang berbeda dengan menu bawaan dari blogger, karena menu bawaan dari blogger tampilanya hanya standart tidak ada sub menu nya atau tidak ada dropdown nya.
yang di maksud dengan dropdown adalah kita bisa memasukan menu yang lainya dalam satu kolom menu tersebut jika krusor mouse di letahkan di salah satu kolom menu yang sudah di buat dropdownya maka akan tampil sub menu yang lainya untuk lebih jelasnya perhatikan gambar di bawah ini
 |
| contoh menu drop down |
saya kira ulasan tentang menu dropdown sudah cukup tapi jika masih ada yang ingin di tanyakan silahkan berkomentar saja nanti saya akan menjawab nya
dan untuk cara membuat menu dropdown selengkapnya silahkan ikuti langkah-langkahnya di bawah ini :
1. buka blog anda melalui www.blogger.com lalu klik desain untuk menuju dashbord Blog
2. pilih template dan klik edit HTML
3. lalu cari di kode HTML kode ini ]]</b:skin>
4. copy kode di bawah ini dan letahkan di atas kode ]]</b:skin>
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:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !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);}
5. selanjutnya cari lagi kode di HTML kode ini </head>
6. lalu kopy semua kode di bawah ini dan letahkan di bawah kode </head>
<nav>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/search/label/Tutorial'>Tutorial</a></li>
<li class='sub'><a href='/search/label/Template'>Template</a><ul>
<li><a href='/search/label/CSS3'>CSS3</a></li>
<li><a href='/search/label/HTML5'>HTML5</a></li>
<li><a href='/search/label/Responsive'>Responsive</a></li>
<li><a href='http://jasabikin-website.blogspot.com/2014/05/mengecek-score-seo-blog.html' target='_blank'>SEO</a></li>
</ul>
</li>
</ul>
</nav>
Keterangan :
- warna merah pada kode di atas adalah judul menu nya
- warna hijau pada kode di atas adalah url tujuan menu nya
7. lalu klik pratinjau dulu untuk mengecek pemasangan kodenya sudah benar atau salah
8. jika sudah benar / tidak eror silahkan simpan template anda
9. selesai
Selanjutnya silahkan lihat hasilnya pembuatan menu dropdown nya dengan cara membuka beranda blog
saya rasa cukup sekian tutorial tentang cara membuat menu dropdown.