Cara membuat Entri popular keren
Entri populer sering kali menjadi bahan pertimbangan untuk mempercantik penampilan blog, setelah beberapa style penampilan lainnya diuprek-uprek pastinya ingin juga uprek-uprek bagian entri populer.
Ditemplate bawaan blogger tampilan untuk entri populer sendiri hanya sederhana dan kurang menarik tentunya, namun dengan hanya menggunakan kode css kita bisa merubah tampilannya menjadi lebih menarik dan tidak membosankan.
Apakah kalian juga ingin menggunakan entri populer yang menarik? jawabnya pasti iya,,, karena dengan membaca halaman ini pastinya mencari topik yang di bahas.
Tenang saja kawan entri populer itu mudah cara merubahnya,,, karena hanya copy paste kode css di bawah ini tampilan entri populer kalian sudah berubah tampilannya, dan kalian juga bisa menyesuaikan warna di setiap nomor entri dengan selera masing-masing.
Simak caranya sebagai berikut:
- Pertama masuk dulu di edit HTML, pastinya semua sudah paham cara edit HTML. Dan saya tidak menjelaskan langkahnya. Anggap kalian sudah masuk di edit HTML.
- Kemudian cari kode Entri Popular/ Popular post/ dan semacamnya sesuai kode css yang sudah ada di blog kalian, caranya tekan Ctrl+F kemudian di kolom pencarian bagian atas kanan ketik Popular/ entri-popular.
- Pastikan dulu ketik "Populer" tanpa tanda petik dua. kemudian enter. nantinya akan menemui banyak nama dengan Populer, berhentilah saat sorotan pada tulisan /* Css entri Populer /* atau /* Css populer /* intinya yang mirip-mirip.
- Kemuadian kalau sudah ketemu blok semua mulai dari tanda /* Css entri populer /* turun kebawah sampai batas sebelum tanda /* /* , atau kalau masih ada kode lain seperti contoh di bawah ini, cukup blok sampai batas tulisan merah ( sampai habis kode css popular yang ada ).
/* CSS popular */
.PopularPosts ul li:nth-child(10) {background-color:#C0C0C0;margin-right:1% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}
/* back to top */
#back-to-top {
background:transparent;
color:tansparent;
padding:8px 10px;
font-size:33px;
}
- Kemudian paste kode Css yang sudah dicopy tadi (tekan Ctrl+V)
- Kemudian Save.
- Terakhir lihat hasilnya.
Catatan: Sebelumnya cadangkan dulu template kalian untuk berjaga-jaga apabila terjadi error.
Lebih bagus blok semua halaman HTML (tekan Ctrl+A) lepas (tekan Ctrl+C) dan pastekan di Note++.
Karena menyimpan sementara di note++ berbeda dengan cadangkan template, bedanya saat kita menggunakan lagi template yang sudah dicadangkan maka widget yang sudah terpasang rapi akan berantakan dan terkadang kode script juga hilang hanya ada Title saja.
Tetapi saat di simpan sementara di note++ sedangkan kita mau memakai templatenya lagi yang sama persis dengan sebelumnya kita tinggal Copy paste maka tidak ada yang berubah semua tampilan template kita.
/* Custom CSS for Blogger Popular Post Widget */
.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 img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family: arial, sans-serif !important;
font-size: 12px;
font-weight: bold !important;
display: block;
position: absolute;
top: -5px;
right: -5px;
border-radius: 16px;
background-color: #333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
padding-right:0px !important;
border: 2px solid #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#FFC0CB;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EEE8AA;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#98FB98;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#ADD8E6;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#D8BFD8;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#D2B48C;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#FFE4E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#E0FFFF;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#E6E6FA;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#C0C0C0;margin-right:1% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
Ket:
- Ganti warna sesuai selera yang saya kasih blok warna pink, tiap nomer warnanya berbeda-beda, apabila ingin warna sama ganti semua dengan kode sama, apabila tidak ingin kasih warna/ hanya warna putih ganti semua kode dengan transparent/ #fff.
- margin-right:1% !important} adalah untuk mengatur lebar garis tepi kanan tiap nomor entri popular, semakin besar nilai % maka akan semakin lebar dan otomatis background entri popular semakin sempit, contohnya : {background-color: transparent ;margin-right:1% !important}
Oke cukup sampai di disini penjelasannya.
Terimakasih...
Tidak ada komentar:
Posting Komentar