Cara menambahkan widget recent post atau postingan terbaru pada blogspot atau blogger gampang sekali, simak caranya berikut ini.
Hal ini aku bahas khusus sebab biasanya pada blogspot tidak menyediakan widget recent post, jadi kita sanggup menambahkannya sendiri. Kita hanya perlu menambahkan sedikit instruksi - instruksi HTML kemudian disimpan.
Widget postingan terbaru atau recent post merupakan daerah atau area dimana kita sanggup menampilan beberapa artikel yang gres saja kita buat.Biasanya ditampilkan dalam bentuk judul artikel, ringkasan artikel beserta thumbnailnya. Baca juga : cara membuka situs yang diblokir
Widget recent post memang akan menciptakan blog terkesan selalu update kalau memang pemiliknya selalu menciptakan artikel - artikel baru, sebab dengan widget recent post, pengunjung blog sanggup melihat artikel - artikel gres pada area widget recent post. Sulit nggak sih cara menambahkan widget recent post pada blogspot menyerupai gambar di bawah ini?
CARA MENAMBAHKAN WIDGET RECENT POST PADA BLOGSPOT
Berikut ini ialah langkah - langkah menambahkan widget recent post pada blogspot atau blogger :
1. Pertama, masuk ke halaman dashboard blogger
2. Lihat samping kiri, klik "tata letak"
3. Misalnya kita ingin menampilkan widget recent post pada belahan sidebar, maka belahan sidebar klik " tambahkan gadget" ,
4. Pilih "widget HTML/JavaScript"
5. Tambahkan instruksi berikut ini pada widget text tersebut :
<style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style='text/javascript'>
function showrecentpostswiththumbs(json){document.write('<ul class="recent_posts_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://www.webaholic.co.in/other/no-image.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" sasaran ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" sasaran ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" sasaran ="_top">More -></a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/>
6. Jangan lupa, tuliskan judul "Recent Post" atau "Artikel Terbaru", Lalu klik "simpan"
7. Selesai