Kalau kita bosan dengan tampilan widget bawaan blog tidak ada salahnya mengedit widget tersebut melalui "edit HTML" Dalam hal ini jika yang ingin kita robah tampilannya adalah widget "popular posts". Kita dapat memberi penomoran dengan label penomoran berwarna seperti contoh popular post milik EditBlog dibawah ini:
Caranya masuk kepengaturan dasbor blogger, pilih tema dan lalu pilih "edit HTML". Cari kode:
/*--- TRI Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
 |
| Gambar popular posts tema editblog |
]]></b:skin>Dan letakan kode dibawah ini tepat diatasnya:
/*--- TRI Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Lalu save.
Selanjutnya masuk pengaturan blog, pilih lay-out - tambahkan widget - pilih popular posts - save
Lihat kita telah berhasil memodifikasi tampilan "popular posts" menjadi memiliki nomor urut. Kalau kita ingin merobah warna nomor urut cukup merobah kode warna cssnya (kami beri highligt kuning) silahkan robah sendiri kodenya.
font-size: 16px;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;
background: #FF1493;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #FF1493;
Tinggal hapus kode warna bawaan pilih dan kopi kode wanra baru yang dapat kita cari di web, lalu pastekan sebagai pengganti kode warna yang telah kita hapus tadi.
Atau klik link: Kode warna css lengkap DianAgung
Trik ini bekerja dengan baik pada tema sederhana blogger
Mantab tutorialnya mas hasilnya bisa sama persis seperti diblog ini.
BalasHapusYa he he
Hapusitu menyontek gaya popular artikelnya kompas, jejaknya bisa dibaca di inspect element
BalasHapusSoal gaya dan tiru meniru hal biasa dalam desain, itu hanya widget
BalasHapusKlo Cara memasang border dashed di sidebar gimana ya mas?
BalasHapusPada halaman HTML cari saja kode CSS :border: Memang banyak sih dan setiap tema beda tempatnya nanti tinggal cari yang ada hubungannnya dengan sidebar spt popularposts dst.
Hapusperhatikan tulisan tulisan sperti: dotted, dashed, solid, double, groove, ridge dll. tinggal robah nilai 0, jadi 7, 4 dst.
Biasakan saja mempelototi CSS, gan nanti ketemu..
atau bisa juga dengan memasukan kode melalui pengaturan blogger >> blogger desain tema >> pilih Tambahkan CSS :
Hapus.sidebar .widget {
border-bottom: 2px dotted #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Tinggal atur jarak border, coba coba saja ganti nilai 2px dan warna #000000 sesuai keingina