Cara Membuat SlideShow di blog
Tutorial
1. Masuk ke akun blog anda
2. Jangan lupa untuk unduh lengkap template anda untuk berjaga-jaga bila ada kegagalan.
3. Mulai edit HTML - lanjutkan
4. Ok, langsung saja sobat cari kode ]]></b:skin>
(gunakan Ctrl + F untuk lebih mempercepat pencarian) Setelah ketemu, letakkan kode dibawah ini tepat diatas kode tadi
#featured{margin-bottom:8px;padding:5px;background: -moz-linear-gradient(top, #000, #006600); background: -webkit-gradient(linear, center top, center bottom, from(#000), to(#006600));}
.sliderwrapper{position: relative;overflow: hidden;height: 220px}
.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:270px;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}
Catatan : Bila gagal, coba letakkan kode diatas tepat dibawah kode #sidebar-wrapper
Keterangan : yang diblok warna merah adalah tinggi yang saya gunakan pada slide di blog ini, ganti sesuai keinginan anda.
5. Lanjut, sekarang cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>
<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkGKkPvwwqbtJ-k3ggyfcylVU11T_lJRZ9D3nMx24t6lcFLRaJ67TjSSmdH2-O3FhQDCABHTXxb2ueTmjauP9utEOG9xM_NucNJc97h5XJhKkgyUywjcSG1zzChfQ0lkqeCY4yXwGq2w/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 = 5;
label1 = "News";
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="290" height="220" 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>
Keterangan : Warna biru adalah jumlah slide yang akan ditampilakan dan label yang akan ditampilkan pada slide show, ganti sesuai keinginan anda.
Blok warna merah adalah lebar dan tinggi gambar yang saya gunakan pada blog ini, silahkan sesuaikan dengan lebar dan tinggi sidebar anda.
6. Sekarang cari kode </body> dan letakkan kode dibawah ini tepat diatasnya 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>
7. Langkah terakhir cari kode ini <div id='sidebar-wrapper'>
jika sudah ketemu, letakkan kode dibawah ini tepat dibawah kode tadi
<b:if cond='data:blog.pageType == "index"'>
<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>
</b:if>
8. Sekarang simpan dan lihatlah hasilnya
Demikian tadi tutorial bagaimana cara membuat slide show otomatis di atas sidebar. Anda dapat mengotak-atik lagi kode diatas tadi dan lakukan pernyesuaian sesuai yang anda inginkan. Semoga bermanfaat
Demo : SlideShow
Sumber
Homepage|http://4owol.com
Tutorial
1. Masuk ke akun blog anda
2. Jangan lupa untuk unduh lengkap template anda untuk berjaga-jaga bila ada kegagalan.
3. Mulai edit HTML - lanjutkan
4. Ok, langsung saja sobat cari kode ]]></b:skin>
(gunakan Ctrl + F untuk lebih mempercepat pencarian) Setelah ketemu, letakkan kode dibawah ini tepat diatas kode tadi
#featured{margin-bottom:8px;padding:5px;background: -moz-linear-gradient(top, #000, #006600); background: -webkit-gradient(linear, center top, center bottom, from(#000), to(#006600));}
.sliderwrapper{position: relative;overflow: hidden;height: 220px}
.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:270px;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}
Catatan : Bila gagal, coba letakkan kode diatas tepat dibawah kode #sidebar-wrapper
Keterangan : yang diblok warna merah adalah tinggi yang saya gunakan pada slide di blog ini, ganti sesuai keinginan anda.
5. Lanjut, sekarang cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>
<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkGKkPvwwqbtJ-k3ggyfcylVU11T_lJRZ9D3nMx24t6lcFLRaJ67TjSSmdH2-O3FhQDCABHTXxb2ueTmjauP9utEOG9xM_NucNJc97h5XJhKkgyUywjcSG1zzChfQ0lkqeCY4yXwGq2w/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 = 5;
label1 = "News";
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="290" height="220" 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>
Keterangan : Warna biru adalah jumlah slide yang akan ditampilakan dan label yang akan ditampilkan pada slide show, ganti sesuai keinginan anda.
Blok warna merah adalah lebar dan tinggi gambar yang saya gunakan pada blog ini, silahkan sesuaikan dengan lebar dan tinggi sidebar anda.
6. Sekarang cari kode </body> dan letakkan kode dibawah ini tepat diatasnya 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>
7. Langkah terakhir cari kode ini <div id='sidebar-wrapper'>
jika sudah ketemu, letakkan kode dibawah ini tepat dibawah kode tadi
<b:if cond='data:blog.pageType == "index"'>
<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>
</b:if>
8. Sekarang simpan dan lihatlah hasilnya
Demikian tadi tutorial bagaimana cara membuat slide show otomatis di atas sidebar. Anda dapat mengotak-atik lagi kode diatas tadi dan lakukan pernyesuaian sesuai yang anda inginkan. Semoga bermanfaat
Demo : SlideShow
Sumber
Homepage|http://4owol.com
