Cara membuat gambar slideshow di atas posting utama blog

Cara mudah membuat slideshow gambar yang letaknya di atas posting utama suatu blog.
He...he...he...apa benar nudah ya? buktikan saja sendiri!!!
Mari sekarang kita praktekkan!!! biar sobat percaya.

Langkah pertama copy script di bawah ini.

/* SLIDESHOW */ #slider-holder{width:525px;height:300px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:525px;height:525px;position:relative;overflow:hidden} #s3sliderContent{width:525px;position:absolute;top:0;margin-left:0} .s3sliderImage{float:left;position:relative;display:none} .s3sliderImage span{position:absolute;left:0;font-weight:525;font-size:12px;color:#fff;height:45px;width:525px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} .s3sliderImage span a.featured-title:hover{color:#999} .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} .s3sliderImage span a:hover{color:#555} 

Ket: ganti angka warna ungu sesuai lebar lay out blog kalian.

Lalu pastekan di atas kode ini ]]></b:skin> yang ada dikolom edit html halaman template blog kalian.

Kemudian langkah kedua, copy lagi script berikut ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/> <script type='text/javascript'> <!--//--><![CDATA[//><!-- (function($){ $.fn.s3Slider = 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;#s3slider&#39;).s3Slider({ timeOut: 4000 }); }); </script>

Ket: ganti angka 4000 biru dengan angka lainnya untuk kecepatan gerakan slideshownya.

Lalu pastekan di atasnya kode ini </head> yang juga ada di kolom edit html.

Klik dulu pratinjau template, kalau tidak terjadi error berarti ini adalah pertanda bagus buat proses kalian membuat slideshow'nya.
Selanjutnya klik simpan template.

Langkah ketiga adalah copy script berikut ini:

<div id='slider-holder'> <div id='s3slider'> <ul id='s3sliderContent'> <li class='s3sliderImage' style='display: list-item;'> <a href='LINK LANDING PAGE'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUV83_yzSPPYuzAHfVHaCDV80cvSc1UuJUOBTVpjloABT3-ArfvGTuFNf-hxDV9zLNHJlqWigFky0LEQ934n066E0eGyfeCEmgYi8MUZChk7AfuMHGSAmfcgRj_LCOIeqHYL_aTaSs5bE/s1600/RSI+relative+strenght+index.JPG" height="300" width="500" /></a> <span style='display: block;'> <a class='featured-title block' href='LINK LANDING PAGE'>INDIKATOR FOREX RSI</a><br/> RSI kepanjangannya adalah relative strenght index, </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='link landing page'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJvoi-2-Xf3XSTdagVgNy5i48eVjOSugcSnH_WoVmoosjRUwp1TAdcGAJbgNVusvmqOVyatpGJV1beqsWdL7seu-Sg76-0S3Gp3XHgFAUE1lQnLzFBR96HAOuTemS6U_L9VFlYXhQ884/s1600/indikator+forex+zigzag.JPG" height="300" width="500" /></a> <span style='display: none;'> <a class='featured-title block' href='link landing page'>INDIKATOR FOREX ZIGZAG</a><br/> Indikator zigzag adalah garis yang berwarna merah </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='link landing page'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizn06j0KjnRzGNq9IJR5FgcFLdy7iKxeQmm5eUmbDimV1vpDtSDj7-YEhVcafBIC0DSKUMEfILP51lgUD14dLmhqmXuaEg6p3y6Xfwyv0NcdDHrS7YeARYq9k-MdvXW_f4xpc9up9O2mw/s1600/indikator+forex+fractals.JPG" height="300" width="500" /></a> <span style='display: none;'> <a class='featured-title block' href='link landing page'>INDIKATOR FOREX FRACTALS</a><br/> Panah merah adalah indikator forex fractals </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='link landing page'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXBb36tVCZpOdwGRQK-76ZW4iT370HhueFbwx8rDHd7Yx0KsiD5Ue8kOHRtF-Lgucj0Nwb53VzM-5kO2RSUhBknbEyr7ZJvRVM_WQewiLemMhXGwAC0SKRQmyhnXIsHL41M3bgAkUv6hI/s1600/indikator+forex+MACD.JPG" height="300" width="500" /></a> <span style='display: none;'> <a class='featured-title block' href='link landing page'>MACD</a><br/> Bentuknya adalah garis merah dan kotak kotak abu-abu. </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='link landing page'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7plQxJKTF0Fu07NZXMsvDA4nIWwsLLobMQl0qoGz3ULECUp_scmcEIkj4cUY1Bl1vq4lWnOhj6ocYNfUiO8hX21Q6ls2eFBR_lPKM-15_pR-iY10DHYtET9Wg6z_-pyDzkCjquQqLdo/s1600/candlesticks+chart.JPG" height="300" width="500" /></a> <span style='display: none;'> <a class='featured-title block' href='link landing page'>CANDLESTICKS CHART</a><br/> Candlesticks chart bentuknya adalah kotak warna hitam untuk uptren dan putih untuk sinyal downtren </span> </li> <li class='clear s3sliderImage'/> </li></ul> </div> </div>

Ket: kalimat warna ungu adalah url gambar, warna merah judul gambar slideshow, warna biru deskripsi gambar slideshow

Lalu pastekan di widget blog kalian dan letakkan widget tersebut di atasnya posting utama blog kalian.

Lihat hasilnya, di atas postingan blog kalian pasti sudah muncul gambar slideshownya.