File Category Labels Blog Model Select Item
Daftar Label Kategori Model Dropdown - Dropdown merupakan efek untuk menampilkan item sub menu dalam diagram dengan gerakan menurun kebawah. Seperti daftar link menu navigasi blog pada umumnya, dimana jika selector <ul> digandakan lagi untuk membuat sub menu, maka saat element induk diHOVER akan menunjukkan beberapa pilihan item menu dengan efek dropdown seperti ini:
Disini yang kita butuhkan hanya satu item menu, yang nantinya akan kita buat menjadi model menu dropdown untuk menampilkan daftar label blog dengan JavaScript perintah (JavaScript Variable=[json.feed.category]), seperti ini:
DEMO SHOW
Karena modelnya seperti item menu, jadi Anda bisa menempatkan hasilnya dimana saja, atau bisa Anda gabungkan dalam selecktor <li> pada menu navigasi blog Anda, daftar label kategori model dropdown seperti ini, sudah pernah saya gabungkan dalam satu tampilan seperti ini:
» Cara Membuat Site Map Terbaru | Daftar Isi Blog
» Mengubah Breadcrumb Menjadi Menu Navigasi
Bagaimana dengan Anda?, dimana akan Anda letakkan daftar file label ini, hmmm..letakkan sesuai selera ya guys hehe..!!, yang sekiranya enak untuk dipandang. Mau membuatnya, berikut kode lengkapnya:
<div id="daftar label kategori">
<ul="[class:atibut]">
<li><a href="....">Daftar Label Kategori</a></li>
<li><a href="....">Daftar Label Kategori</a></li>
//menggandakan diagram ul
<ul class="model menu">
<li>.....</li>
<li>.....</li>
</ul>
</ul>
</div>
<ul="[class:atibut]">
<li><a href="....">Daftar Label Kategori</a></li>
<li><a href="....">Daftar Label Kategori</a></li>
//menggandakan diagram ul
<ul class="model menu">
<li>.....</li>
<li>.....</li>
</ul>
</ul>
</div>
BACA JUGA
Menghilangkan Daftar Artikel Pada Halaman BerandaDisini yang kita butuhkan hanya satu item menu, yang nantinya akan kita buat menjadi model menu dropdown untuk menampilkan daftar label blog dengan JavaScript perintah (JavaScript Variable=[json.feed.category]), seperti ini:
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>')
Karena modelnya seperti item menu, jadi Anda bisa menempatkan hasilnya dimana saja, atau bisa Anda gabungkan dalam selecktor <li> pada menu navigasi blog Anda, daftar label kategori model dropdown seperti ini, sudah pernah saya gabungkan dalam satu tampilan seperti ini:
» Cara Membuat Site Map Terbaru | Daftar Isi Blog
» Mengubah Breadcrumb Menjadi Menu Navigasi
Bagaimana dengan Anda?, dimana akan Anda letakkan daftar file label ini, hmmm..letakkan sesuai selera ya guys hehe..!!, yang sekiranya enak untuk dipandang. Mau membuatnya, berikut kode lengkapnya:
<style>
.file {color:#eee}
.fileLabels {color:#fff;background:red}
#wpLabels {background:red;width:27%;padding:3px}
</style>
<div id="wpLabels">
<script type="text/javascript">
//<![CDATA[
//(orange text) ganti dengan URL-Blog Anda..
var homepage = "http://sahabatblogger77.blogspot.com";
function showLabels(json) {
var label = json.feed.category;
document.write('<select onchange="window.open(this.value);"><option selected disabled class="file">DAFTAR LABEL CATEGORY</option>');
for (var i = 0; i < label.length; i++) {
document.write('<option class="fileLabels" value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');
}
document.write('</select>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>
</div>
.file {color:#eee}
.fileLabels {color:#fff;background:red}
#wpLabels {background:red;width:27%;padding:3px}
</style>
<div id="wpLabels">
<script type="text/javascript">
//<![CDATA[
//(orange text) ganti dengan URL-Blog Anda..
var homepage = "http://sahabatblogger77.blogspot.com";
function showLabels(json) {
var label = json.feed.category;
document.write('<select onchange="window.open(this.value);"><option selected disabled class="file">DAFTAR LABEL CATEGORY</option>');
for (var i = 0; i < label.length; i++) {
document.write('<option class="fileLabels" value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');
}
document.write('</select>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>
</div>
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Daftar Label Kategori Model Dropdown
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
Kalau saya sih memang pakai model turun ke bawah ini Mbak. Lebih hemat tempat. Tapi kalau di wordpress tinggal centang aja mau milih mode turun ke bawah atau langsung ditampilkan semuanya.
BalasHapus.Kalau saya hanya pada 1 menu aja sih mbak pakai yang seperti ini, hehe. Tapi ilmunya mantap. :)
BalasHapusseperti kata mas ridha, untuk menghemat place, lebih simple dan minimalis.
Hapussaya baca-baca ini dulu ya mbak meskipun tidak konsen maklum kepala setengah nyut-nyut
BalasHapuswah..hati-hati mas, kepala nyut-nyutan kok malah dibawa membaca, seharusnya dibawa kerumah sakit buat diobatin, hehe..!!
HapusKallau model label dropdown seprti itu terlihat lebih simple ya mba. :d
BalasHapustepatnya sih seperti itu mas, apalgi karena bentuknya seperti tab menu, jadi bisa kita gabungkan untuk diletakkn bersamaan dengan menu navigasi blog.
HapusDropdown model gini nih yang cocok banget buat referensi drop down blog responsive . , blog gue juga make gitu soalnya kalo pas responsivenya .. hahaa . ,
BalasHapusLabel ini terkesan simple dan tidak memakan banyak tempat di blog, itu yang saya suka, izin save mbak :)
BalasHapusIni kodenya ditambahkan saja di sidebar ya mbak atau harus masuk ke template soalnya kalau masuk kode di template belum tahu utak atik, kalau tinggal tambah di sidebar berani deh
BalasHapusberupa widget yang bisa kita tempatkan diamana saja pak ustad, jadi bisa diletakkan pada halaman HTML/JavaScript gadget sidebar-page.
HapusAlhamdulillah bisa diterapkan kalau begitu langsung coba deh
HapusBagus ilmunya..terima kasih berkongsi
BalasHapus5+
BalasHapus