cara membuat slinder katagori

sahabat kali ini anna mau berbagi kembali,mudah-mudahan denga berbagi maka kita bisa menambah ilmu pengetahuan.tentunya yang bermanfaat ya sahabat.

kali ini anna mau berbagi dengan sahab cara membuat slider post photo atau featured.
slinderpost photo kali ini yang ana maksud adalah postingan perlebel atau katagori blog sahabat,atau juga sahabat mau dengan postingan terbaru bisa sahabat.

langsung ajja sahabat biar ga panjang lebar

silahkan sahabat login terlebih dahulu setelah itu sahabat baru ke tampledan ediet HTML

temukan kode <div id='main-wrapper'> dan copy kode di bawah ini letakan tepat setelahnyaatau di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div id='featured'>

<div class='sliderwrapper' id='slider1'>

<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);

</script>

</div>

<div class='pagination' id='paginate-slider1'>

</div>

</div>

</b:if>

utuk warna ungu silahkan sahabat mau pasang dengan perkatagori bila mau di pasag dengan postingan terbaru tak usah di copas.
setelah itu sahabat temukan </head> letakan tepat di atasnya copy dulu kode dibawah ini.

<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6jtERpqAmId7qwPqvVMUd3jYv8Pn-HMeGpEwdjgbLCVaar19RAbbyryOVo1BKZzyzIv4hDTmPrrGyJ8A4Jbaa_CRbCuRsUBBoYKtMxBE5SgsKfQwx7XXLDfFYtEQxbTqph2KdDoQjPg/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 =5;
label1 = "motoGP";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;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}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
     
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; 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[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="500" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';  
document.write(trtd);    
j++;
}}
//]]>
</script>

 untuk warna hijau silahkan sahabat ganti dengan lebel blog sahabat.

setelah itu sahabat temukan kode </body> dan letakan kode di bawah ini tepat di atasnya.

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>

silahkan tinjau bila sudah cocok
save dah lihat hasilnya.