Konsep Logo Blog Menggunakan CSS

Pada kesempatan ini share mengenai cara memperindah logo blog sebenarnya ada banyak cara namun jika agan berminat tidak ada salahnya mencoba cara ini,,sebelumnya dalam membuat logo ini saya terinspirsi dari Maz-waone dan Opic-Blog yang keren dan menarik..nah untuk caranya ikuti langkah dibawah ini..

Masuk blog agan
pilih menu template/edit html
kemudian letakan kode dibawah ini pada bagian header blog agan
kalau di template ini saya meletakannya dibawah kode <div id='header-wrapper'>

<a class='emp-logo' href='http://digratisan.blogspot.com/'>
<span class='char char-e'>a</span>
<span class='char-hidden'>rie</span>
<span class='char char-b'>a</span>
<span class='char-hidden'>die</span>
</a>

dan seperti biasanya letakan kode cssnya diatas ]]></b:skin>

.emp-logo {display : block;width : 170px;height : 40px;margin :5px;
position : relative;}
.emp-logo span {display : block;float : left;margin : 0;height : 35px;margin-left :-3px; font-family:Alike,Georgia,"URW Bookman L",Serif;}
.emp-logo .char-e, .emp-logo .char-b{text-shadow :0 2px 2px #000;
color : #eee;font-size:48px;font-weight:bold !important;
transition : all 1s ease-out;}
.emp-logo .char-b {}
.emp-logo .char-b {left : -2px;border-color :none;}
.emp-logo .char-b + span {margin-left :0px;}
.emp-logo .char-hidden {font-size:28px;font-weight:bold !important;
text-decoration : none;letter-spacing : 0px;color : #58FAF4 ;width : 0;
opacity : 0;margin-top : 12px;overflow : hidden;
transition : width 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-out;
text-shadow :0 2px 2px #000;}
.emp-logo:hover .char-hidden {width : 50px;opacity : 1;
transition : width 0.6s 0.5s ease-in-out, opacity 0.3s 0.3s ease-out;} 
.emp-logo:hover .char-e, .emp-logo:hover .char-b{color:red;transition-duration: 1s;}
  .emp-logo:hover .char-m{margin-left :-12px;}

sampai langkah ini memang sudah selesai...
tetapi judul blog agan yang sebelumnya akan berbenturan dengan logo yang agan pasang

untuk menyembunyikan judul blog agan yang sebelumnya tambahkan kode display:none
pada script header sebelumnya

dan untuk beberapa script yang saya tandai  bisa agan sesuaikan atau dimodifikasi lagi sesuai kemauan dan selera masing - masing....

Selamat mencoba semoga bermanfaat...

Read More

Gallery CSS3 Efek Hover Pada Gambar di Blog

Gallery CSS3 Efek Hover Pada Gambar di Blog – untuk membuat efek hover pada tutorial ini terdapat 5 type hover yang berbeda sehingga untuk membuat hover image pada blog anda mempunyai banyak pilihan. Dibawah sudah saya sediakan 5 type kode CSS untuk image hover yang dapat anda pilih untuk kemudian dimasukan kedalam template blog dan mempercantik tampilan gallery image pada blog anda. Untuk memilih kode yang cocok untuk diterapkan kedalam blog, terlebih dahulu lihat demo gallery dan pilih pada type gallery tersebut jika  sudah cocok kemudian masukan kode CSS yang ada dibawah kedalam template blog anda. Setelah itu kemudian anda dapat dengan mudah membuat gallery di postingan dengan hover yang sudah anda pilih tersebut. Terdapat 5 demo image hover yang berbeda dan silahkan anda lihat pada button demo dibawah. Untuk membuat gallery image hover maka berikut adalah tutorialnya untuk cara menerapkan Gallery CSS3 Efek Hover Pada Gambar di Blog:

Demo

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini kemudian klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode CSS didalam kolom tersebut).

.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielsO4sOxDkCIYVC4D4M_HRjkLZ2oAnlN2KRjszeIMc_u29hdeS79aeclmdD4WKeM1QUKqH-aaYQQ_xrwSBFmTfTBvO7vxWYKtwDWIkcKrdH6H4OsEPVVB62UNuSLC03hignBYgjAUbNEE/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.effect img {
opacity:1;
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.effect .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:125px;
width:0;
height:0;
-moz-transform:translateY(-125px);
-webkit-transform:translateY(-125px);
-o-transform:translateY(-125px);
-ms-transform:translateY(-125px);
transform:translateY(-125px);
-moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
opacity:0;
-moz-transform:translateY(-125px);
-webkit-transform:translateY(-125px);
-o-transform:translateY(-125px);
-ms-transform:translateY(-125px);
transform:translateY(-125px);
-moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;

}
.effect:hover img {
opacity:0.7;
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
-ms-transform:scale(2,2);
transform:scale(2,2);
}
.effect:hover .mask {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.effect:hover a.info {
opacity:1;
-moz-transform:translateY(100px);
-webkit-transform:translateY(100px);
-o-transform:translateY(100px);
-ms-transform:translateY(100px);
transform:translateY(100px);
}

3. Klik Terapkan ke Blog.

Perlu di Perhatikan : 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 CSS3 Efek Hover Pada Gambar di Blog caranya copy kode HTML dibawah ini, kemudian paste kode tersebut pada kolom posting mode HTML lalu klik Publikasikan.

<div class="view effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYFUOIYLSq51Dm04JdLr41CYkAYiNzpLOILpX_qTwX7P5koNCMs6wDgbmIz_jLxKvx8QD7_q3VlyOimCi8-yXalpiruD5R_lzxGZBkyecj6AcRcxiFd0vH6b6ipkxHF8SJ42PuZa0biR4/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info" title="Full Image">Full Image</a>
</div>
</div>

<div class="view effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlLPryWC6M-6SRVNeMFbng5BaB4l3J09aYSyfxoBwudvwIgvV7EA6AC8CznaDCl6Cu1N1QX9Tmfq2CujBUZYdJCw15FIVbfb-IRrJ5h11TPWQvx09shdnll0gDlo4IeFnYMOrWDEb6Yw/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugLQ4FQ0YDhrPO1ngRrTvJcOPWVMNWaR9DWhaAvwo4i15YvyMDlsSl8sOVgVOixVlnmvIcZZRS5m2W5dXjMkZ7204uUPQuVITX7YBizMTcQxGhnSCDVOhXVVL_EK3zAa4nTaJ3TMM04Y/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c74NeBxfWRAHOZg00xXeBL8S2uQtJm9P-7yseSYKnh1rgwkf1C9uY3b1eShYmRp2DgHpNGKAijn_7pjT3WzSsSuPiOnecOheHYIc6lFNwtH3Y9a6ORrj_BqhJSDw2o3SKU0kmGN6n60/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

Keterangan:

• Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
• Diatas adalah untuk efek hover type 1, untuk membuat type 2-5 seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.

Kode Efek Hover Type 2
CSS

.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielsO4sOxDkCIYVC4D4M_HRjkLZ2oAnlN2KRjszeIMc_u29hdeS79aeclmdD4WKeM1QUKqH-aaYQQ_xrwSBFmTfTBvO7vxWYKtwDWIkcKrdH6H4OsEPVVB62UNuSLC03hignBYgjAUbNEE/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.second-effect .mask {
opacity: 0;
overflow:visible;
border:0px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.second-effect a.info {
position:relative;
top:-10px;
opacity:0;
-moz-transform:scale(0,0);
-webkit-transform:scale(0,0);
-o-transform:scale(0,0);
-ms-transform:scale(0,0);
transform:scale(0,0);
-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity:1;
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
-moz-transition-delay:0.3s;
-webkit-transition-delay:0.3s;
-o-transition-delay:0.3s;
-ms-transition-delay:0.3s;
transition-delay:0.3s;
}

HTML

<div class="view second-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQLtJwaY9j9y6WktVicvTPxtuVyv1amiXAhuTnXjddce7agquko5yQkW4PtXp5ETyjC23G39SwzEsEX2qLV98EeF-38P1VXivfGMqEUsudGHR0Xl-qmUkjY_PwVIdhS7De4Hyp4tEscds/w250-h200-no/Faceblog+Evolutions+%25289%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view second-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQNtBGGPwbmRitZjTFvQBFQTRQAQIb75tJKR0HqamcmbFcTyvCSVWDz-vzU2XpzH9m9AazB6vXbLyWlRg4_tsgArcngnsPyVGKWCsSOtSH_7Rf_Y2WGYS35CCo-J0TmgKrmOIOR-YAHj0/w250-h200-no/Faceblog+Evolutions+%252819%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>  

<div class="view second-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi835dzu2dLNbEdCcJL98uxrsg50G9iO9Fp0r4L9YQGe-budIZAgRdU-p-5ndWeCNg1nODsKjxuJeSvBOcmgTDi2Gl_8atDvZIxIb38CDzWIs7Ccd-CiPvxJhTmdyjMYDtkvib0AQlZ0KE/w250-h200-no/Faceblog+Evolutions+%252820%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view second-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGAuBENNAPSyKvqKm2wkuNzRgthq9Oa-s4qjEVrznB_JS2gjOHNVRgWAMtqIQfMmXv1-bKZIYpISzP58Q0vgFCSz2NFh7ZNFSNvKzwA4iIQ154LZ0Lic5FIcmyoWqklZtcNjbsrFpVrk/w250-h200-no/Faceblog+Evolutions+%252818%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

Kode Efek Hover Type 3
CSS

.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielsO4sOxDkCIYVC4D4M_HRjkLZ2oAnlN2KRjszeIMc_u29hdeS79aeclmdD4WKeM1QUKqH-aaYQQ_xrwSBFmTfTBvO7vxWYKtwDWIkcKrdH6H4OsEPVVB62UNuSLC03hignBYgjAUbNEE/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

HTML

<div class="view third-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDa_Jsx1X9hh6vfhWXRAEShMWzOKfY5SDoKGDNwg9spn5oGI8C2GTKaz5zqfrZ3JxMr4TAiI8nc8i775qKobq9WHEpQ1lCQbdZSoQ7meloHe6nCAKgPMk7YOOSIDawAXG4Nq4g0AVWi9c/w250-h200-no/Faceblog+Evolutions+%252817%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view third-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hAuOC_hbolvQd6WVDWwEGVn3EapLEV2kJIAY7Y-RdbHmWVKqkAoQ-CE1y8IBHec7ytqIBQIklM_lvRohs5s_0-_DaYW-Ci9Dx5jAt4sIAsLU81QarPiwvC4_L_78qJm9XwWFLeYEhMU/w250-h200-no/Faceblog+Evolutions+%252816%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>  

<div class="view third-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4Im6t6c2j55jwW4DkczTh4A2ZocYCHhO_KGAyF7qDfiFW4Kr7TjMyZJw2jP7JTE6SWGJlpom7CuVmEnNOemSkuVZoqg2fA-_C1RTk133SoWNqdTOpkjMgNbgUVjgeKcbg7JAAgSC1rI/w250-h200-no/Faceblog+Evolutions+%252815%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

<div class="view third-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_OT81_eeyhVmX8oi0vxKbAZy3UeIPTTcQEix0E1cz0Lfmff3CStiWGP41Miu8UG1TlFWiDt8aVFsWi6eiV09ukn9HBOtCUUBbhhSRCkkSGJ3U2GIbLQc9qiKJFa_gqxjYn0XWvj8S4Y/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" />
<div class="mask">
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

Kode Efek Hover Type 4
CSS

.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielsO4sOxDkCIYVC4D4M_HRjkLZ2oAnlN2KRjszeIMc_u29hdeS79aeclmdD4WKeM1QUKqH-aaYQQ_xrwSBFmTfTBvO7vxWYKtwDWIkcKrdH6H4OsEPVVB62UNuSLC03hignBYgjAUbNEE/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.fourth-effect .mask {
position:absolute; /* Center the mask */
top:50px;
left:100px;
cursor:pointer;
border-radius: 50px;
border-width: 50px;
display: inline-block;
height: 100px;
width: 100px;
border: 50px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
opacity:1;
visibility:visible;
-moz-transform:scale(4);
-webkit-transform:scale(4);
-o-transform:scale(4);
-ms-transform:scale(4);
transform:scale(4);
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
opacity: 0;
border:0px solid rgba(0,0,0,0.7);
visibility:hidden;
}

HTML

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgI6V5HHBpalEjtC6CwsVlca8c85sgUWlCWlDK3xF-3w_OKAuR5xRDBisOUiyRKH-uTIYIOwPnognSysO-j90BCwuy91oVEIz3hyphenhyphenY890pFCrqSd8gvzHDjg1e65GfeMfEljhKH6uN7CU/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg" /></a>
<div class="mask"></div>
</div>

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhESENJZAIET5HCOTNJ0-ScjoT16TxFkq-j3_DNZies0CqfxZKZhe2_a-qwHyePkGOqozD0z7pqhp5okAjyEHZrt6rrK_QyJbJ0VKiDDc-If6t02bjBvDlFpZE8DrCSRCOGMy5uMq2x3No/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg" /></a>
<div class="mask"></div>
</div>

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghWW_pJjS5l1zRVSd7sXug5pO-WheAgQSy2IzdnZVVf_SENzvmF6rtX5VfOsNO8fwYz53Yx7_kSzDZJLF7iX4sAJW-MIXviewQERg3ozqCdwvh8SgEZrA9FTKAkio4uVprt99LInLXozw/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg" /></a>
<div class="mask"></div>
</div>

<div class="view fourth-effect">
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeVOfKY3FWO5JyPRMVj0fNsNpxBaFdHYpT_hqIzgragySvB1_pcumyLtUCxYFOP30U2qMpw8OfCKTu9jNCyuMuo1PbZdV3LxjY-8udX8NjnSmp_K0jHV7CzspTRBDEyUrEvtaG5a2thds/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg" /></a>
<div class="mask"></div>
</div>

Kode Efek Hover Type 5
CSS

.view {
width: 250px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 250px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielsO4sOxDkCIYVC4D4M_HRjkLZ2oAnlN2KRjszeIMc_u29hdeS79aeclmdD4WKeM1QUKqH-aaYQQ_xrwSBFmTfTBvO7vxWYKtwDWIkcKrdH6H4OsEPVVB62UNuSLC03hignBYgjAUbNEE/s20-no/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
width:20px;
height:20px;
}
.fifth-effect img {
opacity:0.2;
-moz-transition: all 0.3s ease-in;
}
.fifth-effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.fifth-effect:hover img {
opacity:1;
}

HTML

<div class="view fifth-effect">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPD9K8dSwIS1cu2AQGRcbnkJj8YLyXCgAxTDVJXiqv-1zfz1yaet1s_qaqgAqTko6q-z3R7zIxVXrM4WZvQfzRewnpksma8s09YUqpN9OHXxb1y7QOjaQ8sT9Q5ns42bDqzkBNUPXqt4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" /></a>
<div class="mask"></div>
</div>   

<div class="view fifth-effect">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvw_kSQLV6I_JJGadGbu2LRoRaML08ILDXZ-yyHiZZpiofipyLy6URUuVWLTmn3NtczB6hkz050oKhE-r_cOsVYHQF7m5zxa-MIAFqhu2r0gOzsKOd9gB57eIxjKtGUmie-3KTLOkdYd8/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" /></a>
<div class="mask"></div>
</div>   

<div class="view fifth-effect">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTmH44eeEMJ7qlYgpe_XadOOvYaCs89-4PMPyxvBHvWRxOCIwkmkGDjyO7wejhY6GNEw7mGtcea6OdTfGMRY_-atTfAA57a8DCew6R6sRaDe1B7iCc4-jfmaakTOSAFNcr8EqmCpANbk/w300-h200-no/Faceblog+Evolutions+%25282%2529.jpg" /></a>
<div class="mask"></div>
</div>   

<div class="view fifth-effect">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwt902eUqXEnFaJ2vXYPjFLOPe_JEYX6L4xnt4ZzzCO4b0mLloRAL7icmHw8hcB_EIoMbSn8XbEYpMJLVhrxs6CHFvXu_MYewuJvI9DYN477MmilkLEByRk0YVqd2J1Ju5nTEJ7DxCZg/w300-h200-no/Faceblog+Evolutions+%25281%2529.jpg" /></a>
<div class="mask"></div>
</div>

Read More

Efek Gambar Peel Back Dengan CSS3

Efek Gambar Peel Back Dengan CSS3 – merupakan efek gambar dimana saat mouse menyentuh gambar akan menampilkan efek hover seperti slide out yang berjalan secara mulus untuk menampilkan gambar kedua yang berada dibelakangnya. Efek animasi CSS3 ini berjalan secara halus sehinga lebih jelas terlihat saat onmouseover gambar akan terkesan menjadi lebih cantik. Hasilnya adalah sederhana namun ramping "Sebelum dan Sesudah" efek hover gambar. Dengan sedikit menambahkan kode CSS pada template blog kemudian menerapkannya dengan mememanggil kode tersebut kedalam postingan maka tidak akan terlalu sulit untuk membuat posting blog dan membuat variatif gambar dipostingan blog agar tampil lebih cantik. Cara pemasangannya pun sangat mudah dan dalam waktu yang sangat cepat, berikut adalah tutorial cara membuat Efek Gambar Peel Back Dengan CSS3 di postingan blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{ width: 300px;height: 354px;}
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}

5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.

<a class="nowandthen">
 <img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdnWCQGWt84Ck3dJiNR3YfXH-iLwgjXMKGXboKNg2Xy3FzEdh6mZB99Vb-WfnZtX_rd2kliDUzwFlIf0SeQloJb3JuXcvcf2LQZEeM4lv86NdC9XqYcGQWkG95P022aG6KiXkk-DPyKUx/s1600/peel-back-1a.jpg"/>
 <img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUoMgQRkIrcimZnyP7btHnrsDlh88vzLv3LL2HL7NP0NR68GVrgZ48H0eSPKd0Jsn3P0heAI-Emq7JOWxSURTnsOmq8QXgwSB2dT9hTAI9z_xI2a3B0NxBcMv3bcIq19RicBHgs0KovSj/s1600/peel-back1b.jpg"/>
</a>

Read More

Efek Gambar 3D Flip Dengan CSS

Efek Gambar 3D Flip Dengan CSS – sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa make up. Sebuah gambar pada posting blog tanpa adanya tambahan kode CSS maka gambar tersebut akan terkesan murni dan tidak memiliki efek yang ditampilkan saat disentuh mouse atau yang biasa disebut onmouseover. Membuat efek hover pada gambar dipostingan blog sangat banyak dan bahkan beragam bentuk yang ditampilkan hanya dengan menggunakan tambahan kode CSS, dan salah satunya pada tutorial membuat Efek Gambar 3D Flip Dengan CSS ini. Salah satu fitur inovatif di CSS3 adalah kemampuan untuk memutar elemen HTML dalam ruang 3D. Kode CSS yang terdapat dibawah adalah menunjukkan bagaimana untuk memutar 2 sisi elemen, baik di X atau Y axis untuk mengungkapkan isi di sisi belakang gambar. Hanya dengan menyentuhkan mouse ke arah gambar maka melihat efek flip pada gambar akan terlihat dan ini tidak memerlukan banyak cara untuk proses menerapkannya. Supaya lebih mudah, maka berikut adalah tutorial untuk membuat Efek Gambar 3D Flip Dengan CSS di postingan blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

div.flip{
position:relative;
width: 300px;
height: 250px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting blog.

<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqZYGyqCyrB5LWeFpjaMILrLgow5bL7KEEUYr50xUSGDVowwEiYaQGMClR6cfa-9UeKRO1KZTol52_dxHYPulbJS_CTIVbsuVoZZLoGPhiwOKTaOZyLsN17VA2eTYV6yGWBzRgh_MVJvj/s320/mujeres-munecas-23132-13.jpg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kdKK3pPoUqJlNk7ArNIqPptjK3DUmyEoiELfoE6C4s4YxfIoLnuUWI1Uo_yoIvT8943-fYyRvgVqaG8liRAEerFHAoAuub3V-uauDMvlPO9Ke9Gq_zylYvAqcRxCExZspzpQKP1r1I03/s320/mujeres-munecas-23132-23.jpg">
</div>
</div>
</br></br>
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97ePUHepL3c-eac8gDauj-oUD_YnnTmrpUk3Z8gy7Fko_Y4F2XMuwTKFqbi9yTbOnXXVEjVmkjrRHVej0FS3zNk3xy7Cjf4q1UiH3Gps30ZmXOjghN7F2HEPtFyD3Sh_HPf_Pjhb-MBr2/s320/mujeres-munecas-23132-19.jpg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0f8gwyPEd4QFlegZCNZWpTyy8j2YqAw_pEpnV5HZIAp70UVUhOOhkJBgYOhRo1gUxx_mj_hkfGLMcywXw9iOjQ03-j5BxieCkDvas0hVmG0nUzkIHtQRzvuzGbtlwB9Mh92x9tzUQPKtx/s320/mujeres-munecas-23132-12.jpg">
</div>
</div>

Keterangan: Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri.

Read More

3 Style 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:

Demo Style #1

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).

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjt6GL75pBIlNLke7KbUcrzd-hWRK10-xqtRgz7lIGGQaz_XuWUHkbBQt7txSZiHbiF_dh8v19EgsRcuZaEP3hHwWafROLcytfmuKW8t5QJL9gI5fDieBmPsjuwC1Vcg_MOt7smpQUUdI/s150-no/Thumb+%25289%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggU-em7kbdDXHXduD-fvOtKAtfTl3CpUp76ywoHSFIiUMnWv5DlkoRTdWExIsLYE63aHazkRB1FvO0dr0qFFFSlEXYKdNmHpT2_6su1lvD_ODqd91if1Hina-gI-QbOZW3IE9xQQfoCZE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9gMFzNKBcns91WbAXC_OoFsb8GDgPAgk9GnavFyWpxM8pokhcrGkNCxXdcsZdp-x1iymIOIuhFmLthaEZUkDrm9tgahgaFVlTPK602fBgHIjXWvnrs4eNtQQfT59ceMUlgCynfPrZ24/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBAuifMsH72T_VWLAu5NEpuLLJox_9pb-da0yzMVlDc8JNajW1BBVdyE4l97YkKHKeFrT4wrPGAgg5Q4rPgxT_BlC2ktLQvIk3o0anEZoG9_b5Ruc7WRFDGOyD2n5ymh-hR2nfi7ByMw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxYrrko9M_mdCfBxKeWly6LhttSvm5KGJaZKRN0u2X2dMmg7GXK2oEQpKFMaXB7_tnqepwmpw8YVcebWom7YwiwwsaunRse3C8EXZ0Harubrcjh8Oz4GEynFRt_qL8QgCDl2nS7JQ5Qw/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBdXgEhLmo6hhXBwZdwL5vIMpZApmgM_nvSgVQGyjlGeoP12a1Rl82wvh3usOKr0al9uPdPROMI6kXMeQQz8XhUmNYeQgiLbDk5DCpL3apBehjGbrSIFBG7o2YOp9V2XeCXyj9uDgKra8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU47leXozXmfz9qjp6ftfsTlgJMdK8z6b1bjZIUGuAOpcezy2uipP4-UtG9Jdd6rJJ5yyX2zhkDp7lbvzTZ-fEuiilyiAu78fBqS2U8gzqPta5QXgJxXFtxdmPJs4WaxoJawv8CUELNw/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGwxqq_GGmSt61Nb1BJ35Mi750pcEBfxp6gWZxNoo2NMEpOm6S_jQsU2ADCKeN5kCR8qXpC-tEdaeKgFrcXv78Wn2NlG8jYjhHY4ykJkcjZ-I0Av6PKqRSQ9J6cEys1ROILHVz6156Do/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCf3WISX0LFRxkZTKSnN9FboNEtdo89FM8G25-XeyOoErfqQ6NdBlQUhztxJp2fQVhtR46OEhfg46UtYZ-PReoeRnhf-OVra18yEDQj92r-RtKR4YreSrLYjyY-t8nc4QO5q0BZ_9T4zY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt4FusirSk7EU8hq64ixm63CQOUL1Ntf_ZqOv8bttw4KazHp5lFNYl41bjYBigrdegDxTfon_p729EEnw3yh4M2miTR7w0X0-Ri7PwPZChRcWhkRHK4sspfVIw8HJmEV32mrBOIxBl6U/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTLlFrA8XgnnzmeCNhXR_jlJljXPN_Q_6vunNxNYTUhq-4qwm9ShI-mP_CGWFvCLDGxb0SXEFs3qliFmudWqzti356D9uYeNReHHGWQtRc4JXd3VDta05GZZvhjQ3bn1a24wv2Y8_ICgM/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-DXroH72P9kXTOPAbPRvGH9SeJhSLXLN8Z_9pVlbWz4pikhnG3j0ZVlEW5aWqeBdbQqYeZwhyphenhyphenjzlTz3rm3ghEeh4zPszNuSAOVlDhj2oEjcflJIpNdsyqpdFDoxr-7UFOoQ2AnZh6Hh8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWPm3f9mE03mtariz_yE8MLyWLEIvr7v8fqmx99pNaV81WqPtRyu4uPDlSjw88EAqiYb0U_8mPxRaJXnlaE2Tz5vif_BqiBwyQBxxKrJXeU6_Eta-bo4NlSRLgzpBeLr51OAh4qFPS14/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mc8frBB_Qr8kVskU7uJTTfIylrFJfGkXCETlQ4aNj9HLUAiciL65B9sBRDrm0mnn6Sqy0n75HR6bizOPQCLDB-1fsogMJB9qThc6Sis4ltcgwx-tSLFNE6-Ov0drJsV_KR8KBXzVvCs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasKhAmJ7BbuxCZeIif5bwtqml6S6CReKL-_5489DNgnRpuPrMwBKIFrFaDfCWYCCcSJ2QTvoCQeYC6bQd0LuHLO_BWUaKN5k0inElEfT9nwNFCQq-EwQh1NQ35KDXOvV5VcgvGDUUncU/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhF9qVlpSSeEi5faKHEdYnw93COmKjBrSL3mRXrGbDm_OxCwx75kc0GHuVCzaKs1PfCtVoI-vHEZurDsaKp22ttiQqAhD09bGwv60SMIk9Yh6JxDNMUMFi8JKelPHc7_n6pavqMNTqpBI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEFZJ9hmj8ROvh2OjkFVXaGO4snIW582qFcP2RIaV1egviWKhOYeQ3WRS_w9uF1VJ-sf8m9d8x2KZUMhSKZYeLPFSph_ZXqaoSyISYEvYWz_CrfVwIPGhMm2zHTvATBe7OjfWAa7rXcE0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWWocGKDuDpcKnzsu3e2yj8CrWQ0CCYS82IQ_ew-53hMA9Mas1dxoFpo3MbBmQdOzNrtPGHEbcMoyKWbMavG9brYDl45MdD9eSqifVbPdvLcJtoVgGMLJyopbSD3LpX4BWn7n1gOlwf68/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

Demo 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjt6GL75pBIlNLke7KbUcrzd-hWRK10-xqtRgz7lIGGQaz_XuWUHkbBQt7txSZiHbiF_dh8v19EgsRcuZaEP3hHwWafROLcytfmuKW8t5QJL9gI5fDieBmPsjuwC1Vcg_MOt7smpQUUdI/s150-no/Thumb+%25289%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggU-em7kbdDXHXduD-fvOtKAtfTl3CpUp76ywoHSFIiUMnWv5DlkoRTdWExIsLYE63aHazkRB1FvO0dr0qFFFSlEXYKdNmHpT2_6su1lvD_ODqd91if1Hina-gI-QbOZW3IE9xQQfoCZE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9gMFzNKBcns91WbAXC_OoFsb8GDgPAgk9GnavFyWpxM8pokhcrGkNCxXdcsZdp-x1iymIOIuhFmLthaEZUkDrm9tgahgaFVlTPK602fBgHIjXWvnrs4eNtQQfT59ceMUlgCynfPrZ24/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBAuifMsH72T_VWLAu5NEpuLLJox_9pb-da0yzMVlDc8JNajW1BBVdyE4l97YkKHKeFrT4wrPGAgg5Q4rPgxT_BlC2ktLQvIk3o0anEZoG9_b5Ruc7WRFDGOyD2n5ymh-hR2nfi7ByMw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxYrrko9M_mdCfBxKeWly6LhttSvm5KGJaZKRN0u2X2dMmg7GXK2oEQpKFMaXB7_tnqepwmpw8YVcebWom7YwiwwsaunRse3C8EXZ0Harubrcjh8Oz4GEynFRt_qL8QgCDl2nS7JQ5Qw/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBdXgEhLmo6hhXBwZdwL5vIMpZApmgM_nvSgVQGyjlGeoP12a1Rl82wvh3usOKr0al9uPdPROMI6kXMeQQz8XhUmNYeQgiLbDk5DCpL3apBehjGbrSIFBG7o2YOp9V2XeCXyj9uDgKra8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU47leXozXmfz9qjp6ftfsTlgJMdK8z6b1bjZIUGuAOpcezy2uipP4-UtG9Jdd6rJJ5yyX2zhkDp7lbvzTZ-fEuiilyiAu78fBqS2U8gzqPta5QXgJxXFtxdmPJs4WaxoJawv8CUELNw/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGwxqq_GGmSt61Nb1BJ35Mi750pcEBfxp6gWZxNoo2NMEpOm6S_jQsU2ADCKeN5kCR8qXpC-tEdaeKgFrcXv78Wn2NlG8jYjhHY4ykJkcjZ-I0Av6PKqRSQ9J6cEys1ROILHVz6156Do/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCf3WISX0LFRxkZTKSnN9FboNEtdo89FM8G25-XeyOoErfqQ6NdBlQUhztxJp2fQVhtR46OEhfg46UtYZ-PReoeRnhf-OVra18yEDQj92r-RtKR4YreSrLYjyY-t8nc4QO5q0BZ_9T4zY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt4FusirSk7EU8hq64ixm63CQOUL1Ntf_ZqOv8bttw4KazHp5lFNYl41bjYBigrdegDxTfon_p729EEnw3yh4M2miTR7w0X0-Ri7PwPZChRcWhkRHK4sspfVIw8HJmEV32mrBOIxBl6U/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTLlFrA8XgnnzmeCNhXR_jlJljXPN_Q_6vunNxNYTUhq-4qwm9ShI-mP_CGWFvCLDGxb0SXEFs3qliFmudWqzti356D9uYeNReHHGWQtRc4JXd3VDta05GZZvhjQ3bn1a24wv2Y8_ICgM/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-DXroH72P9kXTOPAbPRvGH9SeJhSLXLN8Z_9pVlbWz4pikhnG3j0ZVlEW5aWqeBdbQqYeZwhyphenhyphenjzlTz3rm3ghEeh4zPszNuSAOVlDhj2oEjcflJIpNdsyqpdFDoxr-7UFOoQ2AnZh6Hh8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWPm3f9mE03mtariz_yE8MLyWLEIvr7v8fqmx99pNaV81WqPtRyu4uPDlSjw88EAqiYb0U_8mPxRaJXnlaE2Tz5vif_BqiBwyQBxxKrJXeU6_Eta-bo4NlSRLgzpBeLr51OAh4qFPS14/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mc8frBB_Qr8kVskU7uJTTfIylrFJfGkXCETlQ4aNj9HLUAiciL65B9sBRDrm0mnn6Sqy0n75HR6bizOPQCLDB-1fsogMJB9qThc6Sis4ltcgwx-tSLFNE6-Ov0drJsV_KR8KBXzVvCs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasKhAmJ7BbuxCZeIif5bwtqml6S6CReKL-_5489DNgnRpuPrMwBKIFrFaDfCWYCCcSJ2QTvoCQeYC6bQd0LuHLO_BWUaKN5k0inElEfT9nwNFCQq-EwQh1NQ35KDXOvV5VcgvGDUUncU/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhF9qVlpSSeEi5faKHEdYnw93COmKjBrSL3mRXrGbDm_OxCwx75kc0GHuVCzaKs1PfCtVoI-vHEZurDsaKp22ttiQqAhD09bGwv60SMIk9Yh6JxDNMUMFi8JKelPHc7_n6pavqMNTqpBI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEFZJ9hmj8ROvh2OjkFVXaGO4snIW582qFcP2RIaV1egviWKhOYeQ3WRS_w9uF1VJ-sf8m9d8x2KZUMhSKZYeLPFSph_ZXqaoSyISYEvYWz_CrfVwIPGhMm2zHTvATBe7OjfWAa7rXcE0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWWocGKDuDpcKnzsu3e2yj8CrWQ0CCYS82IQ_ew-53hMA9Mas1dxoFpo3MbBmQdOzNrtPGHEbcMoyKWbMavG9brYDl45MdD9eSqifVbPdvLcJtoVgGMLJyopbSD3LpX4BWn7n1gOlwf68/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

Demo 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZP3Ifg2076gKfbrT5QVxN_XAwP4cPaMnc2NzCGOF0KRbGRtfkiLs0dFoqkeNMS8fj1Fj1WZuHD91okPEkmmw6ueimnsEbpN9dp4Xd3Sz4CYfRcoJ5GfgQmW1MQxKFKba7vv33xSiRQA/h120/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZP3Ifg2076gKfbrT5QVxN_XAwP4cPaMnc2NzCGOF0KRbGRtfkiLs0dFoqkeNMS8fj1Fj1WZuHD91okPEkmmw6ueimnsEbpN9dp4Xd3Sz4CYfRcoJ5GfgQmW1MQxKFKba7vv33xSiRQA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9gMFzNKBcns91WbAXC_OoFsb8GDgPAgk9GnavFyWpxM8pokhcrGkNCxXdcsZdp-x1iymIOIuhFmLthaEZUkDrm9tgahgaFVlTPK602fBgHIjXWvnrs4eNtQQfT59ceMUlgCynfPrZ24/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBAuifMsH72T_VWLAu5NEpuLLJox_9pb-da0yzMVlDc8JNajW1BBVdyE4l97YkKHKeFrT4wrPGAgg5Q4rPgxT_BlC2ktLQvIk3o0anEZoG9_b5Ruc7WRFDGOyD2n5ymh-hR2nfi7ByMw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxYrrko9M_mdCfBxKeWly6LhttSvm5KGJaZKRN0u2X2dMmg7GXK2oEQpKFMaXB7_tnqepwmpw8YVcebWom7YwiwwsaunRse3C8EXZ0Harubrcjh8Oz4GEynFRt_qL8QgCDl2nS7JQ5Qw/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBdXgEhLmo6hhXBwZdwL5vIMpZApmgM_nvSgVQGyjlGeoP12a1Rl82wvh3usOKr0al9uPdPROMI6kXMeQQz8XhUmNYeQgiLbDk5DCpL3apBehjGbrSIFBG7o2YOp9V2XeCXyj9uDgKra8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCf3WISX0LFRxkZTKSnN9FboNEtdo89FM8G25-XeyOoErfqQ6NdBlQUhztxJp2fQVhtR46OEhfg46UtYZ-PReoeRnhf-OVra18yEDQj92r-RtKR4YreSrLYjyY-t8nc4QO5q0BZ_9T4zY/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt4FusirSk7EU8hq64ixm63CQOUL1Ntf_ZqOv8bttw4KazHp5lFNYl41bjYBigrdegDxTfon_p729EEnw3yh4M2miTR7w0X0-Ri7PwPZChRcWhkRHK4sspfVIw8HJmEV32mrBOIxBl6U/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTLlFrA8XgnnzmeCNhXR_jlJljXPN_Q_6vunNxNYTUhq-4qwm9ShI-mP_CGWFvCLDGxb0SXEFs3qliFmudWqzti356D9uYeNReHHGWQtRc4JXd3VDta05GZZvhjQ3bn1a24wv2Y8_ICgM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-DXroH72P9kXTOPAbPRvGH9SeJhSLXLN8Z_9pVlbWz4pikhnG3j0ZVlEW5aWqeBdbQqYeZwhyphenhyphenjzlTz3rm3ghEeh4zPszNuSAOVlDhj2oEjcflJIpNdsyqpdFDoxr-7UFOoQ2AnZh6Hh8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWPm3f9mE03mtariz_yE8MLyWLEIvr7v8fqmx99pNaV81WqPtRyu4uPDlSjw88EAqiYb0U_8mPxRaJXnlaE2Tz5vif_BqiBwyQBxxKrJXeU6_Eta-bo4NlSRLgzpBeLr51OAh4qFPS14/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mc8frBB_Qr8kVskU7uJTTfIylrFJfGkXCETlQ4aNj9HLUAiciL65B9sBRDrm0mnn6Sqy0n75HR6bizOPQCLDB-1fsogMJB9qThc6Sis4ltcgwx-tSLFNE6-Ov0drJsV_KR8KBXzVvCs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasKhAmJ7BbuxCZeIif5bwtqml6S6CReKL-_5489DNgnRpuPrMwBKIFrFaDfCWYCCcSJ2QTvoCQeYC6bQd0LuHLO_BWUaKN5k0inElEfT9nwNFCQq-EwQh1NQ35KDXOvV5VcgvGDUUncU/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhF9qVlpSSeEi5faKHEdYnw93COmKjBrSL3mRXrGbDm_OxCwx75kc0GHuVCzaKs1PfCtVoI-vHEZurDsaKp22ttiQqAhD09bGwv60SMIk9Yh6JxDNMUMFi8JKelPHc7_n6pavqMNTqpBI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEFZJ9hmj8ROvh2OjkFVXaGO4snIW582qFcP2RIaV1egviWKhOYeQ3WRS_w9uF1VJ-sf8m9d8x2KZUMhSKZYeLPFSph_ZXqaoSyISYEvYWz_CrfVwIPGhMm2zHTvATBe7OjfWAa7rXcE0/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWWocGKDuDpcKnzsu3e2yj8CrWQ0CCYS82IQ_ew-53hMA9Mas1dxoFpo3MbBmQdOzNrtPGHEbcMoyKWbMavG9brYDl45MdD9eSqifVbPdvLcJtoVgGMLJyopbSD3LpX4BWn7n1gOlwf68/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzU47leXozXmfz9qjp6ftfsTlgJMdK8z6b1bjZIUGuAOpcezy2uipP4-UtG9Jdd6rJJ5yyX2zhkDp7lbvzTZ-fEuiilyiAu78fBqS2U8gzqPta5QXgJxXFtxdmPJs4WaxoJawv8CUELNw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGwxqq_GGmSt61Nb1BJ35Mi750pcEBfxp6gWZxNoo2NMEpOm6S_jQsU2ADCKeN5kCR8qXpC-tEdaeKgFrcXv78Wn2NlG8jYjhHY4ykJkcjZ-I0Av6PKqRSQ9J6cEys1ROILHVz6156Do/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>

Read More