KianHome - Slide post biasa kita temui pada situs online warta berita macam Yahoo, okezone, Detik.com, dll. Dimana kegunaan dari slider itu sendiri adalah untuk menarik minat dari para pembaca dan biasanya menjadi tampilan unik untuk menjaring pengunjung disamping mempercantik tampilan blog atau web.

Dewasa ini banyak format slider yang dibuat berdasarkan cara manual yaitu : kita selaku admin blog yang memasukkkan konten yang kita pilih, mulai dari judul, link hingga gambar yang sesuai dengan konten tersebut, dan hal ini perlu diupdate setiap ada konten atau artikel baru yang kita buat. Sekarang bagaimana kalau dibuat secara otomatis..?? jawabannya tentu bisa..!!!

Kalau kamu sudah paham dengan yang k'ian maksud maka kita akan masuk pada tutorialnya :
1. Klik menu "Rancangan", lalu klik lagi menu Edit HTML..
2. Beri tana ceklist pada kotak "Expand widget Template"
3. Copy kode dibawah ini dan letakkan sebelum kode </head>

<script src='http://dinhquanghuy.110mb.com/template/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts8= 6;


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 showrecentposts8(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts8 ; 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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="341" height="256" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2></div></div><div class="featuredPost lastPost"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><span class="featuredPostMeta">'+daystr+' / <a href="'+posturl+'">'+pcm+' Comments</a> / <a href="'+posturl+'">Read More »</a></span></div></div>';
document.write(trtd);

j++;
}

}

//]]>
</script>

4. Selanjutnya copy lagi kode dibawah ini, dan letakkan sebelum kode ]]></b:skin> :

#featuredContent {
float:left;
padding:7px 7px 5px;
width:342px;
display:inline;
background:#efefef;
}
#featured-slider {
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 342px; /*Lebar dari area slide, jika ingin disesuaikan kamu bisa ubah ukurannya mengikuti ukuran sidebar kamu*/
height: 352px;
}
#featured-slider img {
display:block;
min-height:256px;
height:auto !important;
height:256px;
}
#featured-slider .sliderPostPhoto { /* tampilan foto dan judul, bisa kamu ubah sendiri */
position:relative;
height:256px;
width:342px;
overflow:hidden;
}
#featured-slider .sliderPostInfo { /* Judul posting yang jika diaktifkan untuk fitur slidenya */
position:absolute;
bottom:0;
width:332px;
min-height:30px;
color:#fff;
padding:5px;
background: url(http://img233.imageshack.us/img233/8492/bgtransparent.png);
height:auto !important;
height:30px;
}
#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */
color:#fff;
font-size:1.1em;
padding:3px 5px 5px 6px;
}
#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
}
#paginate-featured-slider { /* do not change the name of class - used to wrap thumbnails for featured area */
display:block;
margin-bottom:5px;
font:bold 12px arial, verdana, sans-serif;
}
#paginate-featured-slider a { /* do not change the name of class - used to style links over featured slider */
color:#000;
padding:2px 6px;
background:#ddd;
}
#paginate-featured-slider a:hover {
text-decoration:none;
color:#cd1713;
}
#paginate-featured-slider a.selected {
color:#fff;
text-decoration:none;
background:#cd1713;
}
h2.featuredTitle {
font:14px "trebuchet ms", arial, sans-serif;
font-weight:normal;text-align:left;
display:block;
}
h2.featuredTitle a {
color:#fff;
display:block;
padding:3px;
}
h2.featuredTitle a:hover {
text-decoration:none;color:red;
}

5. Setelah itu simpan,..
6. Klik menu Element Halaman, kemudian klik lagi menu "add Gadget" di sidebar blog kamu -->> pilih "HTML/Javascript dan selanjutnya bisa kamu pindahkan kebagian atas post wrapper.
7. Copy kode dibawah ini dan pastekan didalamnya :

<div id='paginate-featured-slider'>
<a class='prev' href='#prev'>Prev</a>
<a class='toc' href='#1' rel='1'>1</a>
<a class='toc' href='#2' rel='2'>2</a>
<a class='toc' href='#3' rel='3'>3</a>
<a class='toc' href='#4' rel='4'>4</a>
<a class='toc' href='#5' rel='5'>5</a>
<a class='toc' href='#6' rel='6'>6</a>
<a class='next' href='#next'>Next</a>
</div>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Yourlabel?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
</script>
</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: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Prev", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //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>

8. SImpan dan lihat hasilnya..

nb : document.write("<script src=\"/feeds/posts/default/-/Yourlabel?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
Tulisan yang berwarna orange bisa kamu ganti dengan label yang kamu inginkan..