Cara Merubah Widget Popular Post
Setelah beberapa hari tidak update blog karna kesibukan sehari-hari pada kesempatan ini saya ingin sharing sebuah CSS untuk mempercantik tampilan widget popular post atau biasa juga disebut dengan popular post, css ini memang bukan yang terbaru tapi pada dasarnya css ini masih terlihat cantik dan nyaman untuk memperindah tampilan sebuah blog agar terlihat lebih hidup, tapi sebelum itu ijinkan saya menjelaskan apa itu popular post
Pengertian Popular Post
Popular post adalah sebuah Widget bawaan dari blogspot yang berfungsi menampilkan sebuah judul artikel yang paling banyak dikunjungi dari blog itu sendiri, selain itu popular post juga menjadi daya tarik tersendiri bagi pengunjung yang menawarkan artikel-artikel menarik yang menjadi primadona dan banyak disukai oleh pengunjung lainnya, Untuk mengedit widget popular post kamu cukup mengganti CSS pada template blogspot yang kamu gunakan, karna fitur popular post sudah disediakan oleh blogspot.
Popular Post 1
Demikianlah tutorial Cara Merubah Widget Popular Post, artikel ini akan saya update kembali nanti untuk menambahkan Popular Post yang tidak kalah kerennya, semoga artikel ini bermanfaat bagi kita semua, saya Admin Seven mengucapkan Terimakasih atas kunjungannya.
 |
| Popular Post Blogspot |
Cara Merubah Widget Popular Post
Untuk merubah tampilan popular post caranya sangat sederhana, kamu hanya memerlukan Text editor untuk mempermudah proses pengeditan, kamu bisa menggunakan Notepad, Notepad+, Macromedia Dreamweaver atau software Text Editor lainnya, sementara itu Dreamweaver adalah software untuk pemograman web baik html, css , java script dan masih banyak yang lainnya, langkah-langkahnya nya adalah sebagai berikut:Baca Juga
- Langkah pertama adalah login terlebih dahulu ke blogspot
- Kemudian pada bagian menu pilih tema dan pilih Edit HTML
- Backup terlebih dahulu template blogspot kamu kedalam sebuah notepad, jika terjadi error nanti kamu masih punya cadangan untuk mengembalikannya
- Copy HTML template kamu kedalam Notepad atau Text Editor lainnya,
- Cari kode CSS Popular Post yang ada template kamu, untuk mempermudah pencarian gunakan fitur Find dengan cara Ctrl + F dan silahkan ketikan Popular atau populer,
- Setelah ditemukan hapus CSS tersebut, biasanya tertera keterangan pada masing-masing CSS seperti /* Popular Post */, hapus barisan CSS tersebut sampai akhir dengan tanda penutup }
- Copy code css dibawah kedalam template kamu, usahan menggunakan lokasi atau tempat yang sama seperti code css yang tadi sudah dihapus, jika tidak sesuaipun tidak apa-apa asalkan masih didalam code css
- Setelah itu copy template yang sudah kamu edit tadi kedalam tema blogspot dan simpan kemudian lihat hasilnya
Popular Post 1
Popular Post 2/* YMobile Popular Post */#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}
Popular Post 3/* YMobile Popular Post */.popular-posts ul{padding-left:0px;}.popular-posts ul li {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKWalMXHDYbFRXvbBfdTcdcwVtKYs3zq4uhUtB3FC_biltwfeQcJgTvr4K_LPkYyUC-bq7iodBxRX667M48gQMEhaY1elDxh6tcCkT-rfHmLk6F_AoMmVbdp4OtCM7BwWyKNktc2xro-Z/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 20px !important;border: 1px solid #dddddd;border-radius: 10px 10px 10px 10px;}.popular-posts ul li:hover {border:1px solid #666666;}.popular-posts ul li a:hover {text-decoration:none;}
Popular Post 4/* YMobile Popular Post */.item-snippet {display:none}#PopularPosts1 {background:none}#PopularPosts1 .widget-content {padding:0}#PopularPosts1 h2,#PopularPosts2 h2 {border-radius: 4px;margin-top: 5px;background: #2196F3;color: #fff;font-size: 17px;font-weight: 600;padding: 13px 0;text-align: center;box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}.PopularPosts ul{list-style-type:none;}.PopularPosts li{margin:0;padding:10px!important}.PopularPosts ul li{background:#fff;border-radius:4px;margin:10px 0;padding:0;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)}.PopularPosts li a{font-weight:400;font-family:'Roboto',sans-serif;font-size:13px;color:#fff!important;transition:all .5s;border:none}.PopularPosts li a:hover{color:#fff!important;border:none}.PopularPosts img{padding-right:0}.popular-posts img{margin-bottom:5px;width:72px;height:62px;border-radius:4px}.PopularPosts .item-thumbnail{overflow:hidden;float:left;margin-right:10px;margin-bottom:-7px}.PopularPosts .widget-content ul li:nth-child(1) {background:#3f51b5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}.PopularPosts .widget-content ul li:nth-child(2) {background:#9C27B0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}.PopularPosts .widget-content ul li:nth-child(3) {background:#E91E63 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}.PopularPosts .widget-content ul li:nth-child(4) {background:#FF9800 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}.PopularPosts .widget-content ul li:nth-child(5) {background:#f44336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}.PopularPosts .widget-content ul li:nth-child(6) {background:#00BCD4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}.PopularPosts .widget-content ul li:nth-child(7) {background:#009688 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829-16A7NRW-juCd6EHv0OAgyUIv1lPHS2T7wft8EMoUSH2KPxXI_8itnf431yjwfs3xAKuoTUMSSw1cQm8_fm7T8PCfHWzUElbwCsms0VhcvFhW74TCDHcYC7qyzsJVZDeZL37VCpLWB/s1600/bgheader.png) repeat-x center}
Popular Post 5/* YMobile Popular Post */.sidebar .PopularPosts .widget-content ul li{ height: 100%; line-height: 22px; float: left; clear: left; list-style-type: none; overflow: hidden; color: gray; } .sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;} .sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s;} .sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0} .sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%} .sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"} .sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%} .sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%} .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"} .sidebar .PopularPosts .widget-content ul li:first-child:after, .sidebar .PopularPosts .widget-content ul li:first-child + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after, .sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;} .sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px} .sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -ms-transition:all 0.4s; -o-transition:all 0.4s; } .sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}
Hal yang harus kamu perhatikan adalah dari beberapa popular post diatas adalah hanya untuk CSSnya saja, sementara untuk mengatur Widget agar dapat menampilkan gambar, cuplikan dan jumlah post kamu harus mengaturnya dalam pengaturan tata letak, Jika terjadi error pastikan kamu menghapus css popular post sepenuhnya tidak menyisakan bagian dari css tersebut dan jangan menghapus CSS widget lainnya./* YMobile Popular Post */.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.PopularPosts ul li a{color:#fff!important}.PopularPosts ul li a:hover{color:#2c3e50!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}/* Pengaturan Warna */.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}.PopularPosts ul li:nth-child(2){background-color:#f39c12;}.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}.PopularPosts ul li:nth-child(4){background-color:#27ae60;}.PopularPosts ul li:nth-child(5){background-color:#e67e22;}.PopularPosts ul li:nth-child(6){background-color:#d35400;}.PopularPosts ul li:nth-child(7){background-color:#3498db;}.PopularPosts ul li:nth-child(8){background-color:#2980b9;}.PopularPosts ul li:nth-child(9){background-color:#ea6153;}.PopularPosts ul li:nth-child(10){background-color:#c0392b;}.PopularPosts .item-thumbnail{margin:0 0 0 0}.PopularPosts .item-snippet{font-size:11px}
Demikianlah tutorial Cara Merubah Widget Popular Post, artikel ini akan saya update kembali nanti untuk menambahkan Popular Post yang tidak kalah kerennya, semoga artikel ini bermanfaat bagi kita semua, saya Admin Seven mengucapkan Terimakasih atas kunjungannya.
