Cara Instan Memasang Recent Post di Blogger

ADDSITE01 - Cara Instan Memasang Recent Post di Blogger - Recent post sangatlah penting di sebuah blog , widget ini dapat mempengaruhi SEO dan juga mempermudah navigasi blog kita.

Sudah banyak tutorial bertebaran di Google tentang cara memasang recent post ini, tetapi kebanyakan tidak responsive dan bahkan tidak work, kesalahan memilih tampilan recent post dapat membuat blog susah untuk dibuka karena berat, karena saya sudah pernah mencobanya sendiri. Jika blog kita ringan secara otomatis pasti para pengunjung akan betah di blog kita, dan juga mempermudah mereka menelusuri seluruh artikel kita.

7 Cara Instan Memasang Recent Post di Blogger

1. Masuk ke dashboard blogger.

2. Pilih Template > Edit HTML

3. Copy kode dibawah ini dan Paste kan diatas kode  ]]></b:skin>

#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}

#recentpostsae{margin:0}

.recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}

.recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}

.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}

.recentpostel:hover{background-color:#fefefe}

.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}

#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}

#recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hover{background-color:#fefefe}

#recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}

#recentpostnavfeed span{padding:5px 10px}

#recentpostnavfeed .next{float:right}

#recentpostnavfeed .previous{float:left}

#recentpostnavfeed .home{text-align:center}

#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}

Catatan : Kode berwarna merah diatas merupakan panjang dan lebar gambar.

4. Pada bagian ini Masih di dalam HTML copy kode dibawah ini dan paste diatas kode </head>

<script type='text/javascript'>

//<![CDATA[

    var numfeed = 5;

    var startfeed = 0;

    var urlblog = "https://masakmad.com/";

    var charac = 40;

    var urlprevious, urlnext;

function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&

(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function

 showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var

 l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&

(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var

 d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var

 l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?

t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-

BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div

 class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a 

href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="

</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a 

href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived

 previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span

 class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' 

class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function

 navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?

(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-

results="+numfeed+"&orderby=published&alt=json-in-

script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e)

{1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div 

id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var 

t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.

setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")

[0].appendChild(n),startfeed=1}function removerscript(){var

 e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function()

{navigasifeed(0)};

//]]>

</script>

Catatan : Ganti kode berwarna merah diatas dengan nama blog kalian

5. Simpan Template
6. Klik Layout, klik add gadget > HTML/Javascript, masukan kode dibawah ini kedalamnya :

<div id="recentpostsae"></div>

<div id="recentpostnavfeed"></div>

7. Selesai

Sekian informasi yang saya berikan tentang Cara Instan Memasang Recent Post di Blogger semoga bermanfaat bagi pengunjung dan kita semua.

Share this post