Slider gambar pada header blog

Slider gambar pada header blog

 Slider gambar pada header blog juga memasang slider dan gambar namun masih bingung bagaimana cara melakukannya, anda bisa mengikuti tutorial desain blog di bawah ini;

Langkah 1. Masuk ke blog Anda

Langkah 2. Buka pengaturan Template dan pilih Edit HTML

Langkah 3. Temukan kode ]]></b:skin>

Langkah 4. Copy kode berikut dan paste di atas kode ]]></b:skin>

.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;
}

Step 5. Kemudian cari kode </head>

Step 6. Copy kode berikut dan pastekan diatas kode </head>

[removed]
$(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(); }, 4000); };

rotateSwitch(); $(“.image_reel a, .easytitledes a”).hover(function() {
clearInterval(play); }, function() { rotateSwitch();
});
$(“.paging a”).click(function() { $active = $(this);
clearInterval(play); rotate(); rotateSwitch(); return false;
});
});
[removed]

Step 7. Jangan lupa klik Save Tamplate

Oke.. Perjalanan belum sampai, masih ada beberapa langkah lagi untuk bisa menampilkan gambar pada blog kita… ayo kita mulai lagi…

Step 8. Masuk ke pengaturan Tata Letak

Step 9. Klik Add Widget dan pilih Javascript/HTML

Step 10. Copy kode berikut ini dan pastekan pada kolom Javascript/HTML

<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>

Akhirnya selesai juga….
Eh jangan lupa buat mengganti kode merah Url gambar sesuai dengan yang kalian inginkan, jika kalian ingin menambahkan link pada gambar disilahkan isi pada kode yang berwarna biru “#”.
Kalian juga bisa menambahkan judul dan deskripsi pada gambar slidernya….

Cukup sekian bahasan kita kali ini, semoga bermanfaat untuk kalian semua, jika ada yang ingin ditanyakan atau punya solusi lain bisa kita sharing bareng bareng pada komentar di bawah ini….