Cara Membuat Popular Post Keren di Blog

Cara Membuat Popular Post Warna Warni di Blogger


Memasang Widget Popular Post di Blog merupakan hal yang perlu di lakukan oleh para pemula yang ingin menaikan visitor blog. Popular post merupakan daftar artikel sering di kunjungi oleh visitor blog. Dengan adanya popular post banyak orang yang akan melihat post post yang muncul di atas. Pada kesempatan kali ini saya akan membagikan bagaimana tutorial membuat popular post warna warni di blog dengan mudah sekali.

Cara Membuat Widget Popular Post di Blog


Bagi anda yang baru belajar ngeblog, membuat popular post menjadi tampak menarik merupakan hal yang tidak mudah, akan tetapi dulu saya juga mengalami hal yang sama. Intinya jangan pernah berhenti mencobaa dan belajar, karena jika kita berhenti maka di situlah kita akan memulai kegagalan yang sebenarnya. Baiklah langsung saja ikuti langkah- langkah untuk membuat Popular Post keren di blog dengan mudah dan cepat.

Membuat Popular Post blog


Tutorial Membuat Popular Post di Blog


  • Login terlebih dahulu di blog anda.
  • Buka menu Tata Kelola Blog
  • Di bagian kanan tambahkan widget popular post jika belum ada, dan atur hanya judul artikel saja yang akan tampil di blog.

Cara Membuat Popular Post blog

  • Selanjutnya Simpan settingan.
  • Tahap selanjutnya pilih menu Template dan pilih Edit Template
  • Cari kode script ]]></b:skin> atau </style> dengan menekan tombol ctrl + f 
  • Kemudian letakan kode script di bawah ini tepat di atas kode ]]></b:skin> atau </style> tersebut.

/*Custom Popular Post*/
.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}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}


Catatan
Anda dapat mengganti warna tampilan dengan merubah background-color:#f1c40f dan sesuaikan dengan keinginan anda jangan lupa pilih simpan template



Sekarang anda sudah menemukan cara membuat popular post keren warna warni  di blog silahkan anda praktekan. Demikian tutorial blog yang dapat saya share pada kesempatan ini semoga dapat bermanfaat untuk anda. Terima kasih telah mengunjungi LayarKomputer.Com :)

0 Response to "Cara Membuat Popular Post Keren di Blog "

Posting Komentar