cara memasang widget recent post keren

Nah jika anda tertarik mencobanya silahkan ikuti tutorial cara memasang widget recent post keren ini:

1. Login ke blogger dengan akun anda
2. Pada dasbor pilih blog yang hendak dipasangi widget recent post ini
3. Klik menu template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan sebaiknya sebelumnya backup dulu template anda
5. Sekarang letakkan kode berikut ini diatas kode ]]></b:skin>

#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/AVvXsEgBl7LRYEUIB5V9-0EAs4_5gi8rQ-zyBOg3qzK3Vl71Rn3Ap6nE-Fty1Bo0OjXyGtojff8Qteq5ma2bhBmUj2IqXvTvisuBJYqIMtMe_iJG6scNU6fCo7osG5Ys5y99kkrlwthfuftU_OM/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}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.

6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'> 

//<![CDATA[ 

var numfeed = 5; 

var startfeed = 0; 

var urlblog = “http://www.tipstrikblogging.com/”; 

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/AVvXsEjzj356PTdknkAT5t9ON0AlFEmpKJV6bLlPz-c4Ejy7Cdv9NRex_bgGooTmjhi5dxQs9rR9Dh1pQGbzh95JBzvUhCf-ytz38kpzGEak9Xh95yk2csDQWe8ElugK06kaCfR0bugrdnVt44o/s1600/no+image.jpg"; 

} 

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'>&#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("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>

Keterangan : 

var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget 

var urlblog = http://www.tipstrikblogging.com/; >> ganti dengan URL blog Anda 

var charac = 100; >> Jumlah karakter atau huruf pada setiap post.

8. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<div id="terbaru"></div> 

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

Terakhir save dan lihat hasilnya di blog anda!

Demikian tutorial membuat recent post dengan fungsi previous dan next pada sidebar blog. Semoga bermanfaat.