Widget blogger yang satu ini berbeda dari random/recent post (artikel acak atau artikel terbaru) yang sudah ada. Perbedaanya yaitu pada widget ini saya menyatukan kedua fungsi tersebut dalam satu kode dan juga dapat menampilkan artikel berdasarkan tag/label/kategori.

Widget Artikel Acak [Random Post] dan Artikel Terbaru [Recent Post] - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Widget blogger yang satu ini berbeda dari random/recent post (artikel acak atau artikel terbaru) yang sudah ada. Perbedaanya yaitu pada widget ini saya menyatukan kedua fungsi tersebut dalam satu kode dan juga dapat menampilkan artikel berdasarkan tag/label/kategori.

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
Bagikan kepada teman!
Garis

22 comments:

  1. Keren niih .. , tapi cuma bisa nyimak doang :D
    Kalo berkenan kunjungi balik blog saya

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Gan Mau tanya ..
    Cara merubah Font Seperti Title Post blog ini gimana yah?
    baru buat blog nih.. Mohon bantuannya :))
    Saya pakai Template blog dari agan..

    BalasHapus
    Balasan
    1. itu menggunakan webfontnya google..jenis Yanone Kaffeesatz..
      cara pansangnya kurang lebih seperti ini:
      letakkan link google webfont ini :
      <link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css"/>
      sebelum <b:skin><![CDATA[/*
      lalu masukkan tag yang ingin menggunakan font ini sebelum ]]></b:skin> misalnya pada heading 1:
      h1 {
      font-weight: normal;
      font-family: 'Yanone Kaffeesatz','Helvetica Neue',Helvetica,Arial,sans-serif;
      }

      mungkin begitulah..

      Hapus
  4. hi mkr i have a question:
    why your template boost my alexa rank?
    in just 1 day, from 27,000,000 to 3,000,000
    www.alexa.com/siteinfo/www.arabiclabs.com

    BalasHapus
    Balasan
    1. i don't know why..
      btw why you say that bcoz my template??

      Hapus
    2. because when i used your templates my blogs ranks are boosted

      Hapus
  5. mas.. maaf sebelumnya ane OOT ni..
    tau maksud dari ini ga??

    english
    4 links have no text describing their destination. Links on a page should describe their destination for the benefit of both screen readers and search engine spiders.

    Add meaningful anchor text that describes the link's destination. If the link contains an image, ensure you have provided alt text.

    indo
    "4 Link tidak memiliki teks yang menjelaskan tujuan mereka. Link pada halaman harus menjelaskan tujuan mereka untuk kepentingan kedua pembaca layar dan spider mesin pencari.

    Menambahkan teks jangkar bermakna yang menggambarkan tujuan link. Jika link berisi gambar, pastikan Anda telah memberikan teks alt"

    terus penulisan link yang bener'a gimana??
    saya ga bisa dapet 10.0
    http://nibbler.silktide.com/reports/www.mdf-blog.blogspot.com

    TQ b4

    BalasHapus
  6. HI.i need your help, i downloaded one of your templates.i have one concern. by default it shows 3 posts onoly...i have to click on "OLDER POSTS" to see more. Where do i change this? i would like to show around 5 to 6 posts. Please please help

    BalasHapus
    Balasan
    1. Well I see the problem
      although that I created the template using auto readmore but blogger/blogspot keep reading for every post like actual post.
      so that the number of posts that appear appropriate in setting then the Jump Break still had to be added to every post that is made.

      Hapus
  7. g bisa atu kang,.. apa krn punya saya te g ada code ininya ya "jQuery library" kalo blm ada trs gmn atu...

    BalasHapus
  8. wah lumayan widgetnya tapi dah ada sih hehe
    www.cpartikel.com

    BalasHapus
  9. This gadget can be not pagination you. can load more posts. thank you very much
    :))

    BalasHapus
  10. Здравствуйте, я установила у себя на блоге http://gasha-makar.blogspot.ru/
    этот виджет, увеличив размер изображений до 200px, фотографии получились плохого качества. Ниже стоит виджет тоже с таким же размером фото, но качество - прекрасное. Помогите, пожалуйста, решить эту проблему (F)

    BalasHapus
  11. bg code jsnya yang script src="http://ivyth.googlecode.com/svn/js/rdmrecpostajax.js" type="text/javascript"></script
    dah gak bisa dipakai tolong gantikan sama yg baru!

    BalasHapus
  12. masbro mohon tips donk cara membuat tutorial komentar seperti masbro minta tipsnya donk ?

    BalasHapus
  13. manthap mas bro
    http://si-kudil.blogspot.com/

    BalasHapus
  14. Hi, i have pasted the code in my widget but it ask me for the user and passwor for your code : http://ivyth.googlecode.com/svn/js/rdmrecpostajax.js


    How can i do?

    Thanks!

    BalasHapus
  15. Om mau tanya, ane pake template dari IVY tapi widget recent postnya ko gk aktif ya, tapi widgetnya udah ada.. apanya yang salah ya, klo di klik edit dari pengaturan layout script HTML nya kosong.. butuh pencerahan nya ni om..

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP