Minggu, 01 April 2012

Membuat Slideshow di Blogspot dengan jQuery

Cara pasang slideshow di Blogspot dengan Javascript jQuery slideshow di blogspot kususnya pada HTML dan CSS ditemplate blogspot. karena di blogspot kita hanya coding HTML dan style CSSnya saja (tanpa PHP) dan sedikit sentuhan javascript jQuery untuk mempercantik custom templatenya.

Hal hal pertama yang harus diperhatikan adalah:
  1. Penting, untuk Back up template blogspotmu terlebih dahulu
  2. Siapkan juga hosting pihak ke dua untuk menyimpan file file template seperti gambar yang akan di costum nantinya. Anda bisa menggunakan hosting gratisan untuk file foto/ gambar seperti photobucket, saya sarankan sih pakai picasa saja karena sudah bawaan dari google, sama halnya blogger.com
  3. Mulai bekerja dengan tag xhtml

Pasang slide show javascript jquery

  1. Pada Dashboard, masuk menu template lalu pilih edit HTML
  2. Centang expand template widget
  3. Cari kode </head>  (gunakan ctrl+F untuk mempermudah pencarian) lalu pastekan Javascript jQuery  code dibawah ini, tepat sebelum code  </head>
    <script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’ type=’text/javascript’/>
    <script src= ‘http://inflashover-gallery.googlecode.com/files/jquery-func.js’  type=’text/javascript’/>
    <script src=’http://inflashover-gallery.googlecode.com/files/jquery.jcarousel.pack.js’  type=’text/javascript’/>
  4. Cari kode ]]></b:skin> (gunakan ctrl+F untuk mempermudah pencarian) lalu pastekan CSS code dibawah ini, tepat sebelum code  ]]></b:skin>
    *————————————————-
    Slider Section
    ————————————————–*/
    #slider { height:190px; position:relative; overflow:hidden; }
    #slider-holder { width:430px; height:190px; position:relative; overflow:hidden; }
    #slider-holder .jcarousel-clip{ width:430px; height:190px; position:relative; overflow:hidden; }
    #slider-holder ul{ width:430px; height:190px; position:relative; overflow:hidden; list-style-type: none;}
    #slider-holder ul li{ width:430px; height:190px; position:relative; overflow:hidden; float:left; }
    #slider-nav { position:absolute; top:165px; left:350px; z-index:2;}
    #slider-nav a{ font-size:0; line-height:0; text-indent: -4000px; width:10px; height:10px; border:1px solid #003366; background:#0066CC; float:left; margin-right:5px; }
    #slider-nav a:hover,
    #slider-nav a.active { background:#3399CC;}
  5. Save template
  6. Selanjutnya masuk panel widget, untuk menampilkan slide show tersebut
  7. Pilih add new widget, pilih HTML/ Javascript
  8. Lalu pastekan code dibawah ini pada widget tersebut
    <div class=’box’ id=’slider’>
    <div id=’slider-holder’>
    <ul>
    <li><a href=’#'><img alt=” src=’http://lh5.googleusercontent.com/-BdJMHqGNq4g/Tt84bcXczdI/AAAAAAAAAEc/UxPQVz71NfA/s800/slider-if1.jpg‘/></a></li>
    <li><a href=’#'><img alt=” src=’http://lh4.googleusercontent.com/-s9SEWpQPB8E/Tt84uYVHLKI/AAAAAAAAAEk/kPtzoenQg_M/s800/slider-if2.gif‘/></a></li>
    <li><a href=’#'><img alt=” src=’http://lh4.googleusercontent.com/-em5f7E7C1I8/Tt85YzilCMI/AAAAAAAAAEs/MTxTXK8w2wM/s512/slider-if3.jpg‘/></a></li>
    <li><a href=’#'><img alt=” src=’http://lh5.googleusercontent.com/-xWgmtLTsfZQ/Tt855RLsq3I/AAAAAAAAAE0/j9iRVkm_KMs/s512/slider-if4.jpg‘/></a></li>
    </ul>
    </div>
    <div id=’slider-nav’> <a class=’active’ href=’#'>1</a> <a href=’#'>2</a> <a href=’#'>3</a> <a href=’#'>4</a> </div>
    </div>
    Silahkan diganti tulisan yang berwarna merah dengan alamat URL file gambar anda
Demikian tutorial tentang cara pasang slideshow di Blogspot dengan Javascript jQuery, semoga bisa membantu sobat dalam berkreatifitas lagi.