Cara Serba Mudah: Cara Membuat Popular Post Keren dan Simple

Cara Membuat Popular Post Keren dan Simple

Apa itu popular post ?

Poppular post adalah widget atau gadget yang disediakan oleh blogspot yang berfungsi untuk menampilkan posting dengan visitor tarbanyak. Para pengguna blog bisa mengatur widget ini seperti menggunakan judul, gambar, dan cuplikan; atau bisa juga mengaturnya dengan menggunakan judul dan gambar serta judul dan cuplikan saja.

Saya akan membagikan cara membuat popular post dan cara mengubah tampilan popularpost yang tentunya simple dan keren, langsung saja disimak.

LANGKAH 1 :

Siliahkan kamu buka blog kamu dan pilih LAYOUT atau TATA LETAK >> lalu pilah TAMBAHKAN GADGET >> dan pilih ENTRI POPULAR

Ketika sudah memilih maka akan ada 4 kolom, yaitu kolom Judul, Paling Sering Dilihat, Tampilan, postingan, berikut penjelasannya :

Pada Kolom Judul biasanya bertuliskan Posting Populer, Yang Lagi Ngetrend, dll
Kolom SERING DILIHAT berguna untuk kapan widget ENTRI POPULER akan di re-fresh
Pada kolom TAMPILAN terdapat pilihan, yaitu : Judul dengan Gambar dan Cuplikan; Judul dengan gambar saja; Judul dengan Cuplikan saja; atau hanya Judul saja
Kolom Postingan berguna untuk seberapa banyak kamu ingin menampilkan postingan populer tersebut.

Jika kamu sudah menentukannya maka klik SIMPAN.

LANGKAH 2 :

Pada langkah ini berfungsi untuk mengubah tampilan pada widget popular post ini, cara mengubahnya adalah dengan meletakan script di CSS. Saya akan membagikan 6 tampilan yang berbeda beda dan kamu bisa memilihnya sesuai dengan selera kamu. Berikut caranya

Silahkan buka blog kamu dan pilih TEMPLATE >> lalu pilih EDIT HTML
Cari kode yang mirip seperti ini ]]></b:skin>, untuk mempermudah pencarian kamu bisa menekan tombol CTRL+F
Pilih gambar dan copy scriptnya lalu letakan diatas kode ]]></b:skin>

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

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

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

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

/* Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}

.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}

.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}

.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}

.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#ffff00;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#66ff00;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#00ffff;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#0099ff;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#009933;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#999999;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#66ff99;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#cc3366;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#00cc99;margin-right:10%}

.PopularPosts .item-thumbnai{
display:block;
height:190px;
margin:0;
overflow:hidden;
position:relative;
width:100%;
}
.PopularPosts .item-title {position:relative;}
.PopularPosts img {display:block;
height:auto;
position:absolute;
width:100%;
}
.item-title a {
background:none;
color:transparent;
font-family:Oswald;
font-size:17px;
font-weight:400;
padding:10px 0;
padding-right:300px;
position:absolute;
right:0;
text-align:center;
top:0;
width:100%;
transition:all 0.2s ease-out;
}
.item-title a:hover {
background:#f97e76;
color:#fff;
padding-right:0;
}
.item-snippet {
background:none;
color:rgba(0,0,0,0.3);
font-weight:normal;
left:12%;
padding:10px;
position:absolute;
text-align:center;
top:95px;
width:70%;
transition:all 0.2s ease-out;
}
.item-snippet:hover {
background:#4f5a66;
color:#FFFFFF;
}
.item-content {
position:relative;
}

Nah gimana udah dipilih yang cocok yang mana ?
kalo masih belum mengerti kamu bisa bertanya di kolom komentar,,,