Cara Membuat Slide dengan Smart Jquery

Kamis, Desember 15, 2011 | Diposting oleh yodicakep |

Blog yang cantik biassanya dambaan para blogger,karena dengan blog yang cantik tampilannya akan menarik perhatian pengunjung,walaupun ada sebagian besar menolaknya karena dilihat darisisi beban loading blog tersebut yang akan menjadi berat,tapi buat anda yang ingin membuat slide dengan jquery silahkan ikuti tips yang satu ini,tapi ingatharus tepatye penaruhan codenya agar work 100% yuk langsung ke TKP...monggo di jajal

Contoh Tampilan

Cara Penerapan

1.Masuk ke Blogger
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............

Pages

Cara Membuat Slide dengan Smart Jquery

Related Post:

2 komentar:

Posting Komentar