Tutorial Membuat S3slider Images Show

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 Expand Widget Templates.

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

/* 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. 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 ::.

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

Artikel Lainnya :

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Akhirnya, Bisa Juga Join Ke Google+

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tampilan Halaman Label Hanya Judul Postingan
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog