Wednesday, May 16, 2012

Tutorial Membuat Slider Recent Post


Slider yang menawan yang bisa diletakan di widget anda, dengan slider di blogspot bisa membuat tertarik pembaca dengan gaya style yang menarik, disini bukatrik.blogspot.com akan memberikan sedikit tutorial singkat membuat slider menawan.

LIHAT CONTOH DISINI


untuk pemasangan cukup copi code java script dibawah ini :




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
(function(a){a.fn.vTicker=function(b){var c={speed:700,pause:2e3,showItems:3,animation:"",mousePause:true,isPaused:false};var b=a.extend(c,b);moveUp=function(c,d,f){if(f)return;var g=c.children("ul");first=g.children("li:first").clone(true);g.animate({top:"-="+d+"px"},b.speed,function(){a(this).children("li:first").remove();a(this).css("top","0px")});if(b.animation=="fade"){g.children("li:first").fadeOut(b.speed);g.children("li:last").hide().fadeIn(b.speed)}first.appendTo(g)};return this.each(function(){var c=a(this);var d=0;var f=b.isPaused;c.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:0,padding:0});c.children("ul").children("li").each(function(){if(a(this).height()>d){d=a(this).height()}});c.children("ul").children("li").each(function(){a(this).height(d)});c.height(d*b.showItems);var g=setInterval(function(){moveUp(c,d,f)},b.pause);if(b.mousePause){c.bind("mouseenter",function(){f=true}).bind("mouseleave",function(){f=false})}})}})(jQuery)

function showrecentpostswiththumbs(e){document.write('<ul class="recent_posts_with_thumbs">');for(var f=0;f<numposts;f++){var g=e.feed.entry[f];var h=g.title.$t;var i;if(f==e.feed.entry.length)break;for(var j=0;j<g.link.length;j++){if(g.link[j].rel=="replies"&&g.link[j].type=="text/html"){var k=g.link[j].title;var l=g.link[j].href}if(g.link[j].rel=="alternate"){i=g.link[j].href;break}}var m;try{m=g.media$thumbnail.url}catch(n){s=g.content.$t;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!=""){m=d}else m="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"}var o=g.published.$t;var p=o.substring(0,4);var q=o.substring(5,7);var r=o.substring(8,10);var t=new Array;t[1]="Jan";t[2]="Feb";t[3]="Mar";t[4]="Apr";t[5]="May";t[6]="Jun";t[7]="Jul";t[8]="Aug";t[9]="Sep";t[10]="Oct";t[11]="Nov";t[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<img class="recent_thumb" src="'+m+'"/>');document.write('<b><a href="'+i+'" target ="_top">'+h+"</a></b><br>");if("content"in g){var u=g.content.$t}else if("summary"in g){var u=g.summary.$t}else var u="";var v=/<\S[^>]*>/g;u=u.replace(v,"");if(showpostsummary==true){if(u.length<numchars){document.write("<i>");document.write(u);document.write("</i>")}else{document.write("<i>");u=u.substring(0,numchars);var w=u.lastIndexOf(" ");u=u.substring(0,w);document.write(u+"...");document.write("</i>")}}var x="";var y=0;document.write("<br><strong>");if(showpostdate==true){x=x+t[parseInt(q,10)]+"-"+r+" - "+p;y=1}if(showcommentnum==true){if(y==1){x=x+" | "}if(k=="1 Comments")k="1 Comment";if(k=="0 Comments")k="No Comments";k='<a href="'+l+'" target ="_top">'+k+"</a>";x=x+k;y=1;}if(displaymore==true){if(y==1)x=x+" | ";x=x+'<a href="'+i+'" class="url" target ="_top">More -></a>';y=1;}document.write(x);document.write("</strong></li>");if(displayseparator==true)if(f!=numposts-1)document.write("<hr size=0.5>")}document.write("</ul>")}

var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 300;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 5,
animation: 'fade',
mousePause: true,
height: 0,
direction: 'down'
});});

</script>
<style>
#wrap-recentpost{width:300px; height:300px;float:left;background: Silver;overflow:hidden;padding:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:inset 0px 0px 8px #616161;
-webkit-box-shadow:inset 0px 0px 8px #616161;
box-shadow:inset 0px 0px 8px #616161;
}

#recentposts {width:300px; height:300px;float:left;background:#;overflow:hidden;}
img.recent_thumb  {padding:2px;background:#000;overflow:hidden;width:150px;height:70px;border:2px #000;float:right;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;font-size:12px;text-shadow:0px 0px 1px #FFF;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;color:black;}
.recent_posts_with_thumbs a:hover {text-decoration:none;color:#a6a699;text-shadow:0px 0px 1px #000;color:white;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>

<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary =false;
var numchars = 100;
$(document).ready(function () {$('#recentposts').vTicker({
speed: 500,
pause: 3000,
showItems: 5,
animation: 'scroll',
mousePause: true,
height: 0,
direction: 'up'
});});
</script>
<div id="wrap-recentpost">
<div id="recentposts">
<script src='http://bukatrik.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs'>
</script>
</div>
</div>



ganti alamat kami dengan alamat anda

1 comment:

  1. Thanks for providing such nice information to us. It provides such amazing information on Care/as well
    Health/.The post is really helpful and very much thanks to you. The information can be really helpful on health, care as well as on
    Exam/ tips. The post is really helpful.
    Thanks for providing such nice information to us. It provides such amazing information on MedicalExams/

    ReplyDelete