Membuat Recent Post Grid With Thumbnail

Posted by Wahyu basofii on Rabu, 03 Juli 2013

Wahyu only - Postingan Terbaru atau biasa disebut Recent Post merupakan informasi singkat dari judul posting terbaru yang ditampilkan secara berurutan agar memudahkan pengunjung melihat urutan posting yang telah kita buat. Untuk membuat recent post kita bisa menggunakan source code dibawah.

Mengenai cara penggunaan code telah saya jelaskan pada posting Full source code Random Post, jadi tidak ada perbedaan dalam cara menggunakannya caranya hampir sama, yang membedakan hanyalah source code nya dan tampilanya saja. Jadi, yang ingin saya bagikan disini adalah Recent Post Grid With Thumbnail.

recent post table with thumbnail - wahyu only


Widget recent post model grid thumbnail ini sangat cocok untuk blog yang berupa photoblog. Walau blog dengan tema apapun juga bisa digunakan. Efek visual foto, memberikan pengalaman baru pada pengunjung blog dalam melihat post dari foto atau gambar ilustrasinya.

Cara Membuat Recent Post Grid Thumbnail
1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style type="text/css">
#post-gallery {
  width:283px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#ffffff;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://4.bp.blogspot.com/-YBK-gZcA1JI/UdO-ymLNqTI/AAAAAAAAAq0/dVls4mZkzZ8/s16/GsNJNwuI-UM.gif') no-repeat 50% 50%;
  width:90px;
  height:90px;
}
#post-gallery .rp-item img {
  width:90px;
  height:90px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:300px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Recent post",       // Widget Title
    numposts    = 9,      // The number of thumbnail / posts to display
    numchar     = 100,      // Number of characters in the description tooltip
    rcFadeSpeed = 110,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://4.bp.blogspot.com/-e00QljtZ4KI/UdPAdHMt1rI/AAAAAAAAArM/aMM117Xj36w/s175/Blank.jpg",      // Image that show up if the post doesn't have a image
    blogURL     = "http://wahyu-only.blogspot.com/";       // Your Blog Address
</script>
<script src="https://googledrive.com/host/0B5wHPYwL6DjVYl9TMkpxanJOZjQ" type="text/javascript"></script>
<br />
<a href="http://goo.gl/YkfsY" onmouseover="window.location=this.href"></a>
<style type="text/css"> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 2px!important; padding-bottom: 2px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:2px;padding-top:2px;display:block;} </style>
Code Source : http://se-cara.blogspot.com/2013/06/widget-recent-post-terbaru-tahun-2013.html

Tambahan :
  • Ganti wahyu-only.blogspot.com dengan URL blogmu sendiri. 
  • numposts    = 9 adalah banyaknya thumbnail post terbaru yang ditampilkan. 
  • numchar     = 100 adalah banyaknya tootip text yang ditampilkan saat mouse di arahkan ke gambar.
5. Simpan jika sudah selesai.

Cukup sekian untuk tutorial kali ini, Bagaimana mudah bukan? ok selamat mencoba! Mungkin hanya ini yang dapat saya sampaikan kali ini,silahkan kreasikan recent post grid ini dengan template anda supaya terlihat lebih menarik. untuk kurang dan lebihnya mohon dimaafkan. Terimakasih
Judul : Membuat Recent Post Grid With Thumbnail
Label :
URL : http://wahyu-only.blogspot.com/2013/07/membuat-recent-post-grid-with-thumbnail.html

40 komentar:

  1. Keren nih mas recent post nya :D

    BalasHapus
  2. jadi mirip kyak related post masbro :D

    BalasHapus
    Balasan
    1. Masih mirip,,belum kembar kan :D

      Hapus
    2. masih kembar..belum ketuker kan :D

      Hapus
    3. haha..apanya yang ketuker mas :D

      Hapus
    4. hehehe ada2 nih mas budi :D

      Hapus
  3. Keren gan recen postnya. Ijin bookmark dulu ya kapan" aja ane pasang :D

    BalasHapus
    Balasan
    1. Ok mas..silahkan dibookmark aja gpp ;)

      Hapus
    2. saya juga izin bukmak aja sob, mungkin anti butuh :)

      Hapus
  4. selain tampilan jd menarik..pebgunjung jd lebih midah buat mencari artikel kita ya mas..

    hebring deh..tutorial mas wahyu :)

    BalasHapus
    Balasan
    1. semoga begitu mas,, lebih menarik gitu

      Hapus
  5. mantap kang, makasih ya udah share. saya suka widget tanpa edit template :D

    BalasHapus
    Balasan
    1. saya juga suka mas,, karena gak ribet2 amat..

      Hapus
    2. saya juga, kalo ini enak masangnya cuma di tata letak aja :D

      Hapus
  6. keren mas, saya pernah lihat diblog tetangga waktu BW cuma nggak tau namanya apa dan ternyata namanya recent post grid with thumbnail toh!!

    BalasHapus
    Balasan
    1. iya mas,, saya juga bingung pas pertama lihat gak tau namanya,,,sekarang sudah kenalan,jadi tahu namanya :D

      Hapus
  7. Mantappp kang recent post.. nya...

    BalasHapus
  8. ternyata caranya sangat gampang.

    BalasHapus
  9. terimaksih atas ilmunya. boomark dulu.

    BalasHapus
  10. nyimak aja gan, udah cucok sama template sekarang

    BalasHapus
    Balasan
    1. oke mas,,, ribet kalo utak atik template terus...

      Hapus
  11. artikel yang bermanfaat gan...thanks ..

    #sekedarjalanjalan

    BalasHapus
    Balasan
    1. silahkan jalan jalan mas,,,kalo udah capek istirahat & minum es aja :D

      Hapus
  12. wih ternyata recent post juga ada grid nya yaa gan keren

    BalasHapus
  13. keren gan

    Kunjungan rutin nihh sob, jangan lupa berkunjung juga diblog saya..

    BalasHapus
  14. keren ya gan hasilnya,kira-kira jadi berat ga blognya? ditunggu kunjungan baliknya

    BalasHapus
  15. Bagus gan recent postnya. Tapi menurut ane itu terlalu besar dan lebih bagus kalo bentuknya lebih seperti skyscraper :D hanya saran mas haha

    BalasHapus
    Balasan
    1. kan bisa di modif sesuai selera mas..hehe

      Hapus
  16. keren ya sob recent post di jadiin thumbnail kyk windows aja.. hehe

    BalasHapus
  17. ane pengen tau hasil jadinya kyk apa.. agan kira2 bisa gk ngasik samplenya ? :D

    BalasHapus
  18. mksi ilmunya ya gan,.. ternyata recent post pun bisa di modifikasi .. :)

    BalasHapus
  19. thank ilmunya gan..bisa saya terapkan di blog saya

    BalasHapus
  20. Sangat Bagussss, Maksih Gan :D

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter