Setelah menelusuri ratusan template yang di sediakan disana slide Imagenya, ternya hampir semuanya manual, artinya anda harus membuat dulu deskripsi postingan anda, kemudian memasukkan url gambar yang harus anda upload dulu kehosting photobucket atau kehosting image free, bahkan anda juga harus menguploadnya kembali kepostingan blogspot anda, ini kan namanya sangat repot sekali. (Sok mantaf kali aku yah hahahaha)
Nah, setelah cari sana sini akhirnya ketemu cara membuatnya, kebetulan tutorial itu menggunakan bahasa inggris, dan saya jujur saja tidak tahu sama sekali yang namanya bahasa negri paman sam itu, sorylah, soalnya guru saya mengharamkan bahasa inggris, jadi bego'lah jadinya, wah jadi curhat yah, hahahaha.
Baiklah, saya akan memulai tutorial ini.
Tapi anda sebelum mencoba tutorial ini anda harus punya blogspot dulu, kalau tidak punya ya bagaimana mau mencobanya.
Langkah-langkah yang harus anda lakukan adalah sebagai berikut:
1- Login keblogspot anda.
2- Pilih "Template"
3- Pilih "Lanjutkan"
4- Centang kotak sebelum bacaan "Expand Template Widget"
5- Tekan Ctrl + F (Search), kemudian ketikkan di kolom search tadi ]], maka anda akan dibawa ke ]]></b:skin>
6- Letakkan CSS yang dibawah ini tepat diatas code nomor lima (5) ]]></b:skin>
#featured{margin-bottom:35px} .sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px} .sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;} .pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px} .pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B} .pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff} .featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0} .featuredPost a{color:#fff} .featuredPost a:hover{color:#dedde5} .featuredPost h2{margin:0;font-size:16px;line-height:1} .featuredPost span{font-size:10px} .featuredPost p{font-size:11px}
7- Ctrl + F (Search) ketikkan </head>
8- Kemudian letakkan script dibawah ini tepat diatasnya.
<script> /* Script from:http://simplexdesign.blogspot.com/ */ imgr = new Array(); imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; numposts1 = 5; label1 = "Featured"; 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=["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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="590" 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>Tulisan "Featured" merah diatas adalah label postingan anda.
Angka berwarna merah adalah lebar dan tinggi gambar anda.
Save template anda, kemudian kembali ke "tata letak"
9- Buat gadget anda dulu, kasih nama, biar nanti gampang nyarinya. setelah di buat, maka nanti kira-kira bentuknya begini:
<b:section class='home-column1-ad' id='ad' showaddelement='yes'>Nah blok yang berwarna merah dan gantikan dengan Script yang di bawah ini;
<b:widget id='HTML16' locked='false' title='ad' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'>
<data:content/> </div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<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>
10- Ctrl + F (Search) </body> dan letakkan script dibawah ini tepat diatasnya;
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script> <script> 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>11- Save Template anda.
Catatan:
1- Anda harus mengerti dahulu berapa lebar dan panjang gadget anda, dan anda bisa mengaturnya sesuai dengan keinginan anda sendiri.
2- Setiap postingan anda wajib menggunakan label dan gambar.
Selamat mencoba, kalau ada masalah silahkan letakkan komentar dibawah.
