Cara Membuat Popularpost Seperti JalanTikus di Blogspot

Pekanan.com  | Cara membuat popular post seperti Jalantikus.com - pada kesempatan kali ini saya akan berbagi tutorial cara untuk membuat populer post di sidebar blog mirip dengan website ternama yaitu jalan  tikus.

mungkin sobat sudah tidak lagi dengan nama jalan tikus, website yang hampir menguasai seluruh mesin pencarian salah satunya google.



setipa kali sobat mencari  tutorial pasti nama jalan tikus akan muncul, entah di rank 1, 2,3 atau paling bawah.


ya, tidak heran jika jalan tikus akan hadir setiap kali sobat mencari tutorial di internet, karena kontributornya pun banyak, bahkan mereka menawarkan bayaran bagi setiap penulis yang memposting di jalan tikus.

namun, kali kita tidak akan membahas soal itu, pada kesempatan kali ini saya akan berbagi tutorial cara membuat popular post mirip dengan jalan tikus, meski tidak 100% sama, karena website jalan tikus menggunakan wordpress self hosted.

lalau bagaimana cara untuk membuat popular post seperti jalan tikus?

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.

demikian tutorial cara membuat popularpost seperti jalantikus, semoga bermanfaat.



0 Response to "Cara Membuat Popularpost Seperti JalanTikus di Blogspot"

Post a Comment

Selamat Datang di Blog Pekanan.com