Cara Membuat Widget Artikel Terbaru di Blog ala Mahrus NET
Selasa, 28 November 2017
Edit
Widget Artikel Terbaru Blog atau dengan istilah bahasa kerennya recent post ini merupakan salah satu widget penting untuk dipasang di sebuah blog, karena dengan tujuan memberikan kemudahan kepada pembaca tentang update terbaru di sebuah situs blog.
Memasang widget recent post pada sebuah blog tidaklah sulit, caranya sangat mudah dan simple sekali biasanya seorang pemblogger menempatkan widget ini pada bagian sidebar blog, mengapa? karena ini sangat mudah pembuatan dan pemasangannya.
Baca Juga
Mahrus NET sendiri sudah memasang widget aertikel terbaru dibagian sidebar kanan yang bisa anda lihat disini : DEMO gimana sobat keren banget bukan. :) nah, bagi kalian yang ingin membuatnya silahkan lihat tips pemasangannya berikut ini :
Widget Keren Artikel Terbaru Pada Blog Ala Mahrus NET :
- Silahkan anda masuk keblogger anda atau sigh in ke www.blogger.com
- Kemudian silahkan anda masuk kebagian Tata Letak
- Tambahkan Gadget
- Pilih HTML/Javascript
- dan Masukkan semua kode berikut ini kedalamnya
<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script><script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 70;</script>
<script src="http://mahrus-net.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #c00;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 5px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>
<div style="text-align:right;"><a href="http://mahrus-net.blogspot.com/2014/12/cara-membuat-widget-artikel-terbaru-di-blog.html" target="_blank" style="font:normal bold 10px/normal Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.2);" title="Widget Artikel Terbaru">Mahrus NET</a></div>
- Save/Simpan..
- Silahkan anda cek hasilnya...
Catatan : Angka 5 warna merah merupakan banyaknya artikel terbaru yang ingin anda tampilkan jadi, silahkan anda sesuaikan dengan kebutuhan anda.
Jadi, sangat simpel sekali caranya silahkan anda terapkan juga widget ini diblog kalian bagi yang belum work silahkan anda bertanya pada kotak komenta.
Semoga bermanfaat :)
