Cara Membuat Widget Recent Post Seperti Pada Blog Ini

Cara Membuat Widget Recent Post dengan Kursor Previous, Home, Dan Next - Maaf setelah sekian lama, saya ga posting, karena kesibukan saya di sekolah, jadi harus banyak tugas yang harus saya selesaikan.

Hmm.. Harus mulai dari mana ya.. Yang jelas saya mosting ni cuma sekedar share buat sobat yang mau bikin widget Recent Post atau Artikel Terbaru. Sebenarnya sih banyak versi yang terkadang membuat kita bingung, tapi kali ini versi yang ini pasti buat para blogger terpesona akan widget ini.

Bisa di bilang ini adalah versi KEDUA saya. Yah, yang bisa dibilang versi PERTAMA saya masih amatirrr... Langsung aja yuk kita liat cara masangnya. Capcusss..

1. Seperti biasa, login ke Blogger
2. Cari Rancangan >> Edit HTML >> Expand Widget Template
3. Cari kode ]]></b:skin> lalu pastekan kode berikut diatasnya

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnTkuX81R5Xj1TKDMUa0aVG3NLDz-8hQxJ5rVsuxJS6Sj_tgJPfx5HUTprKuBFKKrJcmgXw89-MDXx7Uew6yQEehsoY02Mk6UXhvo_wHTFIFPeFCBpsqvN2Qr5pboKXl0154FdTMEzaQk/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Nb: untuk huruf yang bercetak biru, itu adalah lebar dan tinggi thumbnail gambar

4. Selanjutnya, pastekan juga kode berikut diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://URL BLOG ANDA/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7JnYLfSbrZ-tdqZd0HLAyT2bVQVJBQLI1tUm1DITPmfe6Y3NqaX6Wi2QYwS7-EMsYfK69E6nsopYeFYFxhI5ltlA8EeaecMMzuf3UgQPmOqWSXKaP3wN7-CaHPpCZm5hh9kYRYbRQvVz/d/noimagethumb.gif";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

           Nb : var numfeed = 5 >> Jumlah postingan yang ditampilkan pada widget
   http://URL BLOG ANDA/ >> Tulis dengan URL blog anda
   var charac = 100 >> Jumlah karakter pada setiap post
5. Terakhir, save template
6. Kemudian cari Elemen Laman >> Tambah Gadget >> HTML Java Script
7. Lalu pastekan kode berikut

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

8. Terakhir save, dan lihat hasilnya

Sekian dulu ya sobat tentang postingan tadi
enjoy blogging (y)

Cara Membuat Widget Recent Post Seperti Pada Blog Ini

1 Comment: