Jquery Menampilkan Slideshow Post

Jangan Sepele Dulu Liat Demonya Di Sini

Berikut Caranya :

1.Login ke dashboard blogger Anda -> layout--> Edit HTML

2.Scroll ke mana Anda melihat </ head> tag.

3.Copy kode di bawah ini dan paste tepat sebelum tag </ head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /* ------------------------------------------------------------------------ s3Slider Developped By: Boban Karišik -> http://www.serie3.info/ CSS Help: Mészáros Róbert -> http://www.perspectived.com/ Version: 1.0 Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top. -------------------------------------------------------------------------- */ (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><br /> <br /> <script type='text/javascript'> $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); </script><br /> <br /> <style type='text/css'> #s3slider { background:#000000; border:1px solid #818e8f; width: 550px; height: 200px; position: relative; overflow: hidden; } #s3sliderContent { width: 550px; position: absolute; top:-14px; padding: 0px; margin-left: 0; } .s3sliderImage { float: left; position: relative; display: none; } .s3sliderImage span { position: absolute; left: 0; font: 20px Trebuchet MS, sans-serif; padding: 10px 0px; width: 550px; background-color: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; color: #fff; display: none; bottom: 0; text-align:center; } .clear { clear: both; } </style>

Note : Untuk mengubah kecepatan tampilan slide, ubah nilai 4000.


4.Save template Anda.

5.Now pergi ke Layout -> Elemen Halaman dan klik "Tambah Gadget".

6.Select "html / java script" dan tambahkan kode yang diberikan di bawah ini dan kliksave.

<div id="s3slider"><ul id="s3sliderContent"> <li class="s3sliderImage"><br /> <a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKojZmFGuBRTe-lox7gYjw8ZBpgALbXopt52Z5T5yBmFVJLy4SVxpbaDaH63cSP7TsNbI0ceqRBLbreAXnl2bR4W_LJoctcAasZZGQxiARPlSPBr824mgSqUbXj9NmaymM30EpKZXxPw9/s1600/Crysis-11.jpg" /><br /> <span>Crysis : Download Full Version</span></a><br /> </li> <li class="s3sliderImage"><br /> <a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiuvdLAasPPqHg7lCwNuLDFI9JhN6e6Ox6lftwo_ZvCTexzr_lCZ9oFiR1z4C6NdoPwpbwXUsSnBcMyY-VwUawUgeEHjtEZ3dnrt8fcWGrqNU4VvI9VfQ1HBXPqYxcZPZ69mNR71-3C4zM/" /><br /> <span>Halo 3 : Play Game Online</span></a><br /> </li> <li class="s3sliderImage"><br /> <a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8kiYiN3VmvwXZ4-t8QFCEmtXXDPgVVuUQ_ZOTvJw2anMxrNl9al0h7nBf7Wqrf-Sb2m4qpXwo3r3VlB8YBYoLwURkmsuN3G4TGq1Ng6nc9JEUzLw_E1gHiX2n-SyEjF5CT0SzidTxWVH8/" /><br /> <span>Avatar : Watch Movie Now !!!</span></a><br /> </li> <li class="s3sliderImage"><br /> <a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpqyvkrEeqrR6vd89vTRQ4l9IWq0GEUFyteOfraWXO1eCxhtwYGTvk3PZTmxstPEJ3aj1yhtc8GqaVnayMhrn-CzTyWb_GQvIpElqeVIGgzBdm2EUf6_TUJBVQkRem4WF2QqADYLp3w4n/s1600/call+of+duty-11.jpg" /><br /> <span>Call Of Duty 4 : Get Here</span></a><br /> </li> </ul></div><br /> <div class='clear'></div>

Note : Ganti YOUR-LINK-HERE dan gambar dengan konten Anda.