PANDUAN,TIPS,TRIK DAN CARA MEMBUAT BLOG DENGAN MUDAH SERTA GRATIS

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

You need to upgrade your Flash Player to version 10 or newer.

CARA MEMBUAT GAMBAR SLIDE DENGAN Jquery

Bagi sobat yang ingin membuat gambar foto berjalan | slide diblog dengan bantuan script dari Jquery dengan animasi transisi atau perubahan yang bergantian tentunya sangatlah bagus untuk menambah penampilan blog anda.

Okylah .. ikuti caranya dibawah ini
1. Masuk ke blogger
2. Klik Rancangan >> Klik Edit HTML
3. Cari kode  ]]></b:skin>; Lalu copy pastekan kode dibawah ini tepat diatasnya

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; } 

4. Copy pastekan kode dibawah ini tepat diatas kode  </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
 Nb. 563 ganti sesuaikan (lebar)

5. Klik simpan
6. Klik ke Elemen halaman untuk menambah widget.,Copy paste kode script dibawah ini


<div id='coin-slider'>

<a href="
ALAMAT-URL" target="_blank">
        <img src="
URL -GAMBAR gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
 
<a href="
ALAMAT_url" target="_blank">
        <img src="
URL-gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>

<a href="
ALAMAT_url" target="_blank">
        <img src="
URL- gambar" />
        <span>
    Deskripsi gambar ......
        </span>
    </a>

</div>
 Nb.Ganti alamat url dengan alamat URL anda

7. Simpan dan geser sesuai yang anda kehendaki posisinya.

Smoga berhasil ... jangan lupa kasih komentar..

KODE WARNA on line , GAME online , BENGKEL MOBIL , ISLAMIC , MY FACEBOOK

  • Share this
  • Sumbit to Digg
  • Sumbit to StumbleUpon
  • Sumbit to Delicious
  • Sumbit to Technorati
  • Sumbit to Reddit
  • Sumbit to Mixx
  • Sumbit to Twitter
  • Sumbit to Furl
  • Sumbit to Design Float
  • Sumbit to Blinklist
  • Sumbit to Yahoo Buzz
  • Sumbit to Google Bookmarks

Artikel Terkait

10 comments:

Vincent Andrasto said...
This comment has been removed by the author.
Vincent Andrasto said...

sukses nih gan,...

tp stlh saia preview ternyata bermasalah, gambarnya jadi dobel (width saya buat 1024) karena gbr saya beresolusi 1024x150. Setelah nyoba2 g taunya scriptnya kurang tuh gan, habis "width: 563" masih bisa ditambah dengan "height: ....", bebas,jadi gambarnya ngga dobel karena height defaultna 300px klo g salah.

gitu aja gan,thanks berat dah kasih tutor
^^,

EDY PUTRA jepara said...

yach .. makasih atas koreksinya,emang untuk width/lebar 563 atau kurang sedikit,tapi untuk lebar yang seperti pyk km ...?perlu perubahan lagi .tapi setelah saya liat oky juga tuh hasilnya gan ..? untuk delay bisa kamu rubah ... semakin banyak nilainya maka makin lambat transisi gambarnya...
Okylah .. kalau begitu ..?

lembongan island said...

nice post

nabilchipmunks said...

mo nany kalau alamat URL itu alamat blog kita atau gambar ?
trus kalau URl gambar kan alamt gambar nya kan ???? mohon penjelasan nya ..
butuh nieeeee

admin said...

mass . . .
klo mau narok foto slidenya di header macam blognya mas gmn ya . . .
mohon pencerahannya . . .
trimksh . . . .

EDY PUTRA jepara said...

Buat nabilchipmunks , Kalau alamat url yaitu jika gambar itu diklik akan menuju suatu alamat yang anda inginkan jadi terserah boleh alamat blog anda atau yang lain. Untuk URl gambar yaitu dimana anda simpan/upload gambar tersebut..? biasanya disimpan di photobucket,flickr atau terserah dimana anda simpan foto tsb.

Cross Mobile Phone said...

kalau merubah heightnya gimana?

Rudy Hartono said...

kunjangan malam and happy blogging

ADMIN said...

mas cara pake slider kaak yg mas pake gmana mas?? bisa ga kalo gambar dan judul artikel??

Post a Comment

SILAHKAH COMEN DULU...
MAKASIH TELAH MEMBERI COMEN DAN WUKTUNYA....
SALAM PERSAHABATAN.....
edy putra Jl.cik lanang62 Kauman Rt04/05 Jepara-59417

CARI ARTIKEL DISINI By Google

Loading

    COMENTATOR

    CHAT ROOM

    CONTAC Edy putra