Membuat Slider pada blog blogspot

Membuat efek slider pada blog blogspot, tau dong yang namanya slider blog, itu lho tampilan beberapa ringkasan postingan yang bisa bergerak secara otomatis,biasanya seh terletak pada header blog. Tapi mungkin ada sedikit kekurangannya yakni tidak ada ke-SEO-annya soalnya berdasarkan pengamatan blogtegal teks di dalam slider tidak pernah tertangkap oleh search engine,namun ada pula yg mengatakan bahwa slider blog termasuk SEO Friendly.

Efek Slider pada blog dimanfaatkan untuk mempercantik tampilan blog secantik Ayu Hastari, oh. . . . Ayu Hastari awak nge-fans banged ma loe, matamu... Bibirmu... Wajahmu... Membuat jantung ini berdegup kencang setiap memandang foto kamu dag...dig...dug... Andai saja kamu mo jadi cewek awak, wah... Serasa tersirami hati ini, uppss...ss!! jadi ngelantur hiks...hiks...hiks... Kita langsung ke tutorialnya tentang membuat efek slider pada blog.

• 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(http://blogtegal.googlecode.com/files/blogtegal.jpg); height: 254px; 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 Blogtegal </span>
  <h2><a href='http://www.blogtegal.com/2010/12/kartu-debit-payoneer-gratis-dari-klikot.html'>Kartu debit payoneer gratis, MAU?</a></h2>
  <p> Kartu Debit payoneer gratis dari klikot | mau memeliki kartu debit secara gratis, silahkan saja gabung di situs jejaring klikot untuk mendapatkannya, GRATIS 100% PENDAFTARAN. Cara kerja klikot pun cukup mudah, tinggal saling view file di account masing-masing dan dapatkan dollarnya.</p>
  <img alt='' src='http://blogtegal.googlecode.com/files/payoneer.jpg'/> </div>
  <div class='slide'>
  <span class='slmet'> Posted by Blogtegal </span>
  <h2><a href='http://www.blogtegal.com/2011/03/harga-jual-blackberry-iphone-laptop-murah.html'>Harga jual Blackberry iPhone Laptop Murah</a></h2>
  <p>Harga jual blackberry iphone laptop murah | Adalah artikel kontes yang sedang diadakan tahun ini yang diselenggarakan oleh situr hargagila.com,dengan pemenang 1 mendapatkan Rp 6.000.000.00-</p>
  <img alt='' src='http://blogtegal.googlecode.com/files/harga-jual-blackberry-iphone-laptop-murah.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(http://blogtegal.googlecode.com/files/blogtegal.jpg); height: 254px; 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........