Firman Webs

Home All post with category Gallery

BMA Lovers Responsive Blogger Template

Thursday 6 March 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97r1IGB8KDXJIk6E7Ftl6Sr3IbUsfbaJwWMefh1G-JXRBeiMxwBh9eDJoWt8ibYR689vdwz4EZTuhr9qt16N8nAX0aynr5DzL0oNdWImbSn97HIF-XTA5W2kk6c4OJslEHC32AzFnkCM/s1600/BMA-Lovers-Responsive-Blogger-Template.gif" class="center" ><img alt="BMA Lovers Responsive Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg97r1IGB8KDXJIk6E7Ftl6Sr3IbUsfbaJwWMefh1G-JXRBeiMxwBh9eDJoWt8ibYR689vdwz4EZTuhr9qt16N8nAX0aynr5DzL0oNdWImbSn97HIF-XTA5W2kk6c4OJslEHC32AzFnkCM/s400/BMA-Lovers-Responsive-Blogger-Template.gif" title="BMA Lovers Responsive Blogger Template"/></a>BMA Lovers Responsive Blogger Template – sebelumnya saya mohon maaf untuk yang sudah mengirim pesan meminta template yang saya gunakan pada blog ini (BMA Minimalis theme) baik itu lewat Facebook, Google+ maupun Email dan sampai sekarang belum saya balas. Bukan berarti saya tidak boleh, saya juga senang mendapat respon positif. Namun karena templatenya yang masih sederhana dan apa adanya serta masih banyak kekurangan dan belum saya perbaiki, terutama pada menu yang belum mendukung semua perangkat. Mungkin lain waktu akan saya bagikan juga. Oleh sebab itu sebagai gantinya mungkin template BMA Lovers walaupun masih sederhana juga namun ini bisa sebagai gantinya dan ini jauh lebih baik daripada yang saya gunakan pada blog ini. Setiap elemen sudah tersusun rapi di setiap media query sehingga bisa menyesuaikan setiap perangkat yang digunakan untuk mengakses. Mendukung beberapa fitur diantaranya bisa dilihat dibawah atau bisa melihat demonya langsung. <div class="bt-grup"><a class="bt red" href="http://bma-lovers.blogspot.com/" target="_blank" rel="nofollow">PREVIEW</a><a class="bt" href="https://sites.google.com/site/sitemasandes/BMA%20Lovers.txt?attredirects=0&d=1" target="_blank" rel="nofollow">DOWNLOAD</a></div><h2> BMA Lovers Featured</h2> <a href="http://www.responsinator.com/?url=http%3A%2F%2Fbma-lovers.blogspot.com%2F" rel="nofollow" title="View on www.responsinator.com" target="_blank">Responsive</a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbma-lovers.blogspot.com%2F" rel="nofollow" title="View on validator.w3.org" target="_blank">Valid HTML5</a> <a href="http://gtmetrix.com/reports/bma-lovers.blogspot.com/Z0FUsMzM" rel="nofollow" title="Latest Performance on gtmetrix.com" target="_blank">Fast Loading</a> <a href="http://chkme.com/seo-bma-lovers.blogspot.com" rel="nofollow" title="SEO Reports for bma-lovers.blogspot.com" target="_blank">Score SEO 100%</a> <a href="http://mas-andes.blogspot.com/2014/01/membuat-lightbox-widget-contact-form.html" title="Lightbox Contact Form" target="_blank">Lightbox Contact Form</a> Dinamis Post Meta JSON Search Result 404 Error Custom Comment Spam Detected, dll. <h2> Konfigurasi Template</h2>Mulai dari menu yang paling atas terlebih dahulu. Menu ini pada resolusi layar atau media query yang memiliki lebar minimal 768 piksel maka tampilan menu akan muncul di bagian atas header, sedangkan jika lebar layar dibawah 768 piksel akan beralih ke mode panel yang mengarahkan menu ke bagian atas footer. Untuk mengcustom list menu yang akan ditampilkan cari kode berikut ini: <pre> <ul> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>Sitemap</a></li> <li><a href='#'>Follow</a></li> </ul> </pre>Sedangkan konfigurasi menu navigasi bagian bawah header cari kode berikut ini: <pre> <ul class='clearfix'> <li><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>Home</a></li> <li><a href='#'>Template</a></li> <li><a href='#'>Tutorial</a></li> <li><a href='#'>Design</a></li> <li><a href='#'>Widget</a></li> <li><a href='#'>Tools</a></li> </ul> </pre>Untuk merubah Google+ Badge cari kode berikut ini: <pre> <div class='g-person' data-href='//plus.google.com/104093787575230359634' data-layout='landscape' data-rel='author' data-showtagline='false' data-theme='dark'/> </div> </pre><blockquote class='atas'>Replace <code>104093787575230359634</code> dengan ID Google+ anda. </blockquote>Juga untuk merubah fanspage (facebook like box) cari kode berikut ini: <pre> <div class='fb-like-box' data-colorscheme='light' data-header='false' data-height='350px' data-href='http://www.facebook.com/andestyle' data-show-border='false' data-show-faces='true' data-stream='false' data-width='400px'/> </pre><blockquote class='atas'>Replace <code>andestyle</code> dengan ID facebook fanspage blog anda. </blockquote>Pada bagian email subscribe juga ganti dengan ID Feedburner blog anda, cari kode berikut ini: <pre> <div class='subscribe-form'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=masandes' class='subscribe-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='masandes'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-email' name='email' placeholder='Enter your email ...'/><input class='subscribe-button' title='' type='submit' value='Submit'/> </form> </div> </pre><blockquote class='atas'>Replace <code>masandes</code> dengan ID Feedburner blog anda. </blockquote>Untuk memasang banner ukuran 468x60 piksel yang terdapat pada bagian header caranya cari kode berikut ini: <pre>  <div class='ads468'> <a href='#'> <h5>Advertisment 468 x 60</h5> </a> </div>  </pre><blockquote class='atas'>Replace <code><h5>Advertisment 468 x 60</h5></code> dengan banner yang akan di pasang. <pre><img alt='' src='url-banner.jpg' title=''/></pre></blockquote>Sedangkan 2 banner ukuran 300x250 piksel yang terdapat pada bagian bawah posting, cari kode berikut ini: <pre>  <div class='ads300'> <div class='iklan'> <a href='#'> <h5>Advertisment 300 x 250</h5> </a> </div> <div class='iklan'> <a href='#'> <h5>Advertisment 300 x 250</h5> </a> </div> <div style='clear:both'/> </div>  </pre><blockquote class='atas'>Replace <code><h5>Advertisment 300 x 250</h5></code> dengan banner yang akan di pasang. <pre><img alt='' src='url-banner.jpg' title=''/></pre></blockquote> Ikon yang digunakan pada BMA Lovers Blogger template menggunakan Font Awesome V4.0.3. Apabila ingin menambahkan atau merubah beberapa ikon bisa melihat pada halaman <a href="http://mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html" title="List Icon Font Awesome dan CSS Value Content V4.0.3">List Icon Font Awesome dan CSS Value Content V4.0.3</a>. <h2> Instalasi Template</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvbB12HX65VdrR_dCMKyB7TsTc2459WRwPNIbbbsGGul38LbbmyL8t0PLW3kKXRTV1ZzatsrJsb_lR_swjJv4WU8TAL97ldZ9lERS3KqIBIN-ed_zfaAgHuMmzBz7AeJRo4ovDAYtgns/s1600/intalasi+templates.gif" class="center" ><img alt="BMA Lovers Responsive Blogger Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvbB12HX65VdrR_dCMKyB7TsTc2459WRwPNIbbbsGGul38LbbmyL8t0PLW3kKXRTV1ZzatsrJsb_lR_swjJv4WU8TAL97ldZ9lERS3KqIBIN-ed_zfaAgHuMmzBz7AeJRo4ovDAYtgns/s1600/intalasi+templates.gif" title="BMA Lovers Responsive Blogger Template"/></a>Instalasi atau penerapannya template kedalam blog, caranya buka file *txt hasil download lalu Select all dan masuk ke Edit HTML template kemudian replace seluruh kode yang ada pada template lama seperti pada gambar di atas.

BMA Lovers Responsive Blogger Template – sebelumnya saya mohon maaf untuk yang sudah mengirim pesan meminta template yang saya gunakan pada...

Membuat Ribbon Gallery Image di Blog With CSS

Saturday 12 October 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKo2fmx28SAlb9hfv7m7Rq1fndse1ZHa0wSTZQVOm4h36tN3OpRguIQAg9jjReQlTcOaJlO-7-fK6ojmw86UEdKxGWyaaPum-zsr1MgFsKuq1QNR9ZTe2-Hpt1uPaOBvKZu-zeNSKMheM/s1600/ribbon-css-gallery-image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Ribbon Gallery Image di Blog With CSS" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKo2fmx28SAlb9hfv7m7Rq1fndse1ZHa0wSTZQVOm4h36tN3OpRguIQAg9jjReQlTcOaJlO-7-fK6ojmw86UEdKxGWyaaPum-zsr1MgFsKuq1QNR9ZTe2-Hpt1uPaOBvKZu-zeNSKMheM/s540/ribbon-css-gallery-image.png" title="Membuat Ribbon Gallery Image di Blog With CSS" width="540" /></a>Membuat Ribbon Gallery Image di Blog With CSS – setelah beberapa waktu lalu sudah mengulas mengenai CSS ribbon pada blog diantaranya pada tutorial yang berjudul: - <a href="http://mas-andes.blogspot.com/2013/07/style-ribbon-email-subscribe-blogger.html" target="_blank" title="Style Ribbon Email Subscribe Blogger">Style Ribbon Email Subscribe Blogger</a> - <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" target="_blank" title="Membuat Sidebar Blog Dengan Efek Ribbon">Membuat Sidebar Blog Dengan Efek Ribbon</a> - <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-ribbon-pada-blog.html" target="_blank" title="Membuat Sidebar Ribbon Pada Blog">Membuat Sidebar Ribbon Pada Blog</a> - <a href="http://mas-andes.blogspot.com/2013/06/membuat-efek-ribbon-pada-sidebar-blog.html" target="_blank" title="Membuat Efek Ribbon Pada Sidebar Blog">Membuat Efek Ribbon Pada Sidebar Blog</a> - <a href="http://mas-andes.blogspot.com/2013/04/membuat-menu-horisontal-ribbon-style.html" target="_blank" title"Membuat Menu Horisontal Ribbon Style CSS3 di Blog">Membuat Menu Horisontal Ribbon Style CSS3 di Blog</a> Setelah beberapa waktu lalu membaca <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-ribbon-pada-blog.html?showComment=1380976418198#c2673337480315267048" target="_blank">komentar dari Mas Anton Setiawan</a>, kini saya akan kembali membahas bagaimana cara untuk membuat ribbon CSS pada gallery image untuk di terapkan ke dalam postingan blog? Untuk menambahkan ribbon pada image yang terletak pada gallery blog caranya cukup mudah. Tentu sudah tidak asing lagi dengan istilah Pseudo Element, sebelum melanjutkan penjelasan lebih jauh terlebih dahulu saya akan sedikit membahas mengenai penggunaan Pseudo Element. Pseudo Element dalam CSS bisa diartikan tidak real atau bohongan (bukan sebenarnya), karena dengan menambahkan Pseudo Element seolah olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style. Terdapat 4 Pseudo Element yang dikelompokkan menjadi dua bagian, yang pertama adalah Pseudo Element <code>:before</code> dan <code>:after</code> sedangkan yang kedua adalah Pseudo Element <code>:first-letter</code> dan <code>:first-line</code>. Dengan adanya Pseudo Element tersebut maka semakin memudahkan kita dalam mendeklarasikan style CSS. Tutorial untuk membuat ribbon pada gallery image ini saya memanfaatkan bagian Pseudo Element yang pertama, yaitu <code>:before</code> dan <code>:after</code>. Mungkin untuk yang mempunyai web/blog toko online maupun niche blog sejenisnya akan membutuhkan tutorial ini untuk membuat ribbon pada gallery image. Untuk lebih jelasnya, berikut tutorialnya untuk cara Membuat Ribbon Gallery Image di Blog With CSS. 1. Login terlebih dahulu ke akun blogger. 2. Kemudian pada template pilih Edit HTML. 3. Lalu copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code> kemudian Simpan template.<pre>.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; } .ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; } .ribbon-gallery img:hover { border:5px solid #52e052; } .ribbon-gallery p { display: inline; } .ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); } .ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; } .ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; top: 108px; z-index: 1; right: -7px; border: 7px solid; border-color: transparent transparent transparent #CC0000; }</pre>4. Selanjutnya copy kode HTML berikut ini lalu taruh ke dalam entri posting mode HTML (bukan Compose).<pre><div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRho-Y3oXQFvmg3PHzceG4DlhNbUnwx6yCUoYayGtwSktQnpVuqi6ruymIIglVG1rXw-PUedAmo0MHwECr2xfDzdm-eyPhFq7_IkhMKIEmqc7oE8HtwwLF7PhGfpjcVzKYH4BchD843BE/h400/Milan.jpg" alt="" /></a> jersey 1 </div> <div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0O1qUybNCrGxOr_ticR9zkdVCo350o4VCchMAaMvDCKYitBiu6brfLWOUNh8GShjHxyF7h3qlO5mSfFsG6fgdcZVm8szEonmoR8cohDf78lYn1eo10WITx3OftCYUx55xcztMX4FSBc/h400/Chelsea.jpg" alt="" /></a> jersey 2 </div> <div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZ3R2uT9Rx18ypwMNlsH4xDFY1V_XYNCaKqn64HUPhQNxZl_lmnBjQ3azdZHdsbHvgkGG0x8yvTl1ZCOPra81NtdcWUB0qh7MDyVAjnFcYYOEsyBAnIb6U3CuZ8mDJBA-ZO8IiJcxHeI/h300/Barcelona.jpg" alt="" /></a> jersey 3 </div> <div class="ribbon-gallery"> <a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJHlpwRhHga1ydxMsuCJGG9zI9wsjzxrcVJafyO8hOEZ7xrhUSNUS_JgmqC46tfjDqVgnQ8CnCCC68Y5k2Z1mrIN0hjtE_p8R3M_53_ngCP4jyY5qeTxpfsK4rUeJuArnv8AsCxX_jFA/h400/Mas-Andes.JPG" alt="" /></a> Ganteng </div></pre>Diatas hanya terdapat empat gambar saja, jika ingin menambahkan gambar lebih banyak lagi maka copy kode yang berwarna merah lalu paste dibawahnya sebanyak yang anda inginkan. Setelah anda Membuat Ribbon Gallery Image di Blog With CSS maka hasilnya akan seperti dibawah ini. <style type="text/css" scoped>.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; } .ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; } .ribbon-gallery img:hover { border:5px solid #52e052; } .ribbon-gallery p { display: inline; } .ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); } .ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; } .ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; top: 108px; z-index: 1; right: -7px; border: 7px solid; border-color: transparent transparent transparent #CC0000; } </style> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRho-Y3oXQFvmg3PHzceG4DlhNbUnwx6yCUoYayGtwSktQnpVuqi6ruymIIglVG1rXw-PUedAmo0MHwECr2xfDzdm-eyPhFq7_IkhMKIEmqc7oE8HtwwLF7PhGfpjcVzKYH4BchD843BE/h400/Milan.jpg" title="jersey ac milan"/></a>jersey 1</div> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0O1qUybNCrGxOr_ticR9zkdVCo350o4VCchMAaMvDCKYitBiu6brfLWOUNh8GShjHxyF7h3qlO5mSfFsG6fgdcZVm8szEonmoR8cohDf78lYn1eo10WITx3OftCYUx55xcztMX4FSBc/h400/Chelsea.jpg" title="jersey chelsea"/></a>jersey 2</div> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZ3R2uT9Rx18ypwMNlsH4xDFY1V_XYNCaKqn64HUPhQNxZl_lmnBjQ3azdZHdsbHvgkGG0x8yvTl1ZCOPra81NtdcWUB0qh7MDyVAjnFcYYOEsyBAnIb6U3CuZ8mDJBA-ZO8IiJcxHeI/h300/Barcelona.jpg" title="jersey barcelona"/></a>jersey 3</div> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJHlpwRhHga1ydxMsuCJGG9zI9wsjzxrcVJafyO8hOEZ7xrhUSNUS_JgmqC46tfjDqVgnQ8CnCCC68Y5k2Z1mrIN0hjtE_p8R3M_53_ngCP4jyY5qeTxpfsK4rUeJuArnv8AsCxX_jFA/h400/Mas-Andes.JPG" title="mas andes"/></a>Ganteng</div> Dari tutorial di atas jika anda tidak ingin memasukan kode CSS ke dalam template blog maka gabungkan saja seluruh kode CSS dan HTML. Caranya seperti biasa, jangan lupa tambahkan <code><style type="text/css" scoped></code> pada awal kode CSS dan tambahkan <code></style></code> pada akhir CSS. Selanjutnya taruh kode HTML dibawahnya, lalu masukan kode tersebut kedalam postingan mode HTML.

Membuat Ribbon Gallery Image di Blog With CSS – setelah beberapa waktu lalu sudah mengulas mengenai CSS ribbon pada blog diantaranya pada t...

Membuat Efek Remote Linking Pada Gambar di Blog

Friday 14 June 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqlGMucLeUG6omq7y4_dM2WLUmoZQvdMg3LNecNVYjN4hvu7RU63xn3rb3f4epy5h1YJSOoSJsoRDQQUvB2rIJ3ilJ9mZWI8a6XGAie2W3E4vgDoe6GCRggiNGTyICCbnqAGjwqZixU8A/s1600/image-efek-remote-linking.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Remote Linking Pada Gambar di Blog" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqlGMucLeUG6omq7y4_dM2WLUmoZQvdMg3LNecNVYjN4hvu7RU63xn3rb3f4epy5h1YJSOoSJsoRDQQUvB2rIJ3ilJ9mZWI8a6XGAie2W3E4vgDoe6GCRggiNGTyICCbnqAGjwqZixU8A/s320/image-efek-remote-linking.gif" title="Membuat Efek Remote Linking Pada Gambar di Blog" width="320" /></a></div><div style="text-align: justify;">Membuat Efek Remote Linking Pada Gambar di Blog – sebuah link yang terdapat pada blog memiliki fungsi maupun peranan yang sangat penting, dengan adanya hal ini link yang di inginkan dapat di custom agar pada link tersebut memiliki efek tersendiri yang nantinya akan nampak terlihat berbeda dari link-link lainnya yang ada. Efek Remote Linking Pada Gambar di Blog ini akan memungkinkan hover yang berbeda saat pada link tersebut tersorot oleh mouse. Secara langsung link dapat di atur sesuai dengan keinginan apabila pada link tersebut ingin kita jadikan sebagai remote yang nantinya apabila saat onmouseover maka secara otomatis akan terjadi hover pada gambar beserta linknya yang akan mengarah pada konten halamannya. Pemasangannyapun juga sangat mudah dan tidak perlu edit HMTL sehingga anda tidak usah memasukkan kode kedalam template blog. Agar lebih jelasnya, berikut adalah tutorial untuk Membuat Efek Remote Linking Pada Gambar di Blog:</div><div style="text-align: justify;"> 1. Login ke akun blogger. 2. Lalu copy kode berikut ini.</div><blockquote class="tr_bq"><style> .remote{ position: relative; } .remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; } .remote a img{ width:125px; height:125px;} .remote a:hover{ background: #ffefcd; } .remote a .name{ font: 18px Georgia, Serif; } .remote a:hover .name{ color: #900; font-weight: bold; } .remote a:hover img{ border: 5px solid #52e052; margin: -4px; } .remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; } #img1 .photo{ top: 0; left: 0; } #img2 .photo{ top: 0; left: 134px; } #img3 .photo{ top: 134px; left: 0; } #img4 .photo{ top: 134px; left: 134px; } </style> <div class="remote"> <a href="http://mas-andes.blogspot.com" id="img1"> Photo 1 Silahkan ganti dengan deksripsi teks yang di inginkan. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54NtFY7supyax8PUNYNR9Du984h9MgfwET4yDxDSPII_zOXl7qLS1n9_FKgLXhHg_qEi6ikZBt0NFG_9aZ1ZLal4AZrEMVOayfyQG4wMK9v3QIAuNHcEUlmJWyvng6vDu0Tw6fl1JlCTW/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="" /> </a> <a href="http://mas-andes.blogspot.com" id="img2"> Photo 2 Silahkan ganti dengan deksripsi teks yang di inginkan. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S1FCV2YWvhmdXWWeH0cpSvEg_kh0cZmART1wwabZl0hlO2HW1GWALBc2Dqck_yu7anb1G1-vL90e_qz_5zGZx6TETyRIOY1ugCB7px_QyTrEk7G52ZkTzQ78H_8-h4blwphTaDL0jrLE/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="" /> </a> <a href="http://mas-andes.blogspot.com" id="img3"> Photo 3 Silahkan ganti dengan deksripsi teks yang di inginkan. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Y1cm66bu0YWRPmVj5LMgw2qH04FsKLbd_RZcc0ed4piVNgm8dxwwKFnNFaOkMkkRTbIKgLFC0Hf_Zt5gAZDi0aanvBvDhnzY3-gtv2NA8iujqySrpJ4IdQpB6qyPwe4hPGxIw_wxBMX/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="" /> </a> <a href="http://mas-andes.blogspot.com" id="img4"> Photo 4 Silahkan ganti dengan deksripsi teks yang di inginkan. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCNtMaMRAZd_hwZVFbHORAGvNlL0yNrYTgib1Za9M8D0o66Pk5s2L4EcLOKXsbuVsfaz8S56icJhKYJEpKZA3f6VX1YFmDo2jtYlwu9HWopC-4HRTkAY87K7IwdBieXZTq3-bxj3K8Mj7/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="" /> </a> </div></blockquote><div style="text-align: justify;">Keterangan:</div>Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan. Ganti URL photo dengan gambar yang di inginkan. 3. Selanjutnya paste kedalam kolom posting mode HTML, kemudian bisa langsung klik Publikasikan. DEMO: <style>.remote{ position: relative; } .remote a{ text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px; } .remote a img{ width:125px; height:125px;} .remote a:hover{ background: #ffefcd; } .remote a .name{ font: 18px Georgia, Serif; } .remote a:hover .name{ color: #900; font-weight: bold; } .remote a:hover img{ border: 5px solid #52e052; margin: -4px; } .remote a .photo{ display: block; position: absolute; width: 125px; height: 125px; } #img1 .photo{ top: 0; left: 0; } #img2 .photo{ top: 0; left: 134px; } #img3 .photo{ top: 134px; left: 0; } #img4 .photo{ top: 134px; left: 134px; } </style> <div class="remote"><a href="http://mas-andes.blogspot.com" id="img1">Photo 1 Silahkan ganti dengan deksripsi teks yang di inginkan. <img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54NtFY7supyax8PUNYNR9Du984h9MgfwET4yDxDSPII_zOXl7qLS1n9_FKgLXhHg_qEi6ikZBt0NFG_9aZ1ZLal4AZrEMVOayfyQG4wMK9v3QIAuNHcEUlmJWyvng6vDu0Tw6fl1JlCTW/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" /></a> <a href="http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html" id="img2">Photo 2 Silahkan ganti dengan deksripsi teks yang di inginkan. <img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S1FCV2YWvhmdXWWeH0cpSvEg_kh0cZmART1wwabZl0hlO2HW1GWALBc2Dqck_yu7anb1G1-vL90e_qz_5zGZx6TETyRIOY1ugCB7px_QyTrEk7G52ZkTzQ78H_8-h4blwphTaDL0jrLE/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" /></a> <a href="http://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html" id="img3">Photo 3 Silahkan ganti dengan deksripsi teks yang di inginkan. <img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-Y1cm66bu0YWRPmVj5LMgw2qH04FsKLbd_RZcc0ed4piVNgm8dxwwKFnNFaOkMkkRTbIKgLFC0Hf_Zt5gAZDi0aanvBvDhnzY3-gtv2NA8iujqySrpJ4IdQpB6qyPwe4hPGxIw_wxBMX/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" /></a> <a href="http://mas-andes.blogspot.com/2013/05/3-style-gallery-css3-photo-pinkbox-pada.html" id="img4">Photo 4 Silahkan ganti dengan deksripsi teks yang di inginkan. <img alt="mas andes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCNtMaMRAZd_hwZVFbHORAGvNlL0yNrYTgib1Za9M8D0o66Pk5s2L4EcLOKXsbuVsfaz8S56icJhKYJEpKZA3f6VX1YFmDo2jtYlwu9HWopC-4HRTkAY87K7IwdBieXZTq3-bxj3K8Mj7/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" /></a></div>

Membuat Efek Remote Linking Pada Gambar di Blog – sebuah link yang terdapat pada blog memiliki fungsi maupun peranan yang sangat penting, d...

Membuat Image Efek Accordion CSS3 di Blog

Monday 10 June 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVJC9VrOthUCkpMMJbGnTZNDZpTcGvEQ5gwiktIAdUOCc_5iqsgXZG_IuS3M_NaNd8joWprxvEYeLLkB02WTFxorhk2lKaojYjwdsk8dE7Eq53M4NDKBSuXbKRcDr18nLdF9DeqE9EI8/s1600/image-accordion.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Image Efek Accordion CSS3" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVJC9VrOthUCkpMMJbGnTZNDZpTcGvEQ5gwiktIAdUOCc_5iqsgXZG_IuS3M_NaNd8joWprxvEYeLLkB02WTFxorhk2lKaojYjwdsk8dE7Eq53M4NDKBSuXbKRcDr18nLdF9DeqE9EI8/s320/image-accordion.gif" title="Membuat Image Efek Accordion CSS3 di Blog" width="320" /></a></div><div style="text-align: justify;">Membuat Image Efek Accordion CSS3 di Blog – untuk mengelompokkan gambar atau yang biasa disebut <a href="http://mas-andes.blogspot.com/2013/05/10-gallery-css3-image-efek-hover-pada.html" target="_blank" title="10 gallery css3 image efek hover">gallery image</a> didalam satu halaman posting blog caranya cukup mudah. Seperti yang sudah kita bahwa <a href="http://mas-andes.blogspot.com/2013/04/membuat-gallery-gambar-efek-pop-up.html" target="_blank" title="membuat gallery gambar efek pop up">gallery image</a> untuk suatu posting gambar didalam blog sangat banyak bahkan bermacam model sehingga untuk <a href="http://mas-andes.blogspot.com/2013/05/gallery-css3-efek-hover-pada-gambar-di.html" target="_blank" title="gallery css3 efek hover pada gambar">membuat gallery gambar</a> pada blog dengan disertai efek pada gambar-gambar tersebut sangatlah bervariatif, salah satunya seperti pada <a href="http://mas-andes.blogspot.com/2013/02/jquery-image-efek-kubus-berputar.html" target="_blank" title="jquery image efek kubus berputar">image efek</a> accordion ini. <a href="http://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html" target="_blank" title="membuat gallery photo thumbnail with">Gallery image</a> memang sangat jarang digunakan oleh para blogger namun dengan adanya tutorial untuk cara membuat image efek accordion ini tentu akan jauh lebih memudahkan dikala saat anda akan membuat posting yang terdapat banyak gambar dan bisa disisipi dengan image efek <a href="http://mas-andes.blogspot.com/2013/04/membuat-tab-horisontal-accordion-dengan.html" target="_blank" title="membuat tab horisontal accordion">accordion </a>ini. seperti yang tertera pada judul posting, tentu semua sudah paham akan bagaimana fungsi image efek <a href="http://mas-andes.blogspot.com/2013/04/membuat-tab-vertikal-accordion-dengan.html" target="_blank" title="membuat tab vertikal accordion">accordion </a>ini akan bekerja. Sedikit penjelasan singkat, image <a href="http://mas-andes.blogspot.com/2013/05/membuat-iphone-zoom-efek-pada-gambar-di.html" target="_blank" title="membuat iphone zoom efek pada gambar">efek</a> accordion ini berjalan seperti layaknya sebuah blog yang mengkonvigurasikan dimana pada gambar tersebut akan mengarahkan ke halaman konten yang lain layaknya seperti sebuah menu utama accordion yang terdapat didalam sebuah blog. Sebelum menjumpai atau berlanjut ke tutorial, dibawah terdapat demo yang bisa anda simpulkan dan dilihat terlebih dahulu sebelum ingin mencobanya. Untuk memasang efek accordion image kedalam blog, maka berikut adalah tutorial cara Membuat Image Efek Accordion CSS3 di 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).</div><blockquote class="tr_bq" style="height: 250px; overflow: auto; padding: 10px;">.ia-container { width: 535px; overflow: hidden; box-shadow: 1px 1px 4px #52e052; border: 7px solid #52e052; } .ia-container figure { position: absolute; top: 0; left: 50px; width: 335px; box-shadow: 0 0 0 1px rgba(255,255,255,0.6); -webkit-transition: all 0.3s ease-in-out; -moz-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; } .ia-container > figure { position: relative; left: 0 !important; } .ia-container img { display: block; width: 100%; } .ia-container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; cursor: pointer; border: 0; padding: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; z-index: 100; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ia-container input:checked{ width: 5px; left: auto; right: 0px; } .ia-container input:checked ~ figure { -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; left: 335px; } .ia-container figcaption { width: 100%; height: 100%; background: rgba(87, 73, 81, 0.1); position: absolute; top: 0px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .ia-container figcaption span { position: absolute; top: 40%; margin-top: -30px; right: 20px; left: 20px; overflow: hidden; text-align: center; background: rgba(87, 73, 81, 0.3); line-height: 20px; font-size: 18px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; padding: 20px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption{ background: rgba(87, 73, 81, 0); } .ia-container input:checked + figcaption span { -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; filter: alpha(opacity=99); opacity: 1; top: 50%; } .ia-container #ia-selector-last:checked + figcaption span { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } .ia-container input:hover + figcaption { background: rgba(87, 73, 81, 0.03); } .ia-container input:checked ~ figure input{ z-index: 1; } @media screen and (max-width: 720px) { .ia-container { width: 540px; } .ia-container figure { left: 40px; width: 260px; } .ia-container input { width: 40px; } .ia-container input:checked ~ figure { left: 260px; } .ia-container figcaption span { font-size: 16px; } } @media screen and (max-width: 520px) { .ia-container { width: 320px; } .ia-container figure { left: 20px; width: 180px; } .ia-container input { width: 20px; } .ia-container input:checked ~ figure { left: 180px; } .ia-container figcaption span { font-size: 12px; letter-spacing: 2px; padding: 10px; margin-top: -20px; } } figure { margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; }</blockquote><div style="text-align: justify;">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 copy kode dibawah ini. </div><blockquote class="tr_bq" style="height: 250px; overflow: auto; padding: 10px;"><div class="ia-container"> <figure> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Yb5V5Fkrdw6FQonzJp0lxpFW3xarup4q3b1a5mIMojXQ6AfCdej_SOlWCBblpgNsO-K_Fc8Jt7aQN9q6qOYgG_YKGywKEScYFRQc7_s0iLLXNJ6Zd4QZI8FMI8zqr0sM5XMNviXAcSE/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg" alt="faceblog evolutions" /> <input type="radio" name="radio-set" checked="checked"/> <figcaption>Cecilia Cheung 1</figcaption> <figure> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR6xy3YfUyMqjYXVYxZehSX-VHcgeWNGNwW_l7qkQQXhHcixGzpCBquf7hAnYywaF2S2qbb53GQyY22Xol23n363e-aeiKl6pg_2AxAvfsp9JIKyeqVhSwjN_JrFXqFNaAAMEgA-Lt_0/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg" alt="faceblog evolutions" /> <input type="radio" name="radio-set" /> <figcaption>Cecilia Cheung 2</figcaption> <figure> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcpQtmQ5LEnLrKHqEY7JbM8DlAQ3hpmfIKgeXs42kvThLUGlUhuPz1fuC56l1Y7_S8CFIR9HWusOZJS29RDIE2B83LVX2-E7q2h-YLfcyDpWW-N3MJwtj1WPnhljBMAkpEsSGtETeKTg/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg" alt="faceblog evolutions" /> <input type="radio" name="radio-set" /> <figcaption>Cecilia Cheung 3</figcaption> <figure> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpmRhwPf-qQU8IYuCVjz7qVTDuLss6Ot0tCNEmGRrjvYXXObG1iXPplTZmS-_wRTSApEHM3HEvaRexE-VcMx0ka5t6H963N9AD9lvBFsCtPSSFSgpG-_8VK95I9KJZDXpE5Rf0Q7ZOJc/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg" alt="faceblog evolutions" /> <input type="radio" name="radio-set" /> <figcaption>Cecilia Cheung 4</figcaption> <figure> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGN-uKsfk1gGB2OlBvljzda8mauohysU-2pOLWb96skfRARHNFrgjH59Sx4nu3FZfGAXm4CsddCa9I053Zvl1fH9bArcBPupcvqXrrkri8cjQnH2hG6dis3ZBwAaI9_CPDjflgR3RTls/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg" alt="faceblog evolutions" /> <input type="radio" name="radio-set" /> <figcaption>Cecilia Cheung 5</figcaption></figure> </figure> </figure> </figure> </figure> </div></blockquote>Keterangan: Ganti URL gambar dengan yang di inginkan. <div style="text-align: justify;">5. Kemudian paste di kolom posting mode HTML, selanjutnya bisa anda klik Publikasikan. DEMO:</div> <style>.ia-container { width: 535px; overflow: hidden; box-shadow: 1px 1px 4px #52e052; border: 7px solid #52e052; } .ia-container figure { position: absolute; top: 0; left: 50px; width: 335px; box-shadow: 0 0 0 1px rgba(255,255,255,0.6); -webkit-transition: all 0.3s ease-in-out; -moz-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; } .ia-container > figure { position: relative; left: 0 !important; } .ia-container img { display: block; width: 100%; } .ia-container input { position: absolute; top: 0; left: 0; width: 50px; height: 100%; cursor: pointer; border: 0; padding: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; z-index: 100; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ia-container input:checked{ width: 5px; left: auto; right: 0px; } .ia-container input:checked ~ figure { -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; left: 335px; } .ia-container figcaption { width: 100%; height: 100%; background: rgba(87, 73, 81, 0.1); position: absolute; top: 0px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .ia-container figcaption span { position: absolute; top: 40%; margin-top: -30px; right: 20px; left: 20px; overflow: hidden; text-align: center; background: rgba(87, 73, 81, 0.3); line-height: 20px; font-size: 18px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; padding: 20px; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption{ background: rgba(87, 73, 81, 0); } .ia-container input:checked + figcaption span { -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; filter: alpha(opacity=99); opacity: 1; top: 50%; } .ia-container #ia-selector-last:checked + figcaption span { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } .ia-container input:hover + figcaption { background: rgba(87, 73, 81, 0.03); } .ia-container input:checked ~ figure input{ z-index: 1; } @media screen and (max-width: 720px) { .ia-container { width: 540px; } .ia-container figure { left: 40px; width: 260px; } .ia-container input { width: 40px; } .ia-container input:checked ~ figure { left: 260px; } .ia-container figcaption span { font-size: 16px; } } @media screen and (max-width: 520px) { .ia-container { width: 320px; } .ia-container figure { left: 20px; width: 180px; } .ia-container input { width: 20px; } .ia-container input:checked ~ figure { left: 180px; } .ia-container figcaption span { font-size: 12px; letter-spacing: 2px; padding: 10px; margin-top: -20px; } } figure { margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } </style> <div class="ia-container"><figure><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Yb5V5Fkrdw6FQonzJp0lxpFW3xarup4q3b1a5mIMojXQ6AfCdej_SOlWCBblpgNsO-K_Fc8Jt7aQN9q6qOYgG_YKGywKEScYFRQc7_s0iLLXNJ6Zd4QZI8FMI8zqr0sM5XMNviXAcSE/w335-h480-no/Faceblog+Evolutions+%25282%2529.jpg" /><input type="radio" name="radio-set" checked="checked"/><figcaption>Cecilia Cheung 1</figcaption><figure><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR6xy3YfUyMqjYXVYxZehSX-VHcgeWNGNwW_l7qkQQXhHcixGzpCBquf7hAnYywaF2S2qbb53GQyY22Xol23n363e-aeiKl6pg_2AxAvfsp9JIKyeqVhSwjN_JrFXqFNaAAMEgA-Lt_0/w335-h480-no/Faceblog+Evolutions+%25283%2529.jpg" /><input type="radio" name="radio-set" /><figcaption>Cecilia Cheung 2</figcaption><figure><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcpQtmQ5LEnLrKHqEY7JbM8DlAQ3hpmfIKgeXs42kvThLUGlUhuPz1fuC56l1Y7_S8CFIR9HWusOZJS29RDIE2B83LVX2-E7q2h-YLfcyDpWW-N3MJwtj1WPnhljBMAkpEsSGtETeKTg/w335-h480-no/Faceblog+Evolutions+%25284%2529.jpg" /><input type="radio" name="radio-set" /><figcaption>Cecilia Cheung 3</figcaption><figure><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpmRhwPf-qQU8IYuCVjz7qVTDuLss6Ot0tCNEmGRrjvYXXObG1iXPplTZmS-_wRTSApEHM3HEvaRexE-VcMx0ka5t6H963N9AD9lvBFsCtPSSFSgpG-_8VK95I9KJZDXpE5Rf0Q7ZOJc/w335-h480-no/Faceblog+Evolutions+%25281%2529.jpg" /><input type="radio" name="radio-set" /><figcaption>Cecilia Cheung 4</figcaption><figure><img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGN-uKsfk1gGB2OlBvljzda8mauohysU-2pOLWb96skfRARHNFrgjH59Sx4nu3FZfGAXm4CsddCa9I053Zvl1fH9bArcBPupcvqXrrkri8cjQnH2hG6dis3ZBwAaI9_CPDjflgR3RTls/w335-h480-no/Faceblog+Evolutions+%25285%2529.jpg" /><input type="radio" name="radio-set" /><figcaption>Cecilia Cheung 5</figcaption></figure></figure></figure></figure></figure></div>

Membuat Image Efek Accordion CSS3 di Blog – untuk mengelompokkan gambar atau yang biasa disebut gallery image didalam satu halaman posting...

Membuat Thumbnail Gallery Photo CSS3 di Blog

Thursday 6 June 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2gvLcUnrQkWDzqNsBD13H7JPFo1K26weGG2GDko71jIuNCxSDW89Ij76o0zqJexzMo2DykTwhURZWPwMeKZkt980OWL4nsBcOnBvFiRrjJMoJMElHVgbqh7o-tYfJujNaLyxgRMNqsE/s1600/gallery-thumbnail.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Photo CSS3 di Blog" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2gvLcUnrQkWDzqNsBD13H7JPFo1K26weGG2GDko71jIuNCxSDW89Ij76o0zqJexzMo2DykTwhURZWPwMeKZkt980OWL4nsBcOnBvFiRrjJMoJMElHVgbqh7o-tYfJujNaLyxgRMNqsE/s320/gallery-thumbnail.jpg" title="Membuat Thumbnail Gallery Photo CSS3 di Blog" width="320" /></a></div><div style="text-align: justify;">Membuat Thumbnail Gallery Photo CSS3 di Blog – pada posting sebelumnya saya juga sudah pernah membahas tentang <a href="http://mas-andes.blogspot.com/2013/05/simple-gallery-photo-di-blog.html" target="_blank" title="simple gallery photo di blog">simple gallery photo di blog</a> dengan cara yang simple namun pada gallery photo tersebut tidak terdapat efek zoom hover. Maka pada tutorial ini saya akan kembali membahas tentang bagaimana cara membuat suatu gambar pada posting blog yang berjumlah banyak namun tidak membutuhkan banyak ruang posting dan sekaligus terdapat <a href="http://mas-andes.blogspot.com/2012/12/cara-membuat-efek-zoom-pada-gambar.html" target="_blank" title="cara membuat efek zoom pada gambar di blog">efek zoom pada gambar</a> tersebut. Pada gallery ini default layout gambar hanya akan berbentuk thumbnail yang tampil didalam posting blog namun nampak akan membesar jika pada gambar tersebut tersentuh oleh mouse. Tentu sangat efisien dan minimalis namun akan tetap terlihat elegant. Untuk mengetahui hasil dari tutorial ini bisa langsung dilihat pada demo yang saya sertakan dibagian bawah. Apabila ingin menerapkan kedalam blog, berikut adalah tutorial cara Membuat Thumbnail Gallery Photo CSS3 di Blog. 1. Login ke akun blogger. 2. Lalu copy kode dibawah ini.</div><blockquote class="tr_bq"><style> #thumbgallery { overflow: visible; } #thumbgallery ul li { list-style:none; display:inline-table; padding:5px; } #thumbgallery ul li .pic{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052; -webkit-box-shadow:#272229 2px 2px 10px; -moz-box-shadow:#272229 2px 2px 10px; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); box-shadow:#272229 2px 2px 10px;} #thumbgallery ul li .mini:hover { cursor:pointer; } #thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; } </style> <div id="thumbgallery"> <ul><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1wD3x3Hum4MOtUl2O25YZbUoNacTag29lCuMvAMq0HR4XSJxVeEzrtUE9CU7AvBhJp7mHySzxHluQ8ofJg-_u6k5SnOYbCRAGytUbTwvwZhZUgw6xvMNLjYuz1QCIasGlwrz7qzNYYzV/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzFrwpJJug1auvUWMrnDg_jvytO0Rc6FoXVbw0oJRBbTsvKQ7d9SmaUPhr7dPuue3K9l_zmcla7xEuMknN0hyphenhyphenmtl6ftUybZzZ9OuMkY8mtt4GY04fAHIlj7GsfsXnkiiXT7yDMpKk_pW-w/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnwZotM4bZOqLdYYdRIX7fOZcRpf3Nq3OTvm8rdte-ag8UxEqP2jQl1kFwvhyphenhyphen8_kKkBq8ueatUmxfhyJlbRCb1Vsty1VpGHywtbawfABhDwuPbuHicWAxY6cps8Q8ZBcGnWCjqVnGZ6_a/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ0pZLUKEdIQgv_L6K0qE5xg5sexNHFi0uJZ9sCE6ffkOZxSgSoh8DWfFIkXHiyqVTt03aDhRFXdOmrWGG8TTlCtSg36aQbN_DJp30xCqtvONE-PUDFx8yolTHvFNENdAcvybLJ9PrGwj/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ONxpaZ7242_Zhx2A0v2mXlA2ilZOUNJz3URQ1FFTuCXKxGxP3-7Gb-ybl3zkkv9FZJxNXjo0UePQiIegApLvWbZ-bayoaxEU-3yadc_C5S3kZTs2TjgQgXiDgzBSHi1e8wGXG4nwO3ux/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfh3PZKjBG_Bdxr5g5H6zX9ykbW4Ec1vCJYVpG4r1IZhyphenhyphenHRK3Ikk2roMntWlPKZVCYFR1UnUfZGPkNhNa5Yt_rn6ssvyoZdVV5Q6G1Ob3HIXTS3s-jT_CkR6oECkpO2t7v2SLFDq5DWi8/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUnPEPx5EbmSTBy248OmX5qIt7_fzEnDhTS7r9jbqCyTNt6XxcAIMLUwGc-h7bgP-M7444Y5Mf3RyMyDDckt71-t0IrHuRq4qasHwCv-e72AB2IUHYI4AeYiAutND58rhblsQipep7CLK/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" class="mini"  width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCKcjKhYSblzwonJ8tfSr38bWRGBjW2q_bvA9I7e_6vAzrdJ2HqgVIEOwwuNT6149s3EPUWM7iMGHrKUCkzTtWW5OFricF1Go5G45hmTkaFoC6laIanhskoq21nowEp_9lHk9qlyUyKou/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGnBM8Tuxt7Gj83c8oTMveXEvpN8Lf6ox8jqaWrEEgs1VFTmj-W7wnTELSjL6ibND2lJnwoVrhrZwuF9sXqZGSPnaXrGlIzuzjXs3wo8r0ryOVSnJDwozD1iAXTQQZjET6lMxlDRgpLFhj/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisePM2q8PyS52vr0DpxjuUvSRavSFCbs-nno5CIF4268b1Yr2X4f7hAt9rsp2md9cxNQuVDHcLXUCgVYM1Lvb_wuBtYaYLCkxNedScMdt_6k8NbLAMm1mad0IiHEGIVUVQIX4T3m-MQPzG/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLB6LhbsNl9ajy01g-4eY6eu5-rGvF2LwLm3YwRaXxq2B3UYvlsDoTKGG7UR-F-LMM9_o1MOMaJKYwHqZeC_-lJohTMNfh15o5Ell1mA42qD66E4J7OZyWfyJ33GbdSj5uAhVEB8bWZ4ed/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" class="mini" width="100" height="100"  alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdQFeu1yeWG7y7XDtSSpfIt5_0v9HV_cQbGdRfFb4h8xwYuQBAkVvwe61EVXGqNlEC0oQpRADNUvWxoa456jENiaX4Uts6whfmieq7E6V8RKUB5GQrm5Rwomqabq4qdOU6PxmHm8PnV-fb/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7RlwaambJqfcartU5m3ZichYJmlMsRb2gmr4knN-cZjK2eeIdlpqAHlbmgeaJtU6WIGlSz0To9T4GrGoQ4Om4UPqA1yv6MzusIupRNMDvKCTro2UXc58_dYC_n9eMsVrOFaaIn9WuXHZ/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vKJhtda1dyJ3Ja5HP5D5CAmy4NSSqCDT1xmJuNuvBUVDt1oG-qaEGQeAb0iFsFf1ySdhI-msfG8FMuvBtzT39r6VpWN05Xr3OjfCMfzXvx-7UdbHwxtewgZKJFEYLZdib-qD4huVA9NT/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZzySSPUEy009l-tpOgmcmB_uoh_rRyQxKvVrtOOta7GQ3Jz2c8C752owq3ZRMx5gMAZJzMd8LcGr3-qLFEyrcB2UKCv4cMEOkBxmJI7P-OqfRrDgV2GyYizpv6hgI-wZhasr6oLeSfyh/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhw_nF7gpNcveeClbuPb_-DXugVGizQRS7xlChCzrUHzv1wwG7C_jW8QfnUTbBdRW5W6ArbFtEycL15jSa3AElqkeyggwqfhO5SqqOMhzIP5Q1YPwkQQra1EAmC9gzqTcr9yueODuzl6N/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSTKMG5o6DLGakn2iK9hHwx7chAJGQNGFYRxrEI0MQU_j66Qg2KcdIOlabKrTcxHjILisAQKMbYJT3pW15XojfKq7qTcNwgIqvUYoRwu94f2WozuV7fG7mnYncZInbJv_Qet9ktsxSm5z/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghs9d_zne7Q7qq13eAZ75Wzch3gGI7V21QURSOc0w_K91GmXs-7b9JgytGjFPb8Hn-aWoyjxI-WuN3fGiWadfvKKg1v2uyHMLF7TVFhkV8QfDIPCIJXDw8Rfi2z1pItPwbxvPphebEa3ap/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0YKlEGmdg17tx7rkiphvfzsg13RAaSzxm05_m24yVmA1FmsnaiEaVbx4f9FKNiu5r9ihaK8cJHltjqxhpufISEsfL0odCUks3BG4kgoDIpvohMH9aGX0GdZMnD3uxT678czLw7dAYJ8F/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbkaqUm7S1_piEg2iNyRmg3_Dul6cKnhrKaCyFQaiwfPt_pYmyadO8mbPAZbAx47A4gDa2W3aK5EiHkswajmip4_sxyyTjnxVjc32hwaqjuHiXJ3YbCz1qI9mRVjWd44S52zYAznUXayS/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJyZwUjJx4H7ZGtkOYZkgCjgApPjibkpFKWPWPAuaCehzr1OBoy6hM1DDWN1fVo6IpoFD8bgO7a4YITKZIpGvWZqz-iwRSvxFZvexT5siA2b2b7-EQCqqsU84PZKi59SV20wELJzC2y5w/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L-G2ZLq-Um0m-NCYFtZxWxpq02GZaT-annTGf40I7ryWrOiF457EoXeKfcRvTaCgiKdWfoGun0cuFfjaNLXWwviwk8chGzPCylxxVOCiosuQiqVJssdF0y5-RdP0ojQI8K0yRGXTUC99/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepjFdg5hiD68qyK70nwAYuUx3StCzIkdVxWdfh_xDA37De19rOVAJXPZwxdosSn_PLot-s0YPsLtTwX4EoWK9k8jlZ1-yOaRt-NwyqekEG6GksUQBP2CJaZikvoalyTTLXkjMugyqzeW3/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IoJu9FnASZBw8WbPQ1SegshQBO_wLFGxpd0g7zOo0PtZcppZ5Zb3or21am3dQiaVGJGP6EuLiKCLDC7cjtjDGp5iKl4byayLmX4RJi8l98tRo0cdHAaMMqKEKHymrTU810RR-DoUAwxy/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFc3BsN3ha5usVtnK-GnkF460EKyaRtt9XeqVGkCsQ5d8RPVJ8Q1b6_P1zzmI5odJXKYUZJyQUvwQRYv4Bm_P_1l1hiucN_nXurnkPvTTA9DWzRXLH7Wpiup_2MoK3EG_HJq6Qw_qZRe_p/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqFDrXUkMgf6_B95_-he-OHj0GquV8WfGaBvKXPOcOlll3yKHyyaT9JZzPLPE7ThTNDUEIuUBuGCYVHrQDp9i8WbYvyC1A8YrIfRskU3reSw1lacP41EZ2-sIknAIYxSkzLEcrwkDLLUa/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfNQPjc_rpG-w7_dwQ44bUHGFJWcAL9jw5qxW8elBW_xWeDIo-yvvtv5dYjaQLBbOPGRqvhEHaVCe9JdzK9EQD-j9olQe9DwgbA2t_VnaGcspb7q-OEIh18Je-xgBtqPk3rSKksWnIVI_s/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini"  width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44uoHjDIKrQy1opZpWC7tiQ-Ruql8GQGti-XMHx31wnn8yVAwC5wAqkyjIi_aj8WO6W93SXtL7UjQXRYLd_acbA6DqTr-1eN_SIRMngBC8nql0pfBEj3OqrYAopVCQUUT8zoYSg3l_nOe/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDlm-BtqmSFP8Qv0QpdufiedAFfoLZ5ibnJzXnBI0TRqACwPnqK9TFJaro4sJzUo49PAqnGbMewuXMBCKNxnScze2NRjfsgNmzTl6o-ESQSKKPifaE05GXda1e35mFrtfIET4K0jr1DIF/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyi7dvto5ouvREWMHBT_WSON2T8dVeQmJGyX_B3Uv0x-XrnJPaEgamqpcX1dhIdttYe7ADNItL7YFqAwha0k5s4a43oYeKSKOgpAx93C3faBmjr-k7pdI_qwR-HrM-nXIu-vPRvknYQ92/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisAez5cDF9sBNmll-2GqmAZTCrWbjjgocYjBiPR8THt8iwbHX0oIB_E5yMfpkAMslwNWzRhCuQX6ZSA1az009fChsT9Dx7rFmMRZlUSh0L6ZM2l7UggNILcdtZ-kMaqOiQSDMHtRG69krh/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100"  alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIOhHxy37jAXbFEg4ZG7ksncpodU35S4X70cadS61pcuNKfF4TRxNStBoElbcwKDMAO6qAH-BkWmjCrLttopboV4qGRYTN3VLgRyGha8wRfWXwWO7EZbaGtxcVdQf-89oZBRoWqdqnue3/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaablheig5PiVSuUYEh5MMvQPJnxjmzhp4gSqxpMBiGV3bi67Kg1DKLdL9j8XdSFo4xCrX7Y8hd3km2XWzWLAfJjAtlUsXPwM2YhVuaDjUPND-NDWVEu3FFp3FSc-xSYS_6rNKCGEUIVnj/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMyEc_rC4GTqQt695uyh-Tp5pEYANyfrUVMTJflPjvA2mSKoCp2bSuO0KYIMcP42TKv-dY1zGsEzHrbs_V2LlswdRBqoUbIWcH4dzuhB1D5mrdCT87rIEC5pZLpYJ3qObdN8vtWakdkyo/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYrakXlsZF89D_gjx2YFoI2-0nov23xbhIkcuVOWUlJvviXtyegy0YEYKCygVvNNvLV1LyTDWRv0LDCZxYMHfjGoy1dRR_iRQtmsZIS_RZKgDcCmDmk91zMDltXO9B7yg2nBhxXto_VNX/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhxTHT_OUkN1kg5U6mPFY8HyhkzgpaGvF_j4anFK8aKluY3ubT0IT3Yf0ir1d7Fg_-0Ch5fNdvNWgHksu9v7C2r2aM0EX8JWGEez-Ql9A_Oy5Wd1HXCOHyTv-SnfClwaLRYqZWXeNV5zX/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsp6hqS6I5W7vKOIv6G8DYsQGGCaKKhHGbNBnH2ge2PRZ0OnvjhtTFdr-okDzjj507IJGoHTrv0QHvS3nFoP7qDi6HykO60shG_C2W0WLnjDvOakM79_GrEg3iQWcdmWr32fxwA0nMLYb/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Jte5sIc6x5OtTvip19_rN1W6ppK1IF2Fmk67mZKvDAO24zaEqrDtBrMt6fARcYB-qDViyv9VvPdHTXvj45on48ouqR-rEU9lQaxEIUN0nXkeZcSSwrR45c1ftfoFAIiP1i1HrnfzPUQX/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic"  alt="" /> </li><li> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQbafGwBTNArcjqj7uZ6DL6Oe2CRPp5MT3dFx4wj5p_tOp_jHzYdmE9hBWDYwRxfLSVfzJF4QkOykeWLQFiG57Z4jgbKhecRg1WQEPkSVWFsuia_sACI2hlvX28vEa04iW7hbBFu-a4rT/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwo2RxTmmUL2Z3lsS1yazMActIuIqBzOD3T5Rmll-PB6bcw6jrUapJjOZIHVoZWIagxrfYshs9udAVi7w5YZMctJ6mCuWihYUXXZWi1HkW2rCpVeKGSpYyke-uZPl1kedVpvPsB8leWA5/w500-h390-no/Gallery+Faceblog+Evolutions.jpg" class="pic"  alt="" /> </li></ul> </div></blockquote>Keterangan: Ganti URL gambar di atas dengan photo yang di inginkan. <div style="text-align: justify;">3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan. DEMO:</div> <style>#thumbgallery { overflow: visible; } #thumbgallery ul li { list-style:none; display:inline-table; padding:5px; } #thumbgallery ul li .pic{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052; -webkit-box-shadow:#272229 2px 2px 10px; -moz-box-shadow:#272229 2px 2px 10px; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); box-shadow:#272229 2px 2px 10px;} #thumbgallery ul li .mini:hover { cursor:pointer; } #thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; } </style> <div id="thumbgallery"><ul><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU1wD3x3Hum4MOtUl2O25YZbUoNacTag29lCuMvAMq0HR4XSJxVeEzrtUE9CU7AvBhJp7mHySzxHluQ8ofJg-_u6k5SnOYbCRAGytUbTwvwZhZUgw6xvMNLjYuz1QCIasGlwrz7qzNYYzV/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzFrwpJJug1auvUWMrnDg_jvytO0Rc6FoXVbw0oJRBbTsvKQ7d9SmaUPhr7dPuue3K9l_zmcla7xEuMknN0hyphenhyphenmtl6ftUybZzZ9OuMkY8mtt4GY04fAHIlj7GsfsXnkiiXT7yDMpKk_pW-w/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpnwZotM4bZOqLdYYdRIX7fOZcRpf3Nq3OTvm8rdte-ag8UxEqP2jQl1kFwvhyphenhyphen8_kKkBq8ueatUmxfhyJlbRCb1Vsty1VpGHywtbawfABhDwuPbuHicWAxY6cps8Q8ZBcGnWCjqVnGZ6_a/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ0pZLUKEdIQgv_L6K0qE5xg5sexNHFi0uJZ9sCE6ffkOZxSgSoh8DWfFIkXHiyqVTt03aDhRFXdOmrWGG8TTlCtSg36aQbN_DJp30xCqtvONE-PUDFx8yolTHvFNENdAcvybLJ9PrGwj/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ONxpaZ7242_Zhx2A0v2mXlA2ilZOUNJz3URQ1FFTuCXKxGxP3-7Gb-ybl3zkkv9FZJxNXjo0UePQiIegApLvWbZ-bayoaxEU-3yadc_C5S3kZTs2TjgQgXiDgzBSHi1e8wGXG4nwO3ux/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfh3PZKjBG_Bdxr5g5H6zX9ykbW4Ec1vCJYVpG4r1IZhyphenhyphenHRK3Ikk2roMntWlPKZVCYFR1UnUfZGPkNhNa5Yt_rn6ssvyoZdVV5Q6G1Ob3HIXTS3s-jT_CkR6oECkpO2t7v2SLFDq5DWi8/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUnPEPx5EbmSTBy248OmX5qIt7_fzEnDhTS7r9jbqCyTNt6XxcAIMLUwGc-h7bgP-M7444Y5Mf3RyMyDDckt71-t0IrHuRq4qasHwCv-e72AB2IUHYI4AeYiAutND58rhblsQipep7CLK/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCKcjKhYSblzwonJ8tfSr38bWRGBjW2q_bvA9I7e_6vAzrdJ2HqgVIEOwwuNT6149s3EPUWM7iMGHrKUCkzTtWW5OFricF1Go5G45hmTkaFoC6laIanhskoq21nowEp_9lHk9qlyUyKou/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGnBM8Tuxt7Gj83c8oTMveXEvpN8Lf6ox8jqaWrEEgs1VFTmj-W7wnTELSjL6ibND2lJnwoVrhrZwuF9sXqZGSPnaXrGlIzuzjXs3wo8r0ryOVSnJDwozD1iAXTQQZjET6lMxlDRgpLFhj/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisePM2q8PyS52vr0DpxjuUvSRavSFCbs-nno5CIF4268b1Yr2X4f7hAt9rsp2md9cxNQuVDHcLXUCgVYM1Lvb_wuBtYaYLCkxNedScMdt_6k8NbLAMm1mad0IiHEGIVUVQIX4T3m-MQPzG/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLB6LhbsNl9ajy01g-4eY6eu5-rGvF2LwLm3YwRaXxq2B3UYvlsDoTKGG7UR-F-LMM9_o1MOMaJKYwHqZeC_-lJohTMNfh15o5Ell1mA42qD66E4J7OZyWfyJ33GbdSj5uAhVEB8bWZ4ed/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdQFeu1yeWG7y7XDtSSpfIt5_0v9HV_cQbGdRfFb4h8xwYuQBAkVvwe61EVXGqNlEC0oQpRADNUvWxoa456jENiaX4Uts6whfmieq7E6V8RKUB5GQrm5Rwomqabq4qdOU6PxmHm8PnV-fb/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj7RlwaambJqfcartU5m3ZichYJmlMsRb2gmr4knN-cZjK2eeIdlpqAHlbmgeaJtU6WIGlSz0To9T4GrGoQ4Om4UPqA1yv6MzusIupRNMDvKCTro2UXc58_dYC_n9eMsVrOFaaIn9WuXHZ/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vKJhtda1dyJ3Ja5HP5D5CAmy4NSSqCDT1xmJuNuvBUVDt1oG-qaEGQeAb0iFsFf1ySdhI-msfG8FMuvBtzT39r6VpWN05Xr3OjfCMfzXvx-7UdbHwxtewgZKJFEYLZdib-qD4huVA9NT/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZzySSPUEy009l-tpOgmcmB_uoh_rRyQxKvVrtOOta7GQ3Jz2c8C752owq3ZRMx5gMAZJzMd8LcGr3-qLFEyrcB2UKCv4cMEOkBxmJI7P-OqfRrDgV2GyYizpv6hgI-wZhasr6oLeSfyh/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhw_nF7gpNcveeClbuPb_-DXugVGizQRS7xlChCzrUHzv1wwG7C_jW8QfnUTbBdRW5W6ArbFtEycL15jSa3AElqkeyggwqfhO5SqqOMhzIP5Q1YPwkQQra1EAmC9gzqTcr9yueODuzl6N/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSTKMG5o6DLGakn2iK9hHwx7chAJGQNGFYRxrEI0MQU_j66Qg2KcdIOlabKrTcxHjILisAQKMbYJT3pW15XojfKq7qTcNwgIqvUYoRwu94f2WozuV7fG7mnYncZInbJv_Qet9ktsxSm5z/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghs9d_zne7Q7qq13eAZ75Wzch3gGI7V21QURSOc0w_K91GmXs-7b9JgytGjFPb8Hn-aWoyjxI-WuN3fGiWadfvKKg1v2uyHMLF7TVFhkV8QfDIPCIJXDw8Rfi2z1pItPwbxvPphebEa3ap/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0YKlEGmdg17tx7rkiphvfzsg13RAaSzxm05_m24yVmA1FmsnaiEaVbx4f9FKNiu5r9ihaK8cJHltjqxhpufISEsfL0odCUks3BG4kgoDIpvohMH9aGX0GdZMnD3uxT678czLw7dAYJ8F/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbkaqUm7S1_piEg2iNyRmg3_Dul6cKnhrKaCyFQaiwfPt_pYmyadO8mbPAZbAx47A4gDa2W3aK5EiHkswajmip4_sxyyTjnxVjc32hwaqjuHiXJ3YbCz1qI9mRVjWd44S52zYAznUXayS/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJyZwUjJx4H7ZGtkOYZkgCjgApPjibkpFKWPWPAuaCehzr1OBoy6hM1DDWN1fVo6IpoFD8bgO7a4YITKZIpGvWZqz-iwRSvxFZvexT5siA2b2b7-EQCqqsU84PZKi59SV20wELJzC2y5w/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L-G2ZLq-Um0m-NCYFtZxWxpq02GZaT-annTGf40I7ryWrOiF457EoXeKfcRvTaCgiKdWfoGun0cuFfjaNLXWwviwk8chGzPCylxxVOCiosuQiqVJssdF0y5-RdP0ojQI8K0yRGXTUC99/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepjFdg5hiD68qyK70nwAYuUx3StCzIkdVxWdfh_xDA37De19rOVAJXPZwxdosSn_PLot-s0YPsLtTwX4EoWK9k8jlZ1-yOaRt-NwyqekEG6GksUQBP2CJaZikvoalyTTLXkjMugyqzeW3/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IoJu9FnASZBw8WbPQ1SegshQBO_wLFGxpd0g7zOo0PtZcppZ5Zb3or21am3dQiaVGJGP6EuLiKCLDC7cjtjDGp5iKl4byayLmX4RJi8l98tRo0cdHAaMMqKEKHymrTU810RR-DoUAwxy/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFc3BsN3ha5usVtnK-GnkF460EKyaRtt9XeqVGkCsQ5d8RPVJ8Q1b6_P1zzmI5odJXKYUZJyQUvwQRYv4Bm_P_1l1hiucN_nXurnkPvTTA9DWzRXLH7Wpiup_2MoK3EG_HJq6Qw_qZRe_p/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqFDrXUkMgf6_B95_-he-OHj0GquV8WfGaBvKXPOcOlll3yKHyyaT9JZzPLPE7ThTNDUEIuUBuGCYVHrQDp9i8WbYvyC1A8YrIfRskU3reSw1lacP41EZ2-sIknAIYxSkzLEcrwkDLLUa/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfNQPjc_rpG-w7_dwQ44bUHGFJWcAL9jw5qxW8elBW_xWeDIo-yvvtv5dYjaQLBbOPGRqvhEHaVCe9JdzK9EQD-j9olQe9DwgbA2t_VnaGcspb7q-OEIh18Je-xgBtqPk3rSKksWnIVI_s/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg44uoHjDIKrQy1opZpWC7tiQ-Ruql8GQGti-XMHx31wnn8yVAwC5wAqkyjIi_aj8WO6W93SXtL7UjQXRYLd_acbA6DqTr-1eN_SIRMngBC8nql0pfBEj3OqrYAopVCQUUT8zoYSg3l_nOe/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDlm-BtqmSFP8Qv0QpdufiedAFfoLZ5ibnJzXnBI0TRqACwPnqK9TFJaro4sJzUo49PAqnGbMewuXMBCKNxnScze2NRjfsgNmzTl6o-ESQSKKPifaE05GXda1e35mFrtfIET4K0jr1DIF/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyi7dvto5ouvREWMHBT_WSON2T8dVeQmJGyX_B3Uv0x-XrnJPaEgamqpcX1dhIdttYe7ADNItL7YFqAwha0k5s4a43oYeKSKOgpAx93C3faBmjr-k7pdI_qwR-HrM-nXIu-vPRvknYQ92/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisAez5cDF9sBNmll-2GqmAZTCrWbjjgocYjBiPR8THt8iwbHX0oIB_E5yMfpkAMslwNWzRhCuQX6ZSA1az009fChsT9Dx7rFmMRZlUSh0L6ZM2l7UggNILcdtZ-kMaqOiQSDMHtRG69krh/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIOhHxy37jAXbFEg4ZG7ksncpodU35S4X70cadS61pcuNKfF4TRxNStBoElbcwKDMAO6qAH-BkWmjCrLttopboV4qGRYTN3VLgRyGha8wRfWXwWO7EZbaGtxcVdQf-89oZBRoWqdqnue3/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaablheig5PiVSuUYEh5MMvQPJnxjmzhp4gSqxpMBiGV3bi67Kg1DKLdL9j8XdSFo4xCrX7Y8hd3km2XWzWLAfJjAtlUsXPwM2YhVuaDjUPND-NDWVEu3FFp3FSc-xSYS_6rNKCGEUIVnj/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMyEc_rC4GTqQt695uyh-Tp5pEYANyfrUVMTJflPjvA2mSKoCp2bSuO0KYIMcP42TKv-dY1zGsEzHrbs_V2LlswdRBqoUbIWcH4dzuhB1D5mrdCT87rIEC5pZLpYJ3qObdN8vtWakdkyo/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYrakXlsZF89D_gjx2YFoI2-0nov23xbhIkcuVOWUlJvviXtyegy0YEYKCygVvNNvLV1LyTDWRv0LDCZxYMHfjGoy1dRR_iRQtmsZIS_RZKgDcCmDmk91zMDltXO9B7yg2nBhxXto_VNX/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhxTHT_OUkN1kg5U6mPFY8HyhkzgpaGvF_j4anFK8aKluY3ubT0IT3Yf0ir1d7Fg_-0Ch5fNdvNWgHksu9v7C2r2aM0EX8JWGEez-Ql9A_Oy5Wd1HXCOHyTv-SnfClwaLRYqZWXeNV5zX/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" /></li><li><img alt="cewek sexy" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsp6hqS6I5W7vKOIv6G8DYsQGGCaKKhHGbNBnH2ge2PRZ0OnvjhtTFdr-okDzjj507IJGoHTrv0QHvS3nFoP7qDi6HykO60shG_C2W0WLnjDvOakM79_GrEg3iQWcdmWr32fxwA0nMLYb/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" width="100" /><img alt="cewek sexy" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Jte5sIc6x5OtTvip19_rN1W6ppK1IF2Fmk67mZKvDAO24zaEqrDtBrMt6fARcYB-qDViyv9VvPdHTXvj45on48ouqR-rEU9lQaxEIUN0nXkeZcSSwrR45c1ftfoFAIiP1i1HrnfzPUQX/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" /></li><li><img alt="pria ganteng" class="mini" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQbafGwBTNArcjqj7uZ6DL6Oe2CRPp5MT3dFx4wj5p_tOp_jHzYdmE9hBWDYwRxfLSVfzJF4QkOykeWLQFiG57Z4jgbKhecRg1WQEPkSVWFsuia_sACI2hlvX28vEa04iW7hbBFu-a4rT/s100-no/Faceblog+Evolutions.jpg" width="100" /><img alt="pria ganteng" class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwo2RxTmmUL2Z3lsS1yazMActIuIqBzOD3T5Rmll-PB6bcw6jrUapJjOZIHVoZWIagxrfYshs9udAVi7w5YZMctJ6mCuWihYUXXZWi1HkW2rCpVeKGSpYyke-uZPl1kedVpvPsB8leWA5/w500-h390-no/Gallery+Faceblog+Evolutions.jpg" /></li></ul></div>

Membuat Thumbnail Gallery Photo CSS3 di Blog – pada posting sebelumnya saya juga sudah pernah membahas tentang simple gallery photo di blog...