Cara Buat dan Pasang Slideshow Gallery

Berikut merupakan tutorial cara membuat dan memasang Slideshow di Blogspot Blogger
Slide show merupakan salah satu content yang sangat menarik oleh karena itu banyak dari situs-situs terpopuler memasang slideshow sebagai tampilan review dari entry posting tulisan mereka ataupun review sebuah gallery untuk menampilkan foto-foto secara bergantian sehingga menghemat tempat. namun kelemahan dari content slideshow gallery ini adalah begitu banyaknya susunan script untuk menyusun dan menggerakan content slideshow ini sehingga mau tidak mau blog anda menjadi besarnya bertambah, efek sampinya ya itu situs anda akan sedikit berat dan loading menjadi lambat. untuk mengatasi itu kita bisa meletakan tampilan slideshow hanya pada satu halaman dan halaman yang lain tidak terganggu.
saya memiliki beberapa koleksi script slideshow untuk review gallery namun saya akan membagikan 3 tampilan slideshow gallery yang menurut saya selain penampilanya menarik atau bisa membuat blog anda kelihatan indah dan cantik juga script slide show ini tidak begitu berat sehingga tidak mempengaruhi kenerja blog anda. oke kita mulai saja tahap demi tahap pemasangan slideshow gallery:

Slideshow gallery pertama,

Slide show ini bayak digunakan oleh situs-situs yang ingin menampilkan posting terpopular atau terbaru (update)
lihat contoh pada halaman utama saya disini

Apa anda berminat?
Berikut caranya:
Login ke Blogger
Buka tab design (Rancangan) -->> Buka Tab edit HTML
Letakan Kode CSS berikut diatas kode ]]></b:skin>

#idn-wrapper{
width: 595px;
height: 250px;
overflow: hidden;
margin-top:;
padding:0;}
#idn1lman { width: 595px; /* important to be same as image width */
height: 250px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#idn1lmanContent {
width: 595px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.idn1lmanImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.idn1lmanImage span {
position: absolute; /* important */
left: 0;
font-weight: 660;
font-size: 0.834em;
color: #ffffff;
padding: 20px 15px 50px 13px;
height: 30px;
width: 595px;
background-color: #4e4d3c;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
display: none; /* important */
bottom: 0;/* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image*/
}
.idn1lmanImage span a.idn:link, .idn1lmanImage span a.idn:visited {
color: #fff;
padding: 0px 0px 2px 0px;
font-size:18px;
font-weight:bold;
}
.idn1lmanImage span a.idn:hover {color: #999;}
.idn1lmanImage span a:link, .idn1lmanImage span a:visited {color: #888;}
.idn1lmanImage span a:hover {color: #555;}

Kemudian Letakan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
/* ------------------------------------------------------------------------
s3Slider
idN1lman

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
///*779jj087778 redistribute by idnilman -> http://www.idnilman.com/
------------------------------------------------------------------------- */

(function($){

$.fn.idN1lman = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);
//--><!]]></script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#idn1lman&#39;).idN1lman({
timeOut: 4000
});
});
</script>

Kemudian Letakan Kode Berikut dibawah Kode <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='idnilmanDotcom' id='idn-wrapper'>
<div id='idn1lman'>
<ul id='idn1lmanContent'>

<li class='idn1lmanImage' style='display: list-item;'>
<a href='http://www.idnilman.com/2006/07/news-today.html'>
<img alt='bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQioTVvMMlQbUq0hB6l0Iy7E9gXWt7BJ4iC6FhHBlaRS1ULvLJ94H0Gera2H_vY7whDXnA-UQ6e4P2Z46VI1LSOmSXiPrsrOkAu5AXr1F54gLPwtj_0kWg2A23Ni_zA80EhMfek4FoDbk/s1600/cewek.jpg' style='width: 595px; height: 250px;'/></a>
<span style='display: block;'>
<a class='idn block' href='http://www.idnilman.com/2006/07/news-today.html' rel='bookmark' title='Your Title Img1'>Judul Posting Anda</a><br/>
Dekripsi Posting Anda
</span>
</li>

<li class='idn1lmanImage' style='display: list-item;'>
<a href='http://www.idnilman.com/2006/07/news-today.html'>
<img alt='bookmark' src='http://1.bp.blogspot.com/_JUg9QsmKp5s/TMtgZRtBGaI/AAAAAAAAAXk/BNLdCDsXu30/s000/1.jpg' style='width: 595px; height: 250px;'/></a>
<span style='display: block;'>
<a class='idn block' href='URL Siteus anda' rel='bookmark' title='Your Title Img1'>Judul Posting Anda</a><br/>
Dekripsi Posting Anda
</span>
</li>

<li class='idn1lmanImage' style='display: list-item;'>
<a href='http://www.idnilman.com/2006/07/news-today.html'>
<img alt='bookmark' src='http://4.bp.blogspot.com/_JUg9QsmKp5s/TMtgZqt0DhI/AAAAAAAAAXo/3-3uJoLS1aU/s000/2.jpg' style='width: 595px; height: 250px;'/></a>
<span style='display: block;'>
<a class='idn block' href='URL Siteus anda' rel='bookmark' title='Your Title Img1'>Judul Posting Anda</a><br/>
Dekripsi Posting Anda
</span>
</li>

<li class='clear idn1lmanImage'/>
</ul></div></div></b:if>

Simpan Template anda.

Cara Custom atau merubah ukuran Tinggi Lebar Tampilan Slideshow

Untuk setting ukaran agar sesuai dengan blog maka kita terlebih dahulu harus melihat lebar div id diatasnya. disini saya meletakan slideshow diatas kode <div id='main-wrapper'> maka yang anda harus anda lakukan adalah melihat ukuran lebar (width) main-warapper blog. coba tekan tombol (Ctrl + F) dikeyboard anda tulis #main-wrapper pada from find dibawah. setelah ketemu lihat ukuran width. ingat ukuran tersebut

• kembali gunakan form find dibawah cari #idn-wrapper ganti ukuran width dengan ukuran width #main-wrapper tadi.
• kembali gunakan form find dibawah cari #idn1lman ganti ukuran width dengan ukuran width #main-wrapper tadi.
• kembali gunakan form find dibawah cari #idn1lmanContent ganti ukuran width dengan ukuran width #main-wrapper tadi.
• kembali gunakan form find dibawah cari .idn1lmanImage span ganti ukuran width dengan ukuran width #main-wrapper tadi.

kendalanya adalah apabila ukuran #main-wrapper menggunakan margin dan padding lebih dari nol maka anda harus mensesuaikannya. untuk itu kurangi ukuran width sesuai dengan ukuran jumlah dari margin dan padding main-wrapper.
untuk sementara saya selesaikan dulu. nah bagi yang saat pemasangan slide show gallery ini ditemui masalah silahkan tanyakan kepada saya melalui form komentar dibawah ini, okey!

Slideshow ini sangat simple bukan? ada beberapa slideshow kolesi yang saya miliki menurut saya inilah yang paling ringan dan connect antar jQuary dan Javasript digabungkan dengan penyesuaian code css serta penempatan code HTML saya rasa sangat cepat..

Semoga bermanfaat, silakan dikomentarin saja!