16 Juli 2011

Pin It

Tutorial Membuat S3slider Images Show

Tutorial Membuat S3slider Images Show | Khamardos Blog
Hello sobat Blogger, apa kabarnya ni, Semoga dalam keadaan sehat wal'afiat... amin... Namun, sebelum saya memulai postingan tutorial kali ini, sebelumnya saya ingin mengucapkan mohon maaf lahir dan bathin apabila selama ini terdapat kesalahan yang dilakukan oleh saya baik itu disengaja maupun tidak sengaja. Karena berhubungan malam ini malam nisfu sya'ban (Postingan saya hari ini bertepat pada malam nisfu sya'ban) tentunya kita semua harus menyambut bulan puasa ini dengan suci.

Nah, untuk tidak memperpanjang mukadimah (Emangnya ceramah.. wkekekek). Bailklah, S3slider Images Show merupakan sebuah tampilan semacam slide bergantian yang biasanya digunakan untuk blog magazine style, atau bisa juga digunakan sebagai banner untuk blog sobat. Bagi yang masih juga belum paham tentang S3slider Images Show dapat sobat lihat previewnya di Demonstration.

Bagaimana, kelihatannya sudah tidak asing lagi kan sob ? Ya, sudah banyak kok blog-blog yang menggunakan fasilitas ini, bagi yang belum jangan khawatir, saya akan mengepost ulang bagaimana cara membuat S3slider Images Show.

1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada .

3. Lalu Copy kode CSS dibawah ini dan Paste DIATAS kode ]]></b:skin>



4. Lalu Copy dan Paste kode di bawah ini, letakkan SETELAH kode ]]></b:skin>
<script src="http://khamardos.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> <script src='http://khamardos.googlecode.com/files/s3Slider.js'
type='text/javascript'/> <script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({ timeOut: 4000 }); });
</script>
Note : Jika ingin kode jsnya dihosting di hosting anda maka silahkan ambil kodenya di : * Jquery JS dan * S3slider JS

5. Kemudian sobat masuk ke Rancangan > Add Page Element > HTML/Javascript dan masukkan kode ini:
<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>
Note :            : Judul
                      : URL Gambar
                      : Teks yang akan tampil di S3slider

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>

6. Lalu Save.

Semoga tutorial memodifikasi blog ini bermanfaat bagi sobat blogger tentunya, bagi yang ada pertanyaan ataupun tidak mengerti dengan tutorial ini silahkan ditanya pada form komentar. Sekalian jangan lupa tambah 1nya ke Google + ... Hehehehehe ...

.:: HAPPY BLOGGING SOBAT ::.
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

8 comments:

Klik Untuk Lihat Komentar

Farixsantips on 17 Juli 2011 09.02 mengatakan...

Wah bagus nih Jquerynya :D sayangnya tidak cocok diletakan di blogku :D

Merliza on 19 Juli 2011 16.05 mengatakan...

jquery..?!?!? saya masih gak ngerti.. tapi nanti saya coba deh.. soalnya emang b log bgt sama dunia blogging :(

SHUDAI AJLANI (dot) COM on 19 Juli 2011 16.11 mengatakan...

wah bagus nih sob infonya, suatu saat bisa di pake B)

Google Update Pagerank on 20 Juli 2011 13.01 mengatakan...

wah keren banget mas slideshownya. Sayang saya tidak mau meletakkannya, udah polos lebih bagus. Tapi apa ini akan memberatkan blog?

cassanova on 20 Juli 2011 15.30 mengatakan...

wah keren blog nya sob
bisa buat sharing nih.
oya kunjungan balik ya di
http://horror-mediafire.blogspot.com/

Anonim mengatakan...

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

Thomi Jasir on 27 Agustus 2012 18.45 mengatakan...

Sip info ente bagus nih bisa di coba di blog ane thanksya

Anonim mengatakan...

mentioned most people pay off their mortgages by the due date and additionally free of fines
A leading debt charitable plans the volume of most people investing in him or her just for assist about payday loans loans towards twin this kind of. arrears charitable trust tells all-around have used that quickly, high appeal to mortgages this holiday season. Any a good cause suggests four years past the number of buyers with them was trivial.
pożyczka na dowód
pożyczka na dowód
http://szybkapozyczka24.info.pl
kliknij, aby zobaczyć ten dokument
pożyczka gotówkowa comperia

http://pozyczki-prwatne.org.pl
http://szybkapozyczkaonline.com.pl
http://pozyczki-prwatne.org.pl

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied