Cara Membuat Content Slider Image Otomatis

Sekedar untuk dokumentasi saja, piper comex membuat artikel mengenai cara membuat content slider image otomatis yang piper comex copas dari blog maskolis.com.

Content slider image otomatis ini adalah hanya salah satu dari sekian banyak content slider image otomatis yang ada di internet, karena menurut piper comex content slider ini cukup mudah untuk diterapkan, maka piper comex pilih untuk dipasang pada blog piper comex. Terima kasih buat blog maskolis.com yang bersedia berbagi tutorial tersebut.

Berikut cara pembuatannya:

1. Login ke blogger
2. Pilih blog yang ingin kita tambah content slider image otomatis
3. Masuk ke "template" >> edit "html" >> centang "expand widget templates"
4. Jika perlu di "backup" dulu, untuk jaga-jaga apabila ada kesalahan edit html.
5. Selanjutnya cari kode: ]]></b:skin>, letakkan kode berikut ini diatas kode tersebut.

#featuredContent{float:left;width:360px;margin-right:10px;display:inline} #featured-slider{position:relative;overflow:hidden;width:360px;height:245px} #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:360px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6zz-Pf6jbNi6CkE7aq9zEKyGOlM31N2fHThxvxyT7h4Q-Srp1Zoef8uv8CZPEFpnVP-FVEVxE6ppALfsnct8Cu5G3qq82KyOvR2Ggtd9ZhYBMNDagoW168rayH_UA5R9D_XZGZkGz-QlS/s1600/transparant.png);padding:5px 5px 0 5px} #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding-right:5px} #featured-slider .featuredTitle a{color:#ff9900;font:bold 14px Tahoma;text-transform:none;} #featured-slider .featuredTitle a:hover{color:#fff} #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1} #paginate-featured-slider{display:block;background-color:#ebe8e1;margin-bottom:0;padding:0 0 5px} #paginate-featured-slider ul{width:368px;padding-bottom:0;list-style:none} #paginate-featured-slider ul li{display:inline;width:84px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px} #paginate-featured-slider img{padding-top:5px;background:#ebe8e1} #paginate-featured-slider a img{border-top:4px solid #ebe8e1} #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #554931}

6. Kemudian masih di dalam edit html, cari kode: </head>, letakkan kode berikut diatas nya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/contentslider.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglM39mmiPHf1redg3wTDvAD3_EAjdb-0ikfv9tmLUML2AAiVbX1Ao2sNz05aKyqmbwVWS9uz3lg5lbAiyvO_PbTWZrGUipoW4-QuBvxmzB0Qe6jOHWrBbEWWqMbcJLHykBf5xql-VGIZY/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 100; summaryTitle = 25; numposts3 = 5; 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 showrecentposts3(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts3; 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; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 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"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; } } function showrecentposts4(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts3; 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; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 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 = ' <li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>'; document.write(trtd); j++; } } //]]></script>

7. Setelah langkah diatas, save template terlebih dulu, kemudian buka tata letak / layout, add gadget, html, masukkan kode berikut pada kotak HTML/javascript.

<div id='featuredContent'><div class='sliderwrapper' id='featured-slider'><script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>"); </script></div><div id='paginate-featured-slider'><ul><script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>"); </script></ul><div class='clear'></div></div><script type='text/javascript'>featuredcontentslider.init({ id: "featured-slider", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.4], //[true/false, fadedegree] autorotate: [true, 5000], //[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></div>

8. Selesai.

Catatan:
Jika didalam template sudah ada script "min.js", cukup dipasang satu kode saja.
Jika ingin merubah isi slider berdasarkan "label/kategori", cari kode: script src=\"/feeds/posts/default?max-results (ada dua), ganti dengan kode: script src=\"/feeds/posts/default/-/LABEL?max-results