Friday, May 20, 2011

Membuat Random Post di Blogspot

Membuat Random Post pada Blog, hmmm. mungkin tutorial ini jarang di gunakan oleh blogger - blogger termasuk saya, kalau saya boleh dikatakan tidak pernah, hehehe. Random post yang ingin saya share ini bisa di katakan  dengan random post dinamis sebab, tampilannya yang berupa slide. Dengan tampilan slide ini, tentu random post ini juga akan menarik perhatian bagi para  pengunjung kita.
Dengan itu pengunjung pun menjadi betah untuk membaca artikel - artikel yang kita miliki dan kalau pun pergi suatu saat pun ia akan balik lagi untuk melihat artikel kita yang kita punya tadi, meskipun kita jarang update  atau jarang posting, blog kita secara otomatis akan menampilkan postingan yang kita punya walaupun postingan ya sudah lama kita buat.
Bagi anda yang ingin mencoba, simak tutorial berikut ini,






Script CSS

Pertama yang perlu anda lakukan, yaitu untuk  menyimpan script css untuk random post ini.

  • Login akun Blogger anda
  • Pilih Tata Letak > Edit HTML
  • Cari kode ]]></b:skin>
  • Copy kode berikut tepat di atas kode tadi,


.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;}
  • Selanjutnya Save template anda,

Script Random Post
 Untuk memasang script random post ini ikuti langkah-langkah saya berikut ini,
  • Pilih Rancangan > Element Laman > Tambah Gadget
  • Pilih juga gadget HTML / Javascript
  • Copy-paste script berikut ke dalam  Tambah Gadget tadi,
<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://namablog.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> 
  • Dan jangan lupa ganti tulisan berwarna abu - abu itu dengan alamat blog anda,
  • Yang terakhir ya, di Save saja.
  • Dan kalau anda berminat ya silahkan coba.

    1 comment:

    1. Dengan tampilan slide ini, tentu random post ini juga akan menarik perhatian bagi para pengunjung kita.

      ReplyDelete