Membuat Widget Dropdown di Blog - Menu Dropdown lumrahnya dibentuk sebagai sajian navigasi pada pecahan header blog yang di buat pada HTML templete atau dengan konfigurasi halaman dapat bangkit diatas kaki sendiri alasannya ialah lebih keren dan simpel, tujuannya untuk menampilkan daftar kategori artikel atau halaman dari website tersebut biar gampang 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 dapat dilihat semua kalau di klik menggunakan cursor atau di tap.
Walu sering digunakan untuk sajian navigasi tapi aba-aba untuk menciptakan multi dropdown dapat juga gunakan sebagai widget pada Postingan (Artikel), Laman atau dibentuk pada sidebar blog.
Pada pecahan desain blog kali ini saya akan membagikan satu tips bagaimana cara menciptakan daftar link kategori atau artikel dengan sistem dropdown dalam postingan untuk aneka macam keperluan.
Supaya lebih terang dan tidak ingin tau ibarat apa sajian dropdown dalam postingan tersebut berikut contohnya:
Cara Membuat Dropdown Menu Dalam Postingan
Mengingat Postingan juga merupakan pecahan penting dari konten blog maka perlu juga namanya medesain biar artikel tidak kelihatan kaku contohnya menulis artikel perihal hal-hal yang perlu desain perhiasan metode ini dapat digunakan.
Kelebihan menciptakan widget dropdown dalam postingan:
- Lebih menghemat halaman postingan.
- Penggunaannya sangat gampang 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 ibarat yang dibaca ini.
2. Setelah itu masuk aba-aba CSS khusus pada "Tab HTML", berikut kodenya:
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"> <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, kalau butuh lebih banyak tinggal copy lagi kodenya mulai dari <option sampai</option> kemudian tinggal ditambahkan satu atau beberapa pun kebawahnya.
4. Setelah dirasa final selanjutnya, "Publikasikan"
Cukup gampang sekali bukan ternyata menciptakan widget dropdown dalam postingan?
Pilihan lainnya:
Cara Membuat Dropdown di Sidebar Blogger
Kode sajian Dropdown dapat digunakan untuk menciptakan Laman daftar kategori artikel atau daftar konten lainnya pada widget sidebar dan page (halaman)
Cara Membuat Menu Dropdown Pada Sidebar.
Untuk mencoba aba-aba sajian drop down dipasang pada sidebar blog berarti harus menambah widget melalui Add Widget, Menu ini fungsinya sama saja dapat digunakan untuk menciptakan daftar link ke kategori atau halaman lainnya yang mempunyai kegunaan untuk membantu navigasi blog.
Langkah-langkah Memasang Menu Dropdown Pada Sidebar
1. Buka Blogger, kemudian Klik sajian "Tata Letak".
2. Klik "Add Gadget" untuk Sidebar > Lalu pilih "HTML/JavaScript".
3. Selanjutnya, Pasang aba-aba tadi pada kolom konten.
4. Klik "Simpan"
Kurang lebih gambarnya ibarat ini:
 |
| Screenshot Ketika Memasang Kode Kedalam Kolom Konten Blog Mudahrizki /17/09/2018 |
Nah itu tadi pilihan kalau sajian Dropdown ingin dipasang pada sidebar, widget ini akan muncul kalau templete dilihat dengan perangkat komputer atau disetting untuk responsive.
Tambahan Menu Dropdown
Bagi sobat yang ingin mencoba sajian yang lebih keren dapat menggunakan kostum aba-aba sajian tampilan Dropdown pada seluler dan Horizontal pada kalau dilihat pada desktop menubini dengan CSS ibarat untuk menciptakan sajian navigasi blog biasanya tapi dapat dipasang dalam postingan atau sidebar blog, supaya lebih terang dapat lihat pribadi demo dibawah ini:
(Klik untuk melihat)
Jika anda tertarik berikut ini ialah aba-aba untuk menciptakan sajian navigasi Dropdown ibarat 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>☰</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 goresan pena berwarna "Biru" dengan Link/URL sedangkan "Hijau" sesuaikan dengan nama sajian keinginan.
Kode bersumber: dari postingan dengan alamat berikut:
https://caricarawow.blogspot.com//search?q=membuat-menu-horizontal-responsive-dengan-css?m=1
Untuk cara pemasangan persis ibarat diatas saya jelaskan.
Demikianlah tips cara menciptakan Dropdown Menu pada Postingan dan Sidebar Blogger semoga membantu bagi sahabat blogger yang memerlukan cara dan langkah-langkahnya dapat dipahami khususnya untuk pemula.