Cara Membuat Recent Post Dengan Gambar Di Blog

Cara Membuat Recent Post Dengan Gambar Di Blog - Pada Kali ini kita akan membuat recent post dengan gambar atau memasang widget artikel terbaru dengan thumbnail di blog. Recent post dengan gambar merupakan suatu element atau widget untuk menampilkan postingan atau artikel terbaru ditambah dengan gambar dari blog dan sangat berguna untuk seo blog karena dapat memberikan internal link. Dengan ini pengunjung dapat mengetahui postingan terbaru dari blog kita. Sebenarnya blogger juga menyediakan widget feed yg fungsinya sama seperti recent post dengan gambar. Bagi anda yg ingin membuat recent post dengan gambar di blog, simak langkah-langkah berikut ini.

CSS Recent Post Dengan Gambar

• Login blogger.
• Klik template.
• Klik edit html.
• Pastekan css recent post dengan gambar berikut diatas ]]></b:skin>.

span.date{font-size:12px;color:#444}img.recent_thumb{float:left;padding:10px}.sum{font-size:12px;color:#555}.recent-post-gambar h4{font-weight:400;text-transform:uppercase;padding:10px;background:#ff5848;color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;font-size:14px}.recent-post-gambar strong{font-weight:100;font-size:12px;color:#666}.recent-post-gambar ul{margin:0;padding:0;border:1px solid #ddd;border-top:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.recent-post-gambar li{list-style:none;font-size:14px;text-align:left;padding:5px}.recent-post-gambar li:last-child{border:0}.recent-post-gambar i{font-size:12px;color:#000}.recent-post-gambar a{font-size:12px;color:#ff5848}

Javascript Recent Post Gambar

• Login ke blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan script recent post dengan gambar berikut diatas </head> atau </body>.

<script style='text/javascript'> function showrecentpostswiththumbs(json){document.write('<div class="recent-post-gambar"><h4>Recent Post<a href="http://www.tapike.com/2015/11/cara-membuat-recent-post-dengan-gambar-di-blog.html" title="Get Widget Recent Post" target="_blank" rel="dofollow"><img style="float: right;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrCbr-nm8KXvBwykEWVQm2fA9pppdp1_t4J5fh9lG4XtD_qWMVVovwMND2bPGmlSX3UbI4lP5xoVl7vwbZfVnXktc-BZKFc9hu6hmk97kgy_v2_RhxtVmOZjx8P_Df_T49saOO3_vWiWg/s1600/white-cog-hi.png" height="20px" width="20px" tilte="Get Widget Recent Post" alt="Get Widget"/></a></h4><ul>');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+'" title="'+posttitle+'" alt="'+posttitle+'" width="72px" height="72px"/>');document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><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('<span class="sum">');document.write(postcontent);document.write('</span>');} else{document.write('<span class="sum">');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</span>');}} var towrite='';var flag=0;document.write('<br/><span class="date">');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+'-'+cdyear;document.write('<span class="date">');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+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true) {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Selengkapnya...</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('<div style="border-bottom:1px solid #ddd;"></div>');}document.write('</ul></div>');}</script>

HTML Recent Post Dengan Gambar

• Masuk ke blogger.
• Klik  tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan html recent post dengan gambar dibawah ini.

<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 150; </script>
<script src='http://tapike.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Pengaturan

• Tulisan warna merah adalah jumlah postingan yg ingin ditampilkan pada recent post dengan gambar.
• showpostthumbnails untuk menampilkan gambar.
• showcommentnum, jumlah komentar.
• showpostdate, memperlihatkan tanggal.
• showpostsummary, menampilkan jumlah cuplikan artikel.
• numchars, karakter cuplikan.

Demikianlah tutorial mengenai cara membuat recent post dengan gambar atau memasang widget artikel terbaru dengan thumbnail di blog. Semoga dapat bermanfaat bagi kita semua. Jangan lupa berlangganan artikel terbaru dari tapike.com.