Blogspot: Cara Menambahkan Gambar dengan Efek Polaroid di Postingan

Menambahkan Efek Polaroaid Pada Gambar Dalam Postingan Blog

Blogger.com-Apakah Anda suka tampilan foto Polaroid? Ada sesuatu yang sangat keren tentang Polaroid retro, apakah saya benar atau saya benar ?! Nah hari ini saya akan menunjukkan kepada Anda cara memberi gambar postingan Blogger Anda dengan tampilan Polaroid.

LANGKAH 1

Masuk ke akun Blogger Anda. Di dasbor, kunjungi Theme > Edit HTML.

LANGKAH 2

Klik kursor Anda di mana saja di kotak kode dan kemudian tekan CTRL + F untuk membuka kotak pencarian dan cari kode ini:

.post-body img

LANGKAH 3

Soroti semua kode pos gambar sebagai berikut:

… Dan ganti dengan kode baru ini:

.post-body img {
padding: 1px;
latar belakang: transparan! penting;
border: 9px solid transparent! penting;

-moz-box-shadow: 3px 3px 10px rgba (0, 0, 0, .3);
-webkit-box-shadow: 3px 3px 10px rgba (0, 0, 0, .3);
box-shadow: 3px 3px 10px rgba (0, 0, 0, .3);
}

Simpan dan lihat gambar Polaroid Anda yang baru!

Catatan: Kode ini akan memberikan SEMUA gambar dalam posting Anda drop shadow dan border. Jadi jika Anda memiliki tanda tangan, saya akan merekomendasikan untuk menghapusnya.

BAGAIMANA CUSTOMIZE KODE

Jika Anda ingin menambah atau mengurangi ukuran batas putih, atur 9px dalam kode:

.post-body img {

padding: 1px;

background: transparent !important;

border: 9px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);

-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);

box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);

}

Jumlah yang lebih besar seperti 12px akan membuat border / batasan lebih tebal. Sejumlah kecil seperti 5px, akan membuat perbatasan lebih tipis.

Jika Anda ingin menggelapkan atau meringankan bayangan, tambahkan atau kurangi .3 di dalam kode:

.post-body img {

padding: 1px;

background: transparent !important;

border: 9px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);

-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);

box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);

}

Angka yang lebih besar seperti .8 akan membuat bayangan lebih gelap. Sejumlah kecil seperti .1 akan membuat bayangan lebih terang.

Silakan tinggalkan komentar atau email kami di info@designerblogs.com jika Anda memiliki pertanyaan atau ingin menyarankan ide untuk tutorial masa depan.