Cara Membuat Random Post

Hai, kembali lagi bersama saya dalam post yang baru. Kali ini saya akan mengajak anda untuk membuat "Random Post". Apa itu? Random Post adalah menampilkan artikel secara acak. Oke langsung ke main problem.

Pertama Login ke blog anda --> Rancangan --> 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;}

Save Template

Next masuk ke Elemen Laman --> Tambah Gadget --> HTML/JavaScript
Masukkan script berikut

<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>

Save maka akan keluar tampilan kurang lebih seperti ini

*Namun setelah saya melihatnya, sepertinya Random Post ini mengurutkan artikel dari yang terbaru sampai yang terlama.. hehe. Mohon maaf, tapi setidaknya anda sudah membuat cantik blog anda, dan terlihat keren. hehe.. Mohon maaf.
Sekian semoga bermanfaat

Tweet

Artikel Terkait:

Trick Blog

• Trick Blog | Recent Post With Thumbnail Horizontal
• CSS3 | Transform Rotate : Memutar Text / Gambar
• Trick Blog | Berbagai Macam Cursor
• CSS3 | Create Beautiful Button
• CSS3 | Create Bubble Coda Style
• CSS3 | Membuat Background Pada Web Full Page
• Membuat Facebook Fans (Like Box) Pada Blog
• Membuat Background Efek Gradient Dengan CSS3
• Menyembunyikan Avatar Pada Komentar Blog
• Cara Memberikan Image Verification Pada Komentar

Post

• Memasang Random Post (Part 2)
• Fungsi Scroll Pada Posting
• Recent Post Animated With jQuery
• Membuat Daftar Isi Otomatis
• jQuery Accordion Recent Post with Thumbnail
• Cara Membuat Navigasi Breadcumb Di Blogger
• Cara Membuat Huruf Pertama Besar (Drop Cap Pada Blog)
• Cara Menghilangkan Tanggal Pada Posting
• JavaScript Untuk Menampilkan Total Post, Comment Dan Online User
• Cara Menghilangkan Nomor Post Pada Label