Cara Membuat Widget Popular Post Warna Warni Blogspot | Apakabar semua pengunjung setia Ariflaw Blog. Kali ini saya mau bebagi Tips nie buat kalian semua. Tipsnya tentang Widget di Blogspot.
Widget Popular Post adalah salah satu jenis widget yang berperan dalam menaikan Page View
sebuah blog. Kalo udah nyangkut soal page view ya udah dehh paling
demen hee.. karna apa ? dengan page view itu blog kita jadi makin rame
dan bisa-bisa makin banyak $$ nya dari PPC hee.. Yaa kalo blogya di
pasang PPC.
Nahh biasanya kalo Widget Popular Post kan bentuknya cuman Gambar + Tulisan atau cuman tulisan doang. Nahh kalo kita Modif sedikit, dengan memberikan efek Warna-Warni
pasti tuh lebih menarik perhatian dehh buat para pengunjung blog kita.
Dan yang alhasinya Page View bisa bertambah perkali-kali lipat. Wow
Mantapkan.. hee Nahh gimana cara menerapkannya di blog kita. Yukk kita
simak sama-sama Cara Membuat Widget Popular Post Warna Warni Blogspot . . .
- Pertama - tama kita masuk ke Dasbor Blogger, Pilih menu Themplate dan Klik Edit HTML
- Setelah itu Kita cari Kode " <b:skin> " dan klik tanda " > " Maka semua Kode Css akan Kebuka..
 |
| Klik Untuk Memperbesar |
- Nahh kalo udah kebuka semua.. Kita taruh dahh Kode Css Widget Popular Post Warna Warni. Biar lebih pas biasanya saya taruh di paling Bawah sebelum kode " ]]></b:skin> "
#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}
- Seperti ini nie penempatannya nanti...
 |
| Klik Untuk memperbesar |
- Kalo udah tinggal di simpan deh.... dan Liat Hasilnya
Gimana Mudah kan ..... Oke deh demikian apa yanb bisa saya sampaikan dalam artikel Cara Membuat Widget Popular Post Warna Warni Blogspot, semoga bisa bermanfaat buat kita semua. Bila ada tutur kata yang kurang pas saya Mohon Maaf. Trima Kasih akhir kata Wassalamualaikum Wr. Wb.
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Cara Membuat Widget Popular Post Warna Warni Blogspot. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment