0 Populer Post Blog dengan Slide

Mengapa saya memilih slider ini karena sederhana dan mudah dalam instalasi ... 
terakhir kali saya menggunakan Slider  ketika saya membuat slider konten berdasarkan posting terbaru atau acak .. Slide otomatis untuk Blogger menggunakan jQuery Bagian 1
kali ini  saya gunakan Slider Mudah untuk Posting Populer ..

Berikut ini adalah tampilannya:

Demo

Script ini sangat mudah untuk menginstal, Anda hanya perlu menempatkan script ke gadget baru

• Login ke Dashboard Blogger dan arahkan ke Desain - Elemen Halaman
• Klik "Tambah Gadget" dan Pilih "Popular Posts" ( Jika Anda sudah memiliki gadgetmelewatkan langkah ini )
• Setelah Anda memiliki Posting Populer Gadget "Tambah Gadget" lagi dan pilih "HTML / Javascript"
• Masukan semua di bawah script untuk "Konten" HTML / Javascript Gadget
• Selesai-posting Anda populer sekarang dengan animasi 
•  

  <style type="text/css" media="screen">
  <! -
  # PopularPosts1 {
  height: 263px;
  }
  . Barang-content {
  height: 263px;
  position: relative;
  width: 560px;
  }
  . Slider {
  height: 263px;
  margin-left: 25px;
  width: 560px;
  overflow: hidden;
  margin-top: 5px;
  padding: 0px 0px;
  height: 263px;
  }
  . Item-potongan {
  background: url transparan (http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
  color: # FFFFFF;
  padding: 5px 5px 5px 10px;
  position: absolute;
  bawah: 0;
  text-align: kiri;
  width: 560px;
  font-size: 9px;
  font-style: italic;
  }
  . Barang-title {
  color: # FFFFFF;
  font-size: 10px;
  font-weight: bold;
  font-style: normal;
  margin-bottom: 5px;
  }
  . Item-judul:. Link, item-judul: visited {
  color: # FFFFFF;
  text-decoration: none;
  perbatasan: tidak penting;
  padding: 0 penting;!
  }
  Item-thumbnail img. {
  padding: 0 penting;!
  }
  . Item-thumbnail {
  padding: 0 penting;!
  }
  .. Crosscol widget-content {position: relative;}
  Slider ul., Slider li.,
  # Slider2 ul, # slider2 li {
  margin: 0;
  padding: 0;
  daftar-style: none;
  }
  # Slider2 {margin-top: 1em;}
  Slider li., # Slider2 li {
  width: 560px;
  height: 263px;
  overflow: hidden;
  }
  . Item-thumbnail img {width: 560px; height: 263px}
  # PrevBtn, # nextBtn,
  # Slider1next, # slider1prev {
  display: block;
  width: 30px;
  height: 77px;
  position: absolute;
  kiri:-30px;
  text-indent:-9999px;
  top: 71px;
  z-index: 1000;
  }
  # NextBtn, # slider1next {
  kiri: 582px penting;
  }
  # PrevBtn, # nextBtn, # slider1next, # slider1prev {
  display: block;
  height: 77px;
  kiri: 0;
  position: absolute;
  atas: 100px;
  width: 30px;
  z-index: 1000;
  }
  # PrevBtn sebuah, # nextBtn sebuah,
  # Slider1next sebuah, # slider1prev a {
  display: block;
  position: relative;
  width: 30px;
  height: 77px;
  background: url (http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
  }
  # NextBtn sebuah, # slider1next a {
  background: url (http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
  }
  ol {# kontrol
  margin: 1em 0;
  padding: 0;
  height: 28px;
  }
  ol # kontrol li {
  margin: 0 10px 0 0;
  padding: 0;
  float: left;
  daftar-style: none;
  height: 28px;
  line-height: 28px;
  }
  # ol mengontrol li a {
  float: left;
  height: 28px;
  line-height: 28px;
  border: 1px solid # ccc;
  background: # DAF3F8;
  color: # 555;
  padding: 0 10px;
  text-decoration: none;
  }
  ol # mengontrol li.current a {
  background: # 5DC9E1;
  color: # fff;
  }
  # ol mengontrol li a: fokus, # prevBtn sebuah: fokus, # nextBtn a: focus {outline: none;}
  . Tes {
  margin: 30px;
  }
  
  ->
  </ Style>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'> </ script>
  <script src='http://accordion-for-blogger.googlecode.com/svn/trunk/easysliderpopular.js' type='text/javascript'> </ script>
  

  jika Anda memiliki pertanyaan silakan tinggalkan komentar .... thx u