Warung Bebas

Selasa, 11 September 2012

Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog

 Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog - Kali ini saya akan berbagi trik blog yang berhubungan dengan posting khususnya recent post pada blog. Recent post adalah artikel posting yang paling terbaru dalam suatu blog. Adapun artikel posting yang di tampilkan biasanya berupa judul saja dari artikel maupun ada sedikit isi keterangan dari artikel yang kita posting, Dan semua itu bisa kita atur sesuai dengan keinginan kita.

 Pada recent post yang sebentar lagi akan saya kasih triknya untuk sobat semua adalah recent post yang mempunyai fungsi menampilkan judul posting di sertai dengan thumbnail atau gambar foto, ada sedikit isi penggalan dari postingan blog dan juga mempunyai efek marquee atau slide berjalan teratur ke bawah. Artikel terbaru ini biasa juga di sebut dengan "Recent Post Thumbnail Bergerak Slide Ke Bawah".

 Tampilan dari Recent post ini sangat bagus dan menarik, Sobat bisa melihat contohnya pada sidebar blog ini, Yaitu pada widget "Artikel Baru".


Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog

 Jika sobat tertarik ingin membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah seperti yang ada pada blog ini, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
  1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> Ke Blog sobat.
  2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih dan klik >> Tambah Gadget >> pilih dan klik tanda + pada >> HTML/JavaScript.
  3. Kemudian silahkan sobat masukkan semua Kode Script berikut ke dalam kotak HTML/JavaScript.
<script src="http://kucopas.googlecode.com/files/RecentPostThumnailBergerak.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

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

    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = " http://kuc0pas.blogspot.com/ ";
limitspy=5
intervalspy=5000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
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>

4. Langkah yang terakhir. Setelah semua kode script di masukkan ke dalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya pada halaman widget blog sobat sudah terpasang widget recent post thumbnail gambar bergerak slide ke bawah.

Keterangan:
  • Ganti http://kuc0pas.blogspot.com/ dengan URL blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.
  • text = "Reply(s)" adalah teks jumlah komentar, ganti Reply(s) sesuai dengan keinginan sobat, misalnya: komentar, comment(s), dan lain sebagainya.
  • boxwidth = 300 adalah ukuran Lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog sobat.
  • numposts = 10; adalah Jumlah posting terbaru yang akan muncul di blog sobat, ganti nilainya sesuai keinginan dengan keinginan sobat.
  • limitspy=5 adalah Jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai dengan keinginan sobat.
  • intervalspy=5000 adalah kecepatan scroll, spy atau slide dalam milisecond (ms), Silahkan sobat ganti nilainya untuk mengatur kecepatannya. Tambah untuk lambat, Kurang untuk cepat.
 Sampai di sini saya kira sobat pasti sudah faham tentang cara membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah di blog. Namun bila sobat masih mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel posting yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...



0 komentar em “Cara Membuat Recent Post Thumbnail Gambar Bergerak Slide Di Blog”

Poskan Komentar

 

M-Kolom Tutorial | All Tutorial Copyright © 2012 Fast Loading -- Powered by Blogger