d i a r i a n a k m a m i
Heyyo -ups- Looking for what?:)


Tutorial Membuat Slide Popular Post
Tuesday, November 13, 2012 2:12 AM 2 balloon[s]


Eh, Haiii.....!!!
Assalamu'alaikum ^ ^
   Dear G-Florieses,
   Yumi sempet pengen bikin popular post, biar pengunjung bisa lihat entri-entri blog Yumi yang populer. Ada kekurangannya, yaitu cuma mempopulerkan entri yang udah populer. Jadi, entri yang belum populer malah makin nggak terkenal. Dan kalo lagi visit, yang dilihat itu cuma entri yang populer aja.
   Kekurangan kedua dari popular post, yaitu memenuhi tempat untuk widget. Nah, dari sini muncul keinginan Yumi untuk membuat popular post yang bisa bergerak. Apalagi popular postnya lebih menarik buat dibaca, karena berbentuk slide, bisa gerak. Apalagi hasilnya lumayan keren.Cara bikinnya gampang banget, loh. Makanya, Yumi share disini. Mau tahu caranya, baca entri berikut!
   Cekidot~


  • Pergi ke "Tata Letak"
  • Klik "Tambah Gadget"
  • Pilih "Popular Post", atau apalah, yang intinya entri populer
  • Klik simpan
   Nah, popular postnya sudah muncul. Ingin dapat bergerak?  Caranya juga mudah, kok! Ini, langkah-langkahnya :
  • Pergi ke "Tata Letak" lagi
  • Pilih "HTML/JavaScript"
  • Isi dengan kode di bawah ini : 
<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;


}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {

    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

  •    4.  Selesai, Lalu klik "Save"
   Berhasil? Silahkan comment di kotak comment bawah ini ~
Khansahamnida ^ ^

Labels: ,



2 Comments:

Blogger Dientianovi R.M said...

bisa untuk blogskin, kan?

June 12, 2013 at 12:00 AM  
Blogger Ѧαιℓα Ғαιиαиιтα said...

@Dientia : Kayaknya ga bisa, soalnya aku pernah coba juga ga bisa = ="

June 12, 2013 at 5:42 AM  

Post a Comment

*Kalian udah baca post Yumi. (ɔ ˘⌣˘)~♡
*Kalo udah masuk sini, kewajibannya komentar (‾^‾)b
*Jangan jadi tukang baca entri gratisan, yo!
*Yok komen, Ape aje dahh! \(´▽`)/



LonelyGirl ?
Welcome to my blog!







SORRY I'M ON LONG HIATUS. BECAUSE I HAVE TO GO BACK TO THE DORM AND START SCHOOL AGAIN. FIXED CONTACT ME, BECAUSE ANYTIME I CAN REPLY ;))



Secret Navi
Click and hover me! :DD

About Stuff
F.A.Q Affies

Followers
Ask.fm
Credits
Best viewed in Google Chrome.
© All Right Reserved 2014.


Tagboard
Leave your sweet words



Memories ★
Like a Time Capsule