Cara membuat Widget Popular Post Seperti Jalantikus.com - Hidayatimur.com

Hidayatimur.com

Metaltaila.co Adalah Blog Berbagi Template Premium


Dalam sebuah dunia blogger kita tidak asing lagi jika mendengar tentang widget atau tampilan,  terlebih lagi widget popular post.

Popular post widget menjadi daya tarik dalam sebuh blog karna dapat mempermudah pengunjung yang datang ke blog.

Karna popular post ini sangat penting dan berguna salah satu nya menjadi persyaratan untuk mendaftarkan blog ke google adsense.

Google adsense akan menerima blog atau situs yang memiliki navigasi jelas dan popular post menjadi salah satunya

Selain itu popular post dapat menambah dan mempercantik tampilan blog terutama jika widget popular post ini sangat mirip web ternama yaitu jalantikus.com

Di artikel ini saya tidak akan panjang lebar dan langsung saja.

Ikuti tutorialnya dibawah ini!

1. silahkan masuk ke HTML editor di blog sobat masing-masing.
2. lalu letakan kode CSS dibawah ini, diatas kode </head>

<style type='text/css'> 
/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;} .PopularPosts ul li {margin:0 0 5px;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);border-radius: 4px;border: 1px solid #eee;} .PopularPosts ul li a:hover {color:#f80538!important} .PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none} .PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:66px;margin: 6px 20px 7px 3px;overflow:hidden;float:left;border-radius:4px;} .PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title {padding:0 0 5px} .PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:20px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;} .PopularPosts ul{counter-reset:count;} @media screen and (max-width:414px){ .PopularPosts ul li {font-size:15px!important} } </style>


3. jika sudah ada kode CSS popular post di template sobat, tinggal replace saja dengan yang diatas.
4. save template!

nah, sekarang lihat hasilnya, popular post ini mirip dengan jalan tikus.

Cara membuat Widget Popular Post Seperti Jalantikus.com


Dalam sebuah dunia blogger kita tidak asing lagi jika mendengar tentang widget atau tampilan,  terlebih lagi widget popular post.

Popular post widget menjadi daya tarik dalam sebuh blog karna dapat mempermudah pengunjung yang datang ke blog.

Karna popular post ini sangat penting dan berguna salah satu nya menjadi persyaratan untuk mendaftarkan blog ke google adsense.

Google adsense akan menerima blog atau situs yang memiliki navigasi jelas dan popular post menjadi salah satunya

Selain itu popular post dapat menambah dan mempercantik tampilan blog terutama jika widget popular post ini sangat mirip web ternama yaitu jalantikus.com

Di artikel ini saya tidak akan panjang lebar dan langsung saja.

Ikuti tutorialnya dibawah ini!

1. silahkan masuk ke HTML editor di blog sobat masing-masing.
2. lalu letakan kode CSS dibawah ini, diatas kode </head>

<style type='text/css'> 
/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;} .PopularPosts ul li {margin:0 0 5px;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);border-radius: 4px;border: 1px solid #eee;} .PopularPosts ul li a:hover {color:#f80538!important} .PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none} .PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:66px;margin: 6px 20px 7px 3px;overflow:hidden;float:left;border-radius:4px;} .PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title {padding:0 0 5px} .PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:20px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;} .PopularPosts ul{counter-reset:count;} @media screen and (max-width:414px){ .PopularPosts ul li {font-size:15px!important} } </style>


3. jika sudah ada kode CSS popular post di template sobat, tinggal replace saja dengan yang diatas.
4. save template!

nah, sekarang lihat hasilnya, popular post ini mirip dengan jalan tikus.

No comments:

Subscribe Our Newsletter

Notifications

Disqus Logo