Contoh Tampilan
Cara Penerapan
1.Masuk ke Blogger
2.Pilih Template kemudian pilih Edit HTML
2.Pilih Template kemudian pilih Edit HTML
Maka akan keluar tampilan semua Code HTML
3.Pilih Lanjutkan----> Centang Expand Template Widget
4.Tekan CTRL+F untuk membuka menu Search
cari code </head>
5. Taruh code tambahan di atasnya </head>
Berikut ini adalah code yang perlu anda tambahkan
<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});
jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIGLz1XcrEV9d6w-H9-THGMz-mEFtd8HkZqyHA21zgUJRURmfxvzpw44nvd2cMwEhEpz2kwo7I-L7aMV513z165tnUuHdLe2SqwH1tbLG8ttxNf6wQ-hir5cLT-0fYiv_-lhKJzpoZ8l-/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIGLz1XcrEV9d6w-H9-THGMz-mEFtd8HkZqyHA21zgUJRURmfxvzpw44nvd2cMwEhEpz2kwo7I-L7aMV513z165tnUuHdLe2SqwH1tbLG8ttxNf6wQ-hir5cLT-0fYiv_-lhKJzpoZ8l-/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>
6. Save Templatenya
7.Kemudian masuk ke layout dan pilih page elements
Klik tulisan 'Add a Gadget'.
Pilih HTML dan masukan code ini di dalamnya
<div id='news-slider'> <ul class='jcarousel-skin-tango' id='mycarousel'> <li><a href='tulis url gambar1 disini'><img src='Tulis url gambar1 disini'/></a></li> <li><a href='tulis url gambar2 disini'><img src='tulis url gambar2 disini'/></a></li> <li><a href='tulis url gambar3 disini'><img src='tulis url gambar3 disini'/></a></li> <li><a href='tulis url gambar4 disini'><img src='tulis url gambar4 disini'/></a></li> <li><a href='tulis url gambar5 disini'><img src='tulis url gambar5 disini'/></a></li> </ul> </div>
Keterangan
Pada kata yang bergaris tebal di atas silahkan isi url gambarnya
8.Enjoyyyyy............
