Cara Membuat Widget Popular Post Keren Warna Warni Model 2

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

 

Cara membuat Widget Popular Post Keren Warna Warni Model 2. (Dua)

Sobat Blogger, Kemarin saya memposting Artikel tentang widget popular Post Model 1. dan masih berkaitan dengan artikel kemarin kali ini saya juga akan sharing tentang widget Popular Post dengan Model yang berbeda dengan kemaren.

Untuk Contoh Tampilan Widgetnya yang Model 2 sobat bisa lihat Gambar di samping ini, silahkan sobat pilih sesuai selera sobat, untuk pemasangannya juga mirip dengan Model 1. cuma yang membedakan adalah kode scriptnya saja. Oke Sobat Blogger langsung saja disimak tutorialnya di bawah ini.

Cara Membuat Widget Popular Post keren Warna Warni Model 2 (Dua).

LANGKAH PERTAMA

Pastikan Sobat blogger sudah menambahkan widget popular Post di blog sobat, kalau belum silahkan ikuti Tips nya di bawah ini :

1. Masuk Ke Account Blogger Sobat.
2. Pilih LayOut/Tata letak.
3. Pilih Add Gadget/Tambahkan Gadget.
4. Klik "ENTRY POPULER".

5. Pastikan Setting Pengaturan sudah sesuai selera Sobat. (lihat gambar di bawah).
Centang Thumnail Gambar jika Popular Post nanti di sertai dengan gambar, atau
Centang Cuplikan jika Popular Post nanti di sertai deskripsi/Penjelasan artikelnya.

6. Selesai Simpan / Save.

LANGKAH KEDUA

1. Silahkan sobat Masuk ke template kemudian Klik Edit HTML.
2. Silahkan Sobat Cari kode seperti ini ]]></b:skin> atau </style>
(Gunakan Ctrl+f untuk mempermudah Pencarian).
3. Copy kode Html di bawah ini dan Pastekan tepat di atas kode ]]></b:skin> atau </style>

Kode Html

 /* Popular Post Full Color */
.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 &quot;Arial Narrow&quot;,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 and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

4. Selesai Save / Simpan

Baca Juga:
Cara Membuat Widget Popular Post Keren Warna Warni Model 1 (Satu)
Cara Membuat Widget Popular Pos Keren Warna Warni Model 3 

Demikian Tutorial tentang Cara Mudah Membuat Widget Keren Popular Post/Entry Popular Warna Warni Model 2 (Dua). Semoga bermanfaat bagi sobat Blogger semua.

SELAMAT BERKARYA.. HAPPY BLOGGING..

Artikel Terkait