Moving Box Slider Popular Post

Posted on | January 10, 2013 | No Comments

Home » Popular Post Widget » Moving Box Slider Popular Post

Bagaimana caranya memasang slider popular post di blogger?

Sekarang saya akan memperkenalkan widget moving slider popular post dari CCS trik yang dapat di pasang di blogger.Jika anda ingin menambahkan widget ini silahkan baca pentunjuknya.

Intruksi:

Log in ke blogger.com.
Dari Dashboard,buka Layout-Page Element.
Klik "Add Gadget" dan pilih "Popular Post" (Jika anda telah menambahkan gadget ini,abaikan langkah ini)
Copy CCS javascript dan tambahkan di page element.
Jika template anda sudah ada script jQuery,silahkan hapus script tersebut.

CCS Javascript

body { 
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
 border: 10px solid #ccc;
}

.scroll {
 overflow: hidden;
 width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
 position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
 height: 318px;
}

#left-shadow {
 position: absolute;
 top: 0;
 left: 0;
 width: 12px;
 bottom: 0;
 background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
 position: absolute;
 top: 0;
 right: 0;
 width: 12px;
 bottom: 0;
 background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
 padding: 10px;
 border: 1px solid #999;
}

.inside img {
 display: block;
 border: 1px solid #666;
 margin: 0 0 10px 0;
 width: 250px;
}

.inside h2 {
 font-weight: normal;
 color: #111;
 font-size: 16px;
 margin: 0 0 8px 0;
}

.inside p {
 font-size: 11px;
 color: #ccc;
}

a {
 color: #999;
 text-decoration: none;
 border-bottom: 1px dotted #ccc;
}

a:hover {
 border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

Untuk mengatur jumlah posting yang akan di tampilkan di widget ini,silahkan atur jumlah posting pada "Display up to" di popular post widget dari blogger seperti yang di tunjukan pada gambar di atas.

Terima kasih Anda telah membaca artikel Moving Box Slider Popular Post, Mencuri konten adalah melanggar hak cipta,baca PRIVACY POLICY,Jika anda memiliki saran dan kritik silakan tinggalkan komentar atau Kontak Kami.

Category: Popular Post Widget

Moving Box Slider Popular Post

Bagaimana caranya memasang slider popular post di blogger?

Related Post

Comments

Categories

Search This Blog

Popular Post

Recent Post