U
ntuk membuat Navigasi Slider Image Dengan Tombol dengan efek jquary merupakan navigasi dengan gambar slide yang merupakan navigasi yang cantik untuk di pasang untuk memperindah blog anda, nah bagi sahabat blogger yang tertarik untuk membuat Navigasi Slider Image Dengan Tombol dengan efek jquary anda cukup memgikuti cara seperti di bawah ini:
- Masuk Ke Blogger Seperti Biasa
- Lalu klik edit html centang expand template widget
- Cari kode ]]> dengan Control F
- Letakkan kode berikut ini di atas kode ]]> tadi
/* Slider image */
#containerSlider {
width:210px;
height:110px;
margin:0 40px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:210px;
height:110px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVC6KWDI/AAAAAAAACbI/PPeBfsVUs30/s800/prev.gif) no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVAwivSI/AAAAAAAACbM/rWvFhU-sWa0/s800/next.gif) no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:5px;
width:200px;
height:100px;
}
/*
Slideshow style rules.
*/
#contentSlide {
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWaHJALxZX7dUsMwJiVCq4B_dPTjQS_-0x-jj7Gww0L8E6StxfAD6OWUpkpdzZ_5xIxi3idfY47HmyI3vsjD_5Sg5HW1EcARHD8XjKk4mvGuDFjeOJSOWv88hHwCCxOS5zmP1tVl7Qw/s1600/project-3.png) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjSmacl-X_OKl68NYzDsRFZd-WYOs4jrMkbmwVTn5oAsuX9ZZXZww6ZJP2Yu7KvFztrs5Jjxgq9Na-YDnsUCx5MS8XmwTjfyovnfVE9c0Kehnxiie1mZKPvw4z5tqOJfR-5khAbiyXmg/s1600/prev-1.png) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh1NUOqUxtORvfmsVgQHJRBAf1nVhMLiTseA72C-j-CUKVmBwqxSWdaUZw-ThsbNLMVLSgrmbQoyAEi4C6K-K3IZToqElGJ_S7IKcjAVzo48iEYazS7bCv9fg6QX-xgK_gQCareNxxHQ/s1600/next-1.png) no-repeat 0 0;
}
.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}
- Lalu cari kode </head>
- Letakkan kode di bawah ini tepat di atas kode </head> yang tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>
- Nah sekarang coba cari class='titlewrapper'>
- Selanjutnya letakkan kode berikut ini di bawah kode class='titlewrapper'> yang tadi
<!-- Slideshow HTML -->
<div id='contentSlide'><div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<h2>
Judul</h2>
<p><a href='#'><img alt='
Deskripsi gambar' height='145' src='
Url gambar anda' width='215'/></a>
Berminat kan..? <A href="
Url Postingan">
Klik</A></p>
</div>
<div class='slide'>
<h2>
Judul</h2>
<p><a href='#'><img alt='
Deskripsi gambar' height='145' src='
url gambar anda' width='215'/></a>
Judul<A href="
Url Postingan anda">"
Klik</A></p>
</div>
</div>
</div></div>
<!-- END Slideshow -->
- Terakhir simpan atau klik pratinjau dulu untuk ng-check jadi apa kaga slidenya
- Selamat mencoba sobat
Keterangan
- Ganti url gambar anda,Judul dan Url Postingan anda
.jpg)
