Penampilan baru, template baru, menu baru, program baru, dan widget baru J Yup, blog RBI telah bertransformasi dengan perubahan yang baru. Tapi, perubahan-perubahan itu tentu saja tidak kami simpan sendiri, akan kami bagikan kepada seluruh sobat RBI tentunya
Nah, kali ini kami akan memberikan ilmu lainnya dalam bidang blog, yaitu tentang slideshow. Slideshow telah lama digunakan oleh blogger maupun para webmaster untuk mempercantik tampilan blog atau web mereka. Fungsi dari slideshow ini sangat beragam, ada yang hanya sebagai pernak-pernik blog, ada yang sebagai jendela berita yang sedan headline, ada yang sebagai media promosi produknya, ada juga yang meletakkan foto-foto koleksi pribadinya dan menjadikan slideshow sebagai galeri foto.
Berikut ini adalah salah satu langkah untuk menambahkan widget slideshow ke dalam blog Anda. Oh ya, kali ini kita tetap bermain dengan script HTML/JavaScript ya, tapi tenang, tidak akan memusingkan J Baiklah, langsung menuju ke langkah pertama :
1. Log in ke blog Anda di alamat www.blogspot.com dengan menggunakan username dan password Anda masing-masing.
2. Anda akan langsung menuju ke halaman DASBOR, kemudian klik menu RANCANGAN, pilih menu EDIT HTML.
3. Seperti biasa, sebelum bermain dengan script HTML/JavaScript yang ada pada blog, sebaiknya Anda melakukan tindakan backup lebih dulu dengan template blog Anda. Hal ini dilakukan sebagai tindakan pencegahan bila terdapat error, sehingga Anda masih dapat mengembalikan template blog ke kondisi semula.
4. Untuk melakukan tindakan backup template, Anda centang kotak kecil yang bertuliskan EXPAND TEMPLATE WIDGET seperti yang ditunjukkan pada poin nomor 1 gambar di bawah ini, kemudian klik menu DOWNLOAD TEMPLATE LENGKAP seperti yang ditunjukkan pada poin nomor 2.
5. Setelah template selesai di download, itu artinya Anda telah memiliki file backup template blog Anda. Simpan di tempat yang aman dan beri nama sesuai dengan yang Anda inginkan.
6. Carilah kode </head> dengan cara menekan tombol CRTL dan tombol huruf F secara bersamaan, tindakan ini sering disebut dengan “find” yang artinya mencari, yaitu mencari kata tertentu dalam sebuah halaman yang memiliki beragam tulisan.
7. Setelah menemukan dimana kode tersebut, letakkan posisi kursor di atas </head>, seperti yang ditunjukkan pada gambar di bawah ini :
8. Copy kode berikut :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>
<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>
9. Kemudian, simpanlah perubahan tersebut dengan menekan tombol SIMPAN TEMPLATE. Akan tampil kalimat “Perubahan Anda Telah Disimpan” , itu artinya Anda telah sukses dan berhasil menambahkan kode tersebut tanpa ada kesalahan.
10. Kemudian, kembali ke halaman ELEMEN LAMAN, tambahkan widget HTML/JavaScript dan letakkan di posisi yang Anda inginkan. Biasanya widget slideshow menempati posisi di atas semua widget dan dekat dengan header.
11. Copy dan paste-kan kode ini :
<center>
<ul class="slideshow">
<li><a href="http://www.rumahblogindonesia.co.cc/"><img src="ALAMAT URL GAMBAR1" title="JUDUL SLIDE1" alt="KETERANGAN GAMBAR1"/></a></li>
<li><a href="http://www.rumahblogindonesia.co.cc/"><img src="ALAMAT URL GAMBAR2" title="JUDUL SLIDE2" alt="KETERANGAN GAMBAR2"/></a></li>
//CONTOH KODE SALAH SATU SLIDE DI BLOG RBI//
<li><a href="http://www.rumahblogindonesia.co.cc/2012/03/program-shareurblog.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHajZ3RVZ1U0Z8QI0oWU-MDRMMYIUCZ_AKJ4sud_PqsJs1mY585uY3ZXpGYMJwKgvTOtipY3UgqBnJGwvvDjpiqpcASMPhHRPgjY-mHCyfGUwj6El5kpA9KBWZ9oFeMgytInH53KHZc3Et/s1600/ShareURBlog.jpg" title="Program Share Your Blog" alt="Program yang bertujuan untuk memperkenalkan blog kamu kepada khalayak lewat jejaring socmed"/></a></li>
</ul>
</center>
12. Ada beberapa kode yang harus Anda ganti agar tampilan slideshow sesuai dengan yang Anda inginkan, yaitu :
a. Pada kode ><a href="http://www.rumahblogindonesia.co.cc/"> silahkan Anda ganti tulisan http://www.rumahblogindonesia.co.cc/ menjadi alamat url yang Anda inginkan, misalnya alamat url salah sati artikel Anda yang ada di blog, atau bisa mengarah ke alamat url lain yang Anda inginkan.
b. Pada kode <img src="ALAMAT URL GAMBAR1" title="JUDUL SLIDE1" alt="KETERANGAN GAMBAR1"/> silahkan Anda ganti tulisan ALAMAT URL GAMBAR1 menjadi alamat url gambar yang telah Anda persiapkan sebelumnya. Kemudian pada tulisan JUDUL SLIDE1 ubahlah menjadi judul dari gambar yang akan Anda tampilkan, dan pada tulisan KETERANGAN GAMBAR1 ubah juga sesuai dengan keterangan dari gambar tersebut, bisa juga berisi deskripsi singkat tentang artikel yang berkaitan dengan gambar.
c. Begitulah seterusnya dengan kode berikutnya.
13. Pada kode di atas, terdapat sebuah contoh yang berisi kode salah satu artikel pada blog RBI. Kode ini
<li><a href="http://www.rumahblogindonesia.co.cc/2012/03/program-shareurblog.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHajZ3RVZ1U0Z8QI0oWU-MDRMMYIUCZ_AKJ4sud_PqsJs1mY585uY3ZXpGYMJwKgvTOtipY3UgqBnJGwvvDjpiqpcASMPhHRPgjY-mHCyfGUwj6El5kpA9KBWZ9oFeMgytInH53KHZc3Et/s1600/ShareURBlog.jpg" title="Program Share Your Blog" alt="Program yang bertujuan untuk memperkenalkan blog kamu kepada khalayak lewat jejaring socmed"/></a></li>
Akan menampilkan gambar slideshow seperti ini :
14. Anda dapat membuat beberapa slide sekaligus dengan cara melalukan copy-paste kode
<li><a href="http://www.rumahblogindonesia.co.cc/"><img src="ALAMAT URL GAMBAR" title="JUDUL SLIDE" alt="KETERANGAN GAMBAR"/></a></li>
Dan disesuaikan dengan kebutuhan blog Anda.
15. Setelah selesai menambahkan kode-kode tersebut, tekanlah tombol SIMPAN, kemudian tekan kembali tombol SIMPAN yang terletak di sudut kanan atas, dan lihatlah perubahan yang terjadi pada blog Anda.
16. Bila Anda ingin melihat contoh slideshow yang ada pada blog RBI, silahkan menuju ke link ini ya :)
0 komentar:
Posting Komentar