Cara Membuat Banner Slideshow Di Blogger

Slideshow merupakan kombinasi beberapa gambar yang bergerak dan berganti (pengertian ngawur hehe). Banner slideshow ini sangat penting dalam toko online. Selain untuk mempercantik, ini juga berfungsi untuk menaruh info kalau ada promo di toko kita. Kemarin banyak juga yang request tentang Cara Membuat Banner Slideshow Di Blogger . Kali ini kita akan mencoba membuatnya, tapi silahkan simak baik-baik karena ini langsung menggunakan kode untuk membuatnya.

Klik Untuk Memperbesar Gambar

Sebelum kita memulai membuat banner.Kita harus upload gambar banner kita ke online terlebih dahulu. Untuk kali ini kita manfaatkan blogspot saja. Silahkan masuk di menu postingan dan klik Entri Baru.

Setelah menuju ke halaman seperti diatas silahkan klik logo image untuk melakukan upload gambar kita. Kemudian masukkan semua gambar yang ingin dijadikan slider.

Tunggu proses upload gambar sampai selesai. Jika sudah pilih semua gambar dan klik tombol Add Selected.  Kemudian ubah semua gambar menjadi ukuran Original Size

Selanjutnya kita buka notepad untuk mempermudah dalam mencatat link gambar kita. Karena nanti kita membutuhkan link gambarnya. Untuk mendapatkan linknya silahkan masuk ke tab HTML dan perhatikan bagian src , jika kita memasukkan 3 gambar harusnya ada 3 src.

Perhatikan , yang perlu kita copy dibagian ini adalah teks yang diapit oleh src="..." (teks yang saya blok) lebih detailnya silahkan lihat gambar dibawah ini . Agar lebih rapi copy pastenya , silahkan copas link secara satu persatu dan dipisahkan dengan Enter.

Jika sudah silahkan paste pada notepad maka hasilnya kita akan memperoleh link gambar seperti dibawah ini. Jika gambar ada 3 otomatis kita peroleh 3 link.

Biarkan notepad tersebut terbuka, anda boleh save ataupun tidak. Karena nanti kita hanya butuh copy link tersebut saja. Kembali pada halaman postingan blogger. Silahkan beri judul Media. Kemudian kita klik tutup pada bagian postingan (jangan di publikasikan). 

Jika suatu saat anda menginginkan  upload gambar slider lagi , anda dapat menguploadnya di halaman ini dengan klik menu Draft lalu klik Edit pada postingan Media dan upload gambar dengan metode yang sama seperti langkah sebelumnya.

Kita akan mulai masuk ke tahap membuat slidernya. Disini saya sudah menyediakan 2 kelompok kode yang pertama adalah kode pertama (CSS & Javascript) dan yang kedua adalah kode bannernya (HTML). Berikut adalah kode-kode yang akan kita gunakan nanti.

1.Kode Pertama

<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:100%;
height:150px;
overflow:hidden;
position:relative;
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:100%;
height:150px;
border:none;
}
#slideshow-caption {
width:100%;
height:60px;
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;
}
@media (min-width: 1200px) {
ul.slideshow {
list-style:none;
width:100%;
height:400px;
overflow:hidden;
position:relative;
margin-top:50px;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:10;
}
ul img {
width:100%;
height:400px;
border:none;
}
#slideshow-caption {
width:100%;
height:60px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:10;
}
#slideshow-caption .slideshow-caption-container {
padding:10px;
z-index:20;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
}
</style>

2.Kode Kedua

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='clear'/>
<ul class="slideshow">
<li><a href="#"><img src="urldisini" title="Judul" alt="Deskripsi" /></a></li>

<li><a href="#"><img src="urldisini" title="Judul" alt="Deskripsi" /></a></li>

<li><a href="#"><img src="urldisini" title="Judul" alt="Deskripsi" /></a></li>
</ul>
</b:if>

Selanjutnya silahkan anda perhatikan kode kedua. Yang perlu anda ubah disini adalah pada bagian urldisini, judul, dan deskripsi. Silahkan anda ubah urldisini sesuai dengan link url gambar yang anda punya di notepad. Sesuaikan judul slideshow (pada bagian title) dan deskripsinya (pada bagian alt) juga. Misal judul slideshownya promo merdeka dengan deskripsi kaos spesial diskon 50%. Contoh yang sudah saya ubah dapat dilihat pada gambar dibawah ini. Sesuaikan punya anda sendiri.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='clear'/>
<ul class="slideshow">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54wgBlNnTcvgBCbKCz3FwaIZQjeQP68HKa1dkLLubxGhF9jqL_Z844gXmdt30C7QIY9_wjDZzWmXW0rOXTD0OOK9kNM8-Z10nKqS4nYudvMRII3CshI0qbA0Tug6QM5bCyWIncxBgK6g/s1600/a1.jpg" title="Promo Meriah" alt="Diskon 50% untuk semua kaos" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDgh0oktLIlm6Ik9dzLbgwCpt-G7_tK3d6Zii8EUbWk_wJ90FFEdcc0fwiINt9c3iu2ChO7JAFhaTRfc4xa-OTck759AFsRmDY8QxK6JYhf499Ch_aZumSPM48fvcmGU-IBdxPjvOldfw/s1600/banner1b.jpg" title="Kaos Spesial" alt="Kaos khusus member newbie tech" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAJSxL7eAmVzL_H5JQoJHiGp7ObU6BGTTqciqsq55R34nJ-5Ney3L40SCv2FOTsp6MrCpe1wkH1ZsaDbvWNk_zUjf6-gbGY9feA5OcSvM2xEobH8UOl73oB1M5tIdXp_NaEaQwQ_g6sU/s1600/TshirtStore_DesktopMenBanner_1275x390_desktop_1460483899373.jpg" title="Kaos Newbie Elegan" alt="Kaos dengan bahan cotton combed terbaru" /></a></li>
</ul>
</b:if>

Kemudian kita masuk ke dashboard blogger kita lalu pilih menu Tema dan Edit HTML.

Setelah itu akan terbuka tampilan kode-kode dari tema kita. Kemudian pastikan kursor berada pada kotak kode (dapat dilakukan dengan klik terserah pada area kode) lalu tekan Ctrl+F ketikkan kata kunci </head> , lalu paste Kode Pertama diatas kata </head>.

Hasil setelah kode dipaste dapat dilihat pada gambar dibawah ini.

Selanjutnya kita lakukan hal sama. Kita tekan Ctrl+F kali ini kita ketikkan kata kunci <div id='wrapper , kemudian kita copy paste kode kedua yang telah kita edit dibawah <div id='wrapper... Detailnya dapat dilihat pada gambar dibawah ini.

Untuk kode yang telah dipaste dapat dilihat pada gambar dibawah ini.

Kemudian silahkan klik tombol Simpan Tema untuk menyimpannya dan cek hasil dari web anda.
Untuk hasil dari saya kawan-kawan dapat melihatnya di link berikut ini http://tokonewbieku.blogspot.com

Semoga tutorial Cara Membuat Banner Slideshow Di Blogger dapat membantu. Silahkan dipraktekkan dan semoga bermanfaat...
Ditunggu komentarnya.. Salam Transformasi...