Cara membuat menu drop down atau cara membuat menu drop down di blog
Menu drop down adalah : sebuah papan menu yang bisa di buat dengan cara sejajar dan juga bisa di tambah menu yang tersusun kebawah.
jadi dengan menggunakan menu drop down maka akan menghemat ruang blog anda karena hanya dengan satu baris papan menu dan juga ada sub menu yang kebawah nya.
cara membuat menu drop down pun bisa di bilang mudah hanya dengan menambah kan dua (2) rangakaian kode css dan kode html kedalam Html template blog , sebagai contoh menu drop down yang akan saya berikan panduanya disini seperti pada contoh gambar di bawah ini
dengan contoh gambar di atas saya yakin semuanya sudah paham yang di sebut dengan menu dropdown di menu dalam blog maupun website, dan untuk cara pembuatan menu drop down nya silahakn ikuti panduanya di bawah ini
Cara membuat menu drop down
1.buka blog anda lalu login dulu , jika sudah login blog masing-masing silahakn menuju dashboard blog
2.pilih template dan klik EDIT HTML
3.lalu kopi kode yang ada di bawah ini dan pastekan 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);}
4.lalu kopi lagi kode di bawah ini dan pastekan di atas 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'>Multi blog</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://multi-blogg.blogspot.com/2014/09/jasa-murah-bikin-blog.html' target='_blank'>jasa pembuatan website</a></li>
</ul>
</li>
</ul>
</nav>
Keterangan :
Cara memasukan nama menu dan urlnya
6.selesai
cara melihat hasil pembuatan menu drop down nya silahkan buka ulang beranda blog anda atau bisa membuka salah satu postingan anda.
papan menu dalam sebuah blog itu sebagai petunjuk untuk memberikan penjelasan kepada pengguna jadi jika ada pengguna yang mengunjungi situs anda akan mudah untuk mencari artikel yang ada dalam sebuah blog tersebut , jika sebuah blog tidak ada papan menu nya maka pengunjung pun akan kesulitan mencari apa saja konten yang ada dalam blog tersebut.
demikian ulasan fungsi dari sebuah menu dalam blog website / blog dan cara membuat menu drop down nya , jika ada kesulitan silahakn untuk bertanya saja
Menu drop down adalah : sebuah papan menu yang bisa di buat dengan cara sejajar dan juga bisa di tambah menu yang tersusun kebawah.
jadi dengan menggunakan menu drop down maka akan menghemat ruang blog anda karena hanya dengan satu baris papan menu dan juga ada sub menu yang kebawah nya.
cara membuat menu drop down pun bisa di bilang mudah hanya dengan menambah kan dua (2) rangakaian kode css dan kode html kedalam Html template blog , sebagai contoh menu drop down yang akan saya berikan panduanya disini seperti pada contoh gambar di bawah ini
dengan contoh gambar di atas saya yakin semuanya sudah paham yang di sebut dengan menu dropdown di menu dalam blog maupun website, dan untuk cara pembuatan menu drop down nya silahakn ikuti panduanya di bawah ini
Cara membuat menu drop down
1.buka blog anda lalu login dulu , jika sudah login blog masing-masing silahakn menuju dashboard blog
2.pilih template dan klik EDIT HTML
3.lalu kopi kode yang ada di bawah ini dan pastekan 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);}
4.lalu kopi lagi kode di bawah ini dan pastekan di atas 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'>Multi blog</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://multi-blogg.blogspot.com/2014/09/jasa-murah-bikin-blog.html' target='_blank'>jasa pembuatan website</a></li>
</ul>
</li>
</ul>
</nav>
Keterangan :
Cara memasukan nama menu dan urlnya
- Tulisan warna biru dalam kode di atas adalah contoh url nya jadi cara memasukan urlnya seperti itu
- Tulisan warna kuning adalah nama menu nya
6.selesai
cara melihat hasil pembuatan menu drop down nya silahkan buka ulang beranda blog anda atau bisa membuka salah satu postingan anda.
papan menu dalam sebuah blog itu sebagai petunjuk untuk memberikan penjelasan kepada pengguna jadi jika ada pengguna yang mengunjungi situs anda akan mudah untuk mencari artikel yang ada dalam sebuah blog tersebut , jika sebuah blog tidak ada papan menu nya maka pengunjung pun akan kesulitan mencari apa saja konten yang ada dalam blog tersebut.
demikian ulasan fungsi dari sebuah menu dalam blog website / blog dan cara membuat menu drop down nya , jika ada kesulitan silahakn untuk bertanya saja