Cara Mengedit Code HTML Slider Pada Blogger Theme Yang Anda Download dan Anda Terapkan di Blogger Anda

Saya belajar membuat slider pada blog melalui template blog yang saya download. Itung-itung sembari belajar mengutak-atik kode html. Alhamdulillah berhasil... Nah, bagaimana membuatnya, saya share di sini, ya...

Slider ini bisa Anda temui pada tema blog yang Anda download, biasanya sudah bawaan dari pembuatnya. Nah, kalau sudah bawaan tema, berarti Anda harus mengedit html-nya. Caranya, masuk ke dashboard - design - edit html. Terus cari deh kode Javascript slider-nya, terus tinggal diedit-edit. Caranya seperti ini:

<!-- Featured Content Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent(&#39;domready&#39;, startGallery);
</script>

<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>

<div class='imageElement'>
<h3>Hostgrator</h3>
<p>Since its establishment in 2002, HostGator has been a world-leading provider of web hosting service. Each of our shared Web Hosting plans includes 24/7/365 support, a 99.9% uptime guarantee, and a 45-day money-back guarantee.</p>
<a class='open' href='http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=Fitriyah-' title='Hostgrator - Webhosting'/>
<img alt='' class='full' src='http://tracking.hostgator.com/img/Shared/300x250.gif'/>
</div>

<div class='imageElement'>
<h3>Bali Orange</h3>
<p>Sistem baru menambah kenyamanan dalam menggunakan fasilitas hosting Indonesia yang diperoleh pelanggan untuk bisa berbisnis melalui websitenya.</p>
<a class='open' href='http://manage.baliorange.net/aff.php?aff=857' title='Bali Orange - Hosting Murah Indonesia'/>
<img alt='' class='full' src='http://www.baliorange.net/images/afiliasi/banner/gogreen.jpg'/>
</div>

<div class='imageElement'>
<h3>000webhost.com</h3>
<p>We are probably the only free web hosting company that has proof for uptime guarantee. Check our uptime stats. We managed to reach even 99.9% uptime for most of the servers.</p>
<a class='open' href='http://www.000webhost.com/417751.html' title='000webhost.com - Free!'/>
<img alt='' class='full' src='http://blog.ytechcity.com/wp-content/uploads/2009/11/free_hosting_000webhost.jpg'/>
</div>

<div class='imageElement'>
<h3>jagoanhosting untuk para jagoan</h3>
<p>Layanan Web Hosting terbaik dengan harga hosting murah. Tersedia pilihan server hosting indonesia dan server hosting US. Harga Hosting murah termasuk cPanel,  Fantastico dan layanan CS 24 Jam.</p>
<a class='open' href='http://www.jagoanhosting.com/1268-0-1-23.html' title='jagoanhosting untuk para jagoan'/>
<img alt='' class='full' src='http://icare.jagoanhosting.com/banners/ad-hosting-indonesia-square-big-300x250.jpg'/>
</div>

<div class='imageElement'>
<h3>SEO - jasaseobali - murah dan terpercaya</h3>
<p>menawarkan Jasa SEO murah Indonesia layanan jasa konsultan SEO membantu menaikkan rangking situs anda agar berada di halaman pertama Google atau Yahoo.</p>
<a class='open' href='http://jasaseobali.com/?id=Fitriyah' title='jasaseobali - murah dan terpercaya'/>
<img alt='' class='full' src='http://www.jasaseobali.com/images/seo-training.jpg'/>
</div>

</div></div></div></div></b:if></b:if>

<!-- Featured Content Slider End -->

Cara mengedit:

1. Warna merah : ganti dengan heading slide Anda.
2. Warna biru : ganti dengan deskripsi slide Anda.
3. Warna kuning : ganti dengan link tujuan, yaitu alamat url yang akan kita tuju pada saat meng-klik gambar slide.
4. Warna hijau : ganti dengan title slide.
5. Warna ungu : ganti dengan alamat url gambar yang digunakan pada slide yang dimaksud.
6. Hasil code slider di atas ada di slider blog ini... Oke, selamat mencoba ^__^

Posted in: Tutorial Blogger