Wednesday, May 2, 2018

cara membuat border / garis persegi empat di setiap Widget/gadget blog



Helo sahabat blogger , terikasih sudah berkunjung di website saya, pada kesempatan kali ini saya akan memberikan tutorial cara membuat border/garis tepi di setiap Widgets/gadget blog . 

untuk para blogger mungkin sudah tidak awam lagi dalam membuat keren blognya , namun ada beberapa yang belum mengetahui bagaimana memberikan border atau garis tepi atau garis kotak pada setiap widgets blog, cara ini cukup mudah tidak perlu koding tinggal copy paste di artikel saya ini lalu edit sesuai keinginan. oke langsung saja ikuti langkah demi langkah ya.

langkah pertama (1)

1.  Copy semua script yang ada di bawah ini 

     .sidebar .widget {
    text-align:align left;-moz-border-radius: 5px;-webkit-border-radius: 2px;border:1px solid #e6e6e6;background: #fff
.widget .zippy {
  color: $(widget.alternate.text.color);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

Langkah ke dua (2)

1. Buka blog
2. Masuk ke tema (Theme) 
3. Edit HTML
4. Cari kode <b:skin> untuk mempermudah pencarian kalian klik kursor sembarang di bagian
    kode manapun lalu tekan CTRL+F , akan keluar kotak pencarian (search) , tulis kode kode ini
    <b:skin> , kemudian tekan enter, buka dalam dari kode tersebut (lihat contoh gambar dibawah)

5.  Cari kode /* Widgets dan paste script diatas (langkah 1) tepat dibawah kode tersebut 
     (lihat contoh gambar dibawah)

Langkah ke tiga (3)

1. setelah di paste jangan langsung simpan dulu, ubah script langkh pertama sesuai keinginan kalian,
    untuk mempermudah saya akan memberikan keterangan script :

a. Border radius: 2px (warna kuning dalam script)
    1. Border radius adalah sudut setiap border
    2. 2px (pixcels) adalah bentun setiap sudut border , semakin tinggi nilai pixcels akan semakin
        melengkung di setiap sudut bordernya ( rubah sesuai keinginan kalian)

b. border:1px  (warna orange dalam script)
    1. Border adalah garis yang membentuk persegi empat (kotak)
    2  1px (pixcels) adalah ketebalan garis border (rubah sesuai keinginan kalian) semakin tinggi
        nilaii akan semakin tebal garis border tersebut.

c. #e6e6e6  adalah warna garis border, jika ingin merubah warna tinggal search di google dengan kata
    kunci color html , banyak tersedia website color html, tentukan warna dan copy kode warnanya
    dan paste script tepat di kode bewarna biru di script

d. background: #fff
    1. background di script berarti latar pada setiap widget
    2. #fff adalah warna dari latar background setiap widgets (untuk kode #fff berarti warna putih)
    3. jika ingin merubah menggunakan background gambar/gift yang kalian miliki, ganti kode #fff
       dengan kode url gambar script nya menjadi background: url(link gambar kalian) jika tiadak
       abaikan langkah ini.

2. setelah sudah merubah script sesuai keinginan  pratinjau tema terlebih dahulu, jika border sudah
    muncul di setiap widgets kemudian simpan tema (save template)

lihat hasil script border di widgets/gadget template blog saya 

terima kasih sudah berkunjung dan membaca artikel saya. Semoga bermanfaat yaa :) 

No comments: