Cara Mempercantik Tampilan Popular Post

Cara Mempercantik Tampilan Popular Post - Tahukah kalian apa itu Popular Post ? Popular post adalah artikel yang paling banyak dibaca sehingga sang pemilik blog bisa mengetahui artikel apa yang paling sering dibaca oleh pengunjung. Selain itu popular post ini juga katanya mempunyai fungsi menambah nilai SEO. Lihat saja blog-blog yang pernah anda kunjungi, kebanyakan mereka juga menggunakan popular post di blognya. Tentunya memasang popular post ini bukan tanpa ada alasan donk.

Nah, pada tulisan kali ini admin ingin berbagi ilmu tentang  Cara Mempercantik Tampilan Popular Post. Karena percaya atau tidak tampilan itu sangat berpengaruh kepada pengunjung, semakin menarik blog yang kita miliki semakin betah pula para pengunjung dan tentunya pada waktu yang lain ketagihan untuk berkunjung lagi. Dan salah satunya adalah Mempercantik Tampilan Popular Post.

Dalam kesempatan ini admin akan menyuguhkan 4 model tampilan Popular Post yang semoga bisa membantu teman-teman.

Baiklah langsung saja admin akan berbagi tips Mempercantik Tampilan Popular Post. Simak langkah-langkah berikut :

-) Masuk ke akun Dashboard Blogger yang anda miliki

-) Pilih ke Tata Letak dan klik Template

-) Klik Edit HTML

-) Cari kode berikut ]]>

. Dan untuk mempercepat gunakan tombol (Ctrl+F).

-) Letakan kode Html di bawah ini tepat di atas kode ]]>

.

Style 1.

Kode Html :

.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 

Kode Html :

.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

Kode Html :

.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

Kode Html :

.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;

    }

Demikian gan tutorial Cara Mempercantik Tampilan Popular Post di Blog. Selamat mencoba dan semoga bermanfaat. Jangan lupa share dan tinggalkan komentar ya.