Wednesday, September 16, 2009

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;

bagaimana cara merubah atau mengganti garis border

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".
cara modifikasi garis border
border 8px Groove, padding 2 px
cara membuat efek pada garis border
border 8px Double, padding 2px
cara mengubah garis border
border 8px Inset
cara merubah garis pinggir gambarborder 8px Outset
cara merubah garis pinggir gambar
border 8px Ridge, padding 2px
cara merubah garis tepi gambar
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 membuat background sebagai border



7 comments:

  1. visit to my blog ya http://febriyan-sin.blogspot.com

    ReplyDelete
  2. Setelah dicoba, dan hasilnya perfect. Makasih ELEVEN MILLION ;)

    ReplyDelete
  3. ku7njungan balk kawan :) http://hijakbar.blogspot.com/

    ReplyDelete
  4. menarik untuk di coba nih kunjungan pertam gan salam kenal

    ReplyDelete