Cara membuat widget recent post + snippet + read more tanpa gambar

𝑪𝒂𝒓𝒂 𝑴𝒆𝒎𝒃𝒖𝒂𝒕 𝑾𝒊𝒅𝒈𝒆𝒕 𝑹𝒆𝒄𝒆𝒏𝒕 𝑷𝒐𝒔𝒕 + 𝑺𝒏𝒊𝒑𝒑𝒆𝒕 + 𝑹𝒆𝒂𝒅 𝑴𝒐𝒓𝒆 𝑻𝒂𝒏𝒑𝒂 𝑮𝒂𝒎𝒃𝒂𝒓

Cara membuat widget recent post + snippet + read more tanpa gambar

Seperti yang kita tahu, widget recent post atau artikel terbaru merupakan salah satu fitur yang cukup sering dijumpai di sebuah situs blog. Bagi anda yang ingin blognya ramai dikunjungi orang, memasang widget ini bisa menjadi salah satu pilihan cerdas karena widget ini memang dapat meningkatkan Page View yang cukup signifikan.

Widget yang berfungsi untuk menampilkan daftar postingan terbaru ini biasanya diletakkan di bagian sidebar blog agar lebih mudah dilihat pembaca. Tampilannya beragam ada yang lengkap dengan disertai gambar, tanggal dan jumlah komentar. Atau ada juga yang simpel hanya judul postingan saja. Sebelumnya saya juga telah memberikan beberapa tutorial pemasangan widget ini. Silahkan bisa dicari di situs saya

Nah, kali ini saya ingin kembali memberikan tutorial membuat widget artikel terbaru namun dengan tampilan yang berbeda lagi. Widget Recent Post kali ini bisa dibilang simpel tapi lengkap juga karena disertai snippet, nomor, dan readmore, meskipun tanpa gambar (thumbnail). Screenshotnya kurang lebih seperti di bawah ini :

Bagaimana cara membuatnya?. Silahkan ikuti langkah-langkah pemasangannya di bawah ini.

𝐌𝐞𝐦𝐚𝐬𝐚𝐧𝐠 𝐖𝐢𝐝𝐠𝐞𝐭 𝐀𝐫𝐭𝐢𝐤𝐞𝐥 𝐓𝐞𝐫𝐛𝐚𝐫𝐮 + 𝐒𝐧𝐢𝐩𝐩𝐞𝐭 + 𝐑𝐞𝐚𝐝 𝐌𝐨𝐫𝐞
1. Buka akun blogger anda.

2. Pilih menu layout (tataletak).

3. Klik tambahkan gadget kemudian pilih html/javascript

4. Beri judul Artikel Terbaru, Recent Post, atau lainnya terserah anda kemudian copy paste kode di bawah ini.


<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 7;var posts_date = false;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;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: #000;
}
.recentpoststyle li:before {
content: counter(countposts,decimal);
counter-increment: countposts;
float: left;z-index: 1;
position:relative;
font-size: 15px;
font-weight: bold;color:#fff;
background:#068488;
margin:13px 5px 0px 0px;
line-height:30px;
width:30px;
height:30px;
text-align:center;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
}
li.recent-post-title {
margin-bottom: 5px;
padding: 0;
}
.recent-post-title a {
color: #444;
text-decoration: none;
font: bold 14px "Georgia",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.post-date {
font-size: 11px;color: #999;margin:5px 0px 15px 32px;
}
.recent-post-summ {
margin-bottom:8px;border-left:1px solid #69B7E2;
color: #777;
padding: 0px 5px 0px 20px;
margin-left: 10px;
font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
}
</style></div>


𝑲𝒆𝒕𝒆𝒓𝒂𝒏𝒈𝒂𝒏 :
1. Angka 7 menunjukan jumlah postingan yang ditampilkan, silahkan atur sesuka anda.
2. Angka 80 untuk pengaturan karakter snippetnya, silahkan atur sesuka anda.

5. Simpan dan lihat hasilnya.

Demikianlah tutorial singkat dari saya kali ini. Semoga bermanfaat