Slideshow Widget To Blog

1. Log in to Blogger dashboard.
2. Click  Layout / tata letak.
3. Click Add a Gadget pilih HTML / JavaScript . 

4.   Copy dan faste scrip di bawah ini

<!--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/AVvXsEh_88SlDPlbvSDLcv32oPjrCwWoG8pZ1cA0LRubIjearxJMsI2pJiV1RXJcmQmo02xx85w4tM_5Q3_aSs2uzZDn17C319rZpOqLU1Teuh66VzeXph8KG5gQHUeG7XI0wKznpipqrwuIjq8/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/AVvXsEgOpbxSMmaKVas3bqmRIbJGU2xJhPXNHXFb4vz-YjRNTQk7b5HLrIQe0Ni5goRc2dMhOJRsuIptCI9iHyixsY1BPk4sp8L7wG2OrsyCW3DMOEd33FiKFNjmFqt3W63KtXSQmE0xjzAypAE/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/AVvXsEh9Kt9oUE1lURSpLBNnJPUoymAE0BfTRtn-KXFSxF6c7E-jAEkxYVULIEhB6pvUXkngAbBJ6vety10WGxe5ed4z5jC6dPqPLPjk-vfxjOAZBtDtwT2pfa49aDnTtr1Ym5TcFI1O46qs_AM/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/AVvXsEgveZJDB6zs1JYy5CT_oEgQdsEfTwgGrYebqZjZ2jqYTZyMg5a7lKUu0g0XPZUuaXckrIqC328pCT-yrZ92BJ2OBGVDPInKR7c19uj4qu6Fm60Rnb_xqsPjONfxSofPSXYGO-ghts24O8s/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/AVvXsEibe-lfMpBrYN7x46Zbw5TT1ZZsn_QlH8Fk-pMsDIDTeaMsOH9we8CtZJtEhxd8AXwSlFuQMq0jQf5la1nClf-cZUE4gCXEuWFOSrKw3Ah7BZyaAR1FBAatiMDluWkUVzJMZq_F7gqksqI/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-->

5. drag widget tadi simpan di atas Blog Posts area

teraksih klik Save arrangement dan lihat hasilnya

Ubah

• ganti  HEADING HERE and DESCRIPTION HERE dengan detail dari gambar.
• ganti semua URL dengan URL  yang lain atau puya sendiri

No comments