Membuat Slide Show
By Muhammad Fathoni
Kamis, 23 Agustus 2012
0 comments
Anda yang suka surfing di dunia maya mungkin pernah melihat salah satu tampilan slide seperti di blog ini, Menarik bukan?
Sebenarnya membuat slide show tidaklah rumit,andapun dapat memasangnya pada blog kesayangan anda.
sehingga dengan tambah menariknya tampilan blog anda, InsyaAllah pengunjung akan banyak yang datang bahkan berlama-lama melihat isi dari blog anda.
Siap untuk memasangnya?
Yuk... mari kita mulai eksekusi.
Pertama:
Seperti biasa masuklah dulu ke Blogger dengan akun anda, lalu masuk ke menu Tata Letak/ Layout diteruskanmasukke menu Edit HTML.
Kedua:
Beri tanda centang pada kotak "expand widgets templates"
Jangan lupa bila perlu klik download template lengkap kalo kita ga ingin kehilangan tamplatekesayangan kita.
Ketiga:
Cari kode ]]></b:skin> (biar mudah nyarinya pake Ctrl+F aja, biar cepet.)
Kalo sudah ketemu copy paste kode berikut tepat diatas kode tadi.
#slider {
background:url(http://4.bp.blogspot.com/_-0cW9yWD5GY/StDYjY0IFSI/AAAAAAAABC0/7dlB98NQLjw/s1600/Slide%2BBG%2B960.png); /* Bacground Slide Show */
width: 960px; /* Ukuran Lebar Slide Show */
height: 220px; /* Ukuran Tinggi Slide Show */
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 10px 0px;
width: 940px; /* Ukuran Lebar Tampilan dalam Slide Show */
float: left;
position: relative;
height:200px; /* Ukuran Tinggi Tampilan dalam Slide Show */
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif; /* Jenis Teks untuk judul Posting */
font-size: 20px; /* Ukuran Teks untuk judul Posting */
color: #fffc09; /* Warna Teks untuk judul Posting */
padding:0px 10px 0px 10px;
margin:0px 0px;
width:580px; /* Ukuran Lebar ruangan untuk judul Posting */
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fffc09;
background-color: transparent;
}
.slide h2 a:hover {
color: #fffc09;
background-color: transparent;
}
span.slmet {
color: #ee0909; /* Warna Teks untuk nama Author */
font-size: 10px; /* UkuranTeks untuk nama Author */
font-family:Tahoma, georgia, Helvetica, Sans-Serif; /* Jenis Teks untuk nama Author */
line-height: 20px;
width: 400px; /* Ukuran Lebar ruangan Teks untuk nama Author */
padding:0px 40px 0px 40px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #fff; /* Warna Teks untuk Isi postingan */
font-size: 12px; /* Ukuran Teks untuk Isi postingan */
font-family:georgia, Helvetica, Sans-Serif; /* Jenis Teks untuk Isi postingan */
text-align: justify;
line-height: 20px;
width: 580px; /* Lebar ruangan Teks untuk Isi postingan */
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 10px;
width: 250px; /* Ukuran Lebar Thumbnail Gambar postingan */
width: 188px; /* Ukuran Tinggi Thumbnail Gambar postingan */
left: 620px; /* Jarak untuk posisi Thumbnail Gambar postingan dengan sisi kiri blog*/
background:#000;
padding:0px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
font-weight: bold;
top: 90px; /* Jarak untuk posisi tulisan Stop/Start dengan sisi atas blog*/
right: 45px; /* Jarak untuk posisi tulisan Stop/Start dengan sisi kanan blog*/
color: #fff;
padding: 3px 8px;
font-size: 12px;
text-transform: uppercase;
z-index: 1000;
}
Keempat:
Cari lagi Kode ]]></b:skin>
Lalu copy paste kode berikut dan letakkan dibawah kode ]]></b:skin>
<script src='http://www.templatesimages.com/images/ZinmagPrimus/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://www.templatesimages.com/images/ZinmagPrimus/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>
Kelima:
Agar slide show tersebut berada dibawah header maka, anda musti menaruh kode warna biru ini, (Copy Paste aza ya.) Letakkan kode tersebut di bawah kode <div id='header-wrapper'>
Biasanya tampilannya seperti ini(jadinya seperti berikut)
<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>
<div style='clear:both;'/>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>
<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>
<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class='clear'/>
Keenam:
Klik simpan dan lihat hasilnya.
Keterangan :
- Silahkan mengganti Background Slide show dengan karya anda sendiri
- Angka-angka yang berwana orange, silahkan anda ubah sesuaikan dengan template anda.
- Jika tidak sesuai dengan ukuran template anda, silahkan ubah sesuaikan dengan ukuran template anda, silahkan anda ganti dengan ukuran 960px.
- Bila ukuran lebar template anda lebih atau kurang dari 960px, maka anda harus menambah atau mengurangi ukuran gambar backgroundnya.
- Sebaiknya semua ukuran yang lebih dari 350px pada kode CSS di atas anda tambah atau kurangi sesuai perbedaan antara ukuran lebar template anda dengan ukuran 960px. misalnya lebar template anda 1000px, maka semuanya ditambah 40px.
- Silahkan anda ganti tulisa-tulisan petunjuk berwarna hijau diatas dengan:
isi postingan, Link Postingan, nama Author + Tanggal, dan Link Gambar yang ingin anda tampilkan.
Semoga berhasil dan jangan lupa komentarnya.
Sumber: http://shareall4free.blogspot.com & http://qirabablog.blogspot.com/2010/08/membuat-slide-show.html
Previous Entries
