Cara Membuat Slide Show Di Blog:Lutfi blogs

Lutfi blogs - Cara Membuat Slide Show Di Blog. Dengan Adanya Slide Show di blog membuat blog kita nampak lebih elegan tentunya. Selain itu juga membuat pengunjung mudah untuk memdapatkan Atikel yang mungkin saya bermanfaat buat Para Pengunjung Blog Kita. Nah lalu bagaimana cara membuat Slide Show Tersebut Silahkan Terapin Tutorial Di bawah ini.

Pertama-tama Masuklah ke akun blogger milik anda terlebih dahulu
Selanjutnya masuk ke Template
Silahkan Backup Template Sobat Dulu. Untuk Antisipasi
Setelah BackUp Template lalu pilih Edit HTML (jangan lupa centang expand widget templates)
Kemudian cari kode ]]></b:skin> (gunakan ctrl+f untuk mempercepat pencarian), jika sudah copy dan pastekan kode dibawah ini diatas kode tersebut:

#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}

Silahkan Edit Warna Merah Untuk Penyesuanyan Atau Menurut Selera Sobat.
Jika sudah, langkah selanjutnya cari kode </head> , kemudian salin dan tempatkan kode dibawah ini diatas kode tadi

<script>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpfwIhhu24bjxhoG4zlypErO3HmSxldtq7PspGzafHoee3kkWsGjXBlaarUKP5UZfNDICsG2TAjXcnOAR4mi55-Emo_twtRQmDfnjnV3ROdGAl0BVru-T9YomSwkiskuXTFxr7jFGy8BQ/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 5;

label1 = "Trik n Tips";

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="450" height="250" 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>

NB : Lihat Tulisan numposts1 = 5; label1 = "Trik n Tips"; Silahkan Ganti Tulisan Warna Merah Dengan Angka Yang Soba Mau Dan Label Trik n Tips Ganti Dengan Label Yang Sobat InginKan dan width="450" Adalah Lebar Slide shownya, height="250" Height Adalah Panjang Slide Shownya Untuk Di Tampilkan Di Slide Show Blog Sobat.

Setelah itu cari kode </body> , jika sudah tempatkan kode dibawah ini sebelum kode tersebut.

<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>

Langkah Selanjutnya Silahkan Sobat Cari kode <div id='main-wrapper'> letakkan kode berikut ini di bawah kode tersebut :

<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>