06 October 2013

How to install "Slideshow" - Style 1

This is profesionall hack and I really don't know how it's workin' but I think it's ok. Note: There is no same template nowhere so please understand if it's not working. I will show you other slider on my other blog. But anyway try this one.




  1. Step one is very well known - log into blogger
  2. Template >> Edit HTML.
  3. Click Expand Template Widget,
  4. Every CSS code je diferent here because no one template is the same 
next code post above  ]]></b:skin>


  1. /* SLIDESHOW */   
  2. #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20pxmargin-right:10pxpadding: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}  


Next code copy and post above </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>



Code in the box add after this line <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/AVvXsEjj4swZoHZ-K5vFuE1daowSVG9muzqpxMrVTM-6G0YeaIS5korxHzmjDSGrm-ayMvUbuQlvNffp2vZr26LQ960ARWU5cyBWxVQ9_N3D0A1uB_mPz8AUh3TDRUc7mlnUZfehCAMekAr0mEA/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/AVvXsEhY18yKLvwuFmeMT-JswdQUvPFXeJUh12Kt73MSbj-_95nA0Owg43zHrBWtXRts6nqbd-zHY_h9XnpL-0wk7QaSqY5Xmi736VqRzfy9QHcyAuOD0BfFzCjhGNGoDf8g8JBCRwza-NeOi1M/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/AVvXsEjzmu5yJE2D0WSoGtFJsjD6mEkSR9Pygq7ETnq0hXwaHgztFxpBt_th4M3dh3fvrUfuvclMzl94DfGhUOW4v6F-Eoj4Po3uM_BrI8ptWNimEc-SonefGqVCWSuI78X73FKnDS3JWO9io-E/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/AVvXsEjGK7wHrN68EcjtsxvEYF0jkXqKpYpYhyu8_JIpPjD3Qbyl2onYmWP_BT3Xk8WTDcxTqnV1p27BxBQdTeCcTuFy7DAx8N6iclTySmVZ9nIKGp8E2ChByLXByKh9AnJ-6evDmEw2U3a6a5w/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/AVvXsEhfn1GKQbBRd0hDWxzxzwD0NIBN9z2fhMTap1j87W0yJomYLGNlz7en5C9m6mKKCCSfhPULNbHBG5v-JbmT0b1zwOZryzTPiomHE3eA8aTgXQU_wxrVDu9gVKECwpmuaBl772Fk2wLYqI8/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>

  •  Widht adjust to yours template 
  • Red colored line change with your picture URL
Save and that should be working

Whatsapp Button works on Mobile Device only

Start typing and press Enter to search