descriptionist

Memasang Widget Slideshow. Hai sobat blogger, selamat siang. Tentu sobat sekalian sudah sering mendengar atau melihat makhluk yang namanya slideshow itu. Ya, apalagi kalau kita mendownload template terbaru sekarang(bukan bawaan blogger) yang jumlahnya bisa ribuan diinternet. Hampir semuanya sudah menyediakan fasilitas slideshow tersebut. Bahkan ada template yang sudah menyediakan 2 versi , satu tanpa slideshow dan satunya dengan slideshow. Jadi tak perlu panjang lebar lagi, berikut tata cara memasang widget slideshow di blog sobat.

<!--Code at www.allbloggingtricks.com-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

   $('#btrix_slider3').s3Slider({ 

      timeOut: 3000

   }); 

}); 

</script>

<style>

#btrix_slider3 {

   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */

   height: 335px;

   position: relative;

   overflow: hidden;

   margin-left: 0;

}

#btrix_slider3Content {

   width: 590px;

   position: absolute;

   top: 0;

   margin-left: 0;

}

.btrix_slider3Image {

   float: left;

   position: relative;

   display: none;  top: 0;

   border:1px solid #ddd;

}

.btrix_slider3Image span {

position: absolute;

    font: 10px/15px sans-serif,Arial, Helvetica;

    padding: 10px 10px;

    background-color: #000;

    color: #fff;

    filter:'alpha(opacity=70)';

    -moz-opacity: .5;

    -khtml-opacity: .5;

    opacity: .5;

    text-align:justify;

}

.btrix_slider3Image span a {

text-decoration:underline;

color:#FE6602;

}

.clear {

   clear: both;

}

.top {

    top: 0;

    left: 0;

    width: 570px !important;

    height: 70px;

}

.bottom {

    bottom: 0;

    left: 0;

    width: 570px !important;

    height:90px;

}

.left {

    left: 0;

    top: 0;

    width: 110px !important;

    height: 335px;

}

.right {

    right: 0;

    bottom: 0;

    width: 80px !important;

    height: 319px;

}

</style>

<br />

<div id="btrix_slider3">

<ul id="btrix_slider3Content">

<li class="btrix_slider3Image"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsX6V5xcsPFxN-LMn4K6AIpFnN_x5sRVhyFQO-e8F6gp3dxtd1pQNfhv6Ki1LE-ZjDpNJ5JcUvSo3AABeX1-mgix7zObdxJjnDGn5c7TqqIzyhIHZ4fKhfcNYYi7kKyz_thiFA5A4bNIU/s1600/1.jpg" /> 

<span class="left"><h3>

HEADING HERE</h3>

DESCRIPTION HERE</span> 

</li>

<li class="btrix_slider3Image"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyGVmJXC2ph4eCfFmWRi_JaGwooulgjjWL5pzxkKJ6yWq1OznEYgTKlATZAIvA_G5HpvuG9S-YBCE60DaWid0IbbT_TGJWzBLCKWx3pUB5yPf5TL2zX2cDYnE_T2X8_PZcAW6W8Fi0r5Q/s1600/2.jpg" /> 

<span class="left"><h3>

HEADING HERE</h3>

DESCRIPTION HERE</span> 

</li>

<li class="btrix_slider3Image"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsfSv_7ZKOkqCOtqImgGQOieSGotuYnVz4aj6r1pDJnvToUG6JtcJivUJvSbsQs5-8nBi5um9NLPvP3GZZEhyocNQOv4-6XZhf7KPfAZbDl3KJNOksz3Em2glsoZzdnamyyhRgvc3_uAQ/s1600/3.png" /> 

<span class="top"><h3>

HEADING HERE</h3>

DESCRIPTION HERE</span>

</li>

<li class="btrix_slider3Image"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRIgHBbinbIdIzow8Nyfq7KgCFASa43EgTmMtZ9308BR1O-LrOZtdcsN8BX2jz_bdjQ8Yh9ROQPDYGAR6k5ze9bYQwQht1DPRQRp6rqAzZUwEEMDBTYnSPbj0mLz5OaF2pbUVfUCjhV2w/s1600/5.jpg" /> 

<span class="bottom"><h3>

HEADING HERE</h3>

DESCRIPTION HERE</span> 

</li>

<li class="btrix_slider3Image"> 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mzTJGN_PDz2Xa6FZNXejRHYTl5zsLpc9ukR7Jf_rGv7YBW5ZL0CgV69xWhwVAROaoIRDzpvtgVdiW_03b_MYzGYsbo-mH7qp0ot8IcAjQq7TS8_MUB80EUPzMm9yRco3cWjU_teSszQ/s1600/4.png" /> 

<span class="bottom"><h3>

HEADING HERE</h3>

DESCRIPTION HERE</span>

</li>

<div class="clear btrix_slider3Image">

</div>

</ul>

</div>

<br />

<!--Code at www.allbloggingtricks.com-->

Klik pratinjau/preview, kalau berhasil kemudian save.