Senin, 18 Februari 2013

2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog

2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog merupakan panduan dasar yang sudah banyak diketahui oleh teman-teman blogger, bahkan mungkin sebelum saya lahir garis border sudah ada heheee.. Menambahkan garis border (baca: bingkai) kadang perlu di lakukan untuk memberikan keindahan tersendiri pada tampilan gambar atau mungkin akan membuat keunikan tersendiri jika dilakukan dengan beberapa trik khusus ketika menambahkan garis border ini atau menggunakan bermacam garis border untuk membingkainya

Cara menambahkan garis border gambar blog ini ada dua cara yang bisa kita lakukan yaitu dengan cara manual dan otomatis.
  1. Cara Manual
    Yaitu memberikan garis border pada gambar dengan cara menambahkan kode-kode css secara langsung kedalam artikel gambar didalam area postingan. Sehingga setiap memasang gambar didalam artikel dan ingin menambahkan bingkai untuk gambar tersebut maka kita harus menyertakan kode css untuk bingkai gambar ini.

    Berikut contoh sekaligus demonya..

    Gambar tanpa garis borderGambar dengan garis border
    2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog
    2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog

    Untuk memberikan garis border secara manual untuk artikel gambar, silahkan masukkan kode berikut ini

    <div style="border: 5px solid blue;">
    <img alt="Judul" height="125" src="Link Gambar" title="Judul" width="200" /></div>
  2. Cara Otomatis
    Yaitu menambahkan kode-kode css untuk garis border gambar didalam kode template sehingga jika ketika kita membuatnya secara otomatis maka seluruh tampilan gambar di artikel akan memiliki garis border yang sama antara tampilan gambar yang satu dengan yang lainnya.

    Untuk membuat garis border gambar blog secara otomatis ini, cukup menambahkan kode berikut kedalam halaman pengeditan template blog anda namun jika didalam template sudah tersedia kode berikut, kita cukup memodifikasinya sesuai dengan keinginan dan tidak perlu ditambahkan lagi

    Berikut cara menambahkan garis border gambar blog secara otomatis
    • Masuk ke menu Template >> Edit Html >> tekan Ctrl+F
    • Silahkan cari kode post .img atau post-body img didalam template blog. Jika sudah ada maka cukup memodifikasinya sesuai dengan keinginan
    • Jika tidak kode post .img, tambahkan kode berikut sebelum atas diatas ]]></b:skin>
      .post-body img {padding:15px; background:#FFF; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;}
      .post-body img:hover {border-radius: 0% 50%; box-shadow: 0px 0px 15px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer;}
    • Lihat hasilnya disetiap tampilan gambar yang ada didalam artikel
Selanjutnya, untuk menampilkan gambar menggunakan border atau bingkai silahkan pilih sesuai keinginan anda. Apakah menggunakan cara manual atau otomatis
Dan, terimakasih telah berkunjung, silahkan tinggalkan komentar anda untuk artikel ini, 2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog

2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

23 komentar:

  1. thank you, saya sudah mencoba..^^

    BalasHapus
  2. ini yang saya cari,Terimakasih kawan and ijin nyontek tutornya,,,

    BalasHapus
  3. mba mau tanya nih..
    gimana buat pop-up komentar ?
    dan penempatanya...
    saya sudah coba ,, ditempelate saya yang blogazine
    berhasil tapi belum maksimal..
    jika mba ini bisa membantu, saya akan sangat berterimakasih
    maaf sebelumnya menyimpang dari permasalahan !
    (alamatnya Blog: gallery1993.blogspot.com)
    Terimakasih.

    BalasHapus
    Balasan
    1. bukankah pop up komentar bisa di setting di menu post dan komentar mas Aji?

      Hapus
  4. terima kasih banyak Mba Sri

    BalasHapus
  5. kelihatan cantik diberi border seperti bingkai poto jadinya hehehehehehe

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia