Thursday, 5 August 2010

Cara Mudah Membuat Recent Post Dengan Slide Dan Thumbnails

:

Recant Precentost Slide ?? langsung aja lihat Recent Post pada Blog ini.. menarik kan ?!!! BuatQ sih ini yang paling menarik dari smua Posting Recent Post yang pernah tak posting.. 

sekedar pengulangan.. Recent Post merupakan daftar posting terakhir yang 
dapat ditampilkan di halaman utama blog melalui widget feed. Dengan 
memanfaatkan widget ini, setiap posting terbaru (jumlah maksimal 5 posting) 
secara otomatis akan selalu ditampilkan sehingga pengunjung akan selalu dapat mengetahui secara cepat apa saja posting terbaru yang telah diterbitkan. Supaya dengan mudah terakses, posisi recent post sebaiknya diletakkan di bagian terdekat dengan halaman posting., banyak basi-basi ne...langsung aja dah..

oz sob.. ma si pembuatnya, Recent post ni di kasih nama JQuery News Ticker Recent Post.. kayak deklarasi ae.. hohoho..
LANJUt ke TKP!!!

Baca Juga yang hampir sama:


Langkah 1 Login ke Blogger  

Langkah 2 Masuk ke "Rancangan - Elemen Laman

Langkah 3 Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript

Langkah 4 Masukan (copypaste) kode dibawah ini:

<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/rpplusimgnt-v1.0.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 125;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Judul Gadget terserah anda dan baca keterangan jika ingin memodifikasinya sesuai keinginan anda...  

Langkah 5 Klik tombol "Simpan" Keterangan: Perhatikan kode-kode pada 
Langkah 4!
  • Untuk membuang garis tepi ubahlah nilai 1px menjadi 0 pada kode border:solid 1px #585858; (Baris 2)
  • Untuk mengubah background ubahlah nilai #2f2f2f pada kode background-color:#2f2f2f; atau jika tidak ingin menggunakan background buanglah kode tersebut (Baris 2)
  • Untuk mengubah warna font judul artikel ubahlah nilai #FFF pada kode color:#FFF (Baris 6)
  • Untuk mengubah warna font artikel ubahlah nilai #DEDEDE pada kode color:#DEDEDE (Baris 8)
  • Untuk mengubah ukuran gambar mini ubahlah nilai 55px pada kode width:55px; dan kode height:55px; (Baris 9)
  • Jika template blog anda telah terpasang framework jQuery sebelumnya buanglah kode pemanggilan jQuery (Baris 11)
  • Ubahlah nilai 400 pada kode var speed = 400; untuk mengatur kecepatan (Baris 14)
  • Ubahlah nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya (Baris 15)
  • Ubahlah nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan (Baris 23)
  • Ubahlah nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan (Baris 24)
  • Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh"


Cara Mudah Membuat Recent Post Dengan Slide Dan Thumbnails 9 out of 10 based on 10 ratings. 9 user reviews.


Artikel Terkait

cElOTEh sObAT BLOGGER :

Ada 4 komentar ke “Cara Mudah Membuat Recent Post Dengan Slide Dan Thumbnails”
ar-dhy said...
 

makasih banyak nih infonya mas Admin. moga tambah jaya and sukses selalu. amin. jalan2 ke tempat aQ jg yah mas...(http://ar-dhy.blogspot.com). thanks before.

Imdad_Gresik said...
 

sama2 maz.. moga tambah maju truzzzz... !!! kt sama2 share z!!

:cendolbig :batabig :najis :marah :repost :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :nosara :berduka :hoax :dp :cekpm :thumbup :kr :nohope :ngacir :salahkamar :cool :mewek :babyboy :babygirl :95

ASSALAMU'ALAIKUM WR WB

BLOG ini DOFOLLOW _ Berkomenarlah Yang Baik Dan Sopan Zaaaa !!
Kalo Mau Pake EMOTICONS, sObat Hanya Cukup Menulisan Kodenya Saja... !! ( :10 :11 :13 :16 - :101 / :najis :travel :rate5 ) BE A FRIENDLY !