Bagaimana Cara Memasang Widget Popular Post Flat Responsive?
1. Silahkan Pilih tampilan yang di inginkan yang ada di Postingan Widget Popular Post ini.
2. Selanjutnya, silahkan pergi ke dashboard blog kalian
3. Silahkan Masuk ke Menu Tema, setelah itu pilih icon segitiga bawah, lalu kalian pilih Edit HTML
Seperti yang ditunjukkan gambar diatas ya langkahnya... jika settingan blog sobat dalam bahasa inggris, makah biasanya 'THEME'
Setelah itu kalian pilih edit html blogger seperti gambar diatas.
4. Lalu kalian bisa gunakan kombinasi tombol CTRL + F di keyboard dan ketikkan b:skin, kalian enter sampai menemukan b:skin yang ada seperti gambar.
Sampai menemui b:skin yang seperti ini atau b:skin dengan tag penutup.
Nah, kalo udah.. silahkan letakkan kode Widget Popular Post yang kamu senangi / kamu pilih tepat diatasnya kode yang saya lingkari itu agar enggak error. Posisinya seperti gambar.
5. Kalo sudah silahkan kalian Save ya Sobat RahmanCyber, contohnya seperti gambar dibawah ini ya...
Oke sampai disini Edit Htmlnya udah selesai sob.
Sekian Cara menambah Kode CSS pada Blogger secara Aman melalui Edit HTML
......
Cara Menambah Widget di Tata Letak Blogger
Oke, silahkan langkah selanjutnya kalian langsung add / tambahkan widget popular post di tata letak sobat.
Langsung saja pilih tata letak, lalu klik tambahkan gadget pada lokasi yang diinginkan, kalo pada gambar diatas, kita meletakknannya di sidebar.
Kalo udah bakalan muncul kotak dialog seperti ini..
Silahkan pilih Widget / Gadget yang diinginkan.
Kalo dalam hal ini kita pilih Popular Post.
Maka selanjutnya akan muncul pilihan settingan Widget Popular Post semacam ini
Pada bagian nomor 1, kalian bisa ubah nama Widgetnya.. misal Trending Topic
Pada bagian nomor 2, itu kita bisa atur interval Popular postnya / semacam periode gitu lah... bisa berdasarkan 7 hari terakhir, 1 bulan, tahun lalu, atau keseluruhan ( artinya adalah postingan yang paling banyak mendapat view )
Pada bagian nomor 4, kalian bisa tentuin berapa banyak jumlah entry atau postingan popular yang ditampilkan, maksimal 10.
Setelah itu langkah nomor 5 adalah simpan.
Maka Popular Post akan nampil sesuai dengan peletakannya.
Untuk kode dibawah ini bekerja hanya di Sidebar ya... jadi jika diletakkan di footer atau diatas postingan / main maka tidak akan bekerja.
........
Kumpulan Widget Popular Post
Berikut ini beberapa koleksi Widget Popular Post yang kita miliki, silahkan dipilih sesuai kesenangan sobat.
1. Grid Layout Popular Post
Tampilan ini sebenarnya konsepnya hampir mirip dengan Tema RahmanCyber NET, cuman ini agar bisa digunakan di template universal lainnya, modelnya bentuk grid semacam ini.
Kode CSS GRID :
.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px 'Oswald', sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}
2. Numbering Popular Post
Popular Post dengan Penomoran di samping kiri, seperti ini ( kemungkinan bisa berbeda tiap template )
Kode CSS Numbering Popular Post :
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px 'Oswald', sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:"";height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
Social Plugin