Cara Membuat Recent Post Dengan Thumbnail Agar Lebih Keren

Cara Membuat Recent Post Dengan Thumbnail Agar Lebih Keren ~ Recent Post atau List Artikel Terbaru banyak sekali digunakan oleh para blogger. Memasang widget recent post juga berperan dalam Optimasi Seo On Page dengan memasang Widget Recent Post di Halaman Blog pengunjung akan lebih mudah mengakses setiap artikel terbaru kamu. Tentunya kemudahan mengakses artikel dihalaman blog akan meningkatkan jumlah page view blog kamu.

Nah buat Sobat Blogger yang tertarik dengan Widget ini, anda bisa memasangnya dengan sedikit melakukan Edit HTML pada halaman blog anda. Berikut cara untuk Membuat Recent Post Dengan Thumbnail Keren :

=>Login terlebih dahulu kehalaman blog 

=>Dari bagian Dashbord blog kamu pilih Template untuk Masuk kehalaman Edit HTML

=>Downlad dulu template lengkap blog kamu untuk mengantisivasi kesalahan Edit HTML

=>Jangan lupa Centang Expand Template Widget

=>Jika sudah cari kode ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian kode)

=>Setelah kode berhasil ditemukan Copy Kode dibawah ini dan paste 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/AVvXsEiI9C0BHMr1QLw56dLuwPS1ACj2M-fqmpHsu96g6I_eSZQkoXD3T6Kqa0l5Nz-FXBYOR_c93hjI3tok5-7whskNtEFovzhhF5GCcns9gE2_vQ_HRQ7qKAehUL3ROGDLnL-8y-VmYzNbdPU/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}

=>Masih di are Edit HTML, sekarang cari kode </head>

=>Copy kode dibawah dan letakan diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://dapur-tutorial.blogspot.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/AVvXsEhdQlBy9Hw19Zq03yWEuRiUZsJqaX3C0XUcoVijPUUCmkqwT1IpJfRC-d2EbtFUke5FNy7ZelXgs33LjheBT_5xVGXAOwL1lPsnQwnPgj7sc7TmQBsaGKHHH5WjUpF8cMLqWXCLalkMMac/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 :

Kode yang berwarena merah adalah URl blog kamu, ganti dengan URL Kamu. Sedangkan kode yang berwarna Hijau menunjukan jumalah Artikel yang ditampilkan, dan kode yang berwarna kuning adalah jumlah karakter yang ditampilkan

=>Setelah itu Klik pada tombol Save Template

=>Kembali ke Dashbord blog kamu, Pilih Tata Letak

=>Klik Add a Gadget atau Tambah Gadget

=>Pilih Widget HTML Java/Script

=>Copy Kode Berikut  :

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

=>Paste kedalam kolom HTML/JavaScript

=>Klik Simpan 

=>Selesai dan Lihat hasilnya

Semoga artikel Cara Membuat Recent Post Dengan Thumbnail Agar Lebih Keren bermanfaat dan membantu bagi para sahabat INFOCA-Blog™. Cukup sekian dulu pembahasan dari INFOCA-Blog™ mengenai Cara Membuat Recent Post Dengan Thumbnail Agar Lebih Keren. Nanti INFOCA-Blog™ akan bahas lagi di lain waktu dengan tips-tips + informasi yang lebih menarik tentunya.

» JANGAN LUPA LIKE N Komentarnya Yeach...

= Baca Juga Sob =

Copyright By : INFOCA-Blog™ ~ Blog Sharing Informasi Pengetahuan

Artikel Cara Membuat Recent Post Dengan Thumbnail Agar Lebih Keren ini diposting oleh Unknown. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link AKTIF artikel ini sebagai sumbernya. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.<a href="http://info-caraku.blogspot.com/2013/01/cara-membuat-recent-post-dengan-thumbnail.html">Cara Membuat Recent Post Dengan Thumbnail Agar Lebih Keren</a>

::..Get Free Daily Email Updates..::