cara membuat menu dropdown selamat siang kawan .. admin blogger wonogiri pada siang hari ini akan membuat panduan Blogger tentang Cara membuat menu dropdown.
sebuah menu pada blogger baik blogspot maupun yang sudah ganti doamin dotcom.
fitur 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
sebuah menu pada blogger baik blogspot maupun yang sudah ganti doamin dotcom.
fitur 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 |
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:/jatisronopule.blogspot.com/p/ingin-bikin-web.html' target='_blank'>jasa website</a></li>
</ul
</li>
</ul>
</nav>
Keterangan :
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:/jatisronopule.blogspot.com/p/ingin-bikin-web.html' target='_blank'>jasa website</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 ulang blog anda
sekian tutorial tentang cara membuat menu dropdown di blogger semoga berguna
No comments:
Post a Comment