Cara Membuat Recent Post Widget Keren di Blog

Cara Membuat Recent Post Widget - Dalam panduan blog kali ini saya akan memandu Anda bagaimana cara membuat Recent Post widget keren di blog. Salah satu kelengkapan dalam membuat blog yakni adalah adanya widget yang dapat membantu pengunjung menjejalahi seluruh isi blog. Salah satu widget yang sering direkomendasikan untuk dipasang dalam blog yakni Recent Post ini.

Recent Post yakni widget pada blog untuk menampilkan postingan terbaru yang biasanya terletak pada sidebar blog. Dengan memasang Recent Post, maka pengunjung dapat mengatahui tampilan artikel terbaru, sehingga pengunjung blog menjadi mudah untuk menemukan dan membaca artikel terbaru yang gres diposting.

Menurut bocoran dari para blogger senior, untuk lebih memperbesar peluang blog diterima Adsense, Recent Post merupakan widget wajib yang harus dipasang selain Popular Post, fungsi kedua widget ini untuk menampilkan postingan yang paling sering dibaca dan postingan terbaru di blog sebagai berita kepada visitor untuk membaca beberapa artikel menarik lainnya.

Dalam panduan blog kali ini saya akan memandu Anda Cara Membuat Recent Post Widget Keren di Blog

Membuat Recent Post Widget di Sidebar Blog

Memasang widget Recent Post ada beberapa cara, Anda mampu memanfaatkan widget default Blogger dengan pinjaman feed blog. Dalam artikel kali ini saya akan menunjukkan turorial membuat recent post dengan 3 cara, yaitu default blogger, simple tanpa thumbnail, responsive dengan thumbnail.

Cara Paling Mudah Membuat Recent Post

Cara yang pertama ini yakni cara termudah (menurut saya) dalam membuat Recent Post. Cukup menggunakan akomodasi dari blogger untuk menampilkan recent post atau artikel terbaru. Ikuti tutorialnya berikut ini:

1. Silahkan login ke akun blogger anda.
2. Silahkan pilih Tata Letak > Add/Gadget > Feed

3. Masukkan URL feed anda, lalu klik “Lanjutkan”.

Untuk URL Feed, anda mampu gunakan URL ini:
http://www.panduaneka.com/feeds/posts/default
Silahkan ganti url yang berwarna merah dengan url blog anda.

4. Terakhir klik Save.

Cara yang pertama ini memang terbilang cukup mudah tetapi menurut saya tampilannya kurang menarik dan terkadang memperlambat loading blog.

Recent Post Keren Simple Tanpa Thumbnail (Gambar)

Anda juga mampu membuat Widget Recent Post yang sedikit lebih keren dengan mengikuti cara yang kedua ini. Cara memasang Recent Post / Artikel terbaru ini tanpa gambar/thumbnail dan cukup simpel sehingga fast loading dan tidak menghipnotis loading blog Anda (direkomendasikan) tetapi tetap menarik.

Berikut langkah pemasangannya pada blog :
1. Buka Blogger > Layout > Add Gadget/Tambahkan Gadget > Kemudian pilih HTML/JavaScript
2. Copy dan paste semua aba-aba di bawah ini ke dalam kolom Content yang tersedia

<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 Widget Keren di Blog" 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>

Catatan : Ganti aba-aba yang berwarna merah dengan URL blog Anda dan jumlah postingan yang ingin Anda tampilkan.

3. Terakhir silahkan klik "Save/Simpan"

Membuat Recent Post Widget Keren dengan Thumbnail

Tutorial cara membuat widget Recent Post ini saya dapatkan di Arlina Design. Widget ini sudah dilengkapi dengan gambar/thumbnail serta ditambah tanggal dan jumlah komentar sehingga lebih menarik dimata pengunjung

1. Login ke akun Blogger Anda
2. Klik Layout/Tata Letak > Add Gadget > HTML/JavaScript
3. Kemudian Copy dan paste aba-aba di bawah ini dalam kolom Content yang tersedia

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;var rcp_snippet_length=150;var rcp_info='yes';var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPM2QqV8RTw0KtOUEkTaRhX-eWtSjCWdpA3HDCm7NxEgEvyTayI1hTC6UXf5O1bZ5TGO-GN4hZ6dHysdhmhwLFdeu2ahKUw3ytms1Ds9NQNXd9TSpClaSKwaKKxIucScegSFeBh676TqN/"};}};dw+='<li>';dw+='<img alt=" Dalam panduan blog kali ini saya akan memandu Anda Cara Membuat Recent Post Widget Keren di Blog" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Membuat Recent Post Widget Keren di Blog">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts"></script>');
</script>
</div>

4. Terakhir klik "Save/Simpan"

Catatan :
rcp_numposts=5; = Ganti angka 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah huruf isi artikel yang akan ditampilkan ketika hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul goresan pena dari jumlah komentar.

Demo

Demikian cara membuat Recent Post di blog, biar mampu menjadi panduan untuk Anda dalam acara blogging. Terima kasih sudah membaca artikel panduan ini....Salam sukses

Sumber http://www.panduaneka.com/