4 tipe Widget Popular Post untuk Blogger ~ 274PRIL

Populer widget tulisan adalah salah satu widget yang paling umum digunakan pada setiap blog. Blogger memiliki standar tulisan populer widget sendiri untuk blog, tetapi widget ini sangat tidak menarik. Ini akan menampilkan daftar sederhana posting populer tanpa kustomisasi apapun di dalamnya .. Untuk alasan ini terlihat sangat UGL
Menambahkan posting populer widget untuk blogger:

Pergi ke dashboard blogger Anda. Pilih opsi Template.

Pilih Edit HTML. Dalam kode template menemukan ]]></b:skin> Tepat di atas itu paste kode dari salah satu posting populer berikut widget dan menyimpan template.

Menambahkan posting populer widget untuk blogger:
Style 1.

CODE

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
   
    }

Style 2.

code

 .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    }

Style 3.

code

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {
    
    background:#FF8040;

    }

.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    }

Style 4.

code

.popular-posts ul
{
padding-left:0px;
    -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
 border: 1px solid #dcdcdc;

}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
   border-bottom:1px dashed #dcdcdc;
       background:#ffffff;
    }

  .popular-posts ul li a
{

text-decoration:none;
font:16px georgia,verdana;
color:#3d87c4;
}

    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#333333;
    }

4 tipe Widget Popular Post untuk Blogger

Bacaan Menarik