Menampilkan Semua Daftar Label Posting dengan JSON 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>
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>');
}
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....?
Taufik Nurrohman
Saya cari-cari script efek cloud nggak nemu :'(
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:
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 :
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
Taufik Nurrohman
Baca: Cara Berkomentar, Tidak Harus di Posting Terbaru
Anonim
berkomentarlah pada tempatnya. :)
ntar kalo dibuat tempat diskus komentar postingannya kosong dong. :D
haha
Anonim
oke mas ngapurone
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:
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:
lalu ganti dengan ini:
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...
Taufik Nurrohman
Dulu sudah pernah ada yang tanya ⇒ /2011/10/easing-jquery.html?showComment=1330931534989#c8100311898581225220
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 :)