Cara Membuat Slideshow Simpel Di Blog - ShareItCare Blog

Oke, kesempatan kali ini saya akan membuat tutorial untuk menambahkan fitur slideshow pada blog kalian - Tanpa lelet atau lemot loadingnya. :)

Langsung aja dehh, cekidot!! :v

Slideshow ini menggunakan JavaScript ya temen-temen, berikut adalah langkah-langkahnya :)

1. Masukan kode berikut diatas ]]></b:skin> atau </style> di bagian head template.

.easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; } .easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 350px; } .paging { background: none; position: absolute; bottom: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging a.active { background: #15E3FF; border: 1px solid #15E3FF; } .paging a:hover { } .easytitledes { width:70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; } .easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#29FF00 } .easytitledes p { color: #fff; font: 12px Arial; }

2. Masih di bagian head template, masukan kode Jquery berikut diatas </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

3. Masih di bagian head template, masukan kode JavaScript berikut diatas </head>

<script type="text/javascript"> /*<![CDATA[*/$(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 8000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); /*]]>*/</script>

Selanjutnya untuk memunculkan gambar kalian dan publish pada homepage blog kalian seperti ini caranya, masukan kode berikut di suatu bagian dalam HTML body, contoh setelah/dibawah <div class="main-wrapper"> atau <div id="main-wrapper"> atau baris kode yang sejenis/mirip.

Note: Karena struktur setiap template blog berbeda-beda maka cari lah kode seperti di atas yang  paling mirip seperti template bawaan dari blog yang saya pakai saat ini adalah <div class='main-outer'>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='easyslider'> <div class='image_reel'> <a href="#"><img src="...image1.jpg" /></a> <a href="#"><img src="...image2.jpg" /></a> <a href="#"><img src="...image3.jpg" /></a> <a href="#"><img src="...image4.jpg" /></a> <a href="#"><img src="...image5.jpg" /></a> </div> <div class='descriptionslider'> <div class="easytitledes"> <a href='...post-link1.html'>Post-Title 1</a><p> Description / Caption 1</p> </div> <div class="easytitledes"> <a href='...post-link2.html'>Post-Title 2</a><p> Description / Caption 2</p> </div> <div class="easytitledes"> <a href='...post-link3.html'>Post-Title 3</a><p> Description / Caption 3</p> </div> <div class="easytitledes"> <a href='...post-link4.html'>Post-Title 4</a><p> Description / Caption 4</p> </div> <div class="easytitledes"> <a href='...post-link5.html'>Post-Title 5</a><p> Description / Caption 5</p> </div> </div> <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/> </div> </div> </b:if>

Baiklah, jika sudah selesai sampai sini tinggal kalian masukkan gambar satu per satu beserta linknya dari post blog yang sudah kalian publish.. ^-^

Link gambar terletak pada <img src="...image1.jpg" /></a> dan seterusnya.

Untuk link post gambar pada blog kalian, judulnya, beserta deskripsi <a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p> dan seterusnya.

Gampang kok nih, apalagi ukuran file javanya cuma 2KB kok.. gak perlu takut lemott :v

Jika mau untuk diedit silakan aja bagi yang pinter CSS nih, hehee..

Tapi jangan lupa share juga ya ntar ke kolom komentar, okke!?