Cara membuat Gambar Slide Berdasarkan Label Tertentu

Jika sobat ingin membuat image slider berdasarkan label tertentu, 

seperti template blogger yang lain.

Berikut ini caranya:

1. Login Blog

2. Rancangan

3. Edit html dan centang "expand widget template"

4. Letakkan kode berikut di atas kode ]]></b:skin>

#featured{margin-bottom:8px}

.sliderwrapper{position: relative;overflow: hidden;height: 240px}

.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}

.pagination{text-align: left;padding:8px 0px}

.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}

.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}

.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}

.featuredPost a{color:#fff}

.featuredPost a:hover{color:#dedde5}

.featuredPost h2{margin:0;font-size:12px;line-height:1}

.featuredPost span{font-size:10px}

.featuredPost p{font-size:11px}

5. Letakkan kode berikut diatas </head>

<script>

//<![CDATA[

/* Script from:http://simplexdesign.blogspot.com/ */

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO0Cho9tvMQsFjanZ9rgv-lqYI8-H6iJGHEiwN35rcehEXkEG4qdP7UT9yTyWy2EHapLda9p99OMMRzH4asXIqZ6KyUXYV6tvxg-Cp10r_afqW7Djj_6IsJ-X_wJdaH4sv0CmbPUTMmSk/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 5;

label1 = "software";

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="370" 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>

Kode berwarna merah adalah label yang ingin ditampilkan.

Ubah sesuai keinginan sobat

6. Selanjutnya letakkan kode berikut di atas </body>

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

7. Letakkan kode berikut dibawah <div id='main-wrapper'> agar slider hanya tampil di homepage saja.

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

8. Simpan template dan lihat hasilnya.

Semoga tutorial cara membuat gambar slide berdasarkan label tertentu bermanfaat.

Socialize It →:

Tweet

Artikel terkait Lainnya