Selamat Datang di Hasbimedia.com
Cara Membuat Recent Post Bergulir Dengan Thumbnail

Cara Membuat Recent Post Bergulir Dengan Thumbnail

Cara-membuat-recent-post-keren-dengan-thumbnail

Cara Membuat Recent Post dengan Thumbnail – Widget recent post tak lain dan tak bukan merupakan widget pada sebuah blog yang menunjukkan artikel atau postingan terbaru di blog tersebut.

Biasanya, widget recent post ditempatkan di bagian samping atau sidebar dari sebuah blog.

Fungsi dari widget recent post  adalah untuk memberitahukan kepada pengunjung jika postingan yang tampil adalah postingan yang paling fresh atau terakhir dibuat dan dipublikasikan oleh sang pemilik blog.

Dengan adanya widget ini, pengunjung akan dapat dengan mudah mengakses artikel fresh atau terakhir dibuat tanpa harus kembali ke homepage ketika mereka sedang berada dan atau membaca artikel lain pada blog tersebut karena dapat dengan mudah mereka temukan di sidebar pada widget recent post ini.

Sebenarnya, ada banyak macam gaya yang bisa digunakan dalam membuat widget recent post pada sebuah blog.

Ada bentuk simpel yang hanya menampilkan judul postingan, adapula yang menampilkan judul postingan dengan thumbnail, atau yang lebih lengkap lagi bisa menampilkan judul, thumbnail beserta deskripsi.

Bahkan, selain variasi di atas, berbagai macam desain widget recent post keren bisa juga diterapkan.

Akan tetapi, disini, kami hanya akan memberikan cara untuk membuat recent post keren dengan thumbnail yang dapat bergulir secara otomatis dari atas ke bawah.

Meskipun secara tampilan memang terlihat cukup sederhana, namun sudah cukup untuk membuat penampilan blog menjadi lebih keren.

Cara membuat widget recent post dengan gaya ini caranya adalah sbb:

1. Masuk atau login ke akun blogger Anda.

2. Pilih “Tata Letak” kemudian klik “Tambah Gadget/Add Gadget” lalu tambahkan atau pilih “HTML/JavaScript”.

Terakhir, salin dan tempelkan kode di bawah ini:

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
    
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
    
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>

Jika sudah, klik simpan.

Keterangan:

var numpost = 5, angka 5 ganti dengan jumlah postingan yang ingin ditampilkan.

Sekarang, coba dicek apakah widget recent post sudah bekerja. Hasilnya akan terlihat seperti gambar di bawah ini.

Cara-membuat-recent-post-sederhana
Tampilan aslinya bergulir dari atas ke bawah

Jika widget recent post sudah bisa dilihat pada tampilan blog, selamat karena sekarang blog Sobat sudah dilengkapi dengan widget recent post keren bergulir lengkap dengan thumbnail.

Semoga membantu!


Sumber script: Terima kasih dari blog HASBIMEDIA [HM] kepada http://christiantatelu.blogspot.co.id/2012/03/cara-membuat-recent-post-berjalan-di.html

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

Tidak ada komentar