Cara Membuat Widget Label Blog Unik dan Keren Dengan Kode CSS
Sobat pasti pernah melihat pada beberapa template terdapat Label Blog Unik dan Keren. Yang berbeda dengan label default blogger. Kali ini CaraCiri akan membahas cara modifikasi widget label menjadi unik karena lebih keren dan rapih.
Kalau anda belum pernah melihatnya. berikut penampilannya.
Jika anda menggunakan template bawaan blogger ataupun template custom namun dengan penampilan label yang biasa-biasa aja, spanda bisa menambahkan CSS berikut ini dengan mudah. gampang. dan cepat yang membuat Label Blog menjadi Unik dan tertata rapi.
“Fungsi / Kelebihan Menambahkan Widget Label yang menarik ini adalah menjadikan Widget label lebih enak dilihat dan menarik perhatian pengunjung"
Sebelum Membuat Widget Label Blog Unik dan Keren, anda harus melakukan hal berikut:
Cara Merubah Tampilan Widget Label Blog Unik & Keren
Kalau anda sudah menambahkan widget label. sekarang kita akan membuatnya menjadi unik dan Keren. Caranya sebagai berikut: ↓↓↓
1. Masuk ke Editor Template.
2. Caranya lalu pergi ke Dashboard Blogger →Template → pilih EDIT HTML.
2. Cari kode ]]></b:skin> atau </style>. Agar mudah, gunakan ctrl+f (klik dulu didalam box template editor).
3. Paste kode CSS berikut ini diatas kode ]]></b:skin> atau </style> (kemungkinan besar pada template anda sudah ada CSS Label. Cari .Iabel dan paste / ganti dengan kode ini)
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font
size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:8px inset#0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}
Anda bisa merubah warna-warna dalam widget label tersebut sesuai keinginan.
4. Simpan template. kemudian lihat hasilnya.
5. Cara lebih mudah meletakan kode CSS tanpa harus Edit HTML Template. Caranya seperti berikut ini.
1. Masuk Dashboard Blogger →Template→Sesuaikan→Tingkat lanjut→Tambahkan Kode CSS.
6. Selanjunya Simpan Perubahan.
Dan lihat hasilnya.
Bagi yang menginginkan tampilan label keren lainnya, bisa Hubungi Carciri Melalui Contact Us yang sudah tersedia,.
Demikian Tutorial mengenai Cara Membuat Widget Label Blog Unik dan Keren. Silakan tulis di kolom komentar apabila anda punya pendapat lain, atau hanya sekedar berbagi cerita keberhasilan ataupun kegagalan menerapkan. menanyakan sesuatu. ataupun sekedar berbagi unek-unek.
Selain itu jangan sungkan berbagi artikel ini dengan tombol share di bawah.
Kalau anda belum pernah melihatnya. berikut penampilannya.
“Fungsi / Kelebihan Menambahkan Widget Label yang menarik ini adalah menjadikan Widget label lebih enak dilihat dan menarik perhatian pengunjung"
Sebelum Membuat Widget Label Blog Unik dan Keren, anda harus melakukan hal berikut:
- Memasukkan artikel blog ke dalam kategori-kategori label (Baca Cara Membuat Label Kategori Blog)
- Memasang widget label (Baca Cara Menambahkan Widget Label Blog).
- Setelah kedua hal tersebut dilakukan. barulah sobat bisa melanjutkan ke langkah berikut.
Cara Merubah Tampilan Widget Label Blog Unik & Keren
Kalau anda sudah menambahkan widget label. sekarang kita akan membuatnya menjadi unik dan Keren. Caranya sebagai berikut: ↓↓↓
1. Masuk ke Editor Template.
2. Caranya lalu pergi ke Dashboard Blogger →Template → pilih EDIT HTML.
2. Cari kode ]]></b:skin> atau </style>. Agar mudah, gunakan ctrl+f (klik dulu didalam box template editor).
3. Paste kode CSS berikut ini diatas kode ]]></b:skin> atau </style> (kemungkinan besar pada template anda sudah ada CSS Label. Cari .Iabel dan paste / ganti dengan kode ini)
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font
size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:8px inset#0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}
Anda bisa merubah warna-warna dalam widget label tersebut sesuai keinginan.
4. Simpan template. kemudian lihat hasilnya.
5. Cara lebih mudah meletakan kode CSS tanpa harus Edit HTML Template. Caranya seperti berikut ini.
1. Masuk Dashboard Blogger →Template→Sesuaikan→Tingkat lanjut→Tambahkan Kode CSS.
6. Selanjunya Simpan Perubahan.
Dan lihat hasilnya.
Bagi yang menginginkan tampilan label keren lainnya, bisa Hubungi Carciri Melalui Contact Us yang sudah tersedia,.
Demikian Tutorial mengenai Cara Membuat Widget Label Blog Unik dan Keren. Silakan tulis di kolom komentar apabila anda punya pendapat lain, atau hanya sekedar berbagi cerita keberhasilan ataupun kegagalan menerapkan. menanyakan sesuatu. ataupun sekedar berbagi unek-unek.
Selain itu jangan sungkan berbagi artikel ini dengan tombol share di bawah.
Patut di uji coba nih
ReplyDelete