Cara Memasang PopularPost Berslider

PopuralPost adalah sebuah Gadget yang menaruh posting yang sedang populer. berfungsi agar posting yang sedang populer agar bisa di lihat oleh si pengunjung. Di Posting ini saya akan menjelaskan cara untuk memperindah tampilan PopularPost. Bagaimana Cara untuk lebih memperindah tamplan nya?, untuk memperindah tampilan Gadget PopuralPost dengan cara slide agar Posting lebih menarik. Dengan Slide juga Popular post tidak memakan tempat. Bagaimana Caranya?, Berikut langkah-langkahnya:

Silahkan Login Ke Blogger Anda.
Setelah itu, Klik Menu Tata Letak, Lalu, Add Gadget PopuralPst terlebih dahulu. Dan jika sudah menambahkan Lewati saja. Gambar:(1)

Gambar:(1)

Setelah Itu, Add Gadget HTML. Gambar:(2)

Gambar:(2)

Masukan Kode Berikut ini:

<style>

# Slider ol, # slider ul, # slider li
 {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
}

Popular-posting img. {
  margin: 0 penting;!
  padding: 0 penting;!
  width: 150px;
  height: 120px;
}

ol, ul {
 Daftar-style: none;
 }

. Wrapper {
 width: 720px;
 margin: 0 auto;
 position: relative;
}

. Jelas {
 clear: both;
 }

. Display-none {
 display: none;
 }

# Slider {
 position: relative;
 top: 2px-;
 z-index: 1;
 }

# Slider. Prev {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url (http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) tidak mengulang-pusat pusat;
 top: 150px;
 kiri: 51px-;
 }

# Slider. Berikutnya {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url (http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) tidak mengulang-pusat pusat;
 top: 150px;
 kanan:-51px;
 }

# # Slider slider-wrapper {
 width: 720px;
 height: 300px;
 padding-top: 40px;
 overflow: hidden;
 z-index: 999;
 position: relative;
 }

# # Slider slider-batin {
 width: 9780px;
 height: 300px;
 position: absolute;
 }

# Slider. Artikel {
 width: 150px;
 height: 300px;
 float: left;
 margin-right: 30px;
 }

# Slider. Artikel img {
 margin-bottom: 25px;
 box-shadow: 1px 1px 1px RGBA (0, 0, 0, .15);
 -Moz-box-shadow: 1px 1px 1px RGBA (0, 0, 0, .15);
 -Webkit-box-shadow: 1px 1px 1px RGBA (0, 0, 0, .15);
 }

# Slider. Artikel h2 {
 margin-bottom: 15px;
 line-height: 18px;
 }

# Slider. Artikel h2 a {
 font-size: 18px;
 color: # 404.040;
 font-weight: bold;
 text-shadow: 0 1px 0 # fff;
 line-height: 23px;
 }

# Slider artikel.. Meta-komentar a {
 font-size: 10px;
 font-weight: bold;
 text-transform: uppercase;
 text-shadow: 0 1px 0 # fff;
 }

# Slider artikel.. Item-potongan {
 margin-left: 15px;
 }

. # Slider widget-item-control {display: none}

</ Style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </ script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"> </ script>