cara membuat random post

Cara membuat random post sebenarnya sudah banyak di bahas di tempat lain. Tapi kali ini saya akan mencontohkan membuat random post dengan sedikit berbeda. Perbedaan yang mecolok adalah random post ini di lengkapi dengan slider yang membuatnya menjadi random post yang dinamis. Random post ini, juga saya terapkan di bagian kanan footer pada egablog

Random Post

Untuk membuat random post tersebut adalah sebagai berikut:

  • Login ke blogger.com
  • Masuk ke bagian rancangan
  • Pilih tab Edit HTML
  • Kemudian, letakan kode di bawah ini di atas ]]></b:skin>

.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}

.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

.gfg-subtitle a {color : #a43434;display:none !important;}

.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}

.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}

.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}

.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}

.clearFloat {clear : both;}

#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}
  • Setelah selesai, simpan template anda
  • Kemudian tujulah elemen halaman
  • Klik Tambah gadget
  • Pilih HTML/javascript
  • Masukan Kode di bawah ini di dalamnya:

<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://namabloganda.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>

<div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

12 komentar:

  1. Thnk tutornya Kawan, tapi aku lebih suka make recent post ajah ^^

    mampir

    BalasHapus
  2. mas ayoh mampir nih q lagi coba

    BalasHapus
  3. wah saya malah barusan dihapus mas
    saya ganti dengan relate post ajah

    BalasHapus
  4. kok sekarang tidak do follow mas :D

    BalasHapus
  5. Keren mas, wah blog tutorial ini emang mantepz!!
    Ga aku oprekno template putihan sing simpel!! buat blogspotku. aku lagi males ngoprek ki :p

    BalasHapus
  6. waouw!!!! mantap!!!! langsung pasang! thanks ya!!

    BalasHapus
  7. I just want to say Hi to Everyone!

    BalasHapus
  8. ini mah namanya bukan random post bung, gimano sih...? msa' post terbaru ke belakang munculnya ?

    BalasHapus