Karena banyaknya pertanyaan yang menanyakan tentang CARA MEMBUAT WIDGET ARTIKEL POPULER BERWARNA WARNI PADA BLOGSPOT, maka saya akan membuat panduannya pada postingan kali ini.
Oke, bagaimana membuatnya? pertama tentunya pastikan dulu di blog anda sudah memasang widget ENTRI POPULER. Jika belum, begini caranya:
1. Masuk ke Dasbor pada blogspot
2. Pilih Tata Letak pada blog yang mau diedit
3. Tambahkan Gadget Baru pada tempat dimana akan dimunculkan entri populer
4. Pilih yang Entri Populer, lalu setting jumlah sesuka anda, disana tersedia maksimal 10 entri
5. Save.
Sudah? setelah itu pindah ke halaman TEMPLATE.
Langkah-langkahnya:
1. Setelah di halaman Template, klik pada Edit HTML
2. Setelah muncul kode HTML-nya, cari kode ]]></b:skin>, (gunakan Ctrl+F untuk pencarian)
3. Jika sudah ketemu silahkan paste kode di bawah ini tepat diatas kode ]]></b:skin> tadi.
Untuk kode GAYA 1:
Untuk GAYA 2:
Jika ada kesulitan, silakan tinggalkan pertanyaan di kolom komentar. Demikian TRIK BLOGSPOT mengenai CARA MEMBUAT WIDGET ARTIKEL POPULER BERWARNA WARNI PADA BLOGSPOT. Semoga bermanfaat.
Oke, bagaimana membuatnya? pertama tentunya pastikan dulu di blog anda sudah memasang widget ENTRI POPULER. Jika belum, begini caranya:
1. Masuk ke Dasbor pada blogspot
2. Pilih Tata Letak pada blog yang mau diedit
3. Tambahkan Gadget Baru pada tempat dimana akan dimunculkan entri populer
4. Pilih yang Entri Populer, lalu setting jumlah sesuka anda, disana tersedia maksimal 10 entri
5. Save.
Sudah? setelah itu pindah ke halaman TEMPLATE.
Langkah-langkahnya:
1. Setelah di halaman Template, klik pada Edit HTML
2. Setelah muncul kode HTML-nya, cari kode ]]></b:skin>, (gunakan Ctrl+F untuk pencarian)
3. Jika sudah ketemu silahkan paste kode di bawah ini tepat diatas kode ]]></b:skin> tadi.
Nah di sini saya memberikan dua gaya:
Untuk kode GAYA 1:
/* Rainbow Popular Post Gaya 1 Start */
#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: 12px; 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 +li +li{background:#d1ffff;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 + li + li +li{background:#c7f25f;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 {background:#f59095;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{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 +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{background:#ff00ff;width: 90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#5faff2;width: 90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#a9ed04;width: 90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ffde4c; 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: 3px 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 Gaya 1 End */
Untuk GAYA 2:
/* Rainbow Popular Post Gaya 2 Start */Setelah itu klik SIMPAN TEMPLATE. Dan lihat hasilnya di blog anda.
#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:90%} #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;line- height:1em;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:12px;color:#444; text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text- decoration:none} #PopularPosts3 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; background: #F2F2F2;}#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-560deg) ; -webkit-transform: scale(1.2) rotate(-560deg) ; -o-transform: scale(1.2) rotate(-560deg) ; -ms-transform: scale(1.2) rotate(-560deg) ; transform: scale(1.2) rotate(-560deg) ; } #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:90%} #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;line- height:1em;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:12px;color:#444; text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text- decoration:none} #PopularPosts3 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; background: #F2F2F2;}#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-560deg) ; -webkit-transform: scale(1.2) rotate(-560deg) ; -o-transform: scale(1.2) rotate(-560deg) ; -ms-transform: scale(1.2) rotate(-560deg) ; transform: scale(1.2) rotate(-560deg) ; }
/* Rainbow Popular Post Gaya 2 End */
Jika ada kesulitan, silakan tinggalkan pertanyaan di kolom komentar. Demikian TRIK BLOGSPOT mengenai CARA MEMBUAT WIDGET ARTIKEL POPULER BERWARNA WARNI PADA BLOGSPOT. Semoga bermanfaat.
3 komentar:
Ane setuju sama agan Ariez..
bermnaaat
Wuih mantap popular postnya, jadi pingin coba praktekkan
Posting Komentar