Membuat Label Stylish di Blog dengan CSS
sumber gambar : www.fromfuntomum.com
Ganti #6BB5FF untuk mengganti warna border.
Ganti transparent untuk mengganti warna background.
Ganti #666666 untuk mengganti warna font.
Ganti 7deg untuk mengganti berapa degrees (derajat) label berotasi ketika posisi pointer berada di atasnya (hovering).
3. Setelah terpasang, klik Simpan template.
4. Lalu pergilah ke Tata Letak --> Tambah Gadget (letaknya sesuaikan dengan yang Anda inginkan) --> pilih Label.
5. Untuk menampilkan seperti screenshot yang saya tampilkan di atas, silakan ikuti setting berikut,
jika ingin diganti, silakan sesuaikan dengan setting yang Anda inginkan, kecuali Cloud yang tidak boleh Anda ganti dengan Daftar untuk menampilkan efek seperti di atas.
Semoga berhasil.... :-)
Mengganti tampilan label di blog ini khusus untuk yang menggunakan platform blogger. Bagi Anda yang menggunakan platform lain seperti wordpress silakan coba cari lagi di mesin pencari, kemungkinan sudah ada yang membahasnya.
Penampilan yang wow memang bukan hal yang sangat penting dalam sebuah blog, karena yang penting menurut saya adalah blog tersebut dapat dibaca dengan mudah tanpa menyulitkan visitor, baik karena ukuran font, perbedaan warna font dengan background, dsb. Namun, pemilik blog biasanya menginginkan lebih dari sekedar cukup, sebisa mungkin penampilannya diperbaharui.
Salah satu yang bisa diubah disini adalah style label/efek animasi pada label. Berikut ini saya perlihatkan tampilan saat sebelum diubah dan setelah diubah.
Sebelum :
 |
| label cloud tanpa jumlah post sumbet gambar : dokumentasi pribadi |
 |
| label list dengan jumlah post ditampilkan sumber gambar : dokumentasi pribadi |
 |
| label cloud biasa dengan jumlah post ditampilkan sumber gambar : dokumentasi pribadi |
Sesudah :
 |
| label cloud setelah dimodifikasi dengan CSS, efek ketika mouse di atas label 3 sumber gambar : dokumentasi pribadi |
Untuk membuatnya,
1. Pertama kali yang Anda lakukan tentunya Login Blogger --> Template --> Edit HTML.
2. cari kode ]]></b:skin> lalu paste kode berikut tepat di atasnya,
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #6BB5FF; background:transparent; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666666;}
.label-size:hover { border:1px solid #6BB5FF; background:transparent; text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover { text-decoration: none; }
.label-size:hover { border:1px solid #6BB5FF; background:transparent; text-decoration: none;-moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover { text-decoration: none; }
Ganti #6BB5FF untuk mengganti warna border.
Ganti transparent untuk mengganti warna background.
Ganti #666666 untuk mengganti warna font.
Ganti 7deg untuk mengganti berapa degrees (derajat) label berotasi ketika posisi pointer berada di atasnya (hovering).
3. Setelah terpasang, klik Simpan template.
4. Lalu pergilah ke Tata Letak --> Tambah Gadget (letaknya sesuaikan dengan yang Anda inginkan) --> pilih Label.
5. Untuk menampilkan seperti screenshot yang saya tampilkan di atas, silakan ikuti setting berikut,
jika ingin diganti, silakan sesuaikan dengan setting yang Anda inginkan, kecuali Cloud yang tidak boleh Anda ganti dengan Daftar untuk menampilkan efek seperti di atas.
Semoga berhasil.... :-)
No comments