Cara Membuat Recent Post Dengan Thumbnail

nongool.com - Thu 24/06/2014 Cara Membuat Recent Post Dengan Thumbnail. Pada dasarnya recent post ini sangat penting sekali diblog karena dengan recent post ini si pengunjung dapat melihat postingan-postingan kita yang lain nya. Dan saya liat semua blog rata-rata mempunyai recent post tapi tidak banyak blog yang memiliki recent post dengan thumbnail atau dengan kata lain recent post dengan gambar yang ada dipostingan tersebut sehingga menjadikan tampilan blog kita menjadi lebih enak dilihat. Nah bagaimana, akan terlihat lebih bagus bukan kalo recent post blog kita dengan thumbnail?. Seperti yang saya tuliskan pada judul postingan ini diatas, sekarang saya akan membantu teman-teman untuk membuat recent post dengan thumbnail.

Recent Post Dengan Thumbnail

Baiklah mari kita mulai, pastikan teman-teman sudah login ke blogger.com
oke jika sudah pilih menu Template >> Edit HTML lalu copy script dibawah ini.

/* Box Recent update */
.box {
width: 300px;
float: left;
margin: 7px;
background: #F6F6F6;
overflow: hidden;
}
.boxtitlebox {
background: #DDD;
height: 40px;
margin-bottom: 1px;
}
.boxtitle {
height: 40px;
margin: 0 0 1px 0;
background: #099;
color: #FFF;
float: left;
border-right: 1px solid #FFF;
}
.boxtitle h4 {
margin: 10px;
font-size: 16px;
}
.newsitem {
margin: 0;
background: #F6F6F6;
border-bottom: 1px solid #FFF;
height: 49px;
overflow: hidden;
-webkit-transition: margin-left 0.2s linear 0s;
}
.newsitem .newstitle {
width: 225px;
float: left;
font-size: 12px;
color: #333;
margin: 1px 5px;
margin-right: -10px;
}
.newsitem .thumb {
width: 50px;
height: 49px;
float: left;
overflow: hidden;
}
.newsitem .thumb img {
width: 50px;
height: 49px;
}
.listitem {
padding: 0 10px;
-moz-transition: margin-left 0.2s linear 0s;
-o-transition: margin-left 0.2s linear 0s;
-webkit-transition: margin-left 0.2s linear 0s;
border-bottom: 1px solid #FFF;
}
.listitem .subtitle {
font-size: 12px;
text-transform: uppercase;
color: #666;
padding-top: 5px;
}
.listitem .title {
font-size: 12px;
color: #099;
text-transform: uppercase;
margin-bottom: 5px;
}
.clear {
clear: both;
}
/* Recent post with thumbnail */
img.recent_thumb {padding:3px;width:55px;height:55px;border:0; float:left;}
.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:0px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}

Kemudian pastekan script diatas tepat diatas code ]]></b:skin>
Jika belum ketemu code diatas temen-temen search aja tekan tombol Ctrl + F. Nah jika sudah ketemu pastekan script diatas tepat diatas code ]]></b:skin> .Lalu save template.
Dan langkah yang kedua adalah copy lagi script dibawah ini untuk penerapan pada Add a Gadget.

<!-- Box Recent Update -->
<div class='box'>
<div class='boxtitlebox'>
<div class='boxtitle'>
<h4>RECENTPOST</h4></div><div class='clear'/>
</div>
<div class='listitem'>
<div class='subtitle'>
<div class='newstitle'>
<script src='http://id-pemula-javascript.googlecode.com/files/recent-post-label-thumbnail.js'>
</script><script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;
</script><script src='http://www.nongool.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs'>
</script></div>
</div>
</div>
</div>

Keterangan :
var numposts = 5; //Jumlah post yang ditampilkan
var showpostthumbnails = true; //Gambar yang ditampilkan
var displaymore = false; //Untuk Readmore
var displayseparator = false; //Batas garis
var showcommentnum = true; //Untuk menampilkan jumlah komentar
var showpostdate = true; //Untuk menampilkan tanggal
var showpostsummary = true; //Untuk menampilkan descripsi postingan
var numchars = 100; //Jumlah max karakter yang ditampilkan

*Untuk setting jika salah sau fungsi diatas tidak ingin ditampilkan atau sebaliknya temen-temen tinggal ganti aja false/true nya.
false : Non Aktif
true  : Aktif
Ganti  http://www.nongool.com/ dengan nama blog temen-temen.

Oke jika sudah di copy temen-temen pilih menu Layout >> Add a Gadget >> HTML/JavaScript lalu pastekan script diatas yang sudah temen-temen copy tadi dan yang terakhir save
Selesay.

Jika ada yang kurang jelas atau kurang mengerti silahkan teman-teman langsung tanya dengan berkomentar dibawah ini.
Semoga artikel Cara Membuat Recent Post Dengan Thumbnail bisa membantu dan bermanfaat untuk teman-teman.
Note : Jika Teman-teman menyukai artikel Cara Membuat Recent Post Dengan Thumbnail ini bisa langsung share lewat Facebook, Twitter, Google+. dll.
Terimakasih !

Created By : Unknown - www.nongool.com

Anda sedang membaca artikel tentang Cara Membuat Recent Post Dengan Thumbnail.Jika anda suka artikel ini, anda dapat share artikel ini dengan disertakannya link yang sesuai dengan postingan ini sebagai sumbernya. silahkan copy link dibawah ini:

https://nongool.blogspot.com/2014/06/cara-membuat-recent-post-dengan.html
- Hak cipta pemilik -

--- www.nongool.com ---

Description: Cara Membuat Recent Post Dengan Thumbnail
Rating: 4.5