Cara membuat random post di blogger. Tutorial blog kali ini akan menjelaskan bagaimana cara menampilkan posting/artikel secara acak di blogspot.
Random post ini disebut dengan random post dinamis, karena tampilannya yang berupa slide. Dengan tampilan slide tersebut, tentu random post ini juga akan menarik perhatian pengunjung.
Bagi anda yang jarang mengupdate blog, mungkin widget ini cukup berguna. Karena semua artikel yang ada di blog anda akan ditampilkan secara acak nantinya dengan menggunakan widget ini.
Dengan begitu, pengunjung yang beberapa kali mengunjungi blog anda bisa terus membaca artikel-artikel anda yang lain, walaupun anda belum menambahkan postingan baru sekalipun.
Bagi anda yang ingin mencoba random post dinamis ini, bisa langsung mengikuti tutorial blog berikut.
CSS
Pertama yang perlu anda lakukan, yaitu menyimpan css untuk random post ini.
- Log in ke blogger.
- Pilih menu Layout (Tata Letak) » Edit HTML.
- Cari kode ]]></b:skin>.
- Copy kode berikut 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;}
.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;}
- Simpan template.
Script Random Post
Untuk memasang script random post ini ikuti langkah-langkah berikut.
- Buka Layout (Tata Letak) » Page Elements (Elemen Laman).
- Klik Add a Gadget (Tambah gadget).
- Pilih gadget HTML/JavaScript.
- Copy-paste script berikut ke dalam 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>
<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>
- Jangan lupa ganti nama blog anda.
- Simpan gadget.
Selamat mencoba!
sumber: disini
RANDOM POST versi 2
Kalo tulisan diatas random postnya berupa slide kalo yang ini berupa daftar link.
langsung coba aja nih script nya copas aja :D
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget edited by <a href="http://anangku.blogspot.com/2008/08/blogger-random-post-widget.html">Anang </a></span>
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget edited by <a href="http://anangku.blogspot.com/2008/08/blogger-random-post-widget.html">Anang </a></span>
Komentar melalui Facebook:
cara memasang
Facebook Comment?
Langganan:
Posting Komentar
(
Atom
)
0 komentar :
Posting Komentar