Slideshow jQuery Keren untuk Blogger

Dalam posting ini im akan menjelaskan bagaimana menambahkan jQuery menarik geser menunjukkan kepada blogger. Anda dapat menambahkan slideshow ini atas posting Anda. Sebenarnya ini juga sangat mudah untuk menambahkan di widget.

1. Masuk ke akun blogger dan klik drop down.

2. Sekarang pilih "Layout" Seperti bawah.

3. Klik Tambah Gadget dan pilih 'HTML / Javascript

4. Paste di bawah salah satu kode di bawah ini.

<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/AVvXsEjkf1kgsFdyc87gvG_UVsoZ5-5RQaJaA8Oy-UX3iAUxA7Z8-2ktyb6KLz-O3Nox1rcGfblpkdbCuVGt_E7IB85EPqOXHeW1wRDrc-UQHV26YwVwrm3Q6Yshk03aK4G-KOqiSjrfRQskvm8/s1600/btrix_image1.jpg" />
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzngm4-_P4FealltJSiQBjLAb9-gkR1h_w_FO4BPXLCtsOvPmiMihmhyphenhyphen_S8Pso1Yw__p0nxZwGsU0p4UyfTatjMfJgLnEmHJQZDlGO-3hTU83cW4a5pL0jdZ_SyHxWNmdRKpbB2PBRQUM/s1600/btrix_image2.jpg" />
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1IAEZ5UumCoZUCZMM_oXolJChlAtJN6rbZ-KnsC1hJ_K6pRbaDe1zRGKv36_lLAUBhhA4JqCrN6rYEnmisYBdyrmlIFs2qnqteMvwsEJqM0auO3OTow6PI8OYh9YO-BYgkZaandvuGF4/s1600/btrix_image3.jpg" />
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPfLwoXdvQGBPRzwAR7WNTC2kLiSI3CJG00xPC5Z6IA0JwElMqE-7WXAOupjkHhS-PuLCDA8MfoKn1UXxw3wevQ_QMCkMuV4B9b-3u_J3TNuddVWjJEQibNpFlHiRV6iOpoP2licQqkI/s1600/btrix_image4.jpg" />
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCx7qEf0RXTvO2vgf8mEzZs2Zigu3O9rJleji71jIxbWITRGzueVFj7UmvXVAxzM0MkVYKfvUr7y-D4H683-YxjS8N7F6obTQYGVfFAHN0BI6NZeIV0wadvjXnIRuzFfoQ9YeBwKETk0/s1600/btrix_image5.jpg" />
<span class="bottom"><h3>
HEADING-5 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />

Anda dapat mengubah foto dengan mengubah URL Gambar


7. Sekarang menyimpan HTML / Javascript '.

     Anda telah selesai ... 

Share this post