23.5.15
14
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:


<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>



Label blog





BACA JUGA
Menghilangkan Daftar Artikel Pada Halaman Beranda



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:

document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>')





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:

<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>

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 >>
= TERIMA KASIH =

14 komentar

  1. 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
  2. .Kalau saya hanya pada 1 menu aja sih mbak pakai yang seperti ini, hehe. Tapi ilmunya mantap. :)

    BalasHapus
    Balasan
    1. seperti kata mas ridha, untuk menghemat place, lebih simple dan minimalis.

      Hapus
  3. saya baca-baca ini dulu ya mbak meskipun tidak konsen maklum kepala setengah nyut-nyut

    BalasHapus
    Balasan
    1. wah..hati-hati mas, kepala nyut-nyutan kok malah dibawa membaca, seharusnya dibawa kerumah sakit buat diobatin, hehe..!!

      Hapus
  4. Kallau model label dropdown seprti itu terlihat lebih simple ya mba. :d

    BalasHapus
    Balasan
    1. tepatnya sih seperti itu mas, apalgi karena bentuknya seperti tab menu, jadi bisa kita gabungkan untuk diletakkn bersamaan dengan menu navigasi blog.

      Hapus
  5. Dropdown model gini nih yang cocok banget buat referensi drop down blog responsive . , blog gue juga make gitu soalnya kalo pas responsivenya .. hahaa . ,

    BalasHapus
  6. Label ini terkesan simple dan tidak memakan banyak tempat di blog, itu yang saya suka, izin save mbak :)

    BalasHapus
  7. Ini 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

    BalasHapus
    Balasan
    1. berupa widget yang bisa kita tempatkan diamana saja pak ustad, jadi bisa diletakkan pada halaman HTML/JavaScript gadget sidebar-page.

      Hapus
    2. Alhamdulillah bisa diterapkan kalau begitu langsung coba deh

      Hapus
  8. Bagus ilmunya..terima kasih berkongsi

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK