Cara Menciptakan Recent Post Di Blogger

Cara Membuat Recent Post Di Blogger - Tidak sedikit bahkan para blogger yang memakai widget Recent Post di blog mereka, tujuan aku rasa biar setiap pengunjung sanggup dengan gampang untuk barisan artikel terbaru yang yang ada di blog tersebut. Nah untuk kali ini Mas Design akan menawarkan 2 model widget recent post untuk di pasang di blog sobat, ialah recent post dengan hanya menampilkan title/judul blog saja, dan recent post dengan menampilkan judul dan deskripsi singkat arikel terbaru di blog dengan tombol navigas di bawahnya.

Widget Recent Post ini sangat gampang di gunakan dan ringan untuk di pasang di blog sobat, jadi aku bilang sangat pas untuk para blogger yang ingin meminimalisir kecepatan blognya.

Cara Membuat Recent Post Di Blogger

Login ke Blogger > Tata Letak > Tambah gadget > Salin dan Simpan salah satu arahan di bawah ini yang cocok dengan selera sobat.

Simple Recent Post untuk Blogger

<style scoped='' type="text/css">

 ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
 li.recent-posts:last-child{border-bottom:0;}
 li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
 </style>
 <ul id="recent-posts"></ul>
 <script>
 //<![CDATA[
 var homePage = "http://www.URL_BLOG_ANDA.com", numPosts = 5;
 function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="Cara Membuat Recent Post Di Blogger" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
 //]]>
 </script>

Ganti http://www.URL_BLOG_ANDA.com dengan URL Blog sobat, dan ganti Angka 5 dengan jumlah post yang akan di tampilkan.

DEMO

Recent Post Dengan Tombol Navigasi

<style scoped='' type='text/css'>
 /* Recent Post Navigasi */
 #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4nX0TnfiTy61pgyqexgZW7HqAeh0X2Q-ircWby96DRgtwNe4TGlFA5jD6cB7ZuNZCsBlAU4rRhVLzk812MUCQV_TkX-thtYnNp29Rb-3CocGwccKC-ksHnBjXwoQX8uLCAnTSFFinQMz2/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}
 </style>
 <script type='text/javascript'>
 //<![CDATA[
     var numfeed = 5;
     var startfeed = 0;
     var urlblog = "http://URL-BLOG-SOBAT.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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisi0hALa8VGRIOJQmSBG3JZp7paqV6G5gXS5R1kwasJl4Liu-TBe0CThF6rGcfaVvKI6qhBayqRL-TFSBGOQNy9xLN4-xqLv6mUAhoEVcy0P8bSioplJKgtXs9aFMPJpKAPec0eIwDGk9l/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>
 <div id="recentpostsae"></div>
 <div id="recentpostnavfeed"></div>

Gati http://URL-BLOG-SOBAT.com dengan alamat URL blog sobat, dan ganti angka 5 dengan jumlah post/artikel yang akan di tampilkan.

DEMO
Demikian tutorial perihal Cara Membuat Simple Recent Post Di Blogger ini aku ahiri dengan ucapan Alhamdulillah :D

Share this post