Tips n' Trik - Menampilkan Slide Show di Blog

Semakin banyak pilihan akan lebih mudah bagi anda untuk menampilkan Slide Show dengan menggunakan file Jquery java script. Selain dapat membuat tampilan blog lebih cantik, slide show juga berfungsi untuk menampilkan postingan terbaru, promosi dari suatu produk, atau berupa informasi penting lainnya dari blog yang anda kelola mupun blog lain yang memang patut ditampilan pada slide show.

Demo :
perhatikan gambar dibawah ini :






CARA MEMBUATNYA :

LANGKAH PERTAMA

1. Masuk ke Blogger
2. Pilih Rancangan bagian Edit HTML
3. Copy kode dibawah ini kemudian paste tepat diatas ]]></b:skin>
   
   

   #featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlSr0ZiI/AAAAAAAACSg/e2qwCQ5iGlA/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlQpwAFI/AAAAAAAACSk/ElAPHzwEvIQ/bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
   


Keterangan :
1. Slide show ini disetting pada lebar yang berwarna kuning (width:400px;) dan tinggi ( height:250px;) .Silahkan anda sesuaikan ukurannya dengan tempat menaruh slide show ini. Seandainya takut tampilannya idak keruan, lebar dan tinggi tidak perlu dirubah.
2. Bacckground berupa image (warna merah) adalah simpanan EPG Studio. Dapat anda ganti dengan milik anda sendiri.


4. Selanjutnya copy kode dibawah ini kemudian paste tepat diatas kode </head>
   
   

   <script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-ui.min.js" ></script>
<script>$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});</script>
   


Keterangan :

1. Kedua file js (warna kuning) yang digunakan diatas adalah file js simpanan EPG Studio. Dapat anda ganti dengan file js simpanan anda sendiri.
2. Angka 5000 merupakan pengaturan kecepatan pergantian gambar slide show, semakin kecil angkanya semakin cepat pertukaran gambarnya. Silakan anda ganti dengan kecepatan yang anda inginkan.
5. Setelah selesai mengedit kode-kode diatas, klik tombol Simpan Template.

LANGKAH KEDUA

1. Masuk ke Elemen Halaman
2. Klik Tambah Gadget
3. Pilih HTML Javascript
4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
   
   

   <div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="alamat gambar 1" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="alamat gambar 2" width="50px" height="50px"/><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="alamat gambar 3" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="alamat gambar 4" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
</ul>
<!-- Konten1-->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="alamat gambar 1" />
<div class="info" >
<h2><a href="#" >Judul postingan 1</a></h2>
<p>Ringkasan uraian postingan dari judul postingan 1.......<a href="#" >Selengkapnya</a></p>
</div>
</div>
<!-- Konten 2 -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="alamat gambar 2" />
<div class="info" >
<h2><a href="#" >Judul postingan 2</a></h2>
<p>Ringkasan uraian postingan dari judul postingan 2.......<a href="#" >Selengkapnya</a></p>
</div>
</div>
<!-- Konten 3 -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="alamat gambar 3" />
<div class="info" >
<h2><a href="#" >Judul postingan 3</a></h2>
<p>Ringkasan uraian postingan dari judul postingan 3.......<a href="#" >Selengkapnya</a></p>
</div>
</div>
<!-- Konten 4 -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="alamat gambar 4" />
<div class="info" >
<h2><a href="#" >Judul postingan 4</a></h2>
<p>Ringkasan uraian postingan dari judul postingan 4.......<a href="#" >Selengkapnya</a></p>
</div>
</div>
</div>


Keterangan : Pada bagian ini harus dikerjakan dengan super teliti karena banyak yang harus anda edit.

1. pengeditan pertama anda lakukan pada bagian atas yaitu untuk tampilan slide show bagian kanan:# kode tersebut anda ganti dengan alamat /url yang ingin anda tuju jika pengunjung mengklik gambar tersebut.
2. Kedua yaitu mengganti alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang ditampilkan. Gambar ini tampilannya telah disetting dengan ukuran lebar 50px dan tinggi 50px.
3. Ketiga (terakhir) ganti kalimat Keterangan gambar anda tulis disini, hanya ringkasannya saja, dengan uraian singkat dari gambar yang ditampilkan.
4. Berikutnya pengeditan kode bagian bawah (terdapat 4 pengeditan.
5. Pertama, ganti kalimat url/alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang sama ketika anda mengedit alamat gambar di bagian atas.
6. Kedua, mengganti # dengan alamat link yang apabila judul diklik oleh pengunjung akan dibawa ke halaman yang dituju oleh link tersebut.
7. Ketiga, mengganti kalimat Judul postingan 1, 2, 3 dan 4 dengan judul yang ngin anda tampilkan.
8. Keempat (terakhir), ganti kalimat Ringkasan uraian postingan dari judul postingan ....... 1, 2, 3 dan 4 dengan uraian singkat tentang gambar dan judul yang ditampilkan.
9. Ganti kata Selengkapnya dengan kata yang anda sukali, misalnya read more.
10. Sekali lagi, dalam bagian ini anda melakukan pengeditan dengan teliti jika hasil yang diinginkan tercapai dengan baik.
11. Setelah selesai pengeditan, klik tombol Simpan
12. Lihat Slide Show pada blog anda

Kalau mau coba SlideShow versi lain silakan kunjungi epg-studio.blogspot.com

Selamat mencoba, semoga bermanfaat...!!!

Sumber !!