Menampilkan Semua Daftar Label Posting dengan JSON Blogger

Menampilkan Semua Daftar Label Posting dengan JSON Blogger
Konten Feed Blogger

Kode ini digunakan untuk menampilkan semua daftar nama label yang berada di dalam array category feed Blogger (lihat di sini):

<script>
//<![CDATA[
var homepage = "http://nama_blog.blogspot.com";
function showLabels(json) {
    var label = json.feed.category;
    document.write('<ul>');
    for (var i = 0; i < label.length; i++) {
        document.write('<li><a href="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');
    }
    document.write('</ul>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>

Lihat Demo

Susunan markup tidak mutlak. Anda juga bisa mengubahnya menjadi sesuatu yang lain, misalnya mengubahnya menjadi elemen select box seperti ini:

var homepage = "//nama_blog.blogspot.com";
function showLabels(json) {
    var label = json.feed.category;
    document.write('<select onchange="window.open(this.value);"><option selected disabled>-- Daftar Kategori --</option>');
    for (var i = 0; i < label.length; i++) {
        document.write('<option value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');
    }
    document.write('</select>');
}

Lihat Demo

28 Komentar

  • MUX SPARROW

    Pertamaaaxx \o/ mau komen makasih dulu atas petunjuknya, Mas Taufik. script bermasalah di blog sarang udah dibasmi tapi masih ada eror..mungkin belum tuntas ngebasminya. makanya komen mas di postingan "sesuatu" belom bisa dibales, soale tiap masuk situ hang molo.. :'(

    btw, Mas.. demo yang kedua, percantik dengan CSS doooong... :D

    • Taufik Nurrohman

      Sepertinya lebih bagus kalau kode CSS diterapkan untuk hack widget label bawaan Blogger. Kalau ada waktu Saya posting.

  • Kang Kapuk

    Kalau dijadiin cloud, gimana scriptnya Bang....?

  • Mas Sugeng

    Horee... Akhirnya bisa komen di blognya Om Taufik, hehe.. Aku mau tanya sesuatu nih om, tapi ma'af kalo keluar dari topik. Di blogger kan ada fitur quick edit, baik itu untuk widget maupun untuk postingan. Nah, fitur itu kan berjalan menggunakan CSS Authorization (kalau gak salah), CSS yang hanya dapat terlihat oleh admin blog dalam keadaan login. Kurang lebih kodenya seperti ini <link rel='stylesheet' href='//www.blogger.com/dyn-css/authorization.css?targetBlogID=5595xxxxxxx8783722&zx=ee48837c-69de-4d1d-8bcc-4bbcxxxxx00'/>. Dan kode tersebut muncul secara otomatis di dalam tag <head>. Pertanyaannya, kenapa di blog saya gak muncul kodenya ya Om? Aku udah coba otak atik tetep gak muncul. Yang muncul cuma kode CSS Bundle dari blogger. Mungkin Om tahu letak kesalahanya?? Ya sebenarnya sih aku sudah nemu solusinya, yaitu dengan memasukan kode tersebut secara manual ke dalam tag <head>. Tapi, aku bener2 masih penasaran itu letak kesalahnnya dimana.

    • Taufik Nurrohman

      Di blog Saya juga nggak ada. Mungkin harus mengaktifkan fitur Dynamic View dulu.

  • Mas Sugeng

    Cara mengaktifkannya bagaimana ya? Aku udah coba balikin ke template default dan kodenya muncul, tapi pas templatenya diganti kodenya ilang lagi..

    • Taufik Nurrohman

      Mungkin karena kode ini sudah kamu hapus:

      <b:include data='blog' name='all-head-content'/>

      Saya belum pernah mendalami template Blogspot yang sekarang :\

  • Unknown

    Wah script baru nih..
    jadi bisa letakkan label di bagian menu navigasi dan muncul secara automatis nih..

    Hebat Mas taufik..

  • IRIL SAGITA

    Maaf kak taufik, ni keluar dari postingan, aku mau tanya bagaimana cara menyembunyikan javasript seperti di blog ini, padahal script ini :

    http://hompimpa.googlecode.com/svn/trunk/personal/thread-comments.js

    Berfungsi dengan baik, tapi setelah di cek script tersebut tidak kelihatan.

  • Anonim

    mas mungkin sebagai orang yang belum paham saya berharap bisa konsultasi kesini, tapi alamat buruk ternyata pertanyaan yang saya ajukan di hapus, jika menurut sampean pertanyan itu tidak pada tempatnya, kenapa tidak disediakan from untuk diskusi :Q

  • Beben Koben

    bagus sekali \o/
    <style>
    #labels_blog {
    width: 303px;
    min-height: 200px;
    height: auto;
    margin: 0;
    overflow: hidden;
    background: #ffe;
    border: 1px solid #ddd;
    border-radius: 10px;
    clear: both;
    }
    #labels_blog:hover {
    overflow: auto;
    }
    #labels_blog li {
    padding: 0 25px 0 0;
    list-style: none;
    text-align: left;
    display: inline-block;
    }
    #labels_blog a {
    color: #8f0206;
    text-decoration: none;
    font-size: 13px;
    }
    #labels_blog a:hover {
    color: #333;
    font-size: 25px;
    }
    </style>

    <div id="labels_blog">
    <script type="text/javascript">
    //<![CDATA[
    var homepage = "http://YOUR-BLOG.blogspot.com";
    function showLabels(json) {
    var label = json.feed.category;
    document.write('<ul>');
    for (var i = 0; i < label.length; i++) {
    document.write('<li><a href="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');
    }
    document.write('</ul>');
    }
    document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
    //]]>
    </script>
    </div>

  • Unknown

    Mas mau nanya nih..

    bisa tdak var homepage nya dihilangkan?
    dan cara pemanggilan scriptnya dilakukan seperti posting yang ini:
    http://hompimpaalaihumgambreng.blogspot.com/2012/04/recent-post-dan-recent-comment-pada.html

    jadi bisa dibuat dimenu secara automatis
    dan script diatas di gabung dengan yang ada di:
    http://reader-download.googlecode.com/svn/trunk/json-dropdown.js

    bisa tidak mas..
    :)

    • Taufik Nurrohman

      Bisa. Nanti hasilnya jadi seperti ini:

      <script type="text/javascript">
      //<![CDATA[
      function showLabels(json) {
      var label = json.feed.category;
      document.write('<ul>');
      for (var i = 0; i < label.length; i++) {
      document.write('<li><a href="/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');
      }
      document.write('</ul>');
      }
      //]]>
      </script>
      ...
      ...
      <script src="http://nama_blog.blogspot.com/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"></script>
      • Unknown

        Makasih mas sudah dibalas..
        sangat bermanfaat..
        berhasil dengan baik :)

  • ahlul badr

    saya gk ngerti dengan tutor ini ,
    cuman saya mau nanya , cara mengatasi eror label gimana yah .
    jadi yg keluar cuman 1 , biasa nya kan 5
    coba buka ini http://www.ahlulbadr.com/search/label/25nabi
    biasa nya kan 5 tapi ini cuman 1 postingan yg keluar , gk tau kenapa . tolong dong solusi nya . kalo udah di bales maen yah blog saya ,komen kasih tau

    • Taufik Nurrohman

      Sepertinya itu asalnya dari elemen paragraf. Saya coba cek kode sumbernya masih ada kok semua halaman postingnya.
      Coba cari kode ini di dalam template:

      <p><data:post.body/></p>

      lalu ganti dengan ini:

      <data:post.body/>
  • Unknown

    Bagus Banget Nih. Oia Saya Mau Tanya Nih Mas,, Untuk Cara Hilangkan Kode href='//www.blogger.com/dyn-css/authorization.css?targetBlogID=5595xxxxxxx8783722&zx=ee48837c-69de-4d1d-8bcc-4bbcxxxxx00'/> Dari Tag Head Kaya Apa Ya? Soalnya Tidak Valid Untuk HTML5.. Makasi :)

    • Anonim

      coba di tata letak, navbar bawaan bloggernya di nonaktifin/ di off in.

      • Unknown

        Sudah Bisa Mas. Makasi :D

  • Unknown

    Untuk menampilkan jumlah artikel seperti 'kategori' yg ada di blog punya mas gimana...

  • Unknown

    How do I make "daftar isi" like yours here? http://www.dte.web.id/p/daftar-isi-buku.html#0

  • Anonim

    Wah mudah mudahan disini ada yang bisa menjawab permasalahan saya mengenai kode diatas, lagi mumet udah 2 minggu nggak dapat

    1. saya ingin mengambil text dari judul
    2. saya ingin mengambil text label yang tampil berkaitan dengan judul artikel
    contoh :
    Judul Lagu : Terus Berlari
    Label : Coboy Junior

    Saya ingin mengambil tulisan judul dan tulisan labelnya saja dan ditempatkan sesuai kode mas diatas yang diterangkan.

  • Anonim

    I want to hide the excess label and I want to show label important :)

Komentar telah ditutup.