Cara Menciptakan Recent Post Widget Keren Di Blog

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

Recent Post ialah widget pada blog untuk menampilkan postingan terbaru yang biasanya terletak pada sidebar blog. Dengan memasang Recent Post, maka pengunjung sanggup mengatahui tampilan artikel terbaru, sehingga pengunjung blog menjadi gampang 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 isu kepada visitor untuk membaca beberapa artikel menarik lainnya.

Membuat Recent Post Widget di Sidebar Blog 

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

Cara Paling Praktis Membuat Recent Post

Cara yang pertama ini ialah cara termudah (menurut saya) dalam menciptakan Recent Post. Cukup memakai 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, kemudian klik “Lanjutkan”.

Untuk URL Feed, anda sanggup 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 gampang tetapi berdasarkan saya tampilannya kurang menarik dan terkadang memperlambat loading blog.

Recent Post Keren Simple Tanpa Thumbnail (Gambar)

Anda juga sanggup menciptakan 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.

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 menciptakan 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=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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNf_QzDQLr-q1nnAw7bsoEj6QKi57rOeJ_Fts8tD0HN626ZDtCdcgAuSEZtja19avNnNXi4xGZz0pQ6k29G8FglADj4AYpmFfMjmVwG_vxtG6ucXo-qmiGNcqUz7tLYPYtIPwIUh3ojiLD/"};}};dw+='<li>';dw+='<img alt=" Dalam panduan blog kali ini saya akan memandu Anda bagaimana cara menciptakan widget Recent P 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=10; = Silahkan ganti angka 10 dengan jumlah postingan yang ingin ditampilkan.
var rcp_snippet_length=200; = Jumlah abjad isi artikel yang akan ditampilkan dikala hover link judul postingan.
rcp_info='yes'; = Ketik no jikalau ingin menyembunyikan keterangan tanggal dan komentar.
rcp_comment='Comment'; = Anda sanggup ganti dengan nama judul komentar yang diinginkan.

Demo

Demikian cara menciptakan Recent Post di blog, biar sanggup menjadi panduan untuk Anda dalam aktivitas blogging. Terima kasih sudah membaca artikel panduan ini....Salam sukses

Share this post