Kako instalirati "Slideshow" - Stil 1

Ovo je profi hack i ne znam da li će raditi kod svikoga tako da se moram ograditi odmah. Napominjem da nijedan Template nije isti pa čak i ljudi koji prave to nisu sigurni šta su uradili.

1. Uvek se ulogujte
2. Dizajn >> Edit HTML.
3. Uvek kliknite na Expand Template Widget, ako nema onda mora ručno da se traže kodovi
4. Svaki CSS kod je drugačiki ovde jer nijedan template nije isti 

sledeći kod postavite iznad  ]]></b:skin>

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

Sledeći kod kopirajte i postavite iznad </head>

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

Kod ispod dodajte posle <div id='main-wrapper'> 

<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLzFfUNghX1_VCTCQbaq4K3L6ZW8xpPhQej3GKhvnETvwEg_dHSCYa9rWx7U6M8f3c7zhnt8NHk2TN9R_gXyewnzdB5EtYrK5o8sas195WQmYlPT7jq3zVRssmIwGUeoGTiWnFxdYm0k/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdc26KY0YQ2Mcz5_HozzU4VLy2uxBBQwiZXUoS9SfeETNHyMKZqC5UZ6kry-vme1gjKA3rBTRZJ7m1ed9GyoJkfxTRy55jGOOC4aUDfXehEv4I6IDb6eVjqg_sDawgjHoTE-xlHlTnFM/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
Nggak usah dijelaskan udah ada tulisanya diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6Kg12VuMSSQP0QdUlH5Xyqvlswp5qK_O4cYzv10f1f8ptuW-lL9rDuaNmso8ur22QZU_Y8oItZp2jNojdUsE8dEvgcrihKI8e6m55ZzqNZzAeT2UFc9DS0NoyLrolsER4hmPu7p8h18/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
Ini orangnya yang..............
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJm9-utwhtII1zvrwLTWq40QhVMyclmShvHhiqAikFm2FL_Bz9KYOlnTVAwTKaSvuYjyKcGX1_Em5Dc9jcb6KdIlRbyVSurMXjOt4wSCzLidjxG4IHRGkJVug0HWLSoV6WzfhsKfG1KEI/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikMgzynhi4XgPrRgrzlWdC5LdBqXfeH6A15QhD_dFSgyLeZxfirZpTWy49kKZZBqR2V4VWdp8jdwo2MQqx463OEOU4ifmp8lRqOqbN9Uk-SRtjbPa8-MzTZUq_Rb8JWUxcTuYCvSZC8g4/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>

• Važno: Widht ili širunu, podesite prema template-u kao i sve reference u kodovima
• Takodje, crvenu boju zamenite vašom URL Slikom
• Plavo je boja slike koju ste uneli prethodno