- 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
#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/AVvXsEgAE3nVucNxh5pbswYWIh-2P0JShESydLO3feGak10tLKHdtywcNzA-bzzQ70StToK_7m6BN4JeQg24A5XV-QR2a67oXh0fvcvvXQBlSjreYcdUdrpuTaYr6Gsw8LJzQveCEJynlVap_Tk/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/AVvXsEipa9ZBaQJQi0eQblCVRs2Ai7nUTs8TRkliTiNG-oWZY7CoCLuY4dd6DgHt8bnDNysvrCp_G_0wNQa3ekgSxfWXIBz8nXm7tG1HvpPT3UOxVxVkXWPWJwkbT__qEf1x7i8lhI_KLRKFmbA/s1600/prev-1.png) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iJeBAXKLxX_NeHsO5vs39WZC1qDy6pQg0-1HTg8WCFiEPERl9Xo87mxn9oi3uf0ZVNAbwmqx2y74FrDlB5C15r2ytCRAydlycYHEDw0bbqUQLNC8Qo5TCm8mr_-fHsZ6CzpnMGChF8Y/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 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
<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