Tutorial Mempercantik Recent Post Buat Blogger

Buat sobat yang inginkan recent post tampil dengan cantik nan elegan silahkan ikuti tutorial berikut ini. sebelumnya aku sudah pernah share cara membuat Recent Post dengan tampilan slide disidebar untuk kali ini aku akan bagikan cara membuat Recent Post dengan tombol Navigasi Page. sobat bisa lihat tampilannya di sebelah kanan di template blog ini kalau belum aku rubah wujudnya hehehehe.

Recent Post atau Postingan yang baru Update sangat membantu sekali buat pengunjung blog kita, dengan adanya Recent Post ini pengunjung di Blog akan tahu apa saja yang di sajikan di blog kita atau menu apa saja yang menjadi karakter Blog kita. sebenarnya Recent Post sendiri di Blooger sudah di sediakan buat sobat, namun dengan maraknya modifikasi para master guna mempercantik blog akhirnya timbul ide-ide yang cemerlang untuk mempercantik tampilannya. kita patut acungi jempol untuk para master-master blog yang sudah menciptakan sedemikian cantiknya cara menampilkan menu-menu yang berada di blogger saat ini.

tutorial ini aku ambil dari salah satu master blog yang tentu sobat sudah tahu bagaiman kiprah sang master ini di dunia blogger. siapa lagi dan tak asing lagi yaitu mas kolis yang sering disebut-sebut pendesign tamplate yang sangat bagus dan indah. nah sekarang silahkan ikuti tutorial cara membuat Recent Post Buat Blogger dibawah ini.

1. sperti biasa silahkan login ke Blogger

2. silahkan langsung menuju ke Tata Letak.

3. silahkan tambah Getged di sidebar.

4. silahkan pilih menu tambah HTML/Javascript.

5. masukkan kode dibawah ini.

Buka Kodenya >>

<style type='text/css'>
#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/AVvXsEhJyv9pdh5At94J0XaWwcbC8XrOJ8VP8qMs7Wl-V14BxxRDlprSYMTks3t1PyYyTvVM5xqZm_13ZqjLFxSyjZunqZdk7mP945Og0cgXuq3IV69ZDrUTDCaH1EddCESF0qA2swSaMoTMJw0/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}
</style>
<script type='text/javascript'>
/*
* Author:    Huda Ahmad
* Url:    http://giga-watt.blogspot.com/
*/
//<![CDATA[
var numfeed = 4;
var startfeed = 0;
var urlblog = "SILAHKAN ISI URL KALIAN DISINI";
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/AVvXsEiOWR9Hx2_Op09NhAQoPBHn4g_QrGbcyG-kgjFOibtkRLcWYGYF6lqEGmPh10FPa63jDMPvXL3NeAkY1XItjab4dSZNl9i1nu89X0xHeIx1ctEVKEibX2DQUKN8V6_jvHI4LT11F2zBias/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>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

NB :
a. untuk warna Biru silahkan sesaikan dengan tamplate kalian.

• baris warna biru yang pertama berapa yang akan sobat tampilkan
• baris warna biru yang kedua silahkan sesuaikan juga decription yang akan kalian inginkan.

b. untuk yang berwarna merah silahkan masukkan Url blog kalian.
6. kalau sudah silahkan kalian Simpan dan lihat hasilnya.

sampai disini tutorial ini sudah selesai. cara mempercantik Racent Post Buat Blogger. silahkan sobat tunggu Tutorial Berikutnya, Blog ini sering Update jadi jangan sobat lupakan untuk menekan control + D di keybord kalian. silahkan baca juga cara menyembunyikan Page Facebook atau Fans Facebook di Blogger. sampai ketemu di tutorial berikutnya. sekian terimakasih.