Berbagi Artikel-Artikel Unik Dan Bermutu

Blog Archive

Copyright © 2015 Artikel TopNews | . Powered by Blogger.

Labels

ads3

tag

Top Artikel

ads2

ads

iklan

Cara Membuat Widget Popular Post Bergerak


Widget Popular Post Bergerak

Cara Membuat Widget Popular Post Bergerak Di Blog - Kali ini saya akan membahas tentang Widget Popular Post yang sudah dimodifikasi menjadi bergerak. Widget ini juga lebih efektif dan tidak memakan banyak tempat.

Widget ini akan membuat loading blog sobat sedikit lebih lambat dari biasanya. Popular Post ini juga bisa menggunakan Thumbnail atau Tidak, itu tergantung selera sobat.



Langsung saya To The Point, di bawah ini ada Tutorial untuk membuat widgetnya.

#1. Membuat Widget Popular Post

  • Login ke Blogger
  • Klik Tata Letak => Tambah Gadget => Entri Populer
Cara Membuat Widget Popular Post


#2. Modifikasi Widget Popular Post


  • Pada Tata Letak, Klik Tambah Gadget => Edit HTML/Javascript
  • Masukkan Kode berikut
<style type="text/css" media="screen">

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

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

#PopularPosts1 li {
 width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() 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://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

Nah, itu adalah Tutorial untuk Membuat Widget Popular Post Bergerak. Semoga Tutorial ini bisa Bermanfaat untuk sobat.
    0 Komentar untuk "Cara Membuat Widget Popular Post Bergerak"
    Back To Top