Cara Membuat Slide Show Di Blog

Albarnation | 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 Slaid Show Tersebut Silahkan Terapin Tutorial Di bawah ini.

Untuk Demonya Sepeti Di Blog Saya 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/AVvXsEi36LQffg5UDKk-7EVdGHA3GCef9hbX-ps0PgLIh6ipuMitmDexKjcBKY6FBb2KIhJMisomuQlu6i12v-USdQsdSehnWR68wNOF5JtoWU5vglijMyceQeXJhl8L3BZ45yHs_5i1o-EUuWA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "Tutorial Blogger";

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 = "Tutorial Blogger"; Silahkan Ganti Tulisan Warna Merah Dengan Angka Yang Soba Mau Dan Label TUTORIAL BLOGGER Ganti Dengan Label Yang Sobat IngginKan dan width="450" Adalah Lebar Slaid shownya, height="250" Height Adalah Panjang Slaid Shownya Untuk Di Tampikan 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>

Terakhir Save/simpan Template Sobat.

NB : Saya Lupa Script Tutorial ini di Ambil Dari Blog siapa. Karna Kemaren Saya Simpan Dulu Di Draf Blog Saya. Setelah Beberapa Hari Baru Saya Editing. Jadi Bagi yang Merasa Mohon Di Kirim Url Blognya Lewat Contact Us di Bagian Flooter Blog ini Untuk Saya Cantumin di Postingan ini. Sekian Cara Membuat Slide Show Di Blog Kren. Semoga Bermafaat

9out of 10 based on 10 ratings. 93654 user reviews.

mjh 08

Free download