Widget Artikel Terbaru Blog Super Keren

Inilah Widget Artikel Terbaru Blog Super Keren - Selamat bertemu buat sahabat Bloggers sekalian, sudah lama saya tidak menyapa dan berbagi Informasi seputar dunia Blogging. Untuk hari ini saya tidak akan menuliskan mengenai SEO atau Tips dan Trik dalam Dunia Blogger melainkan memberikan sebuah widget yang tampilannya sangat menarik menurut pengelihatan saya sendiri. Perlu anda ketahui kalau code-nya bukan saya yang menciptakan, dan saya tidak tahu siapa yang memodifikasinya sehingga terlihat keren seperti gambar yang ada di bawah.

Inilah Widget Recent Post / Artikel Terbaru Blogger - www.NetterKu.com : Menulis di Internet untuk saling berbagi Ilmu Pengetahuan!
Original Image by NetterKu.com

Seperti yang kita ketahui kalau widget Recent Post seperti ini sangatlah di perlukan oleh seorang visitor, untuk mengetahui dengan cepat apa saja Informasi yang terbaru yang di berikan oleh seorang Webmaster (Pemilik Website/Blog). Dan hal ini sangat memacu agar pengunjung mengklik Info terbaru tersebut sehingga kita memperoleh Pege View yang meningkat. Dengan memiliki Tampilan yang Elegant dan tombol Previous - Home - Next akan membuat pengunjung sobat semakin betah. Baiklah, langsung saja praktekkan tutorial yang ada di bawah ini.

1. Login ke Blogger.com > Tata Letak > Tambahkan Gadget > HTML/JavaScript.

2. Copy kode di bawah ini, lalu Paste ke HTML/JavaScript.

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://URLBLOGANDA.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;
function akaUTkolisfeed(ir,banget){
var showfeed = ir.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 = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='akaUT-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + akaUTkolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("akaterbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("akaUT-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("akaterbaru").innerHTML = "<div id='akaUT-loading'></div>";
document.getElementById("akaUT-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var akaterbaru = document.createElement('script');
akaterbaru.setAttribute('type', 'text/javascript');
akaterbaru.setAttribute('src', archievefeed);
akaterbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(akaterbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="akaterbaru">
</div>
<div id="akaUT-navigasifeed">
</div>
<style>
#aka-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#akaterbaru{margin:0px}
.akaUT-elemen{background-color:#fff;border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.akaUT-elemen img{background:#eee;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.akaUT-elemen h6,.akaUT-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.akaUT-elemen:hover{background-color:#ecf3fb}
.akaUT-elemen p{text-align:justify;color:#555;line-height:14px;margin:5px 0}
#akaUT-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#ffffff url(http://www.westmarine.com/wcsstore/MadisonsStorefrontAssetStore/images/colors/color1/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#akaUT-navigasifeed{background-color:#fff;border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#akaUT-navigasifeed:hover{background-color:#ecf3fb}
#akaUT-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#akaUT-navigasifeed span{padding:5px 10px}
#akaUT-navigasifeed .next{float:right}
#akaUT-navigasifeed .previous{float:left}
#akaUT-navigasifeed .home{text-align:center}
#akaUT-navigasifeed a:hover,#akaUT-navigasifeed span.noactived{color:transparant!important}
</style>

3. Buat Judul Widget.

4. Simpan. Finish!

Ket :

- var numfeed = 5; adalah Jumlah Artikel Terbaru yang akan Tampil.
var urlblog = "http://URLBLOGANDA.blogspot.com/"; adalah Lokasi URL Blog.

Bersambung ke bagian : Hal yang membuat Blog di Banned Blogger

Cara memasang saya rasa cukup mudah, tidak perlu kotak-katik sana-sini. Buat sobat netter yang belum berhasil silahkan di coba berulang-ulang, kalau belum juga tinggalin saja artikel ini. Itulah tutorial yang dapat saya tuliskan untuk hari ini, semoga dapat berkenan untuk para sahabat NetterKu terutama sahabat Blogger mania. Tunggu informasi selanjutnya yang lebih keren dan juga menarik di NetterKu.com. Sampai ketemu di lain waktud dan selamat mencoba, Thanks!