Ringkasan JSON Menjadi Beginih!!!

Kumpulan blogger berikut emang gaya punya Bloggers de Buffalo State, dengan menampilkan postingan yang berbobot euy :-bd Sobat tidak asing lagi dengan fasilitas JSON! Sobat kita Vagabundia telah membuat satu terobosan dengan penggunaan fitur JASON tersebut guna menjadi sebuah arsip, ditambah page navigation dengan tampilan ringkasan beserta thumbnail b-)
So, link jason dipadukan dengan link blog dihasilkan karya cipta "Ringkasan masukan dengan pagination menggunakan JSON" Utuh dalam satu postingan yg mana bisa kita jadikan kolom archive dengan menjadikan post static page ;) ;)) Pertama-tama memang sedikit bingung, lalu Beben Koben si bloglang anu ganteng kalem tea langsung menuju DEMO dan diacak-acak deh sampai bisa :D

Screenshot Demo Original Screenshot Demo Practice

Apabila sobat bisa mempraktekan dengan gaya pencipta silahkan langsung saja. Tapi jika roaming dengan segala macam kendala yg ada mari kita lanjutkan acara selanjutnya :P

Bumbu-bumbu

<style>
.paginaposts {
border:1px solid #555;
float: left;
height:35px;
width:197px;
margin:1px;
padding:5px;
}

.paginaposts a {
color:#DDD;
display:block;
font-size:11px;
text-decoration:none;
}

.paginaposts img {
float: left;
height:30px;
width:30px;
}

.paginaposts h6 {
float:right;
height:45px;
width:145px;
margin:0;
}

.paginaposts:hover {
border:1px solid #33F;
}

#paginacion {
color:#BBB;
font-family:Arial;
font-size:24px;
font-weight:700;
height:35px;
line-height:28px;
text-align:center;
padding:20px 0;
}

#paginacion span,#paginacion a {
border:1px solid #444;
color:#BBB;
display:inline-block;
font-family:Arial;
font-size:24px;
font-weight:700;
margin:0 2px;
padding:0 5px;
}

#paginacion span.actual {
color:#FFF;
padding:0 5px;
}

#paginacion a:hover {
color:#FFF;
}

#paginacion .antesdespues {
border:none;
}

#paginacion .antesdespues:hover {
}

#paginacion span.deshabilitado {
border:none;
color:#666;
}

#totales {
text-align:center;
}
</style>

<script type='text/javascript'>
var firsttime = 0;
var paginaactual = 1;
var postporpagina = 60;
var cantidadpaginas = 0;
var cantidadposts = 0;
var maxpaginas = 10;
var minpaginas = 5;

function showpageposts(json) {
var entry, posttitle, posturl, postimg;
var salida = "";
if(cantidadpaginas==0) {
cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
}
for (var i = 0; i < postporpagina; 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 ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisG_RCORNU6cMQ_3ozas0VvCgQbX9mzCIFQ0XgpylbjXAjjQDn6NupJ9aTs9N52jkBUBHiIJ0Zmfsk21XZO9gRxOhRpmBhLokznWseLOn_KKdq6w_kaTJmH-K6cfX7Y5Gea3EJN7qnNZC_/s0/vagaPlantilla_resumenpostsnoimage.gif";
}
salida += "<div class='paginaposts'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";
}
document.getElementById("resultados").innerHTML = salida;
paginacion();
}

function paginacion() {
contadorP = 0;
salida = "";
if(paginaactual>1) {
salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>Previous</a>";
} else {
salida += "<span class='deshabilitado'>Previous</span>";
}
if (cantidadpaginas<(maxpaginas+1)) {
for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
} else if(cantidadpaginas>(maxpaginas-1)) {
if(paginaactual<minpaginas) {
for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
if (contadorP == paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
salida += " ... ";
salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
} else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
salida += "<a href='javascript:incluirscript(1)'>1</a>";
salida += "<a href='javascript:incluirscript(2)'>2</a>";
salida += " ... ";
for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
salida += " ... ";
salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
} else {
salida += "<a href='javascript:incluirscript(1)'>1</a>";
salida += "<a href='javascript:incluirscript(2)'>2</a>";
salida += " ... ";
for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
}
}
if (paginaactual<contadorP-1) {
salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>Next</a>";
} else {
salida += "<span class='deshabilitado'>Next</span>";
}
document.getElementById("paginacion").innerHTML = salida;
var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
var finalpagina = paginaactual * postporpagina;
var totales = "Total Entry Post: " + cantidadposts + " - Show The Entry " + iniciopagina + " a " + finalpagina;
document.getElementById("totales").innerHTML = totales;
}

function incluirscript(pagina) {
if(firsttime==1) {removerscript();}
document.getElementById("resultados").innerHTML = "<div id='loadingscript'>cargando ...</div>";
document.getElementById("paginacion").innerHTML = "";
document.getElementById("totales").innerHTML = "";
var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);
var archivo = "http://YOUR-NAME.blogspot.com/feeds/posts/default?start-index=" + iniciopagina;
archivo += "&max-results=" + postporpagina;
archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
nuevo.setAttribute('id', 'TEMPORAL');
document.getElementsByTagName('head')[0].appendChild(nuevo);
firsttime = 1;
paginaactual = pagina;
}

function removerscript() {
var el = document.getElementById("TEMPORAL");
var padre = el.parentNode;
padre.removeChild(el);
}

onload=function() { incluirscript(1); }
</script>

Kode CSS sama Beben diminimalis, silahkan variasikan sendiri variabel CSS diatas. Script yg diberi warna biru ialah gambar default jika nanti pada postingan tidak ada gambar. Script warna merah ganti dengan URL blog sobat. Masukan kesemuanya itu dengan metode Add a Gadget ► HTML/Javascript

Buatlah satu postingan baru. Disinilah kunci dari generated hasil bumbu² diatas itu (Make a New Post) Buatlah kata-kata pembuka sesuka hati, jangan terlalu banyak dan bertele-tele :D Kemudian masukan kode HTML ini kedalam postingan...

<div id="resultados"></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>

Jika sukses maka isi dari postingan baru itu nanti akan berisikan seluruh postingan yang ada di blog b-) JASON memang gila :))
Thanks for Vagabundia for the great tut's, and don't forget to visit that blog and give your feedback :x
Happy blogging \m/