Widget Artikel Acak [Random Post] dan Artikel Terbaru [Recent Post]

Widget Artikel Acak [Random Post] dan Artikel Terbaru [Recent Post]

Mungkin bagi seorang blogger widget seperti ini tidaklah asing. Tapi widget yang satu ini berbeda dari widget random/recent yang sudah ada. Pada widget ini dapat berfungsi sebagai random post [artikel acak]/recent post [artikel terbaru]. Selain bisa memilih diantara dua opsi itu juga bisa digunakan untuk menampilkan berdasarkan label/kategori baik itu pada random/rencent.

Metode yang saya gunakan untuk meload artikel sama dengan widget komentar terbaru yaitu dengan jQuery $.ajax(). Sehingga untuk dapat berfungsi setidaknya template anda sudah ada jQuery librarynya.

Jika anda tertarik memasang diblog anda silahkan ikuti cara pemasangannya berikut ini.

Pemasangan Widget

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<style scoped="" type="text/css">
ul.rdmrcpostag{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rdmrcpostag,ul.rdmrcpostag li{margin:0;padding:0;list-style:none;overflow:hidden}
ul.rdmrcpostag{background:aliceBlue}
ul.rdmrcpostag li{padding:5px}
ul.rdmrcpostag b a{color:#00699B}
ul.rdmrcpostag .thumbp{float:left;margin:0 5px 3px 0}
ul.rdmrcpostag img{padding:3px;border:1px solid #B1B1B1;background:#F3F3F3}
ul.rdmrcpostag .datex{font-size:8px;margin:3px 0 0}
ul.rdmrcpostag .dt{margin:0 5px 0 0;padding:0 5px 0 0;border-right:1px solid #7A7A7A}
ul.rdmrcpostag p{margin:5px 0 0}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rdmrecpostajax.js" type="text/javascript"></script>
<div id="randomcecent_posts_id"></div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
RandomRecenTag({
blogURL: "",
MaxPost: 6,
RandompostActive: true,
thumbSize:55,
jumlahhuruf:100,
cmtext:"Komentar",
NoCmtext:"No Comment",
tagName:false,
idcontaint: "#randomcecent_posts_id"
});
});
//]]>
</script>

NB:
1. Jika di template anda sudah ada jQuery library maka kode ini <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> tidak perlu dicopy.
2. Untuk merubah warna dari background rubah tulisan aliceBlue bisa dengan HEX Generator.

Opsi-Opsi

Opsi
Keterangan
blogURL
Bisa diisi dengan url dari blog contoh: url_blog:"http://mkr-site.blogspot.com". Jika dibiarkan kosong akan menampilkan artikel dimana widget ini dipanggil
MaxPost
Jumlah Maksimal artikel yang ditampilkan. default: 5.
RandompostActive
Mengaktifkan arikel acak atau tidak, default: true. Opsi yang bisa dipilh true atau false
idcontaint
ID tempat widget akan ditampilkan misal: <div id="randomcecent_posts_id"></div> maka idcontaint:"#randomcecent_posts_id"., default :"#randompost:".
thumbSize
Ukuran dari thumbnail gambar dari artikel (dalam pixel). setidaknya artikel memiliki gambar yang disimpan diblogspot atau picasa web, default: 100.
jumlahhuruf
Jumlah karakter/huruf yang tampil dibagian ringkasan artikel, default: 100
cmtext
Tulisan diakhir jumlah komentar, default: "comments" .
pBlank
Gambar backup jika artikel tidak terdapat gambar yang disimpan diblogspot/picasa web, default: "http://2.bp.blogspot.com/-D47WWjFZXdk/UP1z-A5uCuI/AAAAAAAAH98/heTBvxq49No/s1600/noimage.jpg".
NoCmtext
Tulisan jika artikel belum memiliki komentar, default "No Comment".
tagName
Jika ingin menampilkan arikel berdasarkan label/kategori default: false. Jika ingin memunculkan arikel berdasarkan label tinggal tulis labelnya seperti ini tagName: "blogger"


NB: Sebaiknya file JS disimpan di google code anda sendiri. Jika ingin tahu cara menyimpannya di google code silahkan ke tutorial Menyimpan file di Google Code.

Satank Mkr Beri Komentar
Design by MKRSite Copyright © 2012 ~ 2017 Powered by Blogger