Home » , , » Tutorial Cara Membuat Widget Recent Post Pada Blog

Tutorial Cara Membuat Widget Recent Post Pada Blog

Posted by Unknown Posted on 23:41 with No comments
Tutorial Cara Membuat Widget Recent Post Pada Blog. Biasanya setiap pengunjung blog yang datang ke blog tidak selalu ingin membaca artikel kita. Para pengunjung yang menemukan artikel kita lewat hasil penelusuran search engine sangat mungkin ingin mendapatkan suatu bahan bacaan yang lengkap dan relevan yang sesuai dengan apa yang mereka inginkan.

memasang recent post


Maka untuk jenis pengunjung blog yang seperti hal tersebut diatas, artikel kita tentu saja akan dibaca atau bahkan dijadikan suatu bahan referensi. 

Akan tetapi jika pengunjung yang datang ke blog kita hanya untuk blogwalking dan melihat lihat blog yang kita kelola atau sekadar meningkatkan trafik sangat mungkin pengunjung seperti ini tidak membaca artikel artikel yang ada pada blog melainkan hanya melihat lihat judul artikelnya saja.

Jadi atas dasar hal tersebut kita bisa menyediakan widget recent post sehingga bagi pengunjung yang cuma blogwalking biasa bisa tertarik untuk membaca artikel artikel yang kita punya pada blog.

baca juga : Cara Membuat Arsip Blog dengan Scroll
   
Blog yang kita punya dan kita kelola biasanya didalamnya tidak terdapat fitur widget recent post pada templatenya. selain itu, pihak bloggernya pun tidak menyediakan fitur recent post. Sehingga untuk yang ingin mempunyai fitur recent post pada blognya kita hasrus memasangnya sendiri.

Bagi yang belum mengetahui pengertian widget recent post adalah merupakan widget yang berisi dan menampilkan postingan postingan atau artikel artikel terbaru yang dipublikasikan di blog. 

Fungsi widget recent post ini untuk mempermudah pengunjung dalam memberi informasi tentang artikel artikel terbaru yang ada pada blog. Bentuknya ada yang memakai thumbnail dan ada yang bentuknya berupa judul artikelnya saja.

Posisi widget ini bisa kita letakan sesuai keinginan. Bisa diletakan di sidebar atau bisa juga diletakan pada footer. Atur tata letaknya sehingga bisa terlihat rapi oleh pengunjung yang mengunjungi blog kita.

Baiklah cukup perkenalannya dengan apa yang dinamakan dengan widget recent post selanjutnya kita langsung ke tahap membuat dan memasang widget recent post pada blog yang sumbernya saya ambil dari blog arlinadzgn . Bentuk bentuk dan langkah langkahnya adalah sebagai berikut :

  • widget recent post sederhana
Widget recent post sederhana ini hanya menampilkan judul artikelnya saja (contohnya seperti recent post pada blog ini lihat bagian bawah pada footer). Untuk membuat dan memasangnya langkahnya sebagai berikut :

  • log in ke akun blogger
  • klik pada tata letak atau layout
  • kemudian add gadget (terserah mau diletakan di sidebar atau footer)
  • klik HTML/javascript
  • copy dan pastekan kode dibawah ini di kolom HTML/javascript tadi

kode:
<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="'+title+'" 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 tulisan url yang saya tandai dengan warna merah dengan url blog anda dan ganti angka "5" dengan jumlah artikel yang ingin anda tampilkan sebagai recent post
  • save dan silahkan lihat hasilnya

Dan blog anda pun kini sudah mempunyai recent post. Simple dan cukup mudah bukan. Nah berikutnya kita akan membuat dan memasang recent post dengan model navigasi.

  • widget recent post dengan navigasi
Bentuk recent post dengan navigasi berikut ini seperti namanya mempunyai navigasi seperti next untuk ke post post selanjutnya dan previous untuk ke post post sebelumnya. Mengenai contoh bentuknya anda bisa klik dan lihat disini 

Langsung saja langkah untuk membuat dan memasangnya sebagai berikut :

  • seperti biasa anda log in ke akun blogger
  • pilih tata letak atau layout
  • add gadget (letakan di sidebar atau di footer bebas terserah anda)
  • klik pada HTML/javascript
  • kemudian copy dan pastekan kode dibawah pada kolom HTML/javascript tadi

kode:
<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(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}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://URL anda.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>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

  • ganti yang saya kasih BOLD sesuai dengan keinginan anda. 
  1. var numfeed = jumlah artikel postingan yang ingin anda tampilkan
  2. var urlblog = ganti dengan url blog anda
  3. var charac = atur jumlah maksimal summary post yang ingin ditampilkan
  • save dan silahkan cek hasilnya

Nah, begitulah cara membuat dan memasang bentuk recent post dengan navigasi pada blog. Silahkan anda pasang mana yang sesuai dengan keinginan anda.

Sekian tutorial cara membuat widget recent post pada blog, semoga membantu dan untuk kurang lebihnya saya mohon maaf serta tidak lupa semoga bermanfaat.
Label: , ,

0 komentar:

Post a Comment