Cara Membuat Popular Post Berwarna, Dan berbeda
>
Tutorials And Software akan berbagi Tips
Cara Membuat Popular Post Berwarna, Dan berbeda kenapa saya katakan berwarna dan berbeda karena dalam widget popular post ini bentuknya berbeda. btw yang membuat beda adalah lebih berwarna yang memberikan kesan segar dan rapi.
Udah lama sih, widget ini berkeliaran di Mbah Google. Tapi tak apalah yang penting berbagi, barangkali ada yang belum tahu cara membuatnya.
Langsung saja sobat bisa ikuti Tutorial atau cara berikut untuk membuat Popular Post yang sangat Fresh ini :)
- Log In Akun Blogger Sobat.
- Oh ya. Sebelum membuat widget ini, sobat di haruskan untuk menambahkan popular post Default terlebih dahulu. Dengan Cara
- Buka Tata Letak.
- Tambah Gadget, Pilih Popular Post.
- Setelah itu sobat perlu Setting terlebih dahulu agar lebih Klop dengan kodenya.
Lihat Gambar :
- Lalu Klik Simpan
- Setelah selesai.
- Pindah ke Menu Template >> Edit HTML.
- Kemudian Cari Kode ]]></b:skin>
- Setelah ketemu, Salin atau Copy Paste kode dibawah ini, tepat di atas kode ]]></b:skin>
/* Rainbow Popular Post Powered by http://esbepe-sbp.blogspot.com*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/* Rainbow Popular Post Powered by http://esbepe-sbp.blogspot.com*/
- Selesai, Silahkan Lihat Hasilnya.
Nah sekian
Tutorial Cara Membuat Popular Post Berwarna, Dan berbeda Kali ini Semoga Bermanfaat. Bila sobat butuh bantuan bisa berkomentar di bawah.
Terima Kasih.
Wassalamualaikum Wr. Wb.
Cara Membuat Popular Post Berwarna, Dan berbeda
Terimakasih telah membaca artikel
Cara Membuat Popular Post Berwarna, Dan berbeda. Dan bila sobat ingin membantu saya, sobat bisa mengeklik salah satu iklan diatas ^_^. Sobat bisa bookmark halaman ini dengan URL http://esbepe-sbp.blogspot.com/2013/07/cara-membuat-popular-post-berwarna-dan-berbeda-lebih-menarik.html. Jika ingin copy paste artikel ini, jangan lupa untuk mencantumkan link sumber.