RahmanCyber.NET | Blogger - Populer Post jika di bahasakan artinya adalah Postingan yang Populer. Blogger telah memberikan widget Popular post sebenarnya.. jadi kita bisa memilih populer post berdasarkan periode tertentu, misalnya seminggu, sebulan atau keseluruhan.
{getToc} $title={Table of Contents}
Tetapi seperti biasa, ketika widget populer post belum di modifikasi, maka akan memakai tampilan bawaan dari template sobat semuanya.
Pembelajaran Blogger kali ini, kita akan belajar tentang memodifikasi widget populer post supaya tidak memakai tampilan template bawaan.
Hal ini sebenarnya juga berguna agar blog kalian itu beda dari pengguna template template yang sama, sehingga memiliki ciri khas tertentu.. walau sebenarnya kita disini tidak belajar membuat CSS untuk widget ya, tetapi lebih sekedar memasang beberapa CSS yang sudah ada dan di kembangkan.
Jadi hanya memasang saja.
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;}
Penutup
Sebenarnya penggunaan widget sendiri bakalan mempengaruhi kecepatan situs kamu untuk di muat, jadi saran saya..
Jika memang dirasa dibutuhkan, kalian bisa pakai.. tapi jika dirasa tidak terlalu dibutuhkan, kalian bisa tidak menggunakannya.