Mempercantik tampilan widget blogspot dengan memberikan garis border dan warna akan memberikan keindahan tersendiri apalagi yang menggunakan template bawaan blogspot atau defaultnya sudah tentu tampilan layoutnya sangat sederhana sekali.
Border pada widget blog merupakan garis kotak yang mengelilingi widget blog, Caranya sangan Mudah berikut langkah-langkahnya untuk membuat border pada widget blog supaya terlihat lebih rapi.
1. Login akun blogger Anda.
2. Pilih Template - Edit HTML - jangan lupa " klik Expand Template Widget."
3. Cari kode ]]></b:skin> gunakan Ctrl+F untuk lebih mudah
4. kemudian copy paste kode berikut tepat diatas kode ]]></b:skin>
Catatan :
Di atas adalah contoh cara memberi Garis border pada Label, silahkan ganti kode #Label dengan Kode Widget yang anda ingin beri border.
Kode yang berwarna kuning adalah warna border
5. Simpan template dan lihat hasilnya
Contoh ke dua jika anda ingin memberi garis border pada bagian lain seperti contoh ingin memberi border di bagian Navigasi menu Blog. Lihat Cara berikut :
1. Kembali pada langka sebelumnya
2. Pilih Template - Edit HTML - jangan lupa " klik Expand Template Widget."
3. Cari kode Navigation menu / Top Navigation atau Main Navigation
Kurang lebih anda akan menemukan kode yang mirip seperti berikut
Selanjutnya anda tinggal sisipkan saja kode border ke dalam kode menu-navigasi, lihat contoh di bawa.
Untuk lebih menyesuaikan anda bisa menyisipkan kode border seperti ini
Penjelasan : Border pada bagian atas ketebalan 2px. Border pada bagian bawa ketebalan 4px. Bagian kiri dan kanan 0px - itu berarti tidak ada border
Selanjunya jika anda ingin memberi Efek lengkungan pada border tambahkan lagi kode berikut :
Bagian kiri atas = border-top-left-radius:20px ;
Bagian kanan atas = border-top-right-radius: 20px ;
Bagian kiri bawa = border-bottom-left-radius:20px ;
Bagian kanan bawa = border-bottom-right-radius: 20px;
Jadi hasilnya akan terlihat seperti ini
4. Simpan Tempalte anda den lihat hasilnya.
Solid adalah tipe border yang di gunakan pada contoh di atas, silahkan ganti sesuai keinginan anda - Dotted, Groove dll. Baca - Beberapa Macam Border yang seringkali di Gunakan Pada Blog
Demikian - Cara Membuat Border pada Widget Blog dengan Mudah
Border pada widget blog merupakan garis kotak yang mengelilingi widget blog, Caranya sangan Mudah berikut langkah-langkahnya untuk membuat border pada widget blog supaya terlihat lebih rapi.
1. Login akun blogger Anda.
2. Pilih Template - Edit HTML - jangan lupa " klik Expand Template Widget."
3. Cari kode ]]></b:skin> gunakan Ctrl+F untuk lebih mudah
4. kemudian copy paste kode berikut tepat diatas kode ]]></b:skin>
SCRIPT CODE </>
#Label1 .widget-content{
height:auto;
width:auto;
padding:5px;
border:1px double #dcdcdc;}
height:auto;
width:auto;
padding:5px;
border:1px double #dcdcdc;}
Catatan :
Di atas adalah contoh cara memberi Garis border pada Label, silahkan ganti kode #Label dengan Kode Widget yang anda ingin beri border.
Kode yang berwarna kuning adalah warna border
5. Simpan template dan lihat hasilnya
Contoh ke dua jika anda ingin memberi garis border pada bagian lain seperti contoh ingin memberi border di bagian Navigasi menu Blog. Lihat Cara berikut :
1. Kembali pada langka sebelumnya
2. Pilih Template - Edit HTML - jangan lupa " klik Expand Template Widget."
3. Cari kode Navigation menu / Top Navigation atau Main Navigation
Kurang lebih anda akan menemukan kode yang mirip seperti berikut
SCRIPT CODE </>
.menu-navigasi{position:relative;display:block; width:100%;background:#fff;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
Selanjutnya anda tinggal sisipkan saja kode border ke dalam kode menu-navigasi, lihat contoh di bawa.
SCRIPT CODE </>
.menu-navigasi{position:relative;display:block; border:3px solid #ff1000; width:100%;background:#fff;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
Untuk lebih menyesuaikan anda bisa menyisipkan kode border seperti ini
SCRIPT CODE </>
border-bottom:4px solid #000; border-top:2px solid #000; border-right:0px solid #000; border-left:0px solid #000;
Penjelasan : Border pada bagian atas ketebalan 2px. Border pada bagian bawa ketebalan 4px. Bagian kiri dan kanan 0px - itu berarti tidak ada border
Selanjunya jika anda ingin memberi Efek lengkungan pada border tambahkan lagi kode berikut :
SCRIPT CODE </>
border-top-left-radius:20px ; border-bottom-left-radius:20px ; border-top-right-radius: 20px ; border-bottom-right-radius: 20px;
Bagian kiri atas = border-top-left-radius:20px ;
Bagian kanan atas = border-top-right-radius: 20px ;
Bagian kiri bawa = border-bottom-left-radius:20px ;
Bagian kanan bawa = border-bottom-right-radius: 20px;
Jadi hasilnya akan terlihat seperti ini
SCRIPT CODE </>
.menu-navigasi{position:relative;display:block; border-bottom:4px solid #000; border-top:2px solid #000; border-right:0px solid #000; border-left:0px solid #000; border-top-left-radius:20px ; border-bottom-left-radius:20px ; border-top-right-radius: 20px ; border-bottom-right-radius: 20px; width:100%;background:#fff;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
4. Simpan Tempalte anda den lihat hasilnya.
Solid adalah tipe border yang di gunakan pada contoh di atas, silahkan ganti sesuai keinginan anda - Dotted, Groove dll. Baca - Beberapa Macam Border yang seringkali di Gunakan Pada Blog
Demikian - Cara Membuat Border pada Widget Blog dengan Mudah
