PANDUANEKA

Aneka Panduan & Solusi Anda

06 August 2017

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 widget Recent Post keren di blog. Salah satu kelengkapan dalam membuat blog adalah adalah adanya widget yang dapat membantu pengunjung menjejalahi seluruh isi blog. Salah satu widget yang sering direkomendasikan untuk dipasang dalam blog adalah Recent Post ini.

Recent Post adalah 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 baru 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 informasi kepada visitor untuk membaca beberapa artikel menarik lainnya.
Cara Membuat Recent Post Widget Keren di Blog

Membuat Recent Post Widget di Sidebar Blog 

Memasang widget Recent Post ada beberapa cara, Anda bisa memanfaatkan widget default Blogger dengan bantuan feed blog. Dalam artikel kali ini saya akan memberikan 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 adalah cara termudah (menurut saya) dalam membuat Recent Post. Cukup menggunakan fasilitas 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
Cara Membuat Recent Post Widget Keren di Blog
3. Masukkan URL feed anda, lalu klik “Lanjutkan”.
Cara Membuat Recent Post Widget Keren di Blog
Untuk URL Feed, anda bisa 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 bisa 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 mempengaruhi loading blog Anda (direkomendasikan) tetapi tetap menarik.
Cara Membuat Recent Post Widget Keren di Blog

Berikut langkah pemasangannya pada blog :
1. Buka Blogger > Layout > Add Gadget/Tambahkan Gadget > Kemudian pilih HTML/JavaScript
2. Copy dan paste semua kode 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="'+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>

Catatan : Ganti kode 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 kode 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=10;
var rcp_snippet_length=200;
var rcp_info='yes';
var rcp_comment='Comment';
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)+"&#133;";};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="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+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=10; = Silahkan ganti angka 10 dengan jumlah postingan yang ingin ditampilkan.
var rcp_snippet_length=200; = Jumlah karakter isi artikel yang akan ditampilkan saat hover link judul postingan.
rcp_info='yes'; = Ketik no jika ingin menyembunyikan keterangan tanggal dan komentar.
rcp_comment='Comment'; = Anda bisa ganti dengan nama judul komentar yang diinginkan.

Demo

Demikian cara membuat Recent Post di blog, semoga bisa menjadi panduan untuk Anda dalam kegiatan blogging. Terima kasih sudah membaca artikel panduan ini....Salam sukses

2 comments:

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya