Membuat Widget Label Dropdown Pada Blog - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Membuat Widget Label Dropdown Pada Blog, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.
Judul : Membuat Widget Label Dropdown Pada Blog
link : Membuat Widget Label Dropdown Pada Blog
Membuat Widget Label Dropdown Pada Blog
Dalam posting ini saya akan berbagi tutorial tentang cara Mengubah Widget Widget Fungsi Menjadi Dropdown seperti yang kita ketahui di pengaturan label widget blogger ada dua fungsi dan tampilan, yaitu daftar label tampilan widget dan cloud label. Tapi saya akan memberikan pilihan lain dari widget label yang bisa dibuat dropdown, tampilannya persis sama dengan dropdown di widget arsip.
Membuat Widget Label Dropdown Pada Blog:
- Blogger > Template > Cari kode berikut:
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(
<data:label.count/>)
</li>
</b:loop>
</ul>
- Ganti seluruh kode dengan dibawah ini. Ganti tulisan Kategori yang ditandai dengan tulisan sobat.
<div class="dropmedown">
<select class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
<option> Kategori </option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'>
<data:label.name/> (
<data:label.count/>)
</option>
</b:loop>
</select>
</div>
- Copy Paste kode dibawah ini diatas ]]></b:skin> atau </style>
/* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}
- Simpan.
Sebagai berikut:
Demikian Membuat Widget Label Dropdown Pada Blog. Semoga bermanfaat dan terima kasih.
Sekian Artikel Membuat Widget Label Dropdown Pada Blog
Sampailah kita pada akhir artikel Membuat Widget Label Dropdown Pada Blog kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.
sobat sekarang membaca artikel Membuat Widget Label Dropdown Pada Blog dengan alamat link https://naparom.blogspot.com/2018/06/membuat-widget-label-dropdown-pada-blog.html
EmoticonEmoticon