Cara Modifikasi Popular Post Berwarna dan Berputar di blogger Cara Modifikasi Popular Post Berwarna dan Berputar di blogger - mizipediacom mizipediacom: Cara Modifikasi Popular Post Berwarna dan Berputar di blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Modifikasi Popular Post Berwarna dan Berputar di blogger

Sabtu, 18 Maret 2017



Cara Modifikasi Popular Post  Berwarna dan Berputar di blogger
Pada kesempatan kali ini saya akan share mengenai tentang cara Cara Modifikasi Popular Post Berwarna dan Berputar di blogger pada saaat anda sentuh Cursor Di sidebar Blog. Apabila anda belum tau tidak masalah, saya akan menjelaskannya sedikit mengenai widget popular post yang sudah di modifikasi tampilanya sehingga bentuknya akan menjadi bulat nantinya pada saat di sentuh maka akan berputar di sidebar pos populernya. 
Nah jika anda penasaran dengan tutorial ini, yasudah langsung kita menuju ke pembahasannya, anda bisa mengikuti langkah-langkah di bawah ini ya bos..

Cara Membuat Popular Post Bulat , Berwarna dan Berputar

1. Anda harus sudah memasang widget popular postnyanya terlebih dahulu di blog anda
2. Dan silahkan anda menuju ke halaman edit html
3. Carikan kode  ]]></b:skin> atau </style> (cara mudah tekan CTRL + F untuk memudah pencarian)

4. Kemudian anda taruh kode dibawah ini dan letakan diatas salah satu kode ]]></b:skin> atau </style>
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{-moz-border-radius:130px;-webkit-border-radius:130px;border-radius:130px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;padding:4px;border:1px solid #fff!important}
#PopularPosts1 img:hover{border-radius:0 0 0 0;-moz-transform:scale(1.2) rotate(-711deg);-webkit-transform:scale(1.2) rotate(-711deg);-o-transform:scale(1.2) rotate(-711deg);-ms-transform:scale(1.2) rotate(-711deg);transform:scale(1.2) rotate(-711deg)}
5.Untuk tahapan terkahir anda klik Simpan Template maka anda Lihat Hasilnya, maka anda berhasil sudah berubah pos populer yang di kehendaki.

sekian dulu penjelasannya, selamat mencoba dan bermanfaat untuk anda..terimaksih sudah berkunjung ya..salam
Lihat Juga