Dark
Beranda Tips Blogger Trik Blogger

Membuat Popularpost Menyerupai Jalantikus

Oleh Admin
29 Mar 2019
Cara menciptakan popular post menyerupai Jalantikus.com - pada kesempatan kali ini aku akan mengembangkan tutorial cara untuk menciptakan terkenal post di sidebar blog menyerupai dengan website ternama adalah jalan  tikus.
sepakat pribadi aja

Ikuti tutorialnya dibawah ini!

1. silahkan masuk ke HTML editor di blog sahabat masing-masing.
2. kemudian letakan arahan CSS dibawah ini, diatas arahan </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. kalau sudah ada arahan CSS popular post di template sobat, tinggal replace saja dengan yang diatas.
4. save template!

nah, kini lihat hasilnya, popular post ini menyerupai dengan jalan tikus.

Demikian tutorial Cara Membuat Popularpost Seperti JalanTikus, agar bermanfaat.

Tags :
Berbagi :