modifikasi popular post sederhana

Sahabat anna ini ada wedget modifikasi popular post hasilnya limayan menarik sahabat meski sedikit ketinggalan anna sudah mencobanya y berhasil semua sih
silahkan sahabat pilih mana yang sahabat suka
langsung ajja ya sahabat ke pokok permasalahan
pertama Log in dulu ke blog sahabat
kedua masuk ke tample sahabat lalu ediet HTML
cari kode  ]]></b:skin>
untuk mempermudah seperti biasa CTRL + F copy pastekan kode warna merah di atas
kalau sahabat malas untuk CTRL + F maka sahabat lihabt yang tulisan </b:skin>...</b:skin>
sahabat klick ajja itu nanti muncul kode yang anna maksudkan
udah deh dalam pencarian ]]></b:skin> 
lalu copy pastekan kode di bawah ini di atasnya pilih salah satu ajj

Login dulu ke Blogger > Layout
Klik Add a gadget dan pilih gadget "Popular Post" dari daftar yang disediakan blogger
Setinglah seperti gambar di bawah ini! (Ubahlah Most viewed menjadi 'All time', hilangkan centang pada 'image thumbnail' dan 'snippet')
widget-popular-post
Simpan widget Anda
Sekarang masuklah ke Template
Backup dulu template Anda jika perlu
Klik Edit HTML
Carilah kode ini
]]></b:skin>
Kemudian letakkan kode berikut ini di atasnya


Style 1


.popular-posts {
    background-color:#efefef;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    padding:10px 10px 10px 15px;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    height:25px;
    margin-top:0px;
    margin-left:20px;
    margin-bottom:15px;
    font-size:14px;
    color:#000;
}
.popular-posts ul li {
    list-style:disc;
    margin-bottom:5px;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}


Style 2 

.popular-posts {
    background-color:#fff;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    color:#f4f4f4;
    background-color:#5a77a0;
    height:25px;
    border-bottom:#163b70 solid 1px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:8px 0 0 20px;
}
.popular-posts ul {
    margin:10px 10px 15px 10px;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.popular-posts ul li {
    margin-bottom:5px;
    vertical-align:middle;
    list-style:square;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}


Style 3


.popular-posts {
    background-color:#fff;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    color:#f4f4f4;
    background-color:#5a77a0;
    height:25px;
    border-bottom:#163b70 solid 1px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:8px 0 0 20px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:28px !important;
    margin-bottom:5px;
    margin-left:-15px;
}
.popular-posts ul li:nth-child(odd) {
    background-color:#f4f4f4;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}


Style 4



.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    text-align:center;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:20px !important;
    margin-bottom:5px;
    margin-left:-15px;
    border:#dfdfdf solid 1px;
    border-radius:5px;
}
.popular-posts ul li:hover {
    background-color:#f4f4f4;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}


Style 5

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:20px !important;
    margin-bottom:10px;
    margin-left:-15px;
    border:#dfdfdf solid 1px;
    background-color:#f4f4f4;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    list-style:none;
}
.popular-posts ul li:hover {
    -webkit-box-shadow: 0px 0px 0px 0px #dadada;
    box-shadow: 0px 0px 0px 0px #dadada;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}


Style 6


.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    margin-bottom:10px;
    margin-left:-15px;
    list-style:disc;
    border-bottom:#dedede solid 1px;
}
.popular-posts ul li:hover {
    list-style:circle;
}
.popular-posts ul li a {
    color:blue;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:underline;
    color:orange;
}


Style 7




.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-top:15px !important;
    padding-bottom:15px !important;
    padding-left:30px !important;
    margin-left:-15px;
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-l2W2Wn9D7J1Dw-V6BdcKmaHuCLHjcD7M9H8aczv1hzBK_90HfVU4VZakK0fguvUbaP1fmpgZbmosM4C_fRyYvCx6k5uIFxYbEON6TcJrbXA5BGNzjC4T-p_DG7B3K-uC4O1cpVCBK8/h120/asterisk_orange.png) no-repeat 0 10px;
    border-bottom:#999 dotted 2px;
}
.popular-posts ul li:hover {
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Lwno9QESdFSHdL9C7QXMNbcejgigCG84MbyrrGGF-Pzdg6x7auZwIKkikNxn_ONfSCrNpm05Ao3mialUVSsD1V9jOLiWTLN8V5f3UcQYpF2cKAyew4G-wukgXCZEvbkbWAgPkBsXGCE/h120/asterisk_yellow.png) no-repeat 0 10px;
    background-color:#f9f9f9;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;

}

Share this post