Apakabar semua pengunjung setia SkyLand. 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 . . .
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..
- Nahh kalo udah kebuka semua.. Kita taruh dahh Kode Css di bawah ini, 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}
Kalo udah tinggal di simpan deh.... dan Liat Hasilnya Kalo udah ada Widget Popular Post tinggal liat aja.. tapi kalo blum ada Widget Popular Post tambahin aja di Menu Tata Letak (Layout) trus pilih Popular Post. Nahh kalo mau lebih maximal nanti tampilannya di set aja untuk menampilkan Judul Post aja. Jadi di Uncentang di tambahkan gambar dan Deskripsinya.
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.