Cara membuat recent post scroll ke bawah (dengan thumbnail) keren dan responsive

Posted by Adipati Game on

Halo blogger jumpa lagi bersama saya adpati, Sebelumnya ku ucapkan selamat datang di blog kesayangan saya ini, semoga kalian tidak jenuh-jenuh untuk selalu mengunjungi blog ini. Nah pada kesempatan kali ini dari blog Adpati akan mempersembahkan sebuah kode script blog untuk menambahkan Widget Recent Post atau Artikel Terbaru.

Nah sebelum kita mulai mohon dukungannya demi kemajuan blog ini tekan follow via email untuk berlangganan atau bisa juga Klik Subscribe di bagian halaman paling bawah. Oke sebelumnya terima kasih. Mari kita lanjut.

Yang akan kita bahas di sini ialah tutorial menambahkan widget  Recent Post yang di mana dengan widget ini Akan menambah tampilan blog kalian menjadi lebih keren.

Apa itu recent post?

Recent post adalah sebuah widget berisi link postingan terbaru kalian yang dimana dengan widget ini biasanya artikel akan tampil otomatis di blog kalian ketika kalian memposting sebuah artikel baru. Adpati akan membagikan script recent post unik dengan thumbnail gambar dan bisa di scroll ke bawah buat kalian pengunjung blog ini tentunya dan gratis. Dengan script ini kalian bisa mengatur jumlah postingan terbaru dan tidak akan memakan banyak tempat.

Nah bagaimana cara buatnya simak yuk.

1). Kalian buka akun Blogger kalian.

2). Masuk Tata Letak - Tambahkan Widget - HTML. Lalu Copy script di bawah ini.

 <div style="border: 0px solid #FF00FF; height: 500px; overflow: auto; padding: 3px; width: auto;">
<style scoped='' type='text/css'>
#recent-posts{color:#ff0000;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.2)}
#recent-posts ul li:last-child{border-bottom:0}

<script type='text/javaScript'>
#recent-posts ul li a{display:block;color:#3300ff;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
var rcp_numposts=15;
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/AVvXsEhCur1ZdAmszlGzTIgWcwxDolzIuhz22yYNGvLYfMVhzxjdAO7z4Q0fszJqJPV-upO3BsXSdGtwFLFkhwhyetZxP7zBIxiRRZRZ3Zm4JpY75YgVapX-Q_9-TXi_6JnZAxfGvvY3SERwQsuy/"};}};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></div> 

3). Paste kan di bagian Tambahkan Widget

4). Lalu simpan

Baca Juga

*ket:

• var rcp_numposts=12; ( angka 12 adalah jumlah postingan. Silahkan atur sendiri)
• #ff00ff; height: 500px; overflow: auto; padding: 3px; width: auto;"> (angka 500 adalah lebar kotak kebawah)
• <div style="border: 1px groove #00ff00; padding: 6px;"> ( 1px adalah ketebalan garis luar dalam)
• <div style="border: 1px groove #00ff00; padding: 6px;"> (#00ff00 adalah kode warna)

Demikian sedikit ulasan tentang tutorial membuat recent post dengan thumbnail gambar dan bisa di scroll ke bawah. Semoga bisa membantu buat para blogger pemula. Sekian dan terima kasih..

Labels: ADPATI GAME, BLOG, TUTORIAL

Thanks for reading Cara membuat recent post scroll ke bawah (dengan thumbnail) keren dan responsive. Please share...!