Membuat Gallery Photo Efek Polaroid Pada Blog

Membuat Gallery Photo Efek Polaroid Pada Blog – pada umumnya kebanyakan atau bahkan mayoritas gallery photo yang terpadat pada blog rata-rata memang rapi dan tertata secara teratur, tidak seperti pada gallery photo yang satu ini. gallery photo ini memang terlihat sangat acak-acakan tidak karuan hingga seperti photo yang bertumpuk. Ukurannya photo juga tidak seluruhnya sama, dalam satu gallery ini size atau ukuran photo terlihat berbeda dari yang kecil hingga yang besar seingga efek polaroid pada gallery blog ini bukan malah membuat gallery blog semakin rapi tapi malah sebaliknya. Namun apa yang terjadi jika pada photo tersebut tersentuh oleh mouse? Maka tidak lain adalah efek hover pada photo cantik yang akan tampil dengan jelas walaupun photo tersebut pada sebelumnya terletak pada bagian bawah dan sudah tertutup oleh photo yang terdapat di atasnya. Walaupun photo tersebut pada posisi miring akan tetapi akan terlihat seperti posisi sediakala saat hover dan photo juga akan tampil sedikit lebih besar atau memiliki efek zoom dan rotate. Untuk melihat seperti apa hasilnya dari gallery photo ini, silahkan bisa di tinjau terlebih dahulu pada halaman demo. Untuk yang ingin menerapkannya kedalam blog, maka berikut adalah tutorial cara Membuat Gallery Photo Efek Polaroid Pada Blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

a.polaroid {
display: block;
text-decoration: none;
color: #333;
padding: 10px 20px 20px 10px;
width: 150px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 5 15px;
width: 150px;
height: 150px;
}

a img {
border: none;
display: block;
}

.photo-album {
position: relative;
width: 80%;
margin: 0 auto;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 800px;
max-width: 900px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album h1 {
position: absolute;
z-index: 5;
top: 150px;
text-align: center;
width: 80%;
line-height: 1.9;
}
.photo-album h1 span {
background-color: white;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
padding: 0.4em 0.8em 0.3em 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
border: 1px solid #6A6A6A;
}
.photo-album .small {
width: 75px;
padding: 6px 12px 12px 6px;
font-size: 0.6em;
}
.photo-album .small img {
width: 75px;
height: 75px;
}
.photo-album .medium {
width: 200px;
padding: 13px 26px 26px 13px;
font-size: 0.8em;
}
.photo-album .medium img {
width: 200px;
height: 200px;
}
.photo-album .large {
width: 300px;
padding: 20px 30px 30px 20px;
font-size: 1em;
}
.photo-album .large img {
width: 300px;
height: 300px;
}
.photo-album .img1 {
bottom: 10px;
right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.photo-album .img2 {
top: 50px;
right: 220px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
left: 300px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.photo-album .img4 {
top: 10px;
left: 300px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.photo-album .img5 {
bottom: 0;
right: 200;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img6 {
bottom: 10px;
right: 230px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img7 {
bottom:0;
left:300px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img8 {
bottom: -20px;
left: 300px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
bottom: 0;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img11 {
top: 0;
right: 200;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img12 {
top: 0;
left: 300px;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
transform: rotate(18deg);
}
.photo-album .img13 {
bottom: -20px;
right: 630px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img14 {
top: 90px;
left: 300px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img15 {
left:176px;
top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}

a:hover,
a:focus {
z-index: 5;
}

3. Klik Terapkan ke Blog.

Note: Untuk menaruh kode CSS tidak harus seperti langkah di atas, bisa juga dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk menampilkan gallery photo efek polaroid di Blog caranya copy kode HTML dibawah ini, kemudian paste ke dalam kolom posting mode HTML:

<div class="photo-album">
<h1><span>Faceblog Evolutions Gallery</span></h1>
<a href="http://mas-andes.blogspot.com" class="large polaroid img1"><img src="https://lh3.googleusercontent.com/-56cDkhODmBE/Ubv07yocBQI/AAAAAAAAEmE/-r2ya929wBE/w800-h533-no/Andes+%25285%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="polaroid img2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xD9Ll5L1skVWW5-QhDSzBHsEbzVL8QdK-xbjyrN5PciChsYzX4SxTUAOF22_7Xzsy_te1_fsw6vJ-BkQevx2ITwosifAmtGKvIvu7ln9V8HWMJ6AzKxk8Dg0l81z4cbLfsEGLx-RU9E/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="small polaroid img3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiov2LemjChA0FqajMETwlXL_Mu2AS_eZo0lhOSRs0rFCGHMGErUizZlbPZmVzwvGRcW2o3tQqSCxpqYopOlmruGe-DoscgrABY8C9LoUqqD8xGPj-ybmwmVRDqaWHYs5YGkUfkL77GPzw/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="medium polaroid img4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9d42BevmoxSCUwxomkvZtd5qwsgg5P4Xy0SN_fspBihvj8V83rBJ9u6dtlPqM0n2txuaPaYYlBRsXXxpcX9QhEGJ938VChyjwyeJeRmUet38Xvwwr09BMrqgqmBmiRHYd1nCc7CyrJs/w300-h200-no/Faceblog+Evolutions+%25281%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="polaroid img5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilNsg2N3-lzSMFGAYoT7cqFmU0m4yktrKTkCKAXWS5GbX8zvtVNiWp2su9TS8J5Em8efUXkJJlaNxcIKNrY1ZHkOnHWwO4G6Hwy72cUg_e0COZaMQ-xo0NJBlvm7re3jsfwrj0JFljPn4/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="polaroid img6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDBBVF5gjDg7hPqGUAgtmubAQo9ZiW46Up40rwaofpxDF0voQrZtX0xUDxOWILjbvjxbUYU6PmENZ68YNW6ZEjhsBB_KmJjG2b6xm7CQIYAFfhYEHxIlnG4wej8Gw8Wv7mFdcyGyOo1cY/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="polaroid img7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FTb4fi5DtcC7gBdlH-qwhdltpKIVsd4FrFYW466AP2T7qeVrVpojy8Nz078KY3g75dTLJda1LytaZ8Va_GTQ0qZM1rr77V0bh9uJ8mDgDyjpDpgptwC3goyfDAekBYH0nSClRz1kHu0/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="small polaroid img8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGN-uKsfk1gGB2OlBvljzda8mauohysU-2pOLWb96skfRARHNFrgjH59Sx4nu3FZfGAXm4CsddCa9I053Zvl1fH9bArcBPupcvqXrrkri8cjQnH2hG6dis3ZBwAaI9_CPDjflgR3RTls/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="medium polaroid img9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpmRhwPf-qQU8IYuCVjz7qVTDuLss6Ot0tCNEmGRrjvYXXObG1iXPplTZmS-_wRTSApEHM3HEvaRexE-VcMx0ka5t6H963N9AD9lvBFsCtPSSFSgpG-_8VK95I9KJZDXpE5Rf0Q7ZOJc/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="polaroid img10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcpQtmQ5LEnLrKHqEY7JbM8DlAQ3hpmfIKgeXs42kvThLUGlUhuPz1fuC56l1Y7_S8CFIR9HWusOZJS29RDIE2B83LVX2-E7q2h-YLfcyDpWW-N3MJwtj1WPnhljBMAkpEsSGtETeKTg/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="small polaroid img11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR6xy3YfUyMqjYXVYxZehSX-VHcgeWNGNwW_l7qkQQXhHcixGzpCBquf7hAnYywaF2S2qbb53GQyY22Xol23n363e-aeiKl6pg_2AxAvfsp9JIKyeqVhSwjN_JrFXqFNaAAMEgA-Lt_0/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="small polaroid img12"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Yb5V5Fkrdw6FQonzJp0lxpFW3xarup4q3b1a5mIMojXQ6AfCdej_SOlWCBblpgNsO-K_Fc8Jt7aQN9q6qOYgG_YKGywKEScYFRQc7_s0iLLXNJ6Zd4QZI8FMI8zqr0sM5XMNviXAcSE/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="small polaroid img13"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxn1vlArwf4A6IDeDqytutzMb0Eji9zv3Ev8tmL__Vo-9gEQNBQkWFX86yIcKw_CkHT7vyQw2CC_2I06YRhDvrXK_WQC4LAJDrPbeQVIaPLOyI3nzcGTVagDH57sr1EV5I5gSu7NBs8zw/w300-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="small polaroid img14"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVf29UUVG77FaXIRDFcTy32aWUNlPUgbkghlUII82oGxf7uPmaVxnCfSaq3sPDDq4WZLwR59COSGYWx_DdPjM4zOAuFX3alWAdiges-QIphlIL5jpdTCtgGUJxOP3ujqzkw9QpYUFkSpZ/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
<a href="http://mas-andes.blogspot.com" class="polaroid img15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvy4wB9B3E166Z_NwsxYp3REHYF9OlTiFq94KF3V9__BWDMEFqtzt6Y7HH8VugL_l8Fqyo28sxfjKm9iOVa1hQ7BfbufhmMwIBu5C0f1M0SC7k5uhXBcm2IKuGFZ3beKhYaBGxpEUOc4d2/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt=““>DESKRIPSI PHOTO</a>
</div>

Keterangan:

Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti  URL gambar yang di inginkan.

Langkah terakhir klik Save, maka selesai dan lihat hasilnya dari cara Membuat Gallery Photo Efek Polaroid Pada Blog.

DEMO:

Faceblog Evolutions Gallery

DESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTODESKRIPSI PHOTO