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.