Hallo sobat blogger semua pada pertemuan ini Bang Dayat ingin membagikan sedikit tips Cara Menambahkan Efek Slide Pada Popular Post Di Blog. Mungkin dari sobat blogger semua sudah mempunya popular post tapi dia kaku atau diam aja kayak patung. Oleh karena itu disini saya akan membagikan cara membuat popular post kita itu bergerak sehingga membuat tampilannya profesional gitu.
Memang pada setiap blogger mau tidak mau harus membuat popular post. Karena dengan cara ini banyak pengunjung akan mengklik postingan tersebut, sadar dan tidak sadar itu lah yang terjadi. Apalagi jika kita buat sedikit sentuhan yang menarik pada widget tersebut.
Cara pembuatan dari blog ini cukup mudah saja dan diyakinkan anda pasti bisa melakukan nya.. Oke langsung aja kita ketahap yang di tunggu-tunggu yah,,, hehehe.
Langkah - langkah pembuatan :
- Login ke Blogger dengan account anda
- Rancangan => Edit tata letak
- Add Widget => Entri Popular
- Pada pengaturan pilih banyaknya entri yang ingin anda tampilkan.
- Lalu Simpan WIdget anda.
Langkah pembuatan slide pada Popular post :
- Nah setelah sudah selesai membuat widget pada popular post.
- Tambah lagi Widget (Add Widget) => Java scrip HTML
- Kemudian Anda Masukkan Kode CSS berikut kedalam kolom Java scrip HTML
<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:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFk8yPw0EUqbyYc6yWGHv2qQzmkF9H_ObkfWk0KFS9LFt6T8BwUeQd7prsDD0hkuQdv8FRZ4SR7ihOyU8QMQYSGsG7ucu14oXLwUpZ9h_n1rv9ujqKVOyeJWRUy8QTGGJuRlVPKbW308M/s400/popular+posts.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:1px solid #CCCCCC;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Verdana, Arial;
font-size:11px;
color:#FFFFFF;
padding:0px 0px 0px 0px;
margin:0px 0px 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>
- Save dan Ingat hasilnya harus sperti di bawah ini.
 |
WARNING !!! : Widget Popular Post harus dibawah Sedangkan HTML Scrip diatasnya ! (lihat gambar diatas)
Catatan :
Catatan :
- Biru : Dapat anda ubah besar widget dan tinggi dari popular post anda nantinya.
- Pink : Warna dan Font Link Judul
- Orange : Image Border Postingan anda
- Merah : Ringkasan Postingan anda.
