cara membuat slider image show yang diAplikasikan ke dalam template blog .

cara membuat slider image show yang diAplikasikan ke dalam template blog . - Hallo sahabat berita aneh, Pada Artikel yang anda baca kali ini dengan judul cara membuat slider image show yang diAplikasikan ke dalam template blog ., kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tips dan triks blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : cara membuat slider image show yang diAplikasikan ke dalam template blog .
link : cara membuat slider image show yang diAplikasikan ke dalam template blog .

Baca juga


cara membuat slider image show yang diAplikasikan ke dalam template blog .

 Tips dan triks kali ini akan membahas cara membuat slider image show yang diAplikasikan ke dalam template blog . Sangat mudah cara membuatnya , untuk melihat sumber s3slider image silahakan ke situs resminya,jika sobat ingin melihat demonya bisa klik di sini atau kalau sudah tidak sabar ingin mengaplikasikan feature ini hal yang pertama siapkan bahan-bahan untuk membuat s3lider, terutama scrpit jquery dan s3slider; bisa sobat download di bawah ini


Kalau sudah sobat download saya sarankan simpan di tempat hostingan sobat sendiri, jika sudah menyimpan kita mulai langkah-langkahnya :

  1. Login ke blogspot terlebih dahulu kemudian masuk ke blog sobat pilih Layout > Edit HTML
  2. Kemudian masukan kode CSS di bawah ini sebelum kode ]]></b:skin>
  3. /* Slider Control ----------------------------------------------- */ h2.slider { color: #000000; font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0px 0px 0px 0px; padding: 0px 0px 6px 0px; border-bottom: 1px solid #C0CCD3; } #s3slider { width: 570px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } html > body #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: -40px; /* important */ } #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0px; /* important */ margin-top:30px; } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 570px;height:50px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ }
  4. Selanjutnya masukkan kode di bawah ini setelah kode ]]></b:skin>
  5. <script src="http://inspirasiku-iq.googlepages.com/jquery.js" type="text/javascript"> <script src='http://betatemplates.co.cc/wp-content/project/js/s3Slider.js' type='text/javascript'/> <script type='text/javascript'>    $(document).ready(function() {    $(&#39;#s3slider&#39;).s3Slider({       timeOut: 4000    }); }); </script> 
    Nb : mohon ganti URL alamat JS dengan punya anda sendiri untuk menghindari bandwith limit
  6. Kemudian sobat masuk ke Layout > add page element > HTML/Javascript dan masukkan kode ini :
  7. <h2 class="slider"> My Gallery</h2> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" /> YOUR TEXT... </li> <div class="clear s3sliderImage"> </div> </ul>
  8. Simpan dan lihat hasilnya
Contoh di atas adalah hanya 2 images show kalau sobat ingin menambah image slide shownya yang perlu dilakukan adalah menambahkan format ini :
<li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li>

Semoga tutorial ringan ini bermanfaat buat sobat yang ingin menampilkan gaya magazine di template sobaT..



Demikianlah Artikel cara membuat slider image show yang diAplikasikan ke dalam template blog .

Sekianlah artikel cara membuat slider image show yang diAplikasikan ke dalam template blog . kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel cara membuat slider image show yang diAplikasikan ke dalam template blog . dengan alamat link http://beritaaneh13.blogspot.com/2012/04/cara-membuat-slider-image-show-yang.html

0 Response to "cara membuat slider image show yang diAplikasikan ke dalam template blog ."

Poskan Komentar