Menu Dropdown - perlu di ketahui bahwa sebuah website ataupun blog itu menurut saya sangat penting untuk membuat menu drop down, walau sebenarnya navigasi menu ini sudah ada atau sudah di siapapkan oleh penyedia jasa situs misalnya blogger atau wordpress tapi menu yang bawaan biasanya modelnya standar atau lurus-lurus saja jadi kalau dilihat dari segi keunikan tentunya kurang menarik menurut saya, oleh karena itu jika kita suka keindahan , keunikan tidak ada salahnya untuk merenovasi tampilan blog supaya lebih menjadi unik dan menarik.
untuk membuat menu dropdown pada blog sebenarnya sangat banyak cara nya dan saya kemaren juga sudah membuat panduan tentang cara membuat menu drop down.
kalau kemaren saya membuat menu drop down dengan cara memvariasi kode nya yaitu satu kode di taruh di HTML template lalu kode yang satunya di taruh lewat gadged, untuk melihat lebih jelasnya untuk perbandingan silahkan mengunjungi cara membuat menu dropdown cara 1 .
lalu pada kesempatan ini saya sebagai Admin tunggal blog mahadewa pulsa dan ppob blog tentang agen pulsa - bisnis online - Tutorial blog serta jasa bikin blog akan membuat panduan atau tutorial blog cara membuat menu dropdown cara 2
membuat menu dropdown cara 2 ini adalah dengan cara menambahkan dua kode kedalam kode HTML pada template blog untuk sebagai pertimbangan dengan menu drop down cara 1 saya akan menampilaka gambar menu drop down cara 2 yang terlihat pada gambar di bawah ini
Gambar di atas adalah contoh menu drop down cara 2 yang akan saya bagikan carany apada postingan ini , jika kalian tertarik untuk membuatnya silahkan pilih menu drop down cara 1 atau menu drop down cara 2 , untuk melihat contoh menu drop down cara 1 silahkan lihat pada postinga saya yang kemaren ini alamat nya http://www.mahadewapulsa.com/2014/06/cara-membuat-menu-drop-down.html
untuk cara pembuatan menu drop down cara 2 silahkan simak langkah-langkahnya di bawah ini :
1. buka blog anda lalu ke dashborad blog
2.pilih template lalu klik edit HTML
3.dan cari kode di dalam HTML kode ini ]]></b:skin>
4.lalu copy kode di bawah ini dan letakan / taruh tepat 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. cari lagi kode di HTML kode ini </head>
6. dan copy kode di bawah ini lalu letahkan / masukan tepat di bawah kode </head>
<nav>
<ul>
<li><a href='https://jasabikin-website.blogspot.com/'>Home</a></li>
<li><a href='https://jasabikin-website.blogspot.com/'>menu 2</a></li>
<li><a href='http://www.mahadewapulsa.com/'>menu 3</a></li>
<li class='sub'><a href='https://jasabikin-website.blogspot.com/p/sitemap.html'>menu 4</a><ul>
<li><a href='https://jasabikin-website.blogspot.com/p/agen-pulsa-dan-ppob.html'>sub menu 1</a></li>
<li><a href='https://jasabikin-website.blogspot.com/p/beranda.html'>sub menu 2</a></li>
<li><a href='https://jasabikin-website.blogspot.com/p/tv-online.html'>sub menu 3</a></li>
<li><a href='https://jasabikin-website.blogspot.com/p/blog-page.html'>sub menu 4</a></li>
</ul>
</li>
</ul>
</nav>
7. ganti tulisan di dalam kode di atas yang warna merah ganti dengan url blog anda yg ingin di tampilkan pada menu nya , lalu kode yang warna hijau ganti dengan judul menu yang ingin di tampilkan
8. lalu klik pratinjau dulu gunanya untuk mengecek apa sudah bener penempatan kodenya dan jika sudah bener / tidak eror silahkan simpan template nya
9. selesai
Dan untuk melihat hasil pembuatan menu drop down nya silahkan buka beranda blog anda
Sampai disini panduan Blogger Tentang cara membuat menu drop down cara ke 2 semoga bermanfaat
untuk membuat menu dropdown pada blog sebenarnya sangat banyak cara nya dan saya kemaren juga sudah membuat panduan tentang cara membuat menu drop down.
kalau kemaren saya membuat menu drop down dengan cara memvariasi kode nya yaitu satu kode di taruh di HTML template lalu kode yang satunya di taruh lewat gadged, untuk melihat lebih jelasnya untuk perbandingan silahkan mengunjungi cara membuat menu dropdown cara 1 .
lalu pada kesempatan ini saya sebagai Admin tunggal blog mahadewa pulsa dan ppob blog tentang agen pulsa - bisnis online - Tutorial blog serta jasa bikin blog akan membuat panduan atau tutorial blog cara membuat menu dropdown cara 2
membuat menu dropdown cara 2 ini adalah dengan cara menambahkan dua kode kedalam kode HTML pada template blog untuk sebagai pertimbangan dengan menu drop down cara 1 saya akan menampilaka gambar menu drop down cara 2 yang terlihat pada gambar di bawah ini
 |
| Contoh menu drop down cara 2 |
untuk cara pembuatan menu drop down cara 2 silahkan simak langkah-langkahnya di bawah ini :
1. buka blog anda lalu ke dashborad blog
2.pilih template lalu klik edit HTML
3.dan cari kode di dalam HTML kode ini ]]></b:skin>
4.lalu copy kode di bawah ini dan letakan / taruh tepat 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. cari lagi kode di HTML kode ini </head>
6. dan copy kode di bawah ini lalu letahkan / masukan tepat di bawah kode </head>
<nav>
<ul>
<li><a href='https://jasabikin-website.blogspot.com/'>Home</a></li>
<li><a href='https://jasabikin-website.blogspot.com/'>menu 2</a></li>
<li><a href='http://www.mahadewapulsa.com/'>menu 3</a></li>
<li class='sub'><a href='https://jasabikin-website.blogspot.com/p/sitemap.html'>menu 4</a><ul>
<li><a href='https://jasabikin-website.blogspot.com/p/agen-pulsa-dan-ppob.html'>sub menu 1</a></li>
<li><a href='https://jasabikin-website.blogspot.com/p/beranda.html'>sub menu 2</a></li>
<li><a href='https://jasabikin-website.blogspot.com/p/tv-online.html'>sub menu 3</a></li>
<li><a href='https://jasabikin-website.blogspot.com/p/blog-page.html'>sub menu 4</a></li>
</ul>
</li>
</ul>
</nav>
7. ganti tulisan di dalam kode di atas yang warna merah ganti dengan url blog anda yg ingin di tampilkan pada menu nya , lalu kode yang warna hijau ganti dengan judul menu yang ingin di tampilkan
8. lalu klik pratinjau dulu gunanya untuk mengecek apa sudah bener penempatan kodenya dan jika sudah bener / tidak eror silahkan simpan template nya
9. selesai
Dan untuk melihat hasil pembuatan menu drop down nya silahkan buka beranda blog anda
Sampai disini panduan Blogger Tentang cara membuat menu drop down cara ke 2 semoga bermanfaat
Terimakasih dan salam blogger