Rabu, 08 Februari 2012

Membuat Recent Posts Thumbnails Dalam Kotak Scroll


Cara Membuat Recent Posts Thumbnails (Artikel/Entri Terbaru dengan Gambar) yang akan kita bahas kali ini ialah cara membuat Recent Posts Thumbnails dalam kotak dengan scroll Vertikal yang keseluruhannya menampilkan 10 artikel terbaru dan yang awalnya terlihat hanya 3 artikel terbaru dan sisanya bisa di lihat dengan menggeser scroll ke bawah atau ke atas bisa ingin melihat yang sebelumnya, sebenarnya cara membuat ini sangatlah mudah hanya dengan cara menambahkan gadget dan memasukan script yang telah kami sediakan ke dalamnya. ya baiklah kita akan segera memulai langkah-langkahnya;
1. Login ke Blogger.com


2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +
5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript Dengan Gamba 




<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;


float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style="" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>
<script style="">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://masihinginbelajar.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>


5. Berilah judul, misalkan Recent Posts atau seperti punya saya yang di beri judul Artikel Terbaru. Namun untuk lebih baiknya judul terserah Anda yang di sesuaikan dengan kebutuhan Anda

Keterangan ;

  • width: 300px; itu untuk pengaturan lebar kotak yang menampung Recent Posts namun jika Anda tidak ingin repot untuk menyesuaikan lebar kotak dengan lebar kolom tempat gadget akan di letakan maka Anda cukup menggantinya width: 100%; atau jiak tampilannya kurang bagus anda bisa merubah nilainya mulai dari 95%-98%.
  • var numposts = 10; itu untuk pengaturan berapa banyak Recent Posts (postingan terbaru) di tampilkan jika ingin menampilkan lebih sedikit atau lebih banyak Anda hanya tinggal mengurangi atau menambah nilainya saja, contoh jika Anda ingin tampil recent posts lebih sedikit misal ingin hanya tampil 5 maka scriptnya var numposts = 5
  • var numchars = 100; itu script untuk pengaturan banyaknya karakter yang akan di tampilkan dalanm Recent Posts prosedurnya sama kaya yang sebelumnya untuk merubahnya tinggal di tambah dan di kurangi saja nilainya

Tidak ada komentar:

Posting Komentar

Jangan lakukan spam pada komentar dan bila anda ingin beriklan gratis atau hanya sekedar membuat backlink anda bisa melakukannya di beriklanbersama.blogspot.com dan hanya dengan sekali pasang maka akan terpasang di 10 website.