Membuat Slider pada Blogspot

• Pertama login ke dashboard blog kamu.
  
• pilih Rancangan »» Edit HTML
  
• download template lengkap dulu barangkali terjadi kesalahan.
  
• Tandai kotak kecil pada Template Widget Content.
  
• Letakan kode CSS berikut diatas kode ]]></b:skin>
  
• kode CSS-nya:
  

  #slider { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfR4-knythKI4NJcz9Uoaj8dGeDLDXgYgEAWFCtOEfNwnRuaF4nqLy-TtLJuANQEVW-vFDOJkshVRL5PoSWXAeM5RW9iLpMvdvTpDGFW68DRMd3wGDqpU7YdLKzCVY4joKXj5OZ6v2LLCJ/s1600/latar+slider+uluumun.jpg); height: 300px; overflow: hidden; position: relative; margin: 5px 0; }
  #mover { width: auto; position:absolute; overflow:hidden; }
  .slide { padding: 20px 0px; width: 1000px; 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: 500px; padding:0px 0px 0px 30px; margin:0px 0px; }
  .slide img { position: absolute; top: 20px; left: 577px; background:#fff; padding:10px 10px; }
  #slider-stopper { position: absolute; font-family: Georgia, Helvetica, Sans-Serif; top: 113px; right: 65px; color: #AC0000; padding: 3px 8px; font-size: 14px; text-transform: uppercase; z-index: 1000; }

• Kemudian letakan kode javascript berikut dibawah kode ]]></b:skin>
  

  <script src='http://blogtegal.googlecode.com/files/jquery.js' type='text/javascript'/> <script src='http://blogtegal.googlecode.com/files/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>

• Kemudian cari kode dibawah ini:
  <div id='header-wrapper'> .......... ......... </b:section>
  
• Letakan kode berikut dibawah kode diatas.
  

  <!-- Casing -->
  <div id='casing'>
  <!-- Slider -->
  <div id='slider'>
  <div id='mover'>
  <div class='slide'>
  <span class='slmet'> Posted by uluumun </span>
  <h2><a href='http://uluumun.blogspot.com/2011/11/keberkahan-harta-ditangan-orang-shalih.html'>KEBERKAHAN HARTA DITANGAN ORANG SHALIH</a></h2>
  <p> Manfaat harta yang bersih dan halal di tangan orang shalih sangat banyak. Ibarat pohon kurma yang tidak menyisakan bagian sedikit pun, melainkan seluruhnya bermanfaat untuk manusia, sehingga tidak ada alasan bagi seorang muslim yang ingin meraih hidup bahagia di dunia dan akhirat untuk bermalas-malasan dan berpangku </p>
  <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqZM9RV2PWxYOJtrWHA3OVpfPtbDmxqowAx9xwnimRGG4H6_37jvXuDQPlkFVcWQeuQ16Jst2wlndek1TBGmKRGK6c8AoH0OoBTvRIPns-Ejzm6GJGJSRjPYeEkZfUZvoG7Rp87EVCllo/s1600/rokok.jpeg'/></div>
  <div class='slide'>
  <span class='slmet'> Posted by uluumun </span>
  <h2><a href='http://uluumun.blogspot.com/2011/11/rokok-dalam-timbangan-syariat-islam.html'>ROKOK DALAM TIMBANGAN SYARIAT ISLAM</a></h2>
  <p>Benda yang satu ini, meski kecil ukurannya, namun mengandung berbagai zat dan racun yang amat berbahaya bagi manusia. Tapi anehnya,</p>
  <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLC7MO5EYZPRTsrQ-jijAr02O_zfbduJMGkIjNwtErXb42dKw7u-Ee8NSG33aj8ghUssC86Z5KwoU6OudIxc1euxhMMOqDCuUC4LdEjMUsgoWfClxc9fkpsAiWiwKl5YD7WGq4BgENRLz/s1600/harta-tahta.jpg'/></div>
  </div>
  <!-- /Mover --> </div>
  <!-- /Slider --> </div>
  <div class='clear'/>

• Yang terakhir Simpan Template dan lihat hasilnya

Mungkin kode-kode diatas ingin diganti dan di sesuaikan dengan selera kamu maka ada beberapa yang perlu di edit, apa saja itu?

1. Background image yang perlu di sesuaikan dengan kondisi template sodara-sodara, silahkan disesuaikan pada kode:
   #slider { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfR4-knythKI4NJcz9Uoaj8dGeDLDXgYgEAWFCtOEfNwnRuaF4nqLy-TtLJuANQEVW-vFDOJkshVRL5PoSWXAeM5RW9iLpMvdvTpDGFW68DRMd3wGDqpU7YdLKzCVY4joKXj5OZ6v2LLCJ/s1600/latar+slider+uluumun.jpg); height: 300px; overflow: hidden; position: relative; margin: 5px 0; }
   
2. Untuk menambah isi dari slider itu sendiri silahkan tambahkan kode berikut:
   
   <span class='slmet'> Posted by Admin </span>
   <h2><a href='http://link-artikel.com/detail-artikel.html'>Judul slider artikel</a></h2>
   <p>Deskripsi isi slider </p>
   <img alt='' src='http://link-gambar.jpg'/> </div>
   
3. Untuk mengatur warna text,bentuk text, warna link,jenis font silahkan di oprak-aprek pada kode CSSnya,děsini awak gak bisa jelaskan karna masing-masing template blog berbeda-beda.
   
4. Untuk mengatur delay (kecepatan slider) pada slider, silahkan buka file http://blogtegal.googlecode.com/files/slider.js menggunakan notepad atau wordpad atau sejenisnya, kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)

Selamat mencoba dan berpusing ria