Kamis, 07 Januari 2016

Cara Membuat Entri Populer Dengan Efek Slide Pada Blog

Unknown 19.37 Blogger 2 komentar

Cara Membuat Entri Populer Dengan Efek Slide Pada Blog

Seperti postingan yang sebelum-sebelumnya mengenai berbagai cara kita agar blog yang kita buat menarik, untuk kesempatan kali ini kita juga akan masih membahas cara memperindah blog. Pada kesempatan kali ini kami akan sampaikan bagaimana cara membuat entri populer bisa bergerak sehingga pengunjung bisa melihat entri populer di blog kita satu persatu.

Terus bagaimana caranya? Berikut kami sampaikan bagaimana entri populer di blog kita bisa bergerak.

1. Masuk ke akun blogger anda. Pada dasbor pilih tata letak

2. Kemudian pilih tambahkan gadget

3. Selanjutnya pilih Entri populer, ketika muncul kota konfigurasikan entri populer pilih simpan

4. Kemudian tambahkan gadget lagi pilih Html / Java Script

5. Kemudian masukkan kode script di bawah ini

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:2px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:280px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:none;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:12px;
    margin-bottom:2px;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:12px;
color:#262B2F;
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"></scrip >

6. Pastekan kode ke atas ke kotak Html / Java Script

7. Kemudian pilih simpan dan lihat hasilnya di blog anda.

Demikian postingan kali ini, meskipun singkat mudah-mudahan bermanfaat.

2 komentar:

gambar lebaran21 April 2019 pukul 00.22
sangat bermanfaat sekali artikelnya masbro, terutamana bagi pemula seperti saya. thanks tutorialnya...
BalasHapus
Balasan
dilirikan2 Mei 2019 pukul 00.30
entri populernya keren2, thankyou gan udah share.
BalasHapus
Balasan

Tambahkan komentar