Halaman

    Social Items

Cara Membuat Bingkai Foto Polaroid di Blog

Salah satu cara supaya blog kamu terlihat rapi dan bagus adalah dengan menggunakan foto yang menarik untuk dilihat.

Katanya, dengan menambahkan foto pada blog akan menambah nilai untuk lolos Google AdSense. Terlepas dari benar atau tidaknya, tidak ada salahnya untuk mencoba.

Apalagi, saya akan memberikan tutorial blogger bagaimana Cara Membuat Bingkai Foto Polaroid di Blog yang tentunya membuat blog kamu semakin menarik dan mengundang banyak pengunjung.

Jadi, tutorial di bawah ini bukan menjadikan foto kamu langsung dirubah menjadi polaroid, hanya memberikan efek polaroid pada blog saja.

Saya akan membuat memberikan 2 style yang dapat kamu pilih dan kamu gunakan dalam blog kamu.

Silahkan cek demo di bawah ini untuk melihat hasilnya

1. STYLE 1



Tutorial Efek Polaroid STYLE 1


Log in Blogger - Tema - Edit HTML - Cari kode ]]></b:skin> atau kode </style> - letakkan kode CSS di bawah ini tepat di atasnya.

.polaroidOB {
  background: #fcfcfc;
  box-shadow: 0 0 10px #101010;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.polaroidOB:before, .polaroidOB:after {
  width: 100px;
  height: 40px;
  display: block;
  content: &quot;&quot;;
  background: hsla(40, 100%, 80%, 0.4);
  position: absolute;  
}

.polaroidOB:before {
  left: -35px;
  top: -5px;
  transform: rotate(-45deg);
}

.polaroidOB:after {
  right: -35px;
  top: -5px;
  transform: rotate(45deg);
}

.polaroidOB picture {
  position: absolute;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 3em;
  overflow: hidden;
}

.polaroidOB img {
  display: block;
  max-width: 100%;
  height: auto;
}

.polaroidOB figcaption {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 1.6em;
  line-height: 1.3em;
  text-align: center;
  height: 3em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Cara Penerapannya


Buat postingan - Pilih HTML bukan Compose - Salin kode di bawah ini dan tempelkan ke dalam kolom HTML

 <figure class="polaroidOB">
   <picture>
     <img src="_URL_GAMBAR_DI SINI_" />
   </picture>
   <figcaption>Instagram my life</figcaption>
 </figure>

Ganti teks yang saya beri tanda dengan URL Gamabar kamu


2. STYLE 2



CSS STYLE 2


/* Polaroid Photo Effect by igniel.com */
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 100%; /* Lebar maksimal gambar */
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: 'Reenie Beanie', cursive;
font-size: 1.75em; /* Tambahkan ini juga jika dirasa ukuran font terlalu kecil */
color:#454f40;
font-style:italic;
letter-spacing:0.09em;
margin-top:10px;
}
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

Cara Penerapan STYLE 2


<div id="polaroid">
  <figure>
    <img src="URL_GAMBAR_DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption gambar</figcaption>
  </figure>
</div>

Demikian tutorial Cara Membuat Bingkai Foto Polaroid di Blog, sampai ketemu di tutorial selanjutnya yah...

src: www.igniel.com

Cara Membuat Bingkai Foto Polaroid di Blog

Cara Membuat Bingkai Foto Polaroid di Blog

Salah satu cara supaya blog kamu terlihat rapi dan bagus adalah dengan menggunakan foto yang menarik untuk dilihat.

Katanya, dengan menambahkan foto pada blog akan menambah nilai untuk lolos Google AdSense. Terlepas dari benar atau tidaknya, tidak ada salahnya untuk mencoba.

Apalagi, saya akan memberikan tutorial blogger bagaimana Cara Membuat Bingkai Foto Polaroid di Blog yang tentunya membuat blog kamu semakin menarik dan mengundang banyak pengunjung.

Jadi, tutorial di bawah ini bukan menjadikan foto kamu langsung dirubah menjadi polaroid, hanya memberikan efek polaroid pada blog saja.

Saya akan membuat memberikan 2 style yang dapat kamu pilih dan kamu gunakan dalam blog kamu.

Silahkan cek demo di bawah ini untuk melihat hasilnya

1. STYLE 1



Tutorial Efek Polaroid STYLE 1


Log in Blogger - Tema - Edit HTML - Cari kode ]]></b:skin> atau kode </style> - letakkan kode CSS di bawah ini tepat di atasnya.

.polaroidOB {
  background: #fcfcfc;
  box-shadow: 0 0 10px #101010;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.polaroidOB:before, .polaroidOB:after {
  width: 100px;
  height: 40px;
  display: block;
  content: &quot;&quot;;
  background: hsla(40, 100%, 80%, 0.4);
  position: absolute;  
}

.polaroidOB:before {
  left: -35px;
  top: -5px;
  transform: rotate(-45deg);
}

.polaroidOB:after {
  right: -35px;
  top: -5px;
  transform: rotate(45deg);
}

.polaroidOB picture {
  position: absolute;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 3em;
  overflow: hidden;
}

.polaroidOB img {
  display: block;
  max-width: 100%;
  height: auto;
}

.polaroidOB figcaption {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 1.6em;
  line-height: 1.3em;
  text-align: center;
  height: 3em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Cara Penerapannya


Buat postingan - Pilih HTML bukan Compose - Salin kode di bawah ini dan tempelkan ke dalam kolom HTML

 <figure class="polaroidOB">
   <picture>
     <img src="_URL_GAMBAR_DI SINI_" />
   </picture>
   <figcaption>Instagram my life</figcaption>
 </figure>

Ganti teks yang saya beri tanda dengan URL Gamabar kamu


2. STYLE 2



CSS STYLE 2


/* Polaroid Photo Effect by igniel.com */
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 100%; /* Lebar maksimal gambar */
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: 'Reenie Beanie', cursive;
font-size: 1.75em; /* Tambahkan ini juga jika dirasa ukuran font terlalu kecil */
color:#454f40;
font-style:italic;
letter-spacing:0.09em;
margin-top:10px;
}
@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

Cara Penerapan STYLE 2


<div id="polaroid">
  <figure>
    <img src="URL_GAMBAR_DISINI" alt="Tulis Judul yang SEO Friendly" title="Tulis Judul yang SEO Friendly"/>
    <figcaption>Caption gambar</figcaption>
  </figure>
</div>

Demikian tutorial Cara Membuat Bingkai Foto Polaroid di Blog, sampai ketemu di tutorial selanjutnya yah...

src: www.igniel.com

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel