Cara Membuat Widget Recent Post Dengan Gambar Di Blogspot

Daftar Isi Konten [Tampil]

Tutorial Blog kali ini - Cara Membuat Widget Recent Post Dengan Gambar Di Blogspot, dengan kita menambahkan post terbaru kita atau recent post yang baru kita buat, juga merupakan seo yang sangat bermanfaat, terutama page view kita. Karena rata rata orang mencari apa yang baru dengan kita.Seperti yang ada di samping kanan anda.
Berikut Cara Membuat Widget Recent Post Dengan Gambar Di Blogspot :

1. Login terlebih dahulu kehalaman blog 
2. Dari bagian Dashbord blog kamu pilih Template untuk Masuk kehalaman Edit HTML
3. Downlad dulu template lengkap blog kamu untuk mengantisivasi kesalahan Edit HTML
4. Jangan lupa Centang Expand Template Widget
5. Jika sudah cari kode ]]></b:skin> (Gunakan Tombol CTRL + F untuk mempermudah pencarian kode)
6. 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/AVvXsEicH750LYMQM33_rGh17R6vZtpkB829gyh-fBz_Y4-yNb-sq7Zc5sdDd6SR4i__s3den6YxszR9YQEGB_nMvZcNl6Tf7MJGAIbDfwU8TTOXIPdTiAMumnJgm_Si4zMvkfo8VAj8A-dt1WI/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}




7. Masih di are Edit HTML, sekarang cari kode </head>
8. Copy kode dibawah dan letakan diatas kode </head>




<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://m4sdoel.blogspot.com/";
var charac = 0;
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/AVvXsEg9xTD6YCZTDRBuJ8DQFH_ujWigqiZ8ITwWqyf5Rg74RnoQjP2IX5S3O4msImLz4N6YW8YC8bJPV69VSIcHkMKkBO96ifJMgjmL_kpnC_dBa6kTg_bvT5m2XFPy-8zC7v7bbQET5AElc6I/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 berwarna 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
9. Setelah itu Klik pada tombol Save Template
10. Kembali ke Dashbord blog kamu, Pilih Tata Letak
11. Klik Add a Gadget atau Tambah Gadget
12. Pilih Widget HTML Java/Script
13. Copy Kode Berikut  :




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




14. Paste kedalam kolom HTML/JavaScript
15. Klik Simpan 
16. Selesai dan Lihat hasilnya

demikian catatan tutorial kali ini semoga Cara Membuat Widget Recent Post Dengan Gambar Di Blogspot bermanfaat,,