Cara Membuat Slide Show berdasarkan Label - Cara Membuat Slideshow otomatis - Slideshow memang akan menjadi widget yang bisa memperindah layout template Anda. Pada posting sebelumnya, saya pernah membahas tengan cara membuat slideshow.
dan ini Step By Step Nya :D
Langkah-langkahnya ssebagai berikut:
Login ke blogger.
Klik Design/Tata Letak --> Edit HTML --> centang "Expand Widget Templates"
Backup dulu template anda dengan mengklik "Download Template Lengkap". Untuk berjaga-jaga bila terjadi error. Cari kode : ]]></b:skin>;
Letakkan kode yang berwarna merah 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}
Masih dalam dalam posisi Edit HTML. Cari kode </head>
Sekarang letakkan kode berwarna biru berikut ini di atas kode </head>
<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8b5RIKYcalzSU9FMzx30hIH_SqvSjV5mxopcyrvnZJcJZqkGdD8MFNkdW40yTUAmIuLiT7e0ew_3yFxnVL7wzTYwUFqEcK5hyNJaj31aKWBgnXr9TGsLdjRR5OvgSemJwUY_BpJkOMYc/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 = 5;
label1 = "Blog";
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>
Perhatikan kode yang di beri huruf tebal label1 = "Blog". Itu adalah label atau kategori yang akan ditampilkan di slider, di sini dipilih label berita. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.
Kemudian, cari kode </body>
Letakkan kode berwarna ornge di bawah ini sebelum kode </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>
Kemudian, cari kode <br />
<div id="main-wrapper">
, jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya :
<b:if cond="data:blog.pageType == "index"">
</b:if><br />
<div id="featured">
<div class="sliderwrapper" id="slider1">
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class="pagination" id="paginate-slider1">
</div>
</div>
Langganan:
Posting Komentar (Atom)
0 Response to "Cara Membuat Slide Show Otomatis Pada Blog"
Posting Komentar