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() {
$('#s3slider').s3Slider({ timeOut: 4000 }); });
</script>
5. Kemudian sobat masuk ke Rancangan > Add Page Element > HTML/Javascript dan masukkan kode ini:
<h2 class="slider"> My Gallery</h2>Note : : Judul
<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>
: 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 ::.
6 comments:
Wah bagus nih Jquerynya :D sayangnya tidak cocok diletakan di blogku :D
jquery..?!?!? saya masih gak ngerti.. tapi nanti saya coba deh.. soalnya emang b log bgt sama dunia blogging :(
wah bagus nih sob infonya, suatu saat bisa di pake B)
wah keren banget mas slideshownya. Sayang saya tidak mau meletakkannya, udah polos lebih bagus. Tapi apa ini akan memberatkan blog?
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 =))
Sip info ente bagus nih bisa di coba di blog ane thanksya
:: Komentar Anda ::
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!
:) :( :X =(( :-o :-/ :-* :|
8-} ~x( :-t b-( :-L x( =))
[[ Form Komentar Klasik ]]