3 Cara Membuat Popular Post Warna-Warni Di Blogger

Popular post di blog akan membuat blog anda terlihat rapi dan menarik oleh karena itu sebuah blog mestinya terdapat widget popular post.

Lalu bagaimana cara membuat popular post  di blog? .

Caranya gampang tidak sulit-sulit amat. apalagi menggunakan atau menambahkan popular post yang bawaang dari blogspot, tinggal siap ditambahkan saja sudah selesai.

Apakah popular post bawaan blog terlihat lebih menarik? Ada tampilan popular post blog yang warna hitam,warna warni, warna-warni mengecil ke bawah bahkan ada juga yang menggunakan popular post blogger dengan gambar thumnail.

Memang kalau kita lihat popular post yang bawaan google kurang menarik tetapi ada caranya untuk membuat popular post yang menarik dan warna-warni

Banyak yang dilakukan oleh setiap wabmaster untuk mempercantik blog salah satunya membuat widget populer post yang keren dan menarik di blog. 

Ada banyak model dan kreasi populer post atau sering di sebut sebagai post populer. Memang secara defult populer post sudah di siapkan oleh blogger. 

Namun widegt post populer yang disiapkan oleh blogger hanya tampilan yang sederhana saja sehingga banyak webmaster yang ingin merubah tampilan popular post dengan berbagai gaya dan kreasi sesuai dengan keinginan pemilik blog. Untuk merubah bentuk dan tampilan popular post dengan menerapkan kode html ke dalam templete blog.



Apa Itu Polular Post ?



Popular Post yang ada di blogger adalah widget yang menampilkan post yang sering di baca atau artikel yang sering dan paling banyak di baca oleh pengunjung. Secara otomatis Popular post akan berubah urutan berdasarkan urutan jumlah pembaca artikel dalam blog. Poular Post sama fungsinya dengan random post maka setiap webmaster banyak yang mengubah tampilan awal random post seperti popular post. 


Baca cara membuat arsip dan random post untuk mempercantik blog


Popular post di blog akan membantu visitor blog untuk menemukan artikel yang paling banyak dibaca dalam satu blog. Kita bisa lihat ketika kita membuka suatu blog maka ada widget popular post. Memang widget post populer disarankan oleh google untuk menambahkan di salah satu sidebar kiri atau kanan. Penambahan widget post populer sebaiknya hanya satu saja sehingga blog akan lebih ringan dengan sedikitnya widget.



Cara Membuat Popular Post Keren Warna Hitam



Ada banyak warna yang bisa dibuat agar lebih manerik pada widget popular post. Salah satu yang saya bahas di sini cara memasang popular post yang berwarna hitam dengan penomoran yang berurtan

Tampilan popular post warna hitam seperti dibawah ini
Cara Membuat Popular Post
Untuk menerapkan dan menggunakan model post populer post yang serba hitam hanya dengan menggunakan kode HTML popular post di bawah ini.

/*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}
.PopularPosts ul li:nth-child(1){background-color:#111;}.PopularPosts ul li:nth-child(2){background-color:#222;}.PopularPosts ul li:nth-child(3){background-color:#333;}.PopularPosts ul li:nth-child(4){background-color:#444;}.PopularPosts ul li:nth-child(5){background-color:#555;}
.PopularPosts ul li:nth-child(6){background-color:#666;}.PopularPosts ul li:nth-child(7){background-color:#777;}.PopularPosts ul li:nth-child(8){background-color:#888;}.PopularPosts ul li:nth-child(9){background-color:#999;}.PopularPosts ul li:nth-child(10){background-color:#aaa;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}



Cara Membuat Post Populer Yang Warna Warni



Model dan desain populer yang warna warni dibawah ini adalah populer pos ala kang mosir. Untuk memebuat popular post warna-warna dapat menggunakan kode dibawah ini.
Tampilan. Tamiplan widget post populer seperti ini adalah yang paling trend saat ini.


Cara membuat Populer Post

 Untuk membuat populer post yang warna-warni dapat menggunakan kode HTML popular post dibawah ini.

/*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}


Cara membuat Populer Post di blog Warna-Warni Mengecil Ke Bawah



Populer Post Warna-Warni Mengecil Ke Bawah adalah desain dari mas sugeng. Jenis widget pos populer ini semakin ke bawah maka semakin mengecil berdasarkan urutan nomornya

Cara membuat Populer Post


Untuk dapat membuat popular post yang warna-warni ala mas sugeng maka harus menggunakan dan menyisipkan kode HTML popular post di bawah ini ke dalam templete blog anda.

/* 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 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 1.5em .5em .5em !important;
counter-increment:num;position:relative;}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:normal;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;}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed}
.widget-content ul li:last-child{border-bottom:medium none !important}
.widget-content ul li a{color:#333}
.widget-content ul li a:hover{color:#C80441}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00}


Cara Memasang Kode Script Popular Post di blog Dalam templete


Untuk Membuat Membuat Popular Post Keren Di Blogger di blog tidak dapat di pastekan kde ke salah satu widget tetapi kode tersebut harus disisipakan ke dalam templete blog. Sebelum memasang popular post keren dan menarik pastikan anda sudah menambahkan widget populer post yang bawaan blogspot lalu kemudian sisipkan kode diatas ke dalam templete blog anda.

Berikut cara pasang popular post menarik di blog :
  1. Buka akun blogger anda
  2. Klik Templete
  3. Pilih Edit HTML
  4. Cari Kode  ]]></b:skin>  dengan menggunakan CTRL + F
  5. Jika sudah ketemu pastekan salah satu kode model popular post yang anda inginkan. Pastekan di atas Kode ]]></b:skin>
  6. Simpan templete Anda
  7. Cek Blog maka akan tampil populer post yang anda inginkan

Kesimpulan 

Popular Post di Blog akan membuat blog menjadi lebih menarik dan indah sehingga suasana indah makin terkesan dalam blog. 

Dari totorial diatas hanya menyajikan 3 Cara Membuat Popular Post Warna-Warni  Di Blogger yakni popular post warna hitam, warna warni dan popular post mengecel ke bawah. 

Demikian artikel ini yang berkaitan dengan cara membuat popular post paling keren di blog semoga dapat membantu.
Admin Semoga Informasi Yang Diberikan Melalui Web Ini Dapat Bermanfaat Bagi Saudara/i

No comments for "3 Cara Membuat Popular Post Warna-Warni Di Blogger"