Cara Merubah Tampilan Post Popular (Popular Post) Menjadi Lebih Keren



Haiii.... selamat datang di kupihitam blog sekarang kita akan membahas agar popular post di blog anda keren, yuk silahkan simak di bawah ini

MEMBUAT POPULAR POST KEREN


  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Tata Letak
  • Tambahkan Gadget
  • Pilih Popular Post (Pos Populer)
  • Simpan
Jika sudah, silakan ikuti langkah berikut ini, dengan memilih tampilan sesuai yang anda inginkan. 
  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Template (Tema)
  • Tekan CTRL+F, kemudian ketikkan </style>
  • Letakkan kode ini tepat di atas </style>  
/* 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;
    background:none;
    outline:none;
}
.PopularPosts ul {
    margin:.5em 0;
    list-style:none;
    color:black;
    counter-reset:num;
    border-left:4px solid #0066ff;
}
.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 0 0 0 !important;
    padding:10px 20px 10px 10px !important;
    counter-increment:num;
    position:relative;
    border-bottom:1px solid #f0f0f0;
}
.PopularPosts ul li:before, .PopularPosts ul li .item-title a, .PopularPosts ul li a {
    font-weight:bold;
    color:#000 !important;
    text-decoration:none;
}
.PopularPosts ul li:before {
    content:counter(num) !important;
    font-family:arial, sans-serif !important;
    font-size:12px;
    font-weight:bold !important;
    display:block;
    position:absolute;
    top:18px;
    right:-5px;
    border-radius:16px;
    background-color:#333;
    color:#fff !important;
    width:25px;
    height:25px;
    line-height:25px;
    text-align:center;
    padding-right:0px !important;
    border:2px solid #0066ff;
}
.PopularPosts ul li:nth-child(1) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(2) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(3) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(4) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(5) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(6) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(7) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(8) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(9) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(10) {
    background-color:#ffffff;
}
.PopularPosts .item-thumbnail {
    margin:0 0 0 0;
}
.PopularPosts .item-snippet {
    font-size:11px;
}
.profile-img {
    display:inline;
    opacity:10;
    margin:0 6px 3px 0;
}
/* POPULAR POST WIDGET */
 
  • Simpan Tema
 
Popular Post 2:

  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Template (Tema)
  • Tekan CTRL+F, kemudian ketikkan </style>
  • Letakkan kode ini tepat di atas </style>  
/* 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;
    color:black;
    counter-reset:num
}
.PopularPosts ul li{
    background-color:#eee;
    margin:0 0 0 0!important;
    padding:.5em 1.5em .5em .5em!important;
    counter-increment:num;
    position:relative
}
.PopularPosts ul li a { 
    color:#fff!important
}
.PopularPosts ul li a:hover {
    color:#2c3e50!important
}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a {
    font-weight:bold;
    color:inherit;
    text-decoration:none
}
.PopularPosts ul li:before{
    content:counter(num)!important;
    display:block;
    position:absolute;
    background-color:#333;
    color:#fff!important;
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    bottom:0;
    right:0;
    padding-right:0!important
}
.PopularPosts ul li:nth-child(1){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(2){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(3){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(4){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(5){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(6){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(7){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(8){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(9){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(10){
    background-color:#fff;
}
.PopularPosts .item-thumbnail{
    margin:0 0 0 0
}
.PopularPosts .item-snippet{
    font-size:11px
}
/* POPULAR POST WIDGET*/
  • Simpan Tema
Popular Post 3

  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Template (Tema)
  • Tekan CTRL+F, kemudian ketikkan </style>
  • Letakkan kode ini tepat di atas </style>  
/* 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;
    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 !important;
    padding:.5em 3em .5em .5em !important;
    counter-increment:num;
    position:relative;
}
.PopularPosts ul li:before, .PopularPosts ul li .item-title a, .PopularPosts ul li a {
    font-weight:bold;
    color:#000 !important;
    text-decoration:none;
}
.PopularPosts ul li:before {
    content:counter(num) !important;
    display:block;
    position:absolute;
    background-color:#333;
    color:#fff !important;
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    top:0px;
    right:0px;
    padding-right:0px !important;
}
.PopularPosts ul li:nth-child(1) {
    background-color:#A51A5D;margin-right:1% !important
}
.PopularPosts ul li:nth-child(2) {
    background-color:#F53477;margin-right:2% !important
}
.PopularPosts ul li:nth-child(3) {
    background-color:#FD7FAA;margin-right:3% !important
}
.PopularPosts ul li:nth-child(4) {
    background-color:#FF9201;margin-right:4% !important
}
.PopularPosts ul li:nth-child(5) {
    background-color:#FDCB01;margin-right:5% !important
}
.PopularPosts ul li:nth-child(6) {
    background-color:#DEDB00;margin-right:6% !important
}
.PopularPosts ul li:nth-child(7) {
    background-color:#89C237;margin-right:7% !important
}
.PopularPosts ul li:nth-child(8) {
    background-color:#44CCF2;margin-right:8% !important
}
.PopularPosts ul li:nth-child(9) {
    background-color:#01ACE2;margin-right:9% !important
}
.PopularPosts ul li:nth-child(10) {
    background-color:#94368E;margin-right:10% !important
}
.PopularPosts .item-thumbnail {
    margin:0 0 0 0;
}
.PopularPosts .item-snippet {
    font-size:11px;
}
.profile-img{
    display:inline;
    opacity:10;
    margin6px 3px 0;
}
/* POPULAR POST WIDGET */
  • Simpan Tema

Sekarang tampilan Popular Post sudah berubah sesuai yang kalian inginkan.

0 komentar