Cara Membuat Widget Recent Post + Snippet + Read More Tanpa Gambar

Santos el Salam

8 Desember 2021

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 lewat pencarian di blog ini. 

Nah, kali ini Santos Blog 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. 

Memasang Widget Artikel Terbaru + Snippet + Read More

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>

Keterangan: 

• Angka 7 menunjukan jumlah postingan yang ditampilkan, silahkan atur sesuka anda. 
• Angka 80 untuk pengaturan karakter snippetnya, silahkan atur sesuka anda. 

5. Simpan dan lihat hasilnya. 

Demikianlah tutorial singkat dari Santos Blog kali ini. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Widget Recent Post + Snippet + Read More Tanpa Gambar. Please share...!

Facebook

Twitter