Slider atau yang juga sering disebut
slideshow adalah informasi yang berjalan atau sliding di blog atau website.
Slider pada dasarnya untuk menampilkan informasi utama yang tertuang dalam
sebuah konten blog.
var imageWidth = $(".easyslider").width();
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$(".easytitledes").stop(true,true).slideUp('slow');
rotateSwitch = function(){
play = setInterval(function(){
if ( $active.length === 0) {
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
Namun dalam memasang konten kita
tidak bisa asal-asalan karna itu akan mengurangi estetika blog tersebut oleh
karena itu perlu kita cermati dan memilih apa yang akan kita pasang pada slider
tersebut, Dan bila kita udah siap memilih isi untuk slider tersebut saatnya
untuk memasang slider di blog/web kita.
* Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih
Template, Edit HTML. Cari kode ]]></b:skin> atau </style> di bagian head template (gunakan Ctrl F) untuk mencarinya lalu
paste script berikut tepat diatasnya.
.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;
}
* Setelah memasukan kode di atas selanjutnya
masukan kode Jquery berikut ini tepat diatas </head> Namun jika template
Anda sudah pernah memasang Jquery dalam versi yang lain, baik itu versi lama,
lupakan saja langkah ini. Langsung ke langkah selanjutnya
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
type='text/javascript'/>
* Lalu kode JavaScript berikut dibawahnya
<script type="text/javascript">
$(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;
});
});
</script>
* Ada dua cara untuk pemasangan body sled yang
pertama melalui edit HTML dan yang ke dua kita tambah melalui gatget.
Untuk melalui HTML body blog Anda,
copas kode berikut di bawah atau setelah kode <div
class="main-wrapper" > , <div class='blog-posts hfeed'> atau
<div id="main-wrapper" > atau baris kode yang sejenis atau
mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda
Namun cara ini bisa di bilang ribet dan
tidak efisien dan saya lebih merekomen untuk cara yang ke dua yaitu dengan
cara tambah gatget. Selain lebih mudah kita pun bebas akan meletakanya di mana.
Caranya masuk ke dasboard blogspot Anda, lalu pilih tata
letak, tambah gatget pilih HTML/Javascript terus copas kode di bawah ini.
<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>
Catatan:
Kode berwarna merah adalah untuk link image atau
gambar,
Kuning untuk link Url posting atau artikel,
Wanah hijau untuk Title atau Judul, dan
Ungu untuk deskripsi.
Semuanya dimasukan satu persatu ke
dalam baris kode HTML. Lalu untuk link foto kamu bisa upload foto kamu ke https://postimage.io bila kita belum terdaftar
sebaiknya daftar dulu dengan pilih singup di pojok kanan atas.
Sekian cara Cara Membuat Slid/slider/slidershow Untuk Blog dan bila
ada yang masih kurang jelas atau faham boleh komen di bawa untuk
sharing bersama. Trimakasih
0 Comments
