6 Cara Mudah Membuat Pos Populer Keren di Blog

Bagikan artikel ke:

Facebook Google+ Twitter

Penulis Muhamad Nurul Huda

6 Cara Mudah Membuat Pos Populer Keren di Blog - Popular Post atau Pos Populer, adalah suatu widget dalam blog yang menampilkan pos yang paling populer dari waktu ke waktu pada sebuah blog atau website.

Dengan menggunakann widget ini, kamu bisa menampilkan pos paling populer yang ada pada blogmu. Kamu juga bisa memasangnya di bagian samping, bawah, atau atas pada blogmu.

Lalu bagaimana cara membuatnya ???
Ada berbagai jenis bentuk widget pos populer yang bisa kamu coba.

Berikut ini adalah contohnya :
(Kalau mau coba pilih salah satu aja)

Baca juga :

5 Cara Mendapatkan Domain Gratis untuk Blog Website Cara Membuat Subscription Box Seperti Blog Arlina Design Cara Membuat Menu Navigasi Seperti Evo Magz di Blog

PERTAMA

sc sharetipsdancara.blogspot.co.id

Bagaimana cara membuatnya ?

1. Buka browser pada PC mu

2. Buka blogger.com dan log in lah

3. Klik tata letak

4. Tambahkan widget " Pos Populer "

5. Hilangkan centang pada thumbnail dan buat minimal pos menjadi 9 atau sesukamu

6. Klik simpan

7. Cari dan pilih Template atau Tema

8. Klik edit HTML

9. Cari kode ]]></b:skin> menggunakan kombinasi tombol CTRL+F

10. Setelah ketemu, copas kode berikut diatas kode  ]]></b:skin> 

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} 
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} 
#PopularPosts1 ul li:first-child:after, 
#PopularPosts1 ul li:first-child + li:after, 
#PopularPosts1 ul li:first-child + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} 
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} 
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} 
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} 
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} 
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} 
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} 
#PopularPosts1 ul li:first-child + li + li:after{content:"3"} 
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} 
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} 
#PopularPosts1 ul li:first-child:after{content:"1"} 
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} 
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

11. Klik pratinjau
12. Klik simpan jika tidak terjadi error

KEDUA

sc sharetipsdancara.blogspot.co.id

 Bagaimana caranya ?

1. Buka browser pada PC mu

2. Buka blogger.com dan log in lah

3. Klik tata letak

4. Tambahkan widget " Pos Populer "

5. Klik simpan

6. Cari dan pilih Template atau Tema

7. Klik edit HTML

8. Cari kode ]]></b:skin> menggunakan kombinasi tombol CTRL+F

9. Setelah ketemu, copas kode berikut diatas kode  ]]></b:skin> 

.popular-posts ul {

padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #359bed;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

11. Klik pratinjau
12. Klik simpan jika tidak terjadi error

KETIGA

sc sharetipsdancara.blogspot.co.id

Bagaimana cara membuatnya ???

1. Buka browser pada PC mu

2. Buka blogger.com dan log in lah

3. Klik tata letak

4. Tambahkan widget " Pos Populer "

5. Klik simpan

6. Cari dan pilih Template atau Tema

7. Klik edit HTML

8. Cari kode ]]></b:skin> menggunakan kombinasi tombol CTRL+F

9. Setelah ketemu, copas kode berikut diatas kode  ]]></b:skin> 

.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:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

11. Klik pratinjau
12. Klik simpan jika tidak terjadi error

KEEMPAT

sc madamvia.web.id

Bagaimana caranya ?

1. Buka browser pada PC mu

2. Buka blogger.com dan log in lah

3. Klik tata letak

4. Tambahkan widget " Pos Populer "

5. Klik simpan

6. Cari dan pilih Template atau Tema

7. Klik edit HTML

8. Cari kode ]]></b:skin> menggunakan kombinasi tombol CTRL+F

9. Setelah ketemu, copas kode berikut 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; }

11. Klik pratinjau
12. Klik simpan jika tidak terjadi error


KELIMA

sc madamvia.web.id

Bagaiman cara membuatnya ?

1. Buka browser pada PC mu

2. Buka blogger.com dan log in lah

3. Klik tata letak

4. Tambahkan widget " Pos Populer "

5. Klik simpan

6. Cari dan pilih Template atau Tema

7. Klik edit HTML

8. Cari kode ]]></b:skin> menggunakan kombinasi tombol CTRL+F

9. Setelah ketemu, copas kode berikut diatas kode  ]]></b:skin>

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

11. Klik pratinjau
12. Klik simpan jika tidak terjadi error

KEENAM

sc madamvia.web.id

Bagaimana caranya ?

1. Buka browser pada PC mu

2. Buka blogger.com dan log in lah

3. Klik tata letak

4. Tambahkan widget " Pos Populer "

5. Klik simpan

6. Cari dan pilih Template atau Tema

7. Klik edit HTML

8. Cari kode ]]></b:skin> menggunakan kombinasi tombol CTRL+F

9. Setelah ketemu, copas kode berikut diatas kode  ]]></b:skin>

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

11. Klik pratinjau
12. Klik simpan jika tidak terjadi error

Tertarik untuk membuatnya ? Apabila ada pertanyaan, saran dan kritikan sertakan pada komentar mu dibawah :D