membuat recent post auto scroll

salah satu widget utama dalam blog adalah widget Recent Post atau Posting Terbaru, dengan menampilkan daftar post terbaru, pengunjung yang masuk bukan dari halaman utama dapat mengetahui posting-posting terbaru secara langsung.

Selain sebagai navigasi suatu blog, recent post yang satu berbeda dengan recent post lainnya, selain memiliki tampilan yang menarik recent post yang satu ini mempunyai kelebihan Auto Scroll. Dengan adanya auto scroll pada recent post ini bila kalian memasangnya bisa menjadikan tampilan suatu blog menjadi lebih apik dan menarik, selain itu bisa mengundang pengunjung untuk mengetahui post-post lainnya dan alhasil jumlah pageview pun akan bertambah. Script ini saya dapat dari teman netterku saudara Ahmad di Cara Membuat Recent Posts Blogger (Auto Scroll & Thumbnails), yang script aslinya dari bloggertricks.com, bila kalian tertarik untuk memasangnya bisa ikuti cara dan scriptnya dibawah ini :

Masuk ke Dashboard - Design/Rancangan - Add Gadget
Pilih HTML/Javascript - Copy Paste scripts dibawah ini
Save

Pasang kode di bawah ini:

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:345px;

}

#spylist ul{

width:332px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:290px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#FFC7AD url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #C33F00;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_W71nfTjAEAi_6zZxIreaxmZi52lVV4OexOjg8ZckRu2KbgLWJ8KUs-lxyZvTe8H1CuHWg9d1cj71-TRo2PAVsSuU6IV0qV-Tx3lw_9w06-LJ6faLawJ_zLdExBqHA6A9Gf5hunlYfU/s1600/Situseo+no+image.jpg";

showRandomImg = true;

boxwidth = 300;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 60;

thumbheight = 60;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comment";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://syamgreat.blogspot.com/";

limitspy=5

intervalspy=6000

</script>

//<![CDATA[

* Script dikombinasikan dari bloggerstricks.com

* spy effect dari jqueryfordesigners.com

* Oleh Abu Farhan (www.abu-farhan.com)

* Modifikasi oleh buka-rahasia.blogspot.com

jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');

//]]>

</script>

</div>
<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://syamgreat.blogspot.com/2011/11/cara-membuat-auto-scroll-recent-post.html" target="_blank">thank you for visiting</a></span>

Keterangan :

http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg sebaiknya ganti atau memakai host sendiri dengan cara mengupload kembali file gambar tersebut

Ganti http://syamgreat.blogspot.com/ dengan alamat blog kalian dan pastikan ada tanda slash ( / ) di belakang alamat blog.

boxwidth = 300 adalah lebar widget dalam pixel (px), sesuaikan dengan lebar sidebar blog kalian.

text = "comment" adalah teks di belakang jumlah komentar, kalian bisa menggantinya dengan kalimat yang sesuai.

numposts = 10; adalah jumlah posting terbaru yg akan muncul dalam widget

limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, kalian bisa mengganti jumlahnya

intervalspy=6000 adalah kecepatan scroll/spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

SEMOGA BERMANFAAT :)

membuat recent post auto scroll

Jumat, 06 April 2012 | 0 komentar

0 komentar:

Posting Komentar

Translate

Blog Archive

Download Movies