Tutorial : Dot Circle Slider



Assalamualaikum semua . Baiklah hari ini seperti yang dijanjikan , Yura nak buat tutorial .Tutorial pada hari ini lebih tertumpu kepada cara hendak menjimatkan ruang untuk penggunaan gambar lebih dari satu. Boleh lihat seperti dibawah.

Preview SINI

Namanya "DOT CIRCLE SLIDER". Kenapa? Ok cuba hover mouse pada DOT dan slide ke bawah. Wahh ianya bergerak!!~~

Baiklah. Mari mulakan tutorial !

  • Dashboard > Template > Edit Html >  Click icon yang mcm ►  > Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
     </head>
  • Copy code di bawah ini, dan PASTE kan DI ATAS </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js'/>
  • Dashboard > Layout > Edit Html >  Add a Gadget > HTML/Javascript > Masukkan code di bawah ini ye.
<style>
  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(http://4.bp.blogspot.com/-Ot8KEdqWA58/Um59McoG1bI/AAAAAAAAEgY/ZzK7Qidizrg/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(http://1.bp.blogspot.com/-SY8PG9E-_ZQ/Um59McKv1vI/AAAAAAAAEgc/tEDJm6soGfE/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(http://3.bp.blogspot.com/-O0kN8rvZGSE/Um59MRdOpHI/AAAAAAAAEgQ/XCiipR_fCKM/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
 #rotatescroll .viewport ul.overview li img {
   width: 100%;
   min-height: 260px;
   margin-top: 20px;
   padding:0;
   border:0;
 }
</style>
 <div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({
interval: true,
snaptodots: true
});
});
</script>
  • Sekarang gantikan imageURL dengan URL gambar anda pula.
  • Kemudian SAVE ! 
Macam mana? Menjadi tak? Kalau jadi, jangan lupa komen. Boleh Yura terjah blog korang ye.

Credit to helpblogger 

No comments

Awak mehla komen? satu komen pun jadilah :')