Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara membuat Widget Popular Post dengan Animasi Atau Bergerak

by Irsyad Aslam , at 1/13/2013 , has 6 komentar
Sudah biasa membuat Widget Popular post dengan Widget biasa yang anda buat. bagaimana kalau Widget Popular Post menjadi beranimasi atau Bergerak. Widget Popular Post beranimasi juga bermanfaat agar tidak memakan tempat. Bagaimana caranya?, Berikut Caranya:
  • Silahkan Masuk ke blogger anda.
  • Setelah Masuk, Klik Tata Letak, Jika sudah menambahkan Widget Pupolar Post, dan Jika Belum silahkan untuk menambahkannya. Setelah menambahkan, Add Gadget HTML. Gambar:(1)
                                                                  Gambar:(1)
  • Masukan Kode Berikut ini: Gambar:(2)
<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
    
}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#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:10px;
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"></script>
                                                                  Gambar:(2)                        
  • Setelah memasukan, Klik Tombol Simpan.
Selamat Mencoba,
Salam Sukses.


Your-BelajarBLOG
Irsyad Aslam
About
Cara membuat Widget Popular Post dengan Animasi Atau Bergerak - written by Irsyad Aslam , published at 1/13/2013, categorized as Widget . And has 6 komentar
6 komentar Add a comment
gan. ane mencoba tips nya namun kog berpengaruh dengan slide shownya. slide show-nya tidak bergerak... namun cara yang agan sampaikan itu berhasil
Mungkin Tergantung Template,
Sudah Saya Coba dengan template Dari blogger dan hasilnya di blog http://ybblab.blogspot.com


Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
Terimakasih banyak sob, mantab nih tutornya.. siip

http://obatasliindonesia.com/obat-herbal-migren-sehat-alami/
Reply Delete
Terimakasih informasinya sangat membantu:)
http://short8.net/uzqZM
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger