Membuat Tampilan Slide Disertai dengan Gambar dan Teks

Trik ini juga berfungsi untuk memperindah blog. Dimana slide ini akan menunjukkan artikel yang terkandung dalam blog kita semdiri. Dengan tampilan slide ii, blog anda akan kelihatan elegan (kaya situs yang sudah terkenal gitu loh..). Sebelum saya memberikan tis ini ada tau siapa orang di balik penulisan artikel ini? ulisan ini saya dapat waktu jalan-jalan ke situsnya Zinmag Primus.

Oke langsung saja kita mulai dengan langkah pertama.

1. Login ke blogger dengan ID anda
2. Pada Dasbor, pilih Rancangan
3. Pilih Edit HTML
4. Cari kode ini ]]></b:skin>
5. Letakkan ko css berikut di atas kode ]]></b:skin>

Kodenya ada di sini

#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

6.Letakka kode di bawah ini tepat di bawah kode ]]></b:skin>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

7. Kemudian Cari kode yang mirip seperti ini

<div id='header-wrapper'>
..........
.........
</b:section>

8. Letakkan kode di bawah ini tepat di bawah kode yang anda cari tai pada langkah 7

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2008/05/e-book-kiat-sukses-promosi-blog.html'>eBOOK Kiat Sukses Promosi Blog</a></h2>
<p>Kontes seo "kampanye damai pemilu indonesia 2009" tinggal menghitung hari..10 hari ini saya mencoba sekuat apa pengaruh backlink pada keyword..kalo ada yang mau bantu dukung om bisa memasang link ini di blog masing2. Silahkan copy-paste kode dibawah, thanks banget atas dukunganya :).</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi72T_6dlLJ5mWg2yguQq58NQGjo_fk_B9TipFcmYku2AyDbzVutKcZF_x1N39luY7ainnH1F5eD97QW8EBRns_yE7eAJKSLpoJFf21djsF9oo3oGSODteqYaaQvgoEeznGqUdZaeix8Fgm/s400/Kampanye+Damai+Pemilu+Indonesia+2009.gif'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2009/02/kampanye-damai-pemilu-indonesia-2009.html'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam kegiatan promosi blog serta bagaimana etika promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak saya gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Jadi segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAZOtqQqlOIA9_DrdWArT8u0ZeOftdfLxfn9Hg4Amly6U4m-EmBEH0K1yiDo9XqnUCBBnNjvN2P_OvRjF5HeeLADYr5wQA_DIaO0ag5w4xeBjeOQipFdJou-4xZmFRy018rED8Nk3ZzNH/s400/OOMEBOOK.gif'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

9. Kemudian Simpan Template, dan lihat hasilnya.

Kira-kira Apa saja yang perlu diEdit?

1. Karena file javascript diatas meminjam langsung dari alamat lain, jadi saya sarankan rekan menyimpannya pada hosting masing2. Silahkan download semua file javascript disini.

2. Secara default, Background image pada slider diatas kemungkinan tidak sesuai dengan ukuran template sobat t'Net saat ini, jadi mau tidak mau harus memperkecil ukurannya atau sebaiknya buat saja gambar baru sesuai dengan ukuran dan lebar template rekan yang  sekarang.

Silahkan anda edit di bagian ini:

#slider { background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px; overflow: hidden; position: relative; margin: 5px 0; }

3. Setelah sobat t'Net selesai dan berhasil memasang semua kode di atas, contoh slider yang tampil hanya sebagai sample saja, jadi silahkan dihapus link, text dan gambar milik saya dan ubahlah gambar, link dan kalimatnya sesuai kebutuhan.

<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2009/02/kampanye-damai-pemilu-indonesia-2009.html'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam kegiatan promosi blog serta bagaimana etika promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak saya gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Jadi segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAZOtqQqlOIA9_DrdWArT8u0ZeOftdfLxfn9Hg4Amly6U4m-EmBEH0K1yiDo9XqnUCBBnNjvN2P_OvRjF5HeeLADYr5wQA_DIaO0ag5w4xeBjeOQipFdJou-4xZmFRy018rED8Nk3ZzNH/s400/OOMEBOOK.gif'/>
</div>

Silahkan anda edit bagian kode di atas

4. Untuk mengatur letak text, gambar dan link bisa rekan coba otak-atik sendiri pada kode CSS, terus terang setiap template tentu berbeda ukurannya, jadi saya sendiripun gak tau harus gimana menjelaskan cara mengaturnya.

5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)

Selamat mencoba, dan jangan pernah menyrah sebelum anda mencoba.

ahhaahh...

semoga bermanfaat.

Baca juga yang ini