Cara Mudah Membuat Recent Post Responsive di Blog
BangSiagian.id - Jika kita membahas mengenai blog pastinya diblog ada fitur recent post. Recent posts ini adalah fitur yang menampilkan artikel postingan paling terbaru di sebuah blog. Widget recent posts ini untuk mempermudah pengunjung blog untuk mengetahui artikel terbaru yang di blog yang mereka kunjungi.
Apakah widget recent post wajib kita pasang di blog?
Widget recent post ini tidak wajib dipasang diblog, tapi saya sarankan pasanglah widget recent post diblog. Semua pemilik blog memasang widget ini diblog mereka.
Di kesempatan ini saya akan membagikan arikel tutorial cara membuat widget recent post di blog. Recent post yang bagikan ini simpel, ringan dan responsive, recent post ini hanya menampilkan teks saja tanpa ada gambar.
BACA JUGA: Cara Membuat Recent Posts Dengan Bernomor Di Blog
Kalau kamu ingin untuk memasang recent post ini di blog kamu, silahkan kamu ikuti caranya dibawah ini.
Cara Mudah Membuat Recent Post Responsive di Blog
1. Login ke Blogger
2. Pilih blog yang ingin dipasang recent post
3. Klik menu tata letak disebelah kiri
4. Klik Tambahkan Gadget
5. Klik HTML/JavaScript lalu masukkan kode recent post dibawah ini
<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;font-size:15px}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#2574a9;}li.recent-posts a:hover{color:#2574a9;text-decoration:none}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "//www.bangsiagian.id",
numPosts = 15;
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+'">'+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>Keterangan:
Perhatikan kode recent posts diatas yang saya block tanda merah.
6. Klik simpan
7. Lihat hasilnya
Tidak susahkan membuat widget recent post responsive di blog nya?.
Demikianlah artikel tutorial cara mudah membuat recent posts diblog. Semoga artikel ini berguna dan bermanfaat untuk kamu.