Menampilkan Kategori Dilengkapi Navigasi
Untuk menampilkan label/ kategori dalam blog, kita bisa menggunakan JSON, seperti halnya untuk menampilkan enti dalam blog. pada prinsipnya sama, hanya saja dengan memberikan data yang sedikit berbeda, maka kita akan melihat hasil yang berbeda pula. Lihat JSON Untuk Menampilkan Entry Blog.
Sebagai contoh, kita akan menampilkan entri blog sesuai dengan label terpilih, dimana entri akan ditampilkan berdasarkan label yang sudah kita tentukan sebelumnya, misalnya kita hanya ingin menampilkan enti dengan label "CSS" saja.
Lihat contoh berikut ini, enti dengan label "CSS" dilengkapi Navigasi yang dapat menavigasi Next, Prev dan Top tanpa harus mereload halaman:
Untuk membuatnya saya hanya memerlukan data-data berikut ini, yang dapat kita sisipkan kedalam templat, tepatnya dalam tag <head>.
<script type='text/javascript'>
//<![CDATA[
var entryperhalaman = 4; // mengatur jumlah entri untuk menampilkan
var urlblog = "https://caprt3a.blogspot.com"; // mengatur nama situs
var imgdefect = "URL_Gambar"; // mengatur arah gambar default yang digunakan
// definisikan kategori
var flagfirst = 0;
var cantidadposts = 0;
var urlPrev, urlNext;
function hapustag(scool,longitud){
var resum = scool.split("<");
for(var i=0;i<resum.length;i++){
if(resum[i].indexOf(">")!=-1){
resum[i] = resum[i].substring(resum[i].indexOf(">")+1,resum[i].length);
}
}
resum = resum.join("");
resum = resum.substring(0,longitud-1);
return resum;
}
function tampilkanhalamanlabel(json) {
var entry, posttitle, posturl, postimg, postcontent;
var outputs = "";
urlPrev = "";
urlNext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlPrev = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlNext = json.feed.link[k].href;
}
}
for (var i = 0; i < entryperhalaman; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = imgdefect;
}
outputs += "<div class='taghalaman'>";
outputs += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
outputs += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
outputs += "<p>" + hapustag(postcontent,100) + " ...</p>";
outputs += "</div>";
}
document.getElementById("My_Label").innerHTML = outputs;
outputs = "";
if(urlPrev) {
outputs += "<a href='javascript:navtaghalaman(-1);' class='sebelumnya'>Prev</a>";
} else {
outputs += "<span class='tangsel sebelumnya'>Prev</span>";
}
if(urlNext) {
outputs += "<a href='javascript:navtaghalaman(1);' class='berikutnya'>Next</a>";
} else {
outputs += "<span class='tangsel berikutnya'>Next</span>";
}
outputs += "<a href='javascript:navtaghalaman(0);' class='keatas'>Top</a>";
document.getElementById("navigasilabel").innerHTML = outputs;
}
function navtaghalaman(direccion){
var p, parameter;
if(direccion==-1) {
p = urlPrev.indexOf("?");
parameter = urlPrev.substring(p);
} else if (direccion==1) {
p = urlNext.indexOf("?");
parameter = urlNext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + entryperhalaman + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=tampilkanhalamanlabel";
scriptmasuk(parameter);
}
function scriptmasuk(parameter) {
if(flagfirst==1) {removerscript();}
document.getElementById("My_Label").innerHTML = "<div id='loadingscript'></div>";
document.getElementById("navigasilabel").innerHTML = "";
// memanggil kategori
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', arsipfeeds);
nuevo.setAttribute('id', 'OTROTEMPORAL');
document.getElementsByTagName('head')[0].appendChild(nuevo);
flagfirst = 1;
}
function removerscript() {
var el = document.getElementById("OTROTEMPORAL");
var padre = el.parentNode;
padre.removeChild(el);
}
onload=function() { navtaghalaman(0); }
//]]>
</script><style type="text/css">
#My_Label {
margin: 0 auto;
width: 585px;
float: center;
}
#loadingscript {background: transparent url(https://2d0ec971-a-62cb3a1a-s-sites.googlegroups.com/site/archivesiugi/2012-akhir/loading01.gif) no-repeat 50% 50%;}
.taghalaman {
border: 1px solid #101921;
float: left;
margin: 5px 2px;
overflow: hidden;
padding: 5px;
text-align: center;
width: 130px;
height: 180px;
}
.taghalaman img {
height: 72px;
width: 72px;
padding: 5px;
margin: 5px 0;
box-shadow: 0px 0px 20px rgb(240, 240, 240) inset, 0px 1px 4px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.3);
border: 1px solid white;
}
.taghalaman a {
color: #EEE;
display: inline;
font-size: 11px;
line-height: 1;
}
.taghalaman h6 {
display: table-cell;
height: 30px;
margin: 5px 0;
overflow: hidden;
vertical-align: middle;
width: 130px;
}
.taghalaman p {
color: #AAA;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 2px 0;
overflow: hidden;
padding:0;
text-align: left;
}
#navigasilabel {
border: 1px solid #404951;
color: #666;
font-size: 18px;
text-align: center;
margin:2px auto;
width:536px;
}
#navigasilabel a {
color: #666;
display:block;
font-size: 18px;
padding: 5px 10px;
}
#navigasilabel span {
color: #BBB;
padding: 5px 10px;
}
#navigasilabel .berikutnya {float: right;}
#navigasilabel .sebelumnya {float: left;}
#navigasilabel .keatas {text-align: center;}
</style>Dan yang berikut ini dapat kita letakan dimanapun kita ingin menampilkan Kategori Dilengkapi Navigasi tersebut.
<div id="My_Label"></div>
<div id="navigasilabel"></div>Seperti yang sudah saya katakan sebelumnya, yaitu dimana kita hanya merubah sedikit data saja, maka hasilnya, kita akan melihat perubahan yang sangat signifikan.
Seperti misalnya contoh berikut ini, saya akan menghapus data
var labelpilihan = "CSS";kemudian saya mengganti data:
var arsipfeeds = urlblog + "/feeds/posts/default/-/" + labelpilihan + parameter;diganti dengan data berikut:
var arsipfeeds = urlblog + "/feeds/posts/default" + parameter;maka kita akan melihat daftar entri blog atau (Recent Post) yang akan ditapilkannya, bukan lagi daftar entri berdasarkan kategori. Contoh Lihat disini.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon