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>.

#recent-posts ul{ margin:0; padding:0; } #recent-posts li { list-style: none; border-bottom:1px solid #f3f3f3; padding: 7px 10px; line-height:1.7; } #recent-posts li:last-child { border-bottom: 0; } #recent-posts img { float: left; margin-right: 8px; width:60px; height:60px; }

Javascript Recent Post Gambar

• Login ke akun blogger.
• Kemudian klik template.
• Klik edit html.
• Pastekan javascript recent post dengan gambar berikut diatas </head>.

<script>//<![CDATA[ var homePage = "http://www.tapike.com", numPosts = 10; thumbsize = 72; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;if('media$thumbnail'in e[i]){var thumb=e[i].media$thumbnail.url.replace(/\/s72\-c/, "/s100-c")}else{thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8aQhrF4Z62oy2lorPtf5WIsvyuwdtg4cfRJGksL7xDWW2bpiYGKaiDUjzxdGFrWxrfoQ3y6UG1X56nlPtsHlqvkaAyazSBIu-vzxwFyG37kPygSJP7LbKelzR77g9NrzYXLEq8nTsLBjP/"};break}}var title=e[i].title.$t;content+=' <li class="recent-posts"><img src="'+thumb+'" title="'+title+'" alt="'+title+'" width="'+thumbsize+'" height="'+thumbsize+'"/><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a><div style="clear:both"> </div> </li> '}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]></script>

HTML Recent Post Gambar

• Masuk ke blogger.
• Klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan kode di bawah ini.

<div id='recent-posts'></div>

Pengaturan

• Ganti var homePage = "http://www.tapike.com", dengan domain Anda.
• numPosts = 10; adalah jumlah postingan yg ingin ditampilkan pada recent post dengan gambar.
• thumbsize = 72; ukuran gambar recent posts=

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.