Selasa, 08 Mei 2012

Membuat Recent Post

Cara Membuat Recent Post Bergerak Ke Bawah yah itulah Tips Dan Trik Tutorial Blogspot tentang Membuat Recent Post Bergerak Ke Bawah or hanya keyword google Cara Membuat Recent Post + Thumbnail dengan Jquery
Recent Post adalah widget Blog yang akan menampilkan beberapa artikel / postingan terakhir blog. Adapun jumlah portingan yang di tampilkan bisa diatur sesuai keinginan kita dengan mengacak - acak kode HTMLnya. Cara Membuat Recent Post Bergerak Ke Bawah Dengan widget recent post ini, pengunjung akan dengan mudah melihat beberapa artikel terakhir yang diposting di blog. Dengan sekali klik, pengunjung akan langsung menuju ke artikel yang masih fresh.


Cara Membuat Recent Post Bergerak ,Di artikel sebelumnya saya sudah menulis tutorial membuat Recent Post / Artikel Terakhir dengan Thumbnail. Dengan fungsi thumbnail, Widget Recent Post akan menampilkan Gambar yang ada di dalam artikel seperti yang biasa kita jumpai pada Widget Related Post / Artikel Terkait yang dipasang di akhir artikel / postingan blog.


Secara tidak sengaja, saya menghapus JavaScript Recent Post Thumbnail BLOGGERBUGIS yang tersimpan di sites google. Karena malas upload kembali JSnya, sekalian saja saya memasang Widget Recent Post Thumbnail yang baru yang telah di tambahkan efek MARQUEE / Berjalan. Dengan efek marquee, Widget Recent Post Thumbnail BB jadi tampak lebih menarik. Related Post Thumbnail akan BERGERAK turun dengan teratur. Hasilnya, jadilah Widget Recent Post Thumbnail Animasi hehehe....
Belum puas dengan animasinya, sekalian saja saya tambahkan bingkai yang tidak bisa di gunakan untuk foto dinding. Hasilnya... silhkan lihat sendiri pada sidebar blog saya, hehehehehe

Cara Membuat Recent Post Bergerak, Mau tahu cara memasang Widget Related Post Tumbnail Animasi yang bergerak turun dan dilengkapi dengan bingkai yang tidak bisa digunakan untuk foto dinding di rumah pada blog anda ? (Kalau kalimatnya terlalu panjang, silahkan ambil nafas dulu. Bernafas melalui hidung... lalu keluarkan melalui bokong hehehehe......).


Caranya : 
1. Login Blogger 
2. Design
3. Tata Letak
4. Tambah gadget 
5. Klik HTML / Java Script
6. Copas kode HTML berikut :


<center><table border="2" cellpadding="7"><tbody><tr><td><center><style type="text/css">
#rp_plus_img{height:280px;overflow:hidden;border:solid 0px #000000;padding:6px 10px 14px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:0px;list-style:none;}
#rp_plus_img a{color: #000000;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#000000;text-align:left;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#DF0101;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #DF0101;width:95px;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/bloggerbugis/js/RergerakBB4U%282%29.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 45;
</script> <script src="http://fcfarid10.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center></td></tr></tbody></table></center>

7. Simpan / Save

NT : kode warna bitu di ganti dengan alamat masing masing blog kalian semua

Akhirnya selesai juga, semoga tutorial blog ini membantu anda semua ya. Pastikan jika tidak berhasil komentar di blogku, hehehehe. Nanti saya akan bantu kok, Salam Blogging

0 komentar:

Posting Komentar

Pemberitahuan

Selamat Datang di Website Blog fcfarid10.blogspot.com, Jika anda Ingin mendownload tapi Filenya rusak Komentar ya