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="http://1.bp.blogspot.com/-ta0dsRhj5t4/UWKRFyXTUEI/AAAAAAAAAd0/_DCIXb6VAO8/s1600/btrix_image1.jpg" />
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://4.bp.blogspot.com/-DUAZhpGbMjk/UWKRF0Dh06I/AAAAAAAAAdw/JN923wRM3as/s1600/btrix_image2.jpg" />
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://3.bp.blogspot.com/-FphJiGR8I1Y/UWKRGPsuv2I/AAAAAAAAAd8/sO24gDKefgY/s1600/btrix_image3.jpg" />
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://4.bp.blogspot.com/-IsYiKfPKDOI/UWKRIYruQKI/AAAAAAAAAeM/bd4HDiPabBA/s1600/btrix_image4.jpg" />
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="http://3.bp.blogspot.com/-5aREADA1i_k/UWKRIH2kPGI/AAAAAAAAAeI/fKEnYSUf4Ic/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 ... 


2 komentar

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda