Cara Memasang Slider

Banyak sekali manfaat dari memasang Slider, salah satunya adalah akan membuat blog kita semakin lebih atraktif dan bergaya sehingga banyak respone dari pengunjung untuk tertarik membacanya lebih lanjut. Ngomong-ngomong sobat sekalian udah tau belum sih tentang slider yang saya maksud??? Untuk lebih jelasnya tentang slider, kita lihat demonya bersama, klik dibawah ini.

 

Nah sekarang sudah jelaskan tentang slider yang saya maksud? yuk langsung ja kita bahas Cara Membuat Slider:

1. Login ke Blogger
   
   
2. Masuk Tata Letak --> Edit HTML
   
   
3. Cari kode  ]]></b:skin> , dan letakkan kode dibawah ini di atas kode ]]></b:skin>
   
   
   

   #slider {
   background:url(http://img526.imageshack.us/img526/3091/slide3d.png);
   height: 254px;
   overflow: hidden;
   position: relative;
   margin: 5px 0;
   }
   
   #mover {
   width: auto;
   position:absolute;
   overflow:hidden;
   }
   
   .slide {
   padding: 20px 0px;
   width: 800px;
   float: left;
   position: relative;
   height:200px;
   }
   
   .slide h2 {
   font-family:georgia, Helvetica, Sans-Serif;
   font-size: 24px;
   color: #ac0000;
   padding:0px 0px 0px 30px;
   margin:0px 0px;
   width:500px;
   overflow:hidden;
   }
   
   .slide h2 a:link, .slide h2 a:visited {
   color:#fff;
   background-color: transparent;
   }
   
   .slide h2 a:hover {
   color: #ddd;
   background-color: transparent;
   }
   
   span.slmet {
   color: #ee0909;
   font-size: 10px;
   font-family:Tahoma, georgia, Helvetica, Sans-Serif;
   line-height: 20px;
   width: 500px;
   padding:0px 0px 0px 30px;
   margin:0px 0px;
   text-transform:uppercase;
   }
   .slide p {
   color: #999;
   font-size: 12px;
   font-family:georgia, Helvetica, Sans-Serif;
   line-height: 20px;
   width: 300px;
   padding:0px 0px 0px 30px;
   margin:0px 0px;
   }
   
   .slide img {
   position: absolute;
   top: 20px;
   left: 400px;
   background:#fff;
   padding:10px 10px;
   }
   
   #slider-stopper {
   position: absolute;
   font-family: Georgia, Helvetica, Sans-Serif;
   top: 113px;
   right: 30px;
   color: #AC0000;
   padding: 3px 8px;
   font-size: 14px;
   text-transform: uppercase;
   z-index: 1000;
   }

4. Kemudian letakan kode javascript dibawah ini dibawah kode ]]></b:skin>
   
   
   

   <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
   <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
   <script type="text/javascript"><!--//--><![CDATA[//><!--
   sfHover = function() {
   var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
   sfEls[i].onmouseover=function() {
   this.className+=" sfhover";
   }
   sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
   }
   }
   }
   if (window.attachEvent) window.attachEvent("onload", sfHover);
   //--><!]]></script>

5. Cari kode dibawah ini:
   
   
   

   <div id='header-wrapper'>
   ..........
   .........
   </b:section>

6. Kalu sudah ketemu kode diatas, letakkan kode dibaawah ini di bawahnya
   
   
   

   <!-- Casing -->
   <div id='casing'>
   <!-- Slider -->
   <div id='slider'>
   <div id='mover'>
   
   <div class='slide'>
   <span class='slmet'> Posted by Om Kempul </span>
   <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-daftar-dan-membuat-feedburnercom.html'>Pengen Nyoba Feedburner?</a></h2>
   <p>Rasa-rasanya da yang kurang kalau di Blog kita belum
   ada feedburner. Tanya kenapa? Karena banyak sekali
   keuntungan dari feedburner. Pengen nyoba?</p>
   <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UNe5LBVmzLYKnYG672qlNK2DxOm4vJQvBZGO-5hH5xOefl9eJVV7NADG6WjxsinJ5TZSBc1URBecbiBfiYRouE8wYRj8iCkKGQvtKLeyUZg53f92FkckvXRZ-LDu9ul6z6qCcTIQC5uh/s320/feedburner.png'/>
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Putry Rasya </span>
   <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-pasang-auto-read-more-terbaru.html'>New Read More
   </a></h2>
   <p>Masihkah Anda menggunakan read more versi jadul??? Sekarang ada
   Auto Read More yang lebih praktis dan mudah untuk digunakan.
   Penasaran???.</p>
   <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwMk3WUq2tF9f5-ih0B0-HnHV6oq3tDieXHe0zuSv76bSLESUSrnEPwiCBYhQLtl2tcnOLfEqMd1mKw6VHj_nM-8cIZJ7XnbOVNj26FHOSu90rqpxXJ518qALTdWBEUzgjzrc-XM9eyIi/s320/read+more.png'/>
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Om Kempul </span>
   <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
   <p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
   membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
   kami menyediakan panduan praktis membuat Banner..</p>
   <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
   </div>
   
   </div>
   <!-- /Mover -->
   </div>
   <!-- /Slider -->
   </div>
   <div class='clear'/>

7. Simpan, dan lihat hasilnya.

Peringatan :

• Jika gambar latarnya tidak sesuai dengan template, bisa diubah ukurannya lalu di upload di tempat yang sama dan masukkan URL nya didalam scriptnya.Contoh yang berwarna merah.
  
  
  

  #slider {
  background:url(http://img526.imageshack.us/img526/3091/slide3d.png);

• Untuk penempatan gambar jika tidak seperti yang kita inginkan, bisa kita edit dengan cara atur ukuran yang berwarna merah.
  
  
  

  .slide img {
  position: absolute;
  top: 20px;
  left: 400px;
  background:#fff;
  padding:10px 10px;
  }

• Jika ingin melakukan pengeditan pada tulisan STOP, bisa di edit pada script berikut yang berwarna merah.
  
  
  

  #slider-stopper {
  position: absolute;
  font-family: Georgia, Helvetica, Sans-Serif;
  top: 113px;
  right: 30px;
  color: #AC0000;

• Jika ingin melakukan pengeditan tulisan paragraf, (ingin memperpanjang ukuran tulisan atau memperpendek) edit script berikut yang berwarna merah.
  
  
  

  .slide p {
  color: #999;
  font-size: 12px;
  font-family:georgia, Helvetica, Sans-Serif;
  line-height: 20px;
  width: 300px;
  padding:0px 0px 0px 30px;
  margin:0px 0px;
  }

• Pengeditan pada isi.Edit yang berwarna merah
  
  
  

  <div class='slide'>
  <span class='slmet'> Posted by Om Kempul </span>
  <h2><a href='http://blogg-tutorial.blogspot.com/2009/08/cara-membuat-banner-di-blog.html'>Banner = Simbol</a></h2>
  <p>Banner juga merupakan simbol bagi Blog kita. Apakah Anda sudah
  membuat Banner untuk Blog kesayangan Anda??? Segera buat, disini
  kami menyediakan panduan praktis membuat Banner..</p>
  <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJuEP7jWqfhEGoJNa2Exv5Yg8_8_jCc3UIex1wR85dk63HbUCTVynl3KIjYtb0yXz_99HC79UGQurbtyQsFrkXRl91KC3ynWO0pkocboQRDYs7ykyqNehEwuiEFkjFJXBzohIOKAoB0ASj/s320/bikin+banner.png'/>
  </div>

Selamat mencoba.... Good Luck . . .