Senin, 25 April 2011

Membuat Scroll Box Recent Post Js

Halo Sobat sharelikers?apa Kabarnya hari ini?Kali ini saya mau share tutorial memasang widget Recent Post Dengan Fungsi Scroll,Seperti yang sobat lihat di bagian footer dari Yang penting share !™ Ini.


Nah caranya sangat Mudah,Bila sobat tertarik sobat langsung saja ikuti langkah-langkah muudah berikut ini :
1.Sobat Masuk dulu Ke akun Blogger
2.Lalu Klik Rancangan
3.Kemudian Pilih Add gadget
4.Lalu pilih gadget Html/Javascript
5.Kemudian Pastekan kode berikut Ini ke dalam kotak tersebut

<style type="text/css">
.daftar_posting{list-style:none;margin-left:-10px;font-family:Droid Serif;font-size:16px;color:lime;text-align:left;}
.daftar_posting a{color:yellow;border-top:1px dotted blue;border-bottom:1px dotted blue;background:transparent url(http://i1102.photobucket.com/albums/g456/yangpentingshare/sideicon.gif) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:red;}
</style>
<div style="margin:2px; padding:4px;border:2px solid #888;background:#333;">
<div style="border:2px solid #444;overflow:auto;padding:4px;background:#111;height:250px;">
<div style="width:200px;">
<script style="text/javascript">
var numposts = 1000;
var showpostsummary = false;
var standardstyling = true;
function showrecentposts(json) {document.write('<ol class="daftar_posting">');
for (var i = 0; i < numposts; i++) { document.write('<li>');
var entry = json.feed.entry[i]; var posttitle = entry.title.$t;
var posturl; if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break;}}
posttitle = posttitle.link(posturl);
if ("content" in entry) { var postcontent = entry.content.$t;}
else
if ("summary" in entry) { var postcontent = entry.summary.$t;}
else var postcontent = ""; var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) { if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) { if (standardstyling) document.write('<i>');
document.write(postcontent); if (standardstyling) document.write('</i>');}
else { if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" ");
if (standardstyling) document.write('</i>');}}
if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>');
document.write('</li>');}
document.write('</ol>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');}
</script>
<script src="http://ypsrandy.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>

6.Sobat bisa ganti kode-kode berwarna merah diatas dengan kode blog sobat sendiri
  • ypsrandy.blogspot.com ganti dengan Url Sobat sharelikers(bisa juga hanya untuk label post tertentu loh (ditambah kode sehingga menjadi http://ypsrandy.blogspot.com/feeds/posts/-/nama label default?orderby
  • Ukuran Width serta Height sesuaikan denagn Ukuran sidebar sobat
  • Bila gambar panah tidak muncul,coba kurangi angka pada bagian margin-left:-10 px
7.bila telah selesai jangan Lupa memberi Judul widget dengan Nama "Recent Post atau sesuai keinginan
8.lalu save template sobat

Sumber:http://gubhugreyot.blogspot.com

~~~~~~~~~SELAMAT MENCOBA~~~~~~~~~

0 komentar:

Posting Komentar