Twitter Delicious Facebook Digg Stumbleupon Favorites More

Membuat Sendiri Recent post Animasi

Banyak versi widget recent post yang bisa anda gunakan untuk blog anda, mulai dari widget yang disediakan blogger sampai widget dari pihak ketiga. 

Dan kali ini saya akan mengetengahkan cara menambahkan sebuah versi baru dari sekian jumlah widget recent post blogger yang ada. Widget recent post berikut selain memiliki effect animasi spy karena penggunaan script JQuery juga dilengkapi dengan thumbnail dan captions. Sebuah karya kecil hasil pengembangan dari blogger Indonesia (Abu Farhan).

Nah seperti apa widget Yang bakal saya jelaskan  silahkan lihat live demo diatas, jika anda tertarik tuk mencobanya, silahkan ikuti tutorial selanjutnya.
  1.  Login Diblogger Seperti Biasa.
  2. Pada halaman DASBOR Pilih rancangan
  3. Kemudian tambahkan gadget
  4. pilih HTML/JavaScript
  5. isikan kolom judul terserah anda.....
  6. kemudian copy paste kode berikut di kolom konten
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style media="screen" type="text/css">
    <!--
    #spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}
    #spylist ul{width:220px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}
    #spylist li {width:208px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;
    overflow: hidden;background:#000;border:1px solid #ddd;}
    #spylist li a {text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;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;height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;}
    .spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;}
    -->
    </style>
    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://3.bp.blogspot.com/_Craz5Vx6k8A/TNFm6DyrhJI/AAAAAAAAAAQ/stWJM1CwOkk/S220/cyber.png";
    imgr[1] = "http://3.bp.blogspot.com/_Craz5Vx6k8A/TNFm6DyrhJI/AAAAAAAAAAQ/stWJM1CwOkk/S220/cyber.png";
    imgr[2] = "http://3.bp.blogspot.com/_Craz5Vx6k8A/TNFm6DyrhJI/AAAAAAAAAAQ/stWJM1CwOkk/S220/cyber.png";
    imgr[3] = "http://3.bp.blogspot.com/_Craz5Vx6k8A/TNFm6DyrhJI/AAAAAAAAAAQ/stWJM1CwOkk/S220/cyber.png";
    imgr[4] = "http://3.bp.blogspot.com/_Craz5Vx6k8A/TNFm6DyrhJI/AAAAAAAAAAQ/stWJM1CwOkk/S220/cyber.png";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://www.satriacell.com/";
    limitspy=4
    intervalspy=4000
    </script>
    <div id="spylist">
    <script type='text/javascript'>
    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>
  8. Save Dan lihat hasilnya....
<<<Semoga Bermanfaat>>>

0 komentar:

Posting Komentar

Newbie Sejati ©2010 All rights reserved.
Design Template By Johan Jm
Powered by Blogger