Cara Modifikasi Populer Post dengan Angka di blog

adscblog

Mungkin anda sering melihat saat ini banyak template yang dimana Populer Post nya menggunakan Angka,seperti anda lihat pada bagian smaping kanan Blog ini,Populer Post yang menggunakan Angka selain tampilan nya Populer Post tersebut menjadi Keren Juga memudahkan kita untuk mengetahui berapa artikel yang tampil di bagian populer post tersebut

Selain itu juga memudah kita atau para pengunjung untuk mengetahui artikel mana saja yang saat ini lagi trending atau yang sering di baca oleh para pengunjung blog,dengan angka yang berurutan tersebut,maka kita akan tahu artikel mana yang saat ini sering di baca oleh para pengunjung blog tersebut

Walaupun Tampilan atau ukuran angka yang berbeda beda tetapi itu tidak masalah karena setiap blogger mempunyai kreativitas masing masing,sehingga jangan heran jika anda mengunjungi berbagai blog mempunyai Widget Populer Post nya yang berbeda

Dan Populer Post dengan angka ini selain tampilan nya sangat menarik tetapi juga artikel nya yang tersusun rapi yang di sertai dengan angka tersebut,dan juga cara penerapan Populer Post dengan angka ini sangat lah mudah,anda hanya perlu menyimpan kode CSS nya saja di bagian Template,maka dengan begitu tampilan Populer Post anda akan berubah dengan angka

Dan jika anda tertarik dengan tampilan Populer Post dengan angka ini,dan ingin menerapkan nya di blog sobat,silahkan anda simpan CSS di bawah ini di template sobat

 #PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color:#F03 !important;  text-decoration: none;}
.PopularPosts h2 {padding:10px;margin:-15px 0 0 0;background:#222;color:#ff6;}
.popular-posts ul{padding-left:0;counter-reset:trackit}
.popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit, ".");padding:0 .1em 0 10px;font-size:20px;font-weight:700;color:#F66;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #f0f0f0}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important}
.widget.PopularPosts{padding:1.2em 0 0!important;background:#fafafc}

Nah dengan anda memasang kode tersebut di bagian Css template anda,maka tampilan Populer Post nya akan berubah dengan Angka yang berurutan,bagaimana sangat mudah buka untuk membuat Populer Post dengan angka ini,selamat mencoba dan semoga bermanfaat,salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 27 Mei and have 0 komentar