Cara Menambah Border Pada Image Postingan

Sabtu, 11 Februari 2012 | 4komentar

Cara Menambah Border Pada Image Postingan. Border Image ini akan memberikan efek bingkai pada setiap gambar secara otomatis dengan border radius setiap sudutnya.Tampilan yang dihasilkan trik ini bisa anda lihat pada postingan saya atau pada gambar di dalam postingan ini. Menggunakan border image dengan efek radius menampilkan kesan yang bagus dan agar terlihat rapih.Jika Anda berminat menambahkan kode border image kedalam template anda,silahkan ikuti langkahnya di bawah ini.

Image Border

Silahkan ikuti langkah-langkahnya sebagai berikut:
1. Masuk ke akun blogger.com
2. Kemudian Pilih Rancangan
3. Lalu Masuk Ke Edit Html
Kemudian Centang Expand Template Widget Terlebih dahulu.Jika sudah cari kode dibawah ini,untuk mempermudah gunakan ctrl+F
Lalu cari kode css .post img kalau di template yang saya pakai ini kodenya berbentuk seperti kode di bawah ini:

.post img, table.tr-caption-container {
  padding-top:4px;
  border:0px solid $bordercolor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin:1em 20px;
}
.post blockquote p {
  margin:.75em 0;
}

Lalu ganti semua kode css image yang saya pakaikan bacground berwarna ungu diatas dengan semua kode dibawah ini:

 .post img {background:url(http://1.bp.blogspot.com/-qqwB_laW-bs/TwtjkSnHtiI/AAAAAAAAC-4/YVZQMzB2XGU/s1600/H2.gif) repeat;padding:5px;box-shadow: 5px 5px 5px #6CBC63;-moz-box-shadow: 5px 5px 5px #848484;-webkit-box-shadow: 5px 5px 5px #A4A4A4;
border-radius:10px;-moz-border-radius:10px;}

Simpan template bila sudah yakin hasilnya,namun sebaiknya Pratinjau dahulu sebelum kejadian yang tidak diharapkan menimpa template kita.
Selamat berkreasi,semoga sukses dan bisa bermanfaat.
Share this article :
Judul: Cara Menambah Border Pada Image Postingan
Rating Blog: 5 dari 5
Ditulis oleh Eva Wangi
Anda sedang membaca artikel Cara Menambah Border Pada Image Postingan. Anda bebas Copas untuk kode HTML pada Tutorial Blogging dan Tips Blogging, namun jika terpaksa ingin mengutip secara keseluruhan harap memberikan link aktif dofollow ke URL inihttp://evawangi.blogspot.com/2012/02/cara-menambah-border-pada-image.html. Terima kasih sudah singgah dan berkomentar di blog ini.

4 komentar:

  1. terima kasih tipsnya.. saya sudah coba :)

    BalasHapus
  2. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
    Ready Stock ! BlackBerry Curve 9360 Apollo Rp.950.000,-

    BalasHapus

Tulis Komentar Yang Menyejukan Hati saja.
Tidak menerima Komentar Yang bermuatan Sara, Politik, Makar,
tidak pula Komentar Yang menjurus Iklan.
Terima Kasih sudah sedikit meluangkan Waktunya disini!

Ketik Yang Sobat Mau !

Artikel Terbaru

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2012. Shaka InghetS - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger