bMLX7JBx7U3xHqbAzpXkrkGFL8v952MVfhKrexc8

Cara Membuat Bingkai Foto Keren atau Gambar Polaroid di Postingan Blog

Watsap Maiplen, kali ini aku mau berbagi Cara Membuat Bingkai Foto Keren atau Gambar Polaroid di Postingan Blog. Tips kali ini membuat gambar seperti hasil dari kamera polaroid, keren deh pokoknya.


Cara Membuat Bingkai Foto Keren atau Gambar Polaroid di Postingan Blog, TonangRGG, Tonang RGG, Dunia Tonang
Gambar Polaroid

Untuk menambah nilai lebih untuk postingan blog kita, pasti lah bingkai foto ini sangat tepat diterapkan di artikel kita. Apalagi untuk postingan kategori Lifestyle maupun cerita tentang keseharian kita, seperti yang aku terapkan di setiap artikel Lifestyle ku di blog ini. Fungsi dari Bingkai Foto atau Gambar Polaroid ini adalah menjadi pemanis untuk pembaca supaya lebih betah saat membaca artikel Lifestyle kita dan yang paling penting cara ini juga bisa menjadi nilai plus di mata Google. Langsung aja kita bahas, ikuti sesuai panduan ku ya maiplen.

Cara Membuat Bingkai Foto atau Gambar Efek Polaroid di Postingan Blog dengan CSS

Pertama, tambahkan kode dibawah ini di atas </style> atau ]]></b:skin>
/* Bingkai Foto / Photo Polaroid */
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 100%; /* Ubah Untuk Menyesuaikan Ukurannya */
margin: 20px auto 0px;
padding: 6px 8px 10px 8px;
display:inline-block;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background-color: #eee6d8;
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;
}
#polaroid figure:nth-child(even) {
margin:20px 18px 20px 25px;
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left: 5px;
top: -10px;
width: 75px;
height: 25px;
z-index: 1;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:unset;
right:10px;
top:-10px;
width: 55px;
height: 25px;
z-index: 1;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
#polaroid figcaption{
text-align:center;
font-family: cursive, Arial, Helvetica, sans-serif;
color:#454f40;
font-style:italic;
letter-spacing:0.09em;
margin-top:10px;
}

Ukuran foto akan otomatis menjadi besar atau full layar. Jika maiplen tidak suka atau ingin mengubah sesuai keinginan kalian, maiplen bisa ubah kode max-width: 100%; menjadi max-width: 400px.

Jika maiplen ingin membuat gaya tulisan (Google Font atau font family) pada judul gambar nya, bisa menambahkan kode dibawah di atas </style> atau ]]></b:skin>.
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

Lalu pada kode pertama tadi, #polaroid figcaption ubah font-family: cursive, Arial, Helvetica, sans-serif; menjadi 'Reenie Beanie', cursive;
#polaroid figcaption{
....
font-family: 'Reenie Beanie', cursive;
font-size: 1.75em; /* Tambahkan ini juga jika dirasa ukuran font terlalu kecil */
....
}

Nah untuk penggunaannya di postingan kita, berikut caranya;
Tambahkan seperti biasa gambar yang akan dibuat menjadi polaroid atau berbingkai di artikel postingan kita. Lalu copy kode dibawah ini dan masukkan ke html postingan (jangan di compose). Setelah itu ganti "URL_Gambar", "Judul_Seo_Friendly", "Judul_Gambar" sesuai keinginan maiplen.
<div id="polaroid">
  <figure>
    <img src="URL_Gambar" alt="Judul_Seo_Friendly" title="Judul_Seo_Friendly"/>
    <figcaption>Judul_Gambar</figcaption>
  </figure>
</div>

Jika maiplen ingin membuat gambar yang lebih dari 1 dan berjejer ke samping (khusus yang ukuran 400px), bisa kalian ulang-ulang kode <figure> sebelum <div id="polaroid">. Contohnya;
<div id="polaroid">
  <figure>
    <img src="URL_Gambar" alt="Judul_Seo_Friendly" title="Judul_Seo_Friendly"/>
    <figcaption>Judul_Gambar</figcaption>
  </figure>
  <figure>
    <img src="URL_Gambar" alt="Judul_Seo_Friendly" title="Judul_Seo_Friendly"/>
    <figcaption>Judul_Gambar</figcaption>
  </figure>
  <figure>
    <img src="URL_Gambar" alt="Judul_Seo_Friendly" title="Judul_Seo_Friendly"/>
    <figcaption>Judul_Gambar</figcaption>
  </figure>
  <figure>
    <img src="URL_Gambar" alt="Judul_Seo_Friendly" title="Judul_Seo_Friendly"/>
    <figcaption>Judul_Gambar</figcaption>
  </figure>
</div>

Untuk hasilnya, maiplen bisa lihat contohnya "DEMO" dibawah;

Nah, itulah maiplen cara membuat gambar polaroid di postingan blog. Jika ada yang kurang jelas bisa tanya di kolom komentar ya. Dan jika maiplen ingin meng-COPAS artikel ini, tolong ditambahkan url berikut ya https://tonangrgg.blogspot.com/2020/01/cara-membuat-gambar-polaroid-di-blog.html. Terima Kasih.
Referensi : https://www.igniel.com/2019/01/polaroid-photo-effect-css.html
SUBSCRIBE Please Subscribe My Youtube Channel: Tonang RGG and Share This Articel With Your Friend, Thanks From TONANGRGG.ID.
Related Posts
Bang Tonang
Horas Maiplen :) Terima Kasih sudah berkunjung, jangan lupa berikan saran terbaik kalian di kolom komentar ya :)

Related Posts

Post a Comment