Cara mengganti atau merubah garis border

Taukah kalau anda bukan saja bisa menghilangkan border pada gambar postingan seperti yang saya jelaskan di postingan sebelumnya, tapi juga bisa mengganti, mengubah, menambah efek dan style pada border atau garis tepi foto atau gambar tersebut. Caranya pun cukup mudah, tetapi seperti biasa, anda disarankan untuk membuat backup terlebih dahulu sebelum merubah apapun pada template XML Blogger anda untuk mencegah hal hal yang tak diinginkan.


Merubah warna pada border:

• Untuk memulai, anda masuk ke dashboard Blogger anda lalu klik Layout – Edit HTML (tidak perlu mencentang kotak “Expand Widgets Template” karena kode yang akan kita cari tidak di hidden).

• Dengan menggunakan Ctrl + F pada browser, cari salah satu kode berikut:
  
  .post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
  
  atau
  
  img{
  padding: 4px;
  border:1px solid $bordercolor;
  }

• Kode diatas adalah kode tag untuk merubah style gambar. Setelah ketemu kodenya anda rubah kata bordercolornya dengan kode HTML warna sesuai dengan keinginan anda, seperti ini:
  
  
  border:1px solid $bordercolor;

  ganti menjadi

  border:1px solid #FF00FF;

• Ganti teks yang berwarna merah diatas dengan kode HTML warna anda, misalkan jika anda ingin ganti dengan warna merah tua anda menulisnya seperti ini: border:1px solid #B40404; dan jika anda ingin menggantinya dengan warna hijau muda, anda menulisnya seperti ini: border:1px solid #A9F5A9.

• Jika sudah, klik tombol “Save Template” untuk menyimpan settingan anda.

Untuk mengubah garis border dari garis lurus menjadi garis titik titik anda bisa menulisnya seperti ini:

border:1px dotted $bordercolor;

Untuk mengubah garis border menjadi garis terpotong potong anda bisa menulisnya seperti ini:

border:1px dashed $bordercolor;

Dashed style.

Kata kata yang anda masukkan pada kalimat kode tersebut akan mempengaruhi style garis bordernya. Style lain yang bisa anda gunakan adalah "groove", "inset", "outset", "double", "ridge" dan "hidden".

border 8px Groove, padding 2 px	border 8px Double, padding 2px
border 8px Inset	border 8px Outset
border 8px Ridge, padding 2px	border 8px Dotted

Apa itu padding? Padding adalah jarak antara garis tepi atau border dan gambar. Untuk memperbesar atau memperkecil padding anda bisa merubah angka pixelnya pada kode dibawah:

padding: 5px;

Untuk membuat background pada border, anda harus memberi padding terlebih dahulu pada border gambar tersebut. Setelah itu anda bisa menyisipkan kode tag di bawah berikut ini pada kode tag style gambar anda, seperti ini:

background: url(Image Location);

Ganti teks yang saya merahi diatas dengan alamat URL gambar anda. Kodenya nanti akan seperti ini:

.post img {
border: 6px solid #FF0080;
padding: 12px;
background: url(Http://www.hostgambar.com/fotoku.gif);
}

Contoh gambar atau foto yang memiliki background sebagai border:

| Cara menghilangkan garis pinggir header | Cara menghilangkan border atau garis pinggir |
| Rahasia Blogger Lainnya |