Membuat Widget Dropdown di Postingan/Sidebar Blogger

Membuat Widget Dropdown di Blog - Menu Dropdown lumrahnya dibuat sebagai menu navigasi pada bagian header blog yang di buat pada HTML templete atau dengan konfigurasi halaman mandiri karena lebih keren dan simpel, tujuannya untuk menampilkan daftar kategori artikel atau halaman dari website tersebut agar mudah dicari oleh pengunjung.

Tampilan Dropdown Menu Dalam Postingan Blog (No. 1. Pada Desktop, 2. Seluler)

Widget dropdown sifatnya show click atau pull down jadi widget ini bisa dilihat semua jika di klik menggunakan cursor atau di tap.

Walu sering dipakai untuk menu navigasi tapi kode untuk membuat multi dropdown bisa juga gunakan sebagai widget pada Postingan (Artikel), Laman atau dibuat pada sidebar blog.

Pada bab desain blog kali ini saya akan membagikan satu tips bagaimana cara membuat daftar link kategori atau artikel dengan sistem dropdown dalam postingan untuk berbagai keperluan.

Supaya lebih jelas dan tidak penasaran seperti apa menu dropdown dalam postingan tersebut berikut contohnya:

 Contoh Dropdown Desain web  ips menlis   Travel blogger   Youtube   Wisata  .... dst .... 

Cara Membuat Dropdown Menu Dalam Postingan

Mengingat Postingan juga merupakan bagian penting dari konten blog maka perlu juga namanya medesain agar artikel tidak kelihatan kaku misalnya menulis artikel tentang hal-hal yang perlu desain tambahan metode ini bisa digunakan.

Kelebihan membuat widget dropdown dalam postingan:

• Lebih menghemat halaman postingan.
• Penggunaannya sangat mudah dan terlihat simpel.
• Dan banyak sisi lain dari dropdown ini, diantaranya menambah wawasan blogger itu sendiri.

Langkah Bikin Widget Multi Dropdown di HTML Postingan

1.   Buka Blog > Buatlah satu Artikel seperti yang dibaca ini.

2. Setelah itu masuk kode CSS khusus pada "Tab HTML", berikut kodenya:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">&nbsp;<option selected="" value="0">Contoh Dropdown</option>
<option value="link/URL">Desain web</option>
<option value="link/URL">Tips menlis</option>
<option value="link/URL">Travel Blogger</option>
<option value="link/URL">Youtube</option>
<option value="link/URL">Wisata</option>
.... dst ....
</select></div>

3. Keterangan! Ganti tulisan: "Judul", "Kategori" dan "Link" dengan apa yang ada di pikiran Anda, jika butuh lebih banyak tinggal copy lagi kodenya mulai dari <option sampai</option> lalu tinggal ditambahkan satu atau beberapa pun kebawahnya.

4. Setelah dirasa selesai selanjutnya, "Publikasikan"

Cukup mudah sekali bukan ternyata membuat widget dropdown dalam postingan?

Pilihan lainnya:

Cara Membuat Dropdown di Sidebar Blogger

Kode menu Dropdown bisa digunakan untuk membuat Laman daftar kategori artikel atau daftar konten lainnya pada widget sidebar dan page (halaman)

Cara Membuat Menu Dropdown Pada Sidebar.

Untuk mencoba kode menu drop down dipasang pada sidebar blog berarti harus menambah widget melalui Add Widget, Menu ini fungsinya sama saja bisa digunakan untuk membuat daftar link ke kategori atau halaman lainnya yang berguna untuk membantu navigasi blog.

Langkah-langkah Memasang Menu Dropdown Pada Sidebar

1. Buka Blogger, kemudian Klik menu "Tata Letak".

2. Klik "Add Gadget" untuk Sidebar > Lalu pilih "HTML/JavaScript".

3. Selanjutnya, Pasang kode tadi pada kolom konten.

4. Klik "Simpan"

Kurang lebih gambarnya seperti ini:

Screenshot Ketika Memasang Kode Kedalam Kolom Konten Blog Mudahrizki /17/09/2018

Nah itu tadi pilihan jika menu Dropdown ingin dipasang pada sidebar, widget ini akan muncul jika templete dilihat dengan perangkat komputer atau disetting untuk responsive.

Tambahan Menu Dropdown

Bagi sobat yang ingin mencoba menu yang lebih keren bisa memakai kostum kode menu tampilan Dropdown pada seluler dan Horizontal pada jika dilihat pada desktop menubini dengan CSS seperti untuk membuat menu navigasi blog biasanya tapi bisa dipasang dalam postingan atau sidebar blog, supaya lebih jelas bisa lihat langsung demo dibawah ini:

(Klik untuk melihat)

☰ Menu

• Homepage
• Daftar Kategori
• Daftar Isi Blog

Sangat menarik untuk membuat daftar menu dalam blog bukan?

Jika anda tertarik berikut ini adalah kode untuk membuat menu navigasi Dropdown seperti tadi:

Copy kodenya:

<!--- Kode CSS Menu Horizontal Responsive Sederhana --->
<style type="text/css">
body{font-family:"Roboto",sans-serif!important;font-size:100%;margin:0px;padding:0px;}

/*navmenu-horizontal*/
#nav{background:#111111;}
#nav ul{margin:0;padding:0;}
#nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;}
#nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;}
#nav li a:hover{background:#191919;color:#ffffff;}
#nav li:first-child{background:#e42a2a;}
.top-menu{background:#c91717;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;}
.top-menu span{float:right;margin-right:1em;}
.top-menu b{font-size:30px;}
#nav input[type=checkbox]:checked ~ #menus{display:block;}
#nav input[type=checkbox]{display:none;}

/*css-styles-responsive*/
@media screen and (max-width:768px){
 #nav ul{display:none;position:static;}
 #nav li{border-bottom:1px solid #333;}
 #nav ul li, #nav li a{width:100%;}
 #nav li a{display:block;height:auto;line-height:normal;}
 #nav li a{text-align:left;}
 .top-menu{display:block!important;line-height:30px;}
 .top-menu:hover{cursor:pointer;}
 label{margin:0!important;}
}
</style>

<!--- Kode HTML Menu Horizontal Responsive Sederhana --->
<nav id='nav'>
<label class='top-menu' for='top-menu'><b>&#9776;</b> <span>Menu</span></label>
<input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='Link/URL'>Homepage</a></li>
<li><a href='Link/URL'>Kategori</a></li>
<li><a href='Link/URL'>Daftar Isi</a></li>
</ul>
</nav>

Keterangan:

Ganti tulisan berwarna "Biru" dengan Link/URL sedangkan "Hijau" sesuaikan dengan nama menu keinginan.

Kode bersumber: dari postingan dengan alamat berikut:
https://www.mengelolablog.com/2017/07/membuat-menu-horizontal-responsive-dengan-css.html?m=1

Untuk cara pemasangan persis seperti diatas saya jelaskan.

Demikianlah tips cara membuat Dropdown Menu pada Postingan dan Sidebar Blogger semoga membantu bagi sahabat blogger yang memerlukan cara dan langkah-langkahnya bisa dipahami khususnya untuk pemula.