Cara Membuat All Post Bergerak Ke Atas

Halo sobat blogger. Apa kabar? pastinya baik. ok tutorial kali ini saya memberikan tutorial mengenai Recent Post. Tentunya para blogger sekalian sudah tau apa itu recent post. Itu,,tuh,, daftar posting terbaru sobat blogger sekalian. Nah memang blogger sudah menyediakan widget Recent Post yang standar, tetapi ini berbeda Recent Post ini bergerak dari atas ke bawah jika ingin demonya silahkan liat sendiri di blog saya. Berhubung saya tidak pandai berbicara panjang lebar kita langsung aja PRAKTEK.

1. Login ke akun blogger masing masing
2. Dari dashboard ke Rancangan
3. Klik Add Gadget/Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut

<style type="text/css">
.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 14px;padding:4px; background:none;border: 0px solid #363636;}
.gfg-title {font-size: 20px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}
.gfg-subtitle {font-size: 20px;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 overla80ff00y */
.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:#80ff00;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;}
</style>
<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://elangshared.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 500, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Load Post...</div>

KETERANGAN:

• Silahkan sobat ganti URL yang berwarna merah dengan URL blog sobat
• Jika sudah silahkan klik Simpan
• Lihat hasilnya

DEMO ALL POST :

Load Post...


SEMOGA BERMANFAAT :)

Tweet