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

3 Style Gallery CSS3 Photo Pinkbox Pada Blog

Gallery CSS3 Photo Pinkbox Pada Blog 3 Style Gallery CSS3 Photo Pinkbox Pada Blog – bergilirnya waktu setelah beberapa waktu lalu pernah membuat efek yang sama dengan adanya script jQuery dan menggunakan warna gelap pada sisi gambar yakni pada tutorial yang berjudul jquery gambar efek lightbox pada blog, maka tutorial ini sama pula halnya dengan efek tersebut. Namun yang cukup berbeda adalah pada gallery efek pinkbox ini dengan tanpa adanya script jquery dan pada opacity lightbox yang berwarna terang di sekeliling gambar dengan 3 style yang berbeda sehingga bagi yang ingin menggunakan dapat memilih satu di antara 3 atau bahkan semuanya dari efek gambar pinkbox yang ada. Tampilan default gallery gambar akan berbentuk thumbnail dan jika pada gambar tersebut di klik maka akan muncul gambar dengan ukuran/size aslinya dari gambar tersebut yang tentunya gambar jauh lebih besar dari ukuran thumbnail. Untuk membuat gallery gambar efek pinkbox ini cukup mudah di terapkan kedalam blog. Sebelum memulai ke tutorial lebih lanjut bisa juga jika ingin melihat tampilannya terlebih dahulu gallery photo ini jika di pasang kedalam blog, dengan cara klik tombol demo yang ada dibawah. Selanjutnya setelah memilih satu dari 3 style yang disukai, maka berikut adalah tutorialnya untuk cara memasang 3 Style Gallery CSS3 Photo Pinkbox 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 CSS ini didalam kolom tersebut). Gallery CSS3 Photo Pinkbox Pada Blog
ol,ul {list-style:none;}
.lb-album{
width: auto;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
width: 550px;
margin: 10px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
-webkit-transition: opacity 0.3s linear 1.3s;
-moz-transition: opacity 0.3s linear 1.3s;
-o-transition: opacity 0.3s linear 1.3s;
-ms-transition: opacity 0.3s linear 1.3s;
transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s linear 1.2s;
-moz-transition: opacity 0.3s linear 1.2s;
-o-transition: opacity 0.3s linear 1.2s;
-ms-transition: opacity 0.3s linear 1.2s;
transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
-webkit-animation: fadeInScale 1.2s ease-in-out;
-moz-animation: fadeInScale 1.2s ease-in-out;
-o-animation: fadeInScale 1.2s ease-in-out;
-ms-animation: fadeInScale 1.2s ease-in-out;
animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes fadeInScale {
0% { -webkit-transform: scale(0.6); opacity: 0; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
0% { -moz-transform: scale(0.6); opacity: 0; }
100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
0% { -o-transform: scale(0.6); opacity: 0; }
100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
0% { -ms-transform: scale(0.6); opacity: 0; }
100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
x:-o-prefocus, .lb-overlay img {
height: 100%;
}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan 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. Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML.
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="https://lh4.googleusercontent.com/-Nz0qTp7BVF8/Uc4hi8T-4kI/AAAAAAAAFKc/7_C1-KT16sM/s150-no/Thumb+%25289%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="https://lh5.googleusercontent.com/-MQJhOhu1czg/Uc4ho9KYlPI/AAAAAAAAFLk/eoj3t7kdY0I/w355-h533-no/foto+%25289%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-2">
<img src="https://lh5.googleusercontent.com/-ZBHRH4EQEqo/Uc4hhmEMGTI/AAAAAAAAFKQ/7s2aMAf_xyg/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://lh3.googleusercontent.com/-EzMllaX71RY/Uc4hom4XPwI/AAAAAAAAFLg/lzkNYSjz6gw/w355-h533-no/foto+%25286%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-3">
<img src="https://lh4.googleusercontent.com/-Rt2x0nITb8g/Uc4hit0x3cI/AAAAAAAAFKY/rXXHp9VqtKc/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://lh3.googleusercontent.com/-dUhFx_EQgEo/Uc4hoa0LQsI/AAAAAAAAFLU/laAtJkaNb3U/w387-h533-no/foto+%25288%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-4">
<img src="https://lh5.googleusercontent.com/-blM_3Tz82eg/Uc4hgO_cbPI/AAAAAAAAFJg/u5Dcr8pyzD0/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://lh5.googleusercontent.com/-qt-vmBY1B8Q/Uc4hl-2zc1I/AAAAAAAAFK4/nykKjU_DOxU/w501-h533-no/foto+%25282%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="https://lh4.googleusercontent.com/-gLZ6iX6b4vk/Uc4hh1N8CcI/AAAAAAAAFKE/Aslexngq5bM/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-5">
<a href="#page" class="lb-close">x Close</a>
<img src="https://lh3.googleusercontent.com/-e23BNJecWfA/Uc4hoPmzPrI/AAAAAAAAFLQ/Hl_iUDWMer4/s533-no/foto+%25287%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>

<li>
<a href="#image-6">
<img src="https://lh5.googleusercontent.com/-W9SMme_JQqg/Uc4hhA-cqgI/AAAAAAAAFJ0/Ae-LP2CCsE4/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://lh4.googleusercontent.com/-GpNSmGrUg5E/Uc4hmwRkYbI/AAAAAAAAFLE/i4qR2ruWOiU/w419-h533-no/foto+%25285%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-7">
<img src="https://lh3.googleusercontent.com/-qSgyBjG2b1Y/Uc4hg4ObtJI/AAAAAAAAFJw/nFSaseN83Ng/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://lh5.googleusercontent.com/-yqsqSQBvIhQ/Uc4hmkypqpI/AAAAAAAAFK8/undQLLsKAxs/s533-no/foto+%25284%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-8">
<img src="https://lh5.googleusercontent.com/-i_4nFXuq_34/Uc4hgF4I3QI/AAAAAAAAFJk/dv4ATYIwpO0/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://lh6.googleusercontent.com/-NGZhYWOmYCc/Uc4hmDlcR3I/AAAAAAAAFKs/gTWthkSUJqg/s533-no/foto+%25283%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-9">
<img src="https://lh4.googleusercontent.com/-xniba7GavXI/Uc4hgTf4UpI/AAAAAAAAFJ8/8UCcEX91kFE/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-9">
<a href="#page" class="lb-close">x Close</a>
<img src="https://lh6.googleusercontent.com/-iAulNQD7MSg/Uc4hl7TdlVI/AAAAAAAAFKo/XljQWntV0cs/w355-h533-no/foto+%25281%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>

</ul>
Keterangan:
Ganti URL GAMBAR diatas dengan gambar lain yang di inginkan. Selanjutnya untuk judul dan deskripsi gambar juga jangan lupa sesuaikan. Untuk menambahkan gambar lebih banyak lagi maka caranya copy kode yang berwarna biru, lalu paste sebelum kode berwarna merah.

Tutorial di atas adalah untuk efek PINKBOX STYLE #1, untuk membuat PINKBOX STYLE #2 dan #3 seperti pada halaman demo maka silahkan copy kode dibawah ini dan CARA PEMASANGANNYA SEPERTI LANGKAH DIATAS.

KODE PINKBOX STYLE #2

CSS
ol,ul {list-style:none;}
.lb-album{
width: auto;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: right;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
width: 550px;
margin: 10px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
-webkit-transition: opacity 0.3s linear 1.3s;
-moz-transition: opacity 0.3s linear 1.3s;
-o-transition: opacity 0.3s linear 1.3s;
-ms-transition: opacity 0.3s linear 1.3s;
transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s linear 1.2s;
-moz-transition: opacity 0.3s linear 1.2s;
-o-transition: opacity 0.3s linear 1.2s;
-ms-transition: opacity 0.3s linear 1.2s;
transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
-webkit-animation: scaleDown 1.2s ease-in-out;
-moz-animation: scaleDown 1.2s ease-in-out;
-o-animation: scaleDown 1.2s ease-in-out;
-ms-animation: scaleDown 1.2s ease-in-out;
animation: scaleDown 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes scaleDown {
0% { -webkit-transform: scale(10,10); opacity: 0; }
100% { -webkit-transform: scale(1,1); opacity: 1; }
}
@-moz-keyframes scaleDown {
0% { -moz-transform: scale(10,10); opacity: 0; }
100% { -moz-transform: scale(1,1); opacity: 1; }
}
@-o-keyframes scaleDown {
0% { -o-transform: scale(10,10); opacity: 0; }
100% { -o-transform: scale(1,1); opacity: 1; }
}
@-ms-keyframes scaleDown {
0% { -ms-transform: scale(10,10); opacity: 0; }
100% { -ms-transform: scale(1,1); opacity: 1; }
}
@keyframes scaleDown {
0% { transform: scale(10,10); opacity: 0; }
100% { transform: scale(1,1); opacity: 1; }
}
x:-o-prefocus, .lb-overlay img {
height: 100%;
}
HTML
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="https://lh4.googleusercontent.com/-Nz0qTp7BVF8/Uc4hi8T-4kI/AAAAAAAAFKc/7_C1-KT16sM/s150-no/Thumb+%25289%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="https://lh5.googleusercontent.com/-MQJhOhu1czg/Uc4ho9KYlPI/AAAAAAAAFLk/eoj3t7kdY0I/w355-h533-no/foto+%25289%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-2">
<img src="https://lh5.googleusercontent.com/-ZBHRH4EQEqo/Uc4hhmEMGTI/AAAAAAAAFKQ/7s2aMAf_xyg/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://lh3.googleusercontent.com/-EzMllaX71RY/Uc4hom4XPwI/AAAAAAAAFLg/lzkNYSjz6gw/w355-h533-no/foto+%25286%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-3">
<img src="https://lh4.googleusercontent.com/-Rt2x0nITb8g/Uc4hit0x3cI/AAAAAAAAFKY/rXXHp9VqtKc/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://lh3.googleusercontent.com/-dUhFx_EQgEo/Uc4hoa0LQsI/AAAAAAAAFLU/laAtJkaNb3U/w387-h533-no/foto+%25288%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-4">
<img src="https://lh5.googleusercontent.com/-blM_3Tz82eg/Uc4hgO_cbPI/AAAAAAAAFJg/u5Dcr8pyzD0/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://lh5.googleusercontent.com/-qt-vmBY1B8Q/Uc4hl-2zc1I/AAAAAAAAFK4/nykKjU_DOxU/w501-h533-no/foto+%25282%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="https://lh4.googleusercontent.com/-gLZ6iX6b4vk/Uc4hh1N8CcI/AAAAAAAAFKE/Aslexngq5bM/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-5">
<a href="#page" class="lb-close">x Close</a>
<img src="https://lh3.googleusercontent.com/-e23BNJecWfA/Uc4hoPmzPrI/AAAAAAAAFLQ/Hl_iUDWMer4/s533-no/foto+%25287%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>

<li>
<a href="#image-6">
<img src="https://lh5.googleusercontent.com/-W9SMme_JQqg/Uc4hhA-cqgI/AAAAAAAAFJ0/Ae-LP2CCsE4/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://lh4.googleusercontent.com/-GpNSmGrUg5E/Uc4hmwRkYbI/AAAAAAAAFLE/i4qR2ruWOiU/w419-h533-no/foto+%25285%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-7">
<img src="https://lh3.googleusercontent.com/-qSgyBjG2b1Y/Uc4hg4ObtJI/AAAAAAAAFJw/nFSaseN83Ng/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://lh5.googleusercontent.com/-yqsqSQBvIhQ/Uc4hmkypqpI/AAAAAAAAFK8/undQLLsKAxs/s533-no/foto+%25284%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-8">
<img src="https://lh5.googleusercontent.com/-i_4nFXuq_34/Uc4hgF4I3QI/AAAAAAAAFJk/dv4ATYIwpO0/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://lh6.googleusercontent.com/-NGZhYWOmYCc/Uc4hmDlcR3I/AAAAAAAAFKs/gTWthkSUJqg/s533-no/foto+%25283%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-9">
<img src="https://lh4.googleusercontent.com/-xniba7GavXI/Uc4hgTf4UpI/AAAAAAAAFJ8/8UCcEX91kFE/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-9">
<a href="#page" class="lb-close">x Close</a>
<img src="https://lh6.googleusercontent.com/-iAulNQD7MSg/Uc4hl7TdlVI/AAAAAAAAFKo/XljQWntV0cs/w355-h533-no/foto+%25281%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>
</ul>

KODE PINKBOX STYLE #3

CSS
ol,ul {list-style:none;}
.lb-album{
width: auto;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(https://lh4.googleusercontent.com/-dti6V32ORGY/UdIUeXCcjFI/AAAAAAAAFlI/3ryuyaMc1PM/h120/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(https://lh4.googleusercontent.com/-dti6V32ORGY/UdIUeXCcjFI/AAAAAAAAFlI/3ryuyaMc1PM/h120/arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
x:-o-prefocus, .lb-overlay img {
height: 100%;
}
HTML
<li>
<a href="#image-2">
<img src="https://lh5.googleusercontent.com/-ZBHRH4EQEqo/Uc4hhmEMGTI/AAAAAAAAFKQ/7s2aMAf_xyg/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://lh3.googleusercontent.com/-EzMllaX71RY/Uc4hom4XPwI/AAAAAAAAFLg/lzkNYSjz6gw/w355-h533-no/foto+%25286%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-1" class="lb-prev">Prev</a>
<a href="#image-3" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-3">
<img src="https://lh4.googleusercontent.com/-Rt2x0nITb8g/Uc4hit0x3cI/AAAAAAAAFKY/rXXHp9VqtKc/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://lh3.googleusercontent.com/-dUhFx_EQgEo/Uc4hoa0LQsI/AAAAAAAAFLU/laAtJkaNb3U/w387-h533-no/foto+%25288%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-2" class="lb-prev">Prev</a>
<a href="#image-4" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-4">
<img src="https://lh4.googleusercontent.com/-gLZ6iX6b4vk/Uc4hh1N8CcI/AAAAAAAAFKE/Aslexngq5bM/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://lh3.googleusercontent.com/-e23BNJecWfA/Uc4hoPmzPrI/AAAAAAAAFLQ/Hl_iUDWMer4/s533-no/foto+%25287%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-3" class="lb-prev">Prev</a>
<a href="#image-5" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="https://lh5.googleusercontent.com/-W9SMme_JQqg/Uc4hhA-cqgI/AAAAAAAAFJ0/Ae-LP2CCsE4/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-5">
<a href="#page" class="lb-close">x Close</a>
<img src="https://lh4.googleusercontent.com/-GpNSmGrUg5E/Uc4hmwRkYbI/AAAAAAAAFLE/i4qR2ruWOiU/w419-h533-no/foto+%25285%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-4" class="lb-prev">Prev</a>
<a href="#image-6" class="lb-next">Next</a>
</div>
</div>
</li>

<li>
<a href="#image-6">
<img src="https://lh3.googleusercontent.com/-qSgyBjG2b1Y/Uc4hg4ObtJI/AAAAAAAAFJw/nFSaseN83Ng/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://lh5.googleusercontent.com/-yqsqSQBvIhQ/Uc4hmkypqpI/AAAAAAAAFK8/undQLLsKAxs/s533-no/foto+%25284%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-5" class="lb-prev">Prev</a>
<a href="#image-7" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-7">
<img src="https://lh5.googleusercontent.com/-i_4nFXuq_34/Uc4hgF4I3QI/AAAAAAAAFJk/dv4ATYIwpO0/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://lh6.googleusercontent.com/-NGZhYWOmYCc/Uc4hmDlcR3I/AAAAAAAAFKs/gTWthkSUJqg/s533-no/foto+%25283%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-6" class="lb-prev">Prev</a>
<a href="#image-8" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-8">
<img src="https://lh4.googleusercontent.com/-xniba7GavXI/Uc4hgTf4UpI/AAAAAAAAFJ8/8UCcEX91kFE/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://lh6.googleusercontent.com/-iAulNQD7MSg/Uc4hl7TdlVI/AAAAAAAAFKo/XljQWntV0cs/w355-h533-no/foto+%25281%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-7" class="lb-prev">Prev</a>
<a href="#image-9" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-9">
<img src="https://lh5.googleusercontent.com/-blM_3Tz82eg/Uc4hgO_cbPI/AAAAAAAAFJg/u5Dcr8pyzD0/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-9">
<a href="#page" class="lb-close">x Close</a>
<img src="https://lh5.googleusercontent.com/-qt-vmBY1B8Q/Uc4hl-2zc1I/AAAAAAAAFK4/nykKjU_DOxU/w501-h533-no/foto+%25282%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-8" class="lb-prev">Prev</a>
<a href="#image-10" class="lb-next">Next</a>
</div>
</div>
</li>
</ul>

Berlangganan artikel via email

25 Response to "3 Style Gallery CSS3 Photo Pinkbox Pada Blog"

CSS3 memang keren ya, terima kasih

Balas

trik ini cocok banget utk mereka yg mengutamakan galeri foto. byk blog2 yg mengutamakan foto2 background dan wallpaper

Balas

visit and follow me back

http://tkj-cyber4rt.blogspot.com

Balas

wah... bagus nih buat di koleksi mas andes... ijin save ya...

Balas

Sangat mengesankan CSS3, bisa buat poto poto kita lebih kece terpampang di BLOG. Makasi Andes Rizky Nugroho

Balas

ijin bookmark dulu .. kerenn

Balas

wah keren nih tutorialnya makasih yah mas buat tutorialnya maen-maen dong mas ke blog ane http://registrykaskus.com

Balas

kenapa gak pernah pake model cowo selain admin ya.. haha

kidding.

Balas

terimakasih atas sharingnya, dulu saya sempat penasaran dengan penampilan gallery photo pink box.

Balas

mas andes memang jago kalau soal CSS,, hehehe..

Balas

Asiiiikkkkkkk .
Setelah sekian lama ku menunggu,
maksih mas andes :D

Balas

mantap mas Andes Tutornya,,ijin myontek ach,,,,

Balas

nunggunya dimana mbak iin hehe,ko gak ketemu saya sih hihi
{kidding}saja,

Balas

wah benar-benar sangat mantap sobat
terima kasih sudah berbagi ilmu

Balas

wah jadi menarik ya slider jquery pinkbox...jadi pengen belajar js nih saya mas

Balas

makin keren aja nih mas tutor blognya

Balas

Wuih manteb banget ini bang.... tar ane coba terapin... ;D

Balas

Keren mas tutorialnya... boleh dicoba nih css3 photo pinkboxnya, makasih udah share, sukses selalu :)

Balas

agak kurang paham mas, kalo pake CSS, tapi keren banget nih, saya aja yang nggak bisa mengaplikasikan nya

Balas

Keren sekali Mas Andes...ijin copas nggih, thank's be 4 and sukses selalu

Balas

MAs.. kok yang saya gambarnya gak rata.. ?

Balas

berarti Otak Loe rada bermasalah Gtu lah....
Coba deh instal ulang OTAK OTAK nya

Balas

Sob Keren Gw Kasih Jempol Deh Buat Situ....
terima Kasih atas ARTICLE nya :)

Balas

Admin :) visit and follow me back

http://anaktimor-17.blogspot.com

Balas

Admin :) visit and follow me back

http://anaktimor-17.blogspot.com


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 "3 Style Gallery CSS3 Photo Pinkbox Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode