Membuat Popular Post dan Label Keren Pada Blog

Membuat Populer Post dan Label Keren Pada Blog, adalah salah satu cara mempercantik blog buat para blogger, mempercantik atau membuat blog yang keren memang yang enak dipandang adalah sebuah keharusan, dimana blog yang cantik akan sangat berpengaruh juga pada visitor atau tamu kita saat membaca, bukan sebaliknya. apabila blog yang amburadul walaupun artikelnya pass atau sesuai yang dicari oleh pencari artikel bakalan kabur dan beralih mencari blog yang lain..

Mungkin sebagian besar dari kira (para penulis blog) masih bingung bagaimana caranya agar blog saya enak dipandang dan bisa menghasilkan banyak visitor, kali ini kita akan memberikan sala-satu temuan saya. dan hasilnya benar-benar bekerja

Membuat Populer Post

Populer pos kali ini adalah populer post yang berwarna dan mempunyai peringkat bisa kita lihat pada gambar dibawah ada angka berdasarkan peringkat populer artikel yang kita posting

Caranya adalah
1. Login kedalam Blog dan pilih Template
2. Edit Html
3. kemudian kita CTRL + F dan cari kode ini ]]></b:skin>
4. Pastekan kode atau script dibawah ini tepat DIATAS ]]></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}

Lalu Save.

Kemudian pada widget Populer Post, silahkan ikuti pengaturan seperti gambar dibawah ini :

Pengaturan Widget Popular Post

Gambar : Hasil Popular Post

Membuat Label

Untuk membuat Label ini tidak beda jauh dengan membuat popoler post hanya saja scriptnya yang beda beserta bentuknya yang beda
1. Login Ke blog
2. Pilih Template
3. kemudian kita CTRL + F dan cari kode ini ]]></b:skin>
4. Pastekan kode atau script dibawah ini tepat DIATAS ]]></b:skin>

.label-size{margin:0 2px 6px 0; padding:3px; text-transform:uppercase; border:solid 1px #C6C6C6; border-radius:3px; float:left; text-decoration:none; font-size:10px; color:#666}
.label-size:hover{border:1px solid #6BB5FF; text-decoration:none; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out; -moz-transform:rotate(7deg); -o-transform:rotate(7deg); -webkit-transform:rotate(7deg); -ms-transform:rotate(7deg); transform:rotate(7deg); filter:progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455,M12=-0.08715574274765817,
M21=0.08715574274765817,M22=0.9961946980917455,
sizingMethod='auto expand'); zoom:1}
.label-size a{text-transform:uppercase; float:left; text-decoration:none}
.label-size a:hover{text-decoration:none}

Lalu SAVE

dan Pada widget Label silahkan ikuti pengaturannya seperti gambar dibawah ini :