Cara Membuat Rescent Post dengan Efek Slider

Cara Membuat Rescent Post dengan Efek Slider

2 Comments

Sebenarnya banyak artikel rescent post dengan berbagai tampilan, mulai dari milik blogger sampai dari script yang di buat oleh kawan-kawan blogger. Ane juga share bagaimana cara membuat rescent post dengan efek slider. Sebelumnya ane ucapkan makasih banyak kepada software bali yang telah share script ini sebelumnya. Ane adit ulang tampilannya karena ini akan membedakan tampilan widget rescent post dengan tampilan lainnya. OK kita lanjut mang...Kelebihannya mungkin hanya pada efek slider yang ditampilkan oleh widget ini Disamping itu widget ini selain mampu menampilkan Judul dan summary artikel dengan tampilan yang elegan hehehehee :). Sekarang ikuti langkah pembuatannya.
  • Login ke akun Blogger sobat
  • Klik Rancangan >> Elemen Laman
  • Klik Tambah Gadget
  • Pilih HTML/Javascript
  • Masukan kode di bawah ini
<style type="text/css">
#rp_plus_img{height:350px;overflow:hidden; border: 5px ridge rgb(230, 141, 58);padding:6px 10px 14px 5px;background-color:#848484;}
#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:#08088A;}
#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:#8A0808;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #8A0808;width:55px;height:55px;}
</style>
<script type="http://bloekoetoek-blogonol.googlecode.com/files/RECENTPOSTJQUERI.js"></script>
<script type="http://bloekoetoek-blogonol.googlecode.com/files/sliderescentpost.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 = 20;
var numchars = 70;
</script>
<script src="http://blogonol.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

  • Ganti Tulisan berwarna merah dengan url atau alamat blog anda
  • Simpan Template dan Lihat Hasilnya
  • Baca Juga Keterangan Untuk Edit Tampilan setelah contoh di bawah ini.
Cara Edit Tampilan
  • #rp_plus_img{height:350px  /*  silahkan ganti 350px dengan keinginan anda  */
  • border: 5px ridge rgb(230, 141, 58)  /*  5px untuk ketebalan border dan rgb untuk warna border. bila tidak ingin mempunyai border hapus saja kode bordernya  */
  • background-color:#848484  /*  silahkan ganti #848484 dengan kode warna kesukaan anda, kode warnanya klik di sini. bila tidak ingin menggunakan background (nantinya akan menjadi otomatis) hapus saja kode backgroundnya */
  • #rp_plus_img a{color:#08088A;}  /* silahkan ganti warna judul posting #08088A dengan warna kesukaan anda   */
  • font-size:11px   /* ukuran font, silahkan ganti dengan keinginan anda   */
  • color:#8A0808;text-align:justify  /* warna sumary posting, silahkan anda ganti kode #8A0808 dengan warna kesukaan anda   */ 
  • var speed = 400;   /* kecepatan pergantian slide posting yang ditampilkan  */
  • var pause = 2500; /* lamanya artikel bertahan sebelum slider berjalan   */
  • var numposts = 20;  /* jumlah tampilan posting, silahkan anda ganti sesuka anda   */
  • var numchars = 70;  /* jumlah kata yang ditampilkan per judul posting   */
Catatan Penting
Bila script ini tidak berfungsi silahkan anda ganti script yang berwarna merah di bawah ini, karena akan lebih baik bila scriptnya anda simpan sendiri di wadah penyimpanan online anda.
<script type="http://bloekoetoek-blogonol.googlecode.com/files/RECENTPOSTJQUERI.js"></script>
<script type="http://bloekoetoek-blogonol.googlecode.com/files/sliderescentpost.js"></script>
Caranya klik link di bawah ini.
script untuk slidepost
script untuk rescent-post-jequery



  • Save as dengan file name: (misalnya) blogonol.js 
  • save as type: all files 
  • encoding: unicode 
  • jangan lupa berikan kode .js di belakang nama filenya.
  • lalu download file yang anda simpan tadi di penyimpanan online milik anda. Untuk mengetahui bagaimana cara menyimpan filenya silahkan baca di sini
  • sorry nih bro kalau rada ribet, karena script ini terkadang gak berjalan dengan baik. tapi bila anda sudah menyimpannya sendiri, maka script ini akan berjalan dengan tok cer hehehee :) sabar yaaa.....terkadang untuk bisa itu perlu perjuangan...semangat broooo....
  • Selamat mencoba dan sukses selalu
Sumber script: software bali


''keep spirits and do the best''
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.