Breaking News
Loading...
Minggu, 14 April 2013

cara mempercantik tampilan post popular

Selamat malam teman teman fitrablogz kali fitrablogz akan memberikan sedikit tutorial kepada teman teman semua cara mempercantik popular post diblog teman teman semua  jika teman teman berminat selahkan lihat tutorial di bawah ini:



1. Membuat Popular Post Pertama kita aktifkan dulu Popular Post di blog kita, caranya Buka Dashboard blog kita >> Layout >> Add Gadget >> Popular Post
Note: matikan opsi untuk image thumbnail dan snippet
2. Menambahkan CSS Cara kedua: Blogger Dashboard >> Template >> Edit HTML cari kode  ]]></b:skin> (gunakan CTRL+F untuk menemukannya) kemudian paste kode CSS tepat diatas ]]></b:skin> kemudian lihat untuk memastikan setelah itu Save
.sidebar .PopularPosts .widget-content ul li{ height: 100%; line-height: 22px; float: left; clear: left; list-style-type: none; overflow: hidden; color: gray; } .sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;} .sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s;} .sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0} .sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%} .sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"} .sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%} .sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"} .sidebar .PopularPosts .widget-content ul li:first-child:after, .sidebar .PopularPosts .widget-content ul li:first-child + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;} .sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px} .sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s; } .sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Posting Lebih Baru
Previous
This is the last post.

1 komentar:

  1. manthap artikelnya
    www.giribig.com
    www.duniagame.info
    www.idcheat.com

    BalasHapus

 
Toggle Footer