Cara Membuat Recent Post dengan Gambar (Thumbnail) di Blog
Jikalau sebelumnya saya pernah posting tentang Cara Membuat Random Post dengan Gambar (Thumbnail) di Blog dan juga Cara Membuat Recent Comment dengan Avatar di Blog, maka pada postingan kali ini saya akan membahas tentang Bagaimana Cara Membuat atau Memasang Widget Recent Post dengan disertai Gambar atau Thumbnail pada Blog.
Berbeda dengan widget "Recent" sebelumnya. Widget Recent Post ini berfungsi menampilkan postingan-postingan yang paling baru kita publikasikan ke blog kita. Widget ini sangat bagus untuk dipasang di blog kita, walaupun sebenarnya di homepage sudah tersemat postingan-postingan terbaru, tapi belum tentu atau jarang kan kalau pengunjung tersebut mau pergi ke homepage untuk melihat posting terbaru.
Berikut langkah-langkahnya:
1. Login ke Akun Blogger.
2. Masuk ke Dasbor Blog > Tata Letak > Tambahkan Gadget.
3. Klik pada HTML/JavaScript lalu salin dan letakkan kode berikut didalamnya.
Keterangan:
Demikianlah tutorial blogger untuk kesempatan kali ini, widget Recent Post ini saya ambil dari situs DTE, berikut ini adalah link sumbernya.
http://www.dte.web.id/2012/07/recent-post-widget-with-preloader.html
Berbeda dengan widget "Recent" sebelumnya. Widget Recent Post ini berfungsi menampilkan postingan-postingan yang paling baru kita publikasikan ke blog kita. Widget ini sangat bagus untuk dipasang di blog kita, walaupun sebenarnya di homepage sudah tersemat postingan-postingan terbaru, tapi belum tentu atau jarang kan kalau pengunjung tersebut mau pergi ke homepage untuk melihat posting terbaru.
Berikut langkah-langkahnya:
1. Login ke Akun Blogger.
2. Masuk ke Dasbor Blog > Tata Letak > Tambahkan Gadget.
3. Klik pada HTML/JavaScript lalu salin dan letakkan kode berikut didalamnya.
<style scoped="scoped">
#dte_recent-post{ font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; color:#333; margin:0 auto; padding:0; min-height:100px; background:white url('data:image/gif;base64,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') no-repeat 50% 50%;}
#dte_recent-post li{ list-style:none; margin:0; padding:7px; background-color:white; border-bottom:1px solid #ddd}
#dte_recent-post li a img{ float:left; margin:0 10px 0 0; padding:0; border:none; background:none; outline:none}
#dte_recent-post li a.title{ display:block; font-size:12px; text-decoration:none; color:#900}
#dte_recent-post li a.title:hover{ text-decoration:underline}
#dte_recent-post li span.foot{ clear:both; display:block; color:#ccc; margin-top:7px; font-size:10px}
</style>
<ul id="dte_recent-post"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://puloblog.blogspot.com",// Your blog homepage
rp_numPosts = 5,// How many posts?
rp_thumbWidth = 72,// Thumbnail width. Change to 0 if you want to disable the post thumbnail
rp_numChars = 100,// Number of posts summary
rp_sortByLabel = false,// Replace `false` with your specific label name to display posts by specific label
// Example:rp_sortByLabel = "JQuery",to sort posts by label "JQuery"
rp_noImage = "data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",// A 'no-image' image
rp_monthNames = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
rp_newTabLink = true,// If true,then all the widget links will automatically opens in new window/new tab
rp_loadTimer = "onload"; // "onload"|| time in milliseconds (e.g:3000,4000,...)
//]]>
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>
Keterangan:
- homePage = "http://puloblog.blogspot.com" (Ganti dengan URL Blog sobat)
- numPosts = 5 (Jumlah postingan yang ditampilkan)
Demikianlah tutorial blogger untuk kesempatan kali ini, widget Recent Post ini saya ambil dari situs DTE, berikut ini adalah link sumbernya.
http://www.dte.web.id/2012/07/recent-post-widget-with-preloader.html
Cara Membuat Recent Post dengan Gambar (Thumbnail) di Blog
Reviewed by Ryuu Sasori
on
Saturday, January 17, 2015
Rating:
No comments:
Pengunjung yang Baik Selalu Memberi Kritik dan Saran