Memasang Image slider dengan Jquery tanpa edit HTML - Tutorial Website, Wordpress & BloggerFerlyando Sandala : Tutorial Pemula Blogging
False

Pagination

HIDE

ARTIKEL TERBARU:

latest
Make Image responsive

Memasang Image slider dengan Jquery tanpa edit HTML

Kali ini aku mo share artikel terkait, pembuatan image slider dengan menggunakan JQuary, tanpa edit template agan yang bisa bikin mumet.. ...

Kali ini aku mo share artikel terkait, pembuatan image slider dengan menggunakan JQuary, tanpa edit template agan yang bisa bikin mumet..
tampilannya yang oke, bisa di pertimbangkan untuk mempercantik blog agan pada..

kalau bingung silahkan lakukan langkahnya sesuai tutorial image berikut:

1. langkah pertama silahkan masuk ke blogger agan dan ke template
2. klik tambahkan widget di sidebar template agan (terserah)
3. lalu klik HTML/JavaSriptnya ya

Berikut Scriptnya :

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
 overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://tutorialmixs.blogspot.co.id"></a>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
 <div class="jslider_images">
      <ul>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
  <img src="http://3.bp.blogspot.com/-JOOkamNmMKQ/VE0A13nncKI/AAAAAAAAEZ4/5SaXws5ZGBI/s1600/Avenger%2B500x309.jpg" title="Trailer Movie terbaru "avenger age of ultron"/>
  </a></li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
  <img src="http://1.bp.blogspot.com/-lqRqzi4qLqk/VE0A1_G3TlI/AAAAAAAAEZ8/FW3q3uSegMk/s1600/sakitnya%2Btuh%2Bdisini%2B500x309.jpg" title="Goyangan Hot Asoy Geboy artis Dadakan"/>
  </a></li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
  <img src="http://2.bp.blogspot.com/-VBkDJuDDnVc/VB2gvb3BhII/AAAAAAAAEAY/eY6ykyfz18g/s1600/Sasha%2Bgrey%2B550x309.jpg" title="Sasha Grey bintang mantan bintang video porna yang merambah dunia akting. dalam debut film terbarunya Open Windows"/>
  </a>Sasha Grey Mantan Bintang Video Porno</li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
  <img src="http://3.bp.blogspot.com/-xrb8dFbNDt8/VC7sS7tu43I/AAAAAAAAEPg/el8z_go3F6s/s1600/Gadis%2Bman%2Bmenggila%2B550x309.jpg" title="Hoboh goyang erotis siswi MAN Aceh Utara Beredar"/>
  </a>Goyang erotis sis MAN aceh utara</li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
  <img src="http://1.bp.blogspot.com/-ieyf3fyEHFM/VE0jGxZPNfI/AAAAAAAAEa4/dO1O7z_xX6M/s1600/lipsing%2Banak%2Bsmu%2B550x309.jpg" title="Goyang Hot Asoy Geboy sakitnya tuh disini"/>
  </a></li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
  <img src="http://1.bp.blogspot.com/-kxL6POfiff0/VE0A4McstSI/AAAAAAAAEaQ/OuAVOEepWzc/s1600/sunny%2Bleone%2B550x309.jpg" title="Sunny Leone New Album Pink Lips Full Video HOT Song"/>
  </a></li>
<!---------------------------------------------->  
   </ul>
</div>
<div class="jslider_thumbs">
        <div>

<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="New Box Office Avenger Age of Ultron"><img src="http://2.bp.blogspot.com/-13SbI2QT4ds/VE0AzAtntGI/AAAAAAAAEZw/QEOBUApGMps/s1600/Avenger%2B85x48.jpg"/></a>

  <a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Goyang Asoy Geboy"><img src="http://4.bp.blogspot.com/-SEHXIhd2k8Y/VE0A2FWKxuI/AAAAAAAAEaA/KIjjZIuiCVQ/s1600/sakitnya%2Btuh%2Bdisini%2B85x48.jpg"/></a>

<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Hot Movie Sahsa Grey mantan bintang video porno"><img src="http://1.bp.blogspot.com/-5DNucvepfEw/VB2jVVySPWI/AAAAAAAAEAs/Dn9UXATuM-M/s1600/Sasha%2Bgrey%2B85x48.jpg"/></a>

  <a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Goyang Erotis siswi MAN aceh utara"><img src="http://3.bp.blogspot.com/-nMnzqwKJOxA/VC7plLk3KAI/AAAAAAAAEPU/XG516VAlSPQ/s1600/Gadis%2Bman%2Bmenggila%2B85x48.jpg"/></a>

  <a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Goyang Hot Asoy Geboy "sakitnya tuh disini""><img src="http://4.bp.blogspot.com/-se0i_bTUsaU/VE0jauhamrI/AAAAAAAAEbA/RXTsnDBF2NE/s1600/lipsing%2Banak%2Bsmu%2B85x48.jpg"/></a>

  <a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html"><img src="http://3.bp.blogspot.com/-1Lde8VYN-Pc/VE0A4Fj1fsI/AAAAAAAAEaU/7OBJomM0O1s/s1600/sunny%2Bleone%2B85x48.jpg"/></a>
   
        </div>
</div>
</div>
</div>
</div>


5. Selesai, dan simpan

note: untuk ukuran image yang besar, aku gunakan ukuran 500x309, sedangkan image yang kecil aku gunakn ukuran 85x48, kalau besar kecilnya emage yang aku gunakan tidak sesuai dengan ukuran agan, silahkan edit sizenya.

semoga dapat membantu dan bermanfaat....

No comments

Jangan melakukan SPAM... Aturan tidak ada link dan bicara kotor dalam komentar Sobat.