Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Gallery Photo Efek Polaroid Pada Blog

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).
Gallery Photo Efek Polaroid Pada Blog
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://lh6.googleusercontent.com/-QNjuCWVlEsw/Uc7kxd0-rKI/AAAAAAAAFN8/Nwx8QQ7jwx4/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://lh3.googleusercontent.com/-R3oxg7pLrUQ/Uc7kxHnUqQI/AAAAAAAAFN0/4xyeF9rO5p8/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://lh4.googleusercontent.com/-HalPVQkXh3E/Uc7kwuVDwdI/AAAAAAAAFNw/NTv_AlX3HO4/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://lh5.googleusercontent.com/-bhNMR21h5eM/Uc7kwXeZoYI/AAAAAAAAFNk/dEhuMUY4EFU/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://lh4.googleusercontent.com/-luGfMboNxZE/Uc7kwNNhwWI/AAAAAAAAFNg/vJ7Z6TUHyUw/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://lh5.googleusercontent.com/-6ilkN7_0Rps/Uc7ku29b1eI/AAAAAAAAFNU/eDPlfvimshI/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://lh5.googleusercontent.com/-EZN7bcJnTXg/Uc5Z3u_S_LI/AAAAAAAAFNE/PscW4B1qPUU/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://lh3.googleusercontent.com/-dLZpo5RAPhg/Uc5Z3F--7GI/AAAAAAAAFM8/x75n2K88lCo/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://lh6.googleusercontent.com/-hcrnz9SfWMM/Uc5Z3PC_EPI/AAAAAAAAFM4/Otn6uIGQ7ME/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://lh3.googleusercontent.com/-A5TtTz2RkeU/Uc5Z1iv4kxI/AAAAAAAAFMs/6KHSbFsJg6U/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://lh4.googleusercontent.com/-YCPvq0AqAjs/Uc5Z0yf6HsI/AAAAAAAAFMk/84cPU7jLU3Q/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://lh5.googleusercontent.com/-3Ur85LAs7iE/Uc4GpFQQL9I/AAAAAAAAFHs/bO4QajaPOuQ/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://lh4.googleusercontent.com/-KE5URTtt9Ks/Uc4GoxmIdNI/AAAAAAAAFHg/I_ywCM9aIMc/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://lh5.googleusercontent.com/-YASSfHDoQxM/Uc4GoYwvbAI/AAAAAAAAFHc/FgRmunPSk7s/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:

Berlangganan artikel via email

22 Response to "Membuat Gallery Photo Efek Polaroid Pada Blog"

wah kapan-kapan nyoba ah terimakasih sobat infonnya

Balas

selamat pagi Sob,,,tapi apa kode CSS nya tidak membuat blog berat Sob ? kalau tidak saya mau mencobanya...

Balas

jumlah foto yg bakal di masukin ....bisa bebas di tentuin senfiri ya mas :)

Balas

kok bisa gitu yah? sepertinya foto2 nya numpuk tapi bisa kelihatan. kereeennnn

Balas

Keren nih tutorialnya. Izin nyimak dan nyomot ya sohib..
Btw, terima kasih sudah berbagi.

Balas

mantebs nih tutornya sobat,,,makasih yah saya coba dl ah :)

Balas

Thanks sob... bisa dicoba entar di blog yang ringan dulu hehehe...

Balas

gambarnya cewe cewe.. haha.

Balas

makasih atas sarannya mas...udah saya ganti sesuai menurut saran dari mas andes,,skali lagi makasih :)

Balas

saya sudah lihat demonya, memang menakjubkan..luarbiasa :-)

Balas

Makasih gan udah dishare disini :)

Balas

Waahhh, keren nih friend :)
terimakasih

Balas

manteb nih mas andes boleh disedot tutornya

Balas

mantaaap, itu maksudnya seperti membuat menu dgn foto ya kang... wah .. kerennn .... kpn2 mau ikutan nyoba ah ... :)

Balas
avatar
Anonymous

bookmark aja dulu lah kalau ada waktu luang di coba

Balas

wah keren nih sob

Balas

keren mas bro,jadi kepengen mencoba,,,

Balas
avatar
Anonymous

Wow...... cakep bli....

Jadi bikin krasan disini lama-lama :D

Balas

Bagus banget keren nih mas

Balas

Kira2 bisa dipasang di halaman statis blog ga mas?
Trims sebelumnya dan salam kenal

Balas

makasih broo infonya menarik dan berguna, ayoo ikutan mampir ke gubuk saya ada barang bagus looh http://www.gustube.net/

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Gallery Photo Efek Polaroid Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode