Cara Membuat Recent Post Dengan Gambar (Thumbnail) Di Blog Blogspot

Oleh Unknown

Share this on :

Tweet

Cara Membuat Recent Post Dengan Gambar (Thumbnail) Di Blog Blogspot - Hai sobat blogger kali ini Seoscore akan membagikan sebuah tutorial masih dalam membuat widget recent post di blog.Jika sebelumnya saya telah membuat artikel tentang cara membuat recent post slider responsive di blog kali ini tanpa slider tapi menggunakan gambar.

Apa sih fungsi recent post itu?, Sebuah blog harus dilengkapi dengan navigasi salah satunya kita memasang widget recent post di blog kita.Fungsinya agar orang-orang atau pengunjung bisa melihat artikel terbaru yang baru saja kita publikasikan.

Apapun bentuk widget recent post di blog anda itu sama saja baik menggunakan gambar (thumbnail),tanpa gambar,dengan slider dan lain-lain yang penting itu berfungsi penuh untuk blog anda dalam hal menavigasi artikel dan membantu visitor dalam menemukan artikel penting di situs anda.baiklah langsung saja menuju tutorialnya.

Cara Membuat Widget Recent Post Dengan Gambar Di Blog

1. Masuk ke akun blogger
2. Masuk ke menu Tata letak > Tambah Widget > HTML/Javascript
3. Copy dan pastkan kode dibawah ini tepat dikotak yang disediakan.

<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://seo-score.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>

Note : Ganti tulisan berwarna biru dengan URL blog dan Jumlah post yang ingin anda tampilkan dan klik Save.

Nah sekarang widget recent post dengan gambar (thumbnail) sudah berhasil sobat pasang di blog sobat.Baiklah mungkin hanya ini yang dapat saya sampaikan dalam artikel saya tentang cara membuat recent post dengan gambar di blog ini semoga bermanfaat.

Tag : Widget