Cara Memberi Border dan Sudut Melengkung pada Gadget Label di Blogger

Tampilan Label tipe Cloud dengan border.

Pengen bikin gadget atau widget "Label" kayak gambar di samping? Caranya gampang koq. Yang penting pasang dulu gadget "Label" tipe "Cloud" di sidebar. Kalo udah bisa ikutin langkah-langkahnya di bawah ini.

Yang pertama, masuk dulu deh ke akun Blogger yang Ente punyain.

Ke-dua, klik menu Rancangan, abis ntu pilih deh tab Edit HTML.

Yang ke-tiga, klik Download Template Lengkap buat bikin salinan template biar nanti kalo ada apa-apa kita udah punya backupnya.

Terus yang ke-empat, cari deh kode ]]></b:skin>. Biar cepet dapet ketemu, pencet aja tombol Ctrl ama F trus masukin kode yang mo dicari.

Selanjutnya yang ke-enem, kopi kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#Label1 .widget-content{
height:auto;
width:auto;
padding:5px;
background:#FFFFE0;
border:1px solid #5588AA;
}

catatan ; tambahkan kode CS berikut (;-moz-border-radius:5px;) di bawah  border:1px solid #5588AA; untuk membuat border melengkung :

#Label1 .widget-content{
height:auto;
width:auto;
padding:5px;
background:#FFFFE0;
border:1px solid #5588AA;
-moz-border-radius:5px;
}

• Height ama width diisi auto maksudnya biar ukuran bordernya nyesuain sendiri ama ukuran lebar sidebar n keadaan label-label yang tersedia.
• Padding ntu jarak antara teks label ama keempat sisi border. Ganti aja angka 5 nya ama yang lebih gede nilainya kalo pengen lebih renggang.
• Background menunjukkan warna dari latar belakang. Silaken diganti sesuai keinginan Sobat. Kalo mo liat kode-kode warna dasar bisa ke sini ato kalo pengen yang lebih lengkap ke Daftar Warnanya Wikipedia aja.
• Border, tebel garis tepinya 1 px, trus stylenya solid n warnanya #5588AA. Sesuaikan dengan kemauan Sobat. Kalo pengen liat macem-macem border yang laen, bisa mampir di sini.

Sekarang klik tombol SIMPAN TEMPLATE ato kalo pengen liat previewnya dulu bisa klik tombol PRATINJAU.

Selamet mencoba dan semoga berhasil. Kalo nggak berhasil jangan salahin saya ye... ciccakk ccicak cicakk

Sumber : http://klikmunadi.blogspot.com 

Posted in: Tutorial Blogging