Membuat Spoiler Simple Slide Panel di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheY2YxE6xTs9oA_ORNYrl5_-aPfGEwezFsJsZmCeUHlAOss_JQ3S0GlrnsxMfurAI7mSbeTnuxJB6n6OWiArhb5UaTr6ByuzQE61nqDGLQ-sWfM-MmxjyRdDVBXdQde-9E5ngSVAi-V_Q/s1600/spoiler-blog.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Spoiler Simple Slide Panel di Blog" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheY2YxE6xTs9oA_ORNYrl5_-aPfGEwezFsJsZmCeUHlAOss_JQ3S0GlrnsxMfurAI7mSbeTnuxJB6n6OWiArhb5UaTr6ByuzQE61nqDGLQ-sWfM-MmxjyRdDVBXdQde-9E5ngSVAi-V_Q/s320/spoiler-blog.gif" title="Membuat Spoiler Simple Slide Panel di Blog" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Spoiler Simple Slide Panel di Blog</b> – tombol spoiler pada blog sekarang memang sudah sangat jarang digunakan, dan pada tutorial yang sebelumnya saya juga sudah pernaha membahas mengenai tombol spoiler pada tutorial yang berjudul <a href="http://mas-andes.blogspot.com/2013/04/membuat-push-down-panel-dengan-css3-di.html" target="_blank" title="membuat push down panel dengan CSS3 di blog">membuat push down panel dengan CSS3 di blog</a>. Tombol spoiler biasanya digunakan oleh para blogger untuk beberapa membuat suatu artikel posting supaya lebih ringkas dan tidak memakan banyak ruang posting jika pada halaman artikel tersebut memang merupakan halaman dengan isi konten posting yang panjang dan biasanya fungsi dari tombol spoiler ini digunakan untuk memecah halaman tersebut agar menjadi lebih ringkas, seperti jika terdapat banyak gambar maka pada gambar tersebut dapat ditampilkan didalam spoiler agar jika terdapat banyak gambar maka bisa kita tampilkan dan juga bisa kita hide atau tutup. Jadi pada dasarnya tombol spoiler ini merupakan tombol show hide atau dengan kata lain yakni suatu tombol yang dapat menampilkan maupun menyembunyikan suatu konten atau artikel di dalam blog. Untuk lebih jelasnya tombol spoiler ini bisa dilihat pada demo, dan untuk membuat tombol spoiler ini maka berikut adalah tutorial cara <b>Membuat Spoiler Simple Slide Panel di Blog</b>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">1. Login ke akun blogger.<br />2. Lalu copy kode dibawah ini.</div><blockquote class="tr_bq"><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script><br /><script type="text/javascript"><br />$(document).ready(function(){<br />$(".btn-slide").click(function(){<br />$("#panel").slideToggle("slow");<br />$(this).toggleClass("active"); return false;<br />});    <br />});<br /></script><br /><style type="text/css"><br />#panel { color:#000; background: #E9FBE9; height: 200px;  padding: 10px; display: none; }<br />.slide { margin: 0; padding: 0; border-top: solid 5px #52e052;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo8hfMHM-bx2tT5VON39wdZb4d1IuzLyK0klj8-rrOoD_NJdEmKzPfFn59z58yLcmfZsjgFjEw3PyfvniwjcD3R7vHZtAoj9Nl51b4Vxmd6llQLaAVqy55rd1sU_ciy-sKbI4xlUjHTDv/s154/Faceblog+Evolutions.png) no-repeat center top; }<br />.btn-slide {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcBVU2l7wEiYm0uriT4cV0JbSqA1gnapdcYFKDTHpRncRiYj7f_mgboeMVUXkORGRoSNeVcPSDpSBAXmPl3ZS-uHvwgEkh4g7dwVzcsUb0OpbmXaCOl51lC72RJUZnQMVO62u5_bVjFxq/s70/white-arrow.gif) no-repeat right -50px;<br />text-align: center; width: 144px; height: 31px;<br />padding: 10px 10px 0 0; margin: 0 auto; display: block;<br />font: bold 120%/100% Arial, Helvetica, sans-serif;<br />color: #000; text-decoration: none; }<br />.active { background-position: right 12px; }<br /></style><br /><br /><div id="panel"><br />GANTI DENGAN TEKS/DESKRIPSI YANG DI INGINKAN<br /></div><br /><p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p></blockquote><div style="text-align: justify;">3. Selanjutnya paste kode tersebut kedalam posting mode HTML. Selanjutnya klik Publikasikan.<br /><br />DEMO:<br /></div> <script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script><style type="text/css">#panel { color:#000; background: #E9FBE9; height: 200px; padding: 10px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 5px #52e052; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo8hfMHM-bx2tT5VON39wdZb4d1IuzLyK0klj8-rrOoD_NJdEmKzPfFn59z58yLcmfZsjgFjEw3PyfvniwjcD3R7vHZtAoj9Nl51b4Vxmd6llQLaAVqy55rd1sU_ciy-sKbI4xlUjHTDv/s154/Faceblog+Evolutions.png) no-repeat center top; } .btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcBVU2l7wEiYm0uriT4cV0JbSqA1gnapdcYFKDTHpRncRiYj7f_mgboeMVUXkORGRoSNeVcPSDpSBAXmPl3ZS-uHvwgEkh4g7dwVzcsUb0OpbmXaCOl51lC72RJUZnQMVO62u5_bVjFxq/s70/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #000; text-decoration: none; } .active { background-position: right 12px; } </style> <div id="panel">GANTI DENGAN TEKS/DESKRIPSI YANG DI INGINKAN </div><p class="slide"><a class="btn-slide" href="#">Slide Panel</a></p>

Membuat Spoiler Simple Slide Panel di Blog – tombol spoiler pada blog sekarang memang sudah sangat jarang digunakan, dan pada tutorial yang...

Read More

Simple Efek Disapear Artikel Blog With jQuery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6G2Bq4GcQJF4D90izBC1Ppld7Vr1S71tl3lY6QadQslcY0DQh1cLoe6IdjnOozQL419zvGWzNEGG0i3reIGYBmMdnjkXgwX7RNYwTDnYbxsVmOPRXwUtaZf9ljtFrUG61CA7RtZ0uMc/s1600/disapear.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Disapear Artikel Blog With jQuery" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6G2Bq4GcQJF4D90izBC1Ppld7Vr1S71tl3lY6QadQslcY0DQh1cLoe6IdjnOozQL419zvGWzNEGG0i3reIGYBmMdnjkXgwX7RNYwTDnYbxsVmOPRXwUtaZf9ljtFrUG61CA7RtZ0uMc/s320/disapear.gif" title="Simple Efek Disapear Artikel Blog With jQuery" width="320" /></a></div><div style="text-align: justify;"><b>Simple Efek Disapear Artikel Blog With jQuery</b> – blog dengan jQuery memang sangat melekat dan selalu saling berkaitan. Saat membicarakan jquery dengan blog memang terasa seperti tidak ada habisnya sampai kemudian hari untuk mengolah blog menggunakan script jQuery untuk memanipulasi komponen di dokumen HTML. Hal ini disebabkan karena jQuery dirancang sedemikian rupa supaya projek yang kita buat menggunakan Javascript menjadi relatif sangat mudah. Write less do more, menulis kode lebih sedikit tetapi melakukan pekerjaan lebih banyak. Pada tutorial ini kita akan membahas mengenai efek didalam posting blog yang nantinya pada artikel yang sudah kita tempel dengan efek maka akan dapat dengan mudah untuk memberikan kebebasan kepada visitor sehingga jika pada saat visitor menginginkan artikel tersebut tidak tampil di postingan maka dengan sangat mudahnya visitor dapat langsung menghilangkannya dengan menekan tombol yang sudah tersedia. Sebagai contoh agar lebih detail dan jelasnya bisa dilihat pada demo. Untuk memasang efek ini kedalam blog maka berikut adalah tutorial cara menerapkan <b>Simple Efek Disapear Artikel Blog With jQuery</b>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">1. Login ke akun blogger.<br />2. Lalu copy kode dibawah ini.</div><blockquote class="tr_bq"><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script><br /><script type="text/javascript"><br />$(document).ready(function(){                          <br />$(".pane .delete").click(function(){<br />$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");<br />});<br />});<br /></script><br /><style type="text/css"><br />.pane { color: #000; background: #e9fbe9; padding: 10px 20px 10px;<br />position: relative; border-top: solid 2px #52e052; }<br />.pane .delete { position: absolute; top: 10px;<br />right: 10px; cursor: pointer; }<br /></style><br /><br /><div class="pane"><br /><h3>JUDUL 1</h3><br /><p>Silahkan ganti dengan teks yang di inginkan</p><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" alt="delete" class="delete" /><br /></div><br /><div class="pane"><br /><h3>JUDUL 2</h3><br /><p>Silahkan ganti dengan teks yang di inginkan</p><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" alt="delete" class="delete" /><br /></div><br /><div class="pane"><br /><h3>JUDUL 3</h3><br /><p>Silahkan ganti dengan teks yang di inginkan</p><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" alt="delete" class="delete" /><br /></div></blockquote><div style="text-align: justify;">3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.<br /><br />DEMO:</div><br/> <script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script><script type="text/javascript">$(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); }); }); </script><style type="text/css">.pane { color: #000; background: #e9fbe9; padding: 10px 20px 10px; position: relative; border-top: solid 2px #52e052; } .pane .delete { position: absolute; top: 10px; right: 10px; cursor: pointer; } </style> <div class="pane"><h3>JUDUL 1</h3><p>Silahkan ganti dengan teks yang di inginkan</p><img alt="delete" class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" /></div><div class="pane"><h3>JUDUL 2</h3><p>Silahkan ganti dengan teks yang di inginkan</p><img alt="delete" class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" /></div><div class="pane"><h3>JUDUL 3</h3><p>Silahkan ganti dengan teks yang di inginkan</p><img class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVduWNP8TZtUFpF4mOm5RqCnw0rFgrgJWRyxfQiWR_NlvWAg8uHruCAJT2QqDFvCPUz-2xoTofRe5wKr8DBJx3a3AlSWS-9Aoa93xVRrV22_kqykyAmPxjjL9HkLlk5J4mQ0ePhTSf_uF/s16/btn-delete.gif" /></div>

Simple Efek Disapear Artikel Blog With jQuery – blog dengan jQuery memang sangat melekat dan selalu saling berkaitan. Saat membicarakan jqu...

Read More

Membuat Thumbnail Gallery Photo CSS3 di Blog

<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;"><b>Membuat Thumbnail Gallery Photo CSS3 di Blog</b> – 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 <b>Membuat Thumbnail Gallery Photo CSS3 di Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Lalu copy kode dibawah ini.</div><blockquote class="tr_bq"><style><br />#thumbgallery { overflow: visible; }<br />#thumbgallery ul li { list-style:none; display:inline-table; padding:5px; }<br />#thumbgallery ul li .pic{<br />-webkit-transition: all 0.6s ease-in-out;<br />-moz-transition: all 0.6s ease-in-out;<br />-o-transition: all 0.6s ease-in-out;<br />opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052;<br />-webkit-box-shadow:#272229 2px 2px 10px;<br />-moz-box-shadow:#272229 2px 2px 10px;<br />filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);<br />box-shadow:#272229 2px 2px 10px;}<br />#thumbgallery ul li .mini:hover { cursor:pointer; }<br />#thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; }<br /></style><br /><br /><div id="thumbgallery"><br /><ul><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQ0pZLUKEdIQgv_L6K0qE5xg5sexNHFi0uJZ9sCE6ffkOZxSgSoh8DWfFIkXHiyqVTt03aDhRFXdOmrWGG8TTlCtSg36aQbN_DJp30xCqtvONE-PUDFx8yolTHvFNENdAcvybLJ9PrGwj/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCKcjKhYSblzwonJ8tfSr38bWRGBjW2q_bvA9I7e_6vAzrdJ2HqgVIEOwwuNT6149s3EPUWM7iMGHrKUCkzTtWW5OFricF1Go5G45hmTkaFoC6laIanhskoq21nowEp_9lHk9qlyUyKou/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdQFeu1yeWG7y7XDtSSpfIt5_0v9HV_cQbGdRfFb4h8xwYuQBAkVvwe61EVXGqNlEC0oQpRADNUvWxoa456jENiaX4Uts6whfmieq7E6V8RKUB5GQrm5Rwomqabq4qdOU6PxmHm8PnV-fb/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhw_nF7gpNcveeClbuPb_-DXugVGizQRS7xlChCzrUHzv1wwG7C_jW8QfnUTbBdRW5W6ArbFtEycL15jSa3AElqkeyggwqfhO5SqqOMhzIP5Q1YPwkQQra1EAmC9gzqTcr9yueODuzl6N/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IoJu9FnASZBw8WbPQ1SegshQBO_wLFGxpd0g7zOo0PtZcppZ5Zb3or21am3dQiaVGJGP6EuLiKCLDC7cjtjDGp5iKl4byayLmX4RJi8l98tRo0cdHAaMMqKEKHymrTU810RR-DoUAwxy/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIOhHxy37jAXbFEg4ZG7ksncpodU35S4X70cadS61pcuNKfF4TRxNStBoElbcwKDMAO6qAH-BkWmjCrLttopboV4qGRYTN3VLgRyGha8wRfWXwWO7EZbaGtxcVdQf-89oZBRoWqdqnue3/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><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="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Jte5sIc6x5OtTvip19_rN1W6ppK1IF2Fmk67mZKvDAO24zaEqrDtBrMt6fARcYB-qDViyv9VvPdHTXvj45on48ouqR-rEU9lQaxEIUN0nXkeZcSSwrR45c1ftfoFAIiP1i1HrnfzPUQX/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic"  alt="" /><br /></li><li><br /><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="" /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwo2RxTmmUL2Z3lsS1yazMActIuIqBzOD3T5Rmll-PB6bcw6jrUapJjOZIHVoZWIagxrfYshs9udAVi7w5YZMctJ6mCuWihYUXXZWi1HkW2rCpVeKGSpYyke-uZPl1kedVpvPsB8leWA5/w500-h390-no/Gallery+Faceblog+Evolutions.jpg" class="pic"  alt="" /><br /></li></ul><br /></div></blockquote>Keterangan:<br />Ganti URL gambar di atas dengan photo yang di inginkan.<br /><br /><div style="text-align: justify;">3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.<br /><br />DEMO:</div><br /> <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> <br /><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...

Read More

Membuat Gallery Photo Thumbnail With jQuery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicU6p-KJAhAV4t-bsEITS0OBPvwNqmvNWLXJxE3M_HUTn0ffFTvyp-c1f_VrhX5QmmVb-95jL1PK-VorLZ26ubnZzaoFvTyjW0jvZKbFDwPrMpWMWifkcTzdiA4N5ZxjzWfnGgqQ_Y9M0/s1600/gallery-helm.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gallery Photo Thumbnail Helm" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicU6p-KJAhAV4t-bsEITS0OBPvwNqmvNWLXJxE3M_HUTn0ffFTvyp-c1f_VrhX5QmmVb-95jL1PK-VorLZ26ubnZzaoFvTyjW0jvZKbFDwPrMpWMWifkcTzdiA4N5ZxjzWfnGgqQ_Y9M0/s320/gallery-helm.jpg" title="Membuat Gallery Photo Thumbnail With jQuery" width="320" /></a></div><div style="text-align: justify;"><b>Membuat Gallery Photo Thumbnail With jQuery</b> – masih seperti tema pada postingan sebelumnya yakni modifikasi gambar pada posting blog, dan tema kali ini adalah tentang gallery photo. Untuk membuat gallery photo pada posting blog terdapat bermacam cara dan berbagai efek yang dapat mengcustom gambar atau photo tersebut. Jika pada saat akan mengupload photo ke blog dan terdapat banyak photo yang akan di upload kedalam satu halaman posting agar photo-photo tersebut memiliki style layout yang minimalis maka perlu sedikit melakukan customisasi pada gambar hanya dengan menambahkan kode yang simple untuk memperoleh hasil maksimal yang akan menghias halaman blog dengan mengatur photo tersebut supaya dapat bervariasi. Untuk melakukan hal ini tidaklah rumit seperti jika sudah anda bayangkan sebelumnya. Langkah singkat dan efisien untuk membuat gallery photo di blog dengan ukuran gambar yang sudah kita atur sebelumnya maka hanyak akan terdapat satu gambar berukuran besar dan disertai beberapa thumbnail yang mengelilingi photo tersebut dimana nantinya jika pada thumbnail tersebut di klik maka akan tampil gambar yang berukuran besar pada kolom utama yang terdapat dibagian tengah antara baris photo thumbnail atas dan bawah. Jika ingin melihat hasil yang akan kita bahas pada tutorial ini bisa langsung dilihat pada demo. Sedangakan selanjutnya untuk memasang ke blog, berikut adalah tutorial cara <b>Membuat Gallery Photo Thumbnail With jQuery</b>.<br /><br />1. Login ke akun blogger.<br />2. Lalu copy kode dibawah ini.</div><blockquote class="tr_bq"><script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script><br /><script type="text/javascript"><br />$(document).ready(function(){<br />$("h2").append('<em></em>')<br />$(".thumbs a").click(function(){   <br />var largePath = $(this).attr("href");<br />var largeAlt = $(this).attr("title");       <br />$("#largeImg").attr({ src: largePath, alt: largeAlt });       <br />$("h2 em").html(" (" + largeAlt + ")"); return false;<br />});   <br />});<br /></script><br /><style type="text/css"><br />#largeImg { border: solid 2px #52e052;<br />width: 530px; height: 350px; }<br />.thumbs img { border: solid 2px #52e052;<br />width: 100px; height: 100px; }<br />.thumbs img:hover { border-color: #FF9900; }<br /></style><br /><br /><h2>Gallery</h2><br /><p class="thumbs"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpEzPtzZHq9LTbgkLebtJ_3lBCJjPJsDSzMc0DAiXTgQZdh6K1jO0IXEpfnPn8EJNAIEK4L0lNqSEZUvtykOKsXe1Stk62Qds3xQ_F2R8z-EwdKaza5C_iOrI91bGW6HyaNxdfq-ZinSW/w550-h350-no/Helm+%252812%2529.jpg" title="Helm-Type 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuYxPy_rYsN0AK2daqssOiF-HWmTstw2228XEHyjPDcurg-KidPgy4zI3vMt3IfRs0DRFf5OLBkbDTXnsvNwBGMEUguHZrS7tDTfT52qOWhYcZ2dEcFXNF97ljpoYNzPxruJo3ZjqNCh2/w174-h195-no/Thumb-Helm+%252812%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGCf9PlG7okeEjnhWZVmqal5VUFStmMDG2AlXBiUJCYxTqWx647r6S1EHvX0uIqpTIhUnfzzNRn9Ub8aXrpdIO2UOovTQ6u7gitFeTiTitMwVzqUOuOos0hHkFvzyZn_zhRpqDb3QGaBs/w550-h350-no/Helm+%25282%2529.jpg" title="Helm-Type 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5eU35xx37qP6hlcIM6rKg_DiiYUM-cyJbEf6ZSQde_c5AgpQxigvVKPu1WICaGtWopQy2tpNA8dMp573NNbvKD2wrWacoqLf-g9xbyfF0xR1iYCVbGEdtFzeXENdEZtlrqhEPpXDohYH/w174-h195-no/Thumb-Helm+%25282%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfE7bGPVlaz9AGwudOowMvLv7MQA5Ztk4gepAFl9MjfCc3t5VRNkVbwQvxnu2Abs7eyesby2lZGkakyu70Gk4Sk9UvpDbLIl_Ou22BhtidsbwK9znjTRShB62e2fM4ZSg2AbKqmg_lBTQF/w550-h350-no/Helm+%25283%2529.jpg" title="Helm-Type 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgeWwaTD8F5fuDZmT98OsXn50YW3SNnxGxW1HHGEapXn9Ed7MfydcfWvPVDodDVu9w0WOz0A_ZT6lo22dRw6GD7zEMkZqgtavqEFtwN9PHhGJoeYJbyi2RhZwPgk4tclvc05LJKLC2adh/w174-h195-no/Thumb-Helm+%25283%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWqqL0Y0mfITs9Be8M9co5lkp9tr0_aGl2-ft1XWF6v9GDzGGOcK__MeWja3V7DpZJ-t3fwjF5B2LpXcJf3kdsq3Fm_OOUOo9jfVuz3Uv29WmPvYUMCJZvKfkc2NDHB4C3GQjn8LHCq7N/w550-h350-no/Helm+%25284%2529.jpg" title="Helm-Type 5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyWbu3vVSf0I0AqRImCpCHPwJIl2CAoeR3GoVAoKswXtBAYPi1cj90jKJAWz7M7YBuemMAnIKBegK6JjrK8QDyV9GQBAiiJDz5SP0irRma7LfTrsLP8uO_JeT_CNqnMWFoXbKfxH4snaa/w174-h195-no/Thumb-Helm+%25284%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrtLZz2r4suK_SgUT-4HVfDh0nRgR1LaXklXdFj1apga2LGoxERegUFSkc14fnARQXap_RS26376scsmp94f0bul1YeBuBtHFWuotz6rqLPgVv7-322ZOzMH3bSYykoJ87v5Xe1-VWYr-/w550-h350-no/Helm+%25285%2529.jpg" title="Helm-Type 6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuPbOof8DbmPxsZAAZtrtWC18KzzeheYsKHCcoriIY3Igk1Fon6kmTFE61GIuZTwm_-O2KbaWDqwF2-aqmPRk3CB9yvT_614USNjeSCqSq1Fzqtk19fCPhsi-dtJ3Z-wakGitwq1npDH5/w174-h195-no/Thumb-Helm+%25285%2529.jpg" /></a><br /></p><br /><p><img id="largeImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7aMplE26iXNhq-P5cUJz2GU5PiPyrpz7ufLGNw5OAMilQqQrxRl2i5HasYp_tWXT7yr3uAe7wbwxyYoaF8hyphenhyphenZOcO0nulx-QxPqPCxvFomIPwSTohAc_22iEVOGAVENpJ32AU2CGF_ypfH/w550-h350-no/Helm+%252813%2529.jpg" alt="Large image" /></p><br /><p class="thumbs"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnrgG4Sstds_0Ub7E0U6CShJWL4QX2k0m7iYx96hExs8x_OqZPXDgq7Le3-5mcOnTtyx2hb0eTis5BJxcuWxiyPBco2sNDtuuFSSye4sqDxgf_Ru0l9fvlhskFcL94zkSYUToeg26maQS/w550-h350-no/Helm+%25287%2529.jpg" title="Helm-Type 7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UBWx3lU1uu6wbGeeNlR078QHOu3iM76N0REPczu961j6ODAjHWZy1DcWQ40fHpfNW74O6pMqT77VT7nJvLH4WRS2k9VhN0zcSmlor7vXDBxcnwKCX_gauAf6uhxvOu0ibeU4TJO5hNyf/w174-h195-no/Thumb-Helm+%25287%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSRbcKE-oBOnKsy6PSlOQ0Fo2FvTgDVqfDTConH08nzqITc4xSH9d-n1qOVeQAXeCtlWDHJzXK25-dcyW7qng0P8xPgVy1oq4liSuqaKUBdGh_ktzRP5WdGXYSTmwGvDmss_q4slpK2ZI/w550-h350-no/Helm+%25288%2529.jpg" title="Helm-Type 8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qO7YtNhyjSn0OV-u4mN2WCu_LNSHMIZ_saPn1xhb5GTge356yUKGKRF9v_zE5VCaXjTbqcQmreai3km3A676wA5sI3Q78qUGvM_iTyHtzmNBQ5epveV83ZOiuPo3sxTnE3NG-aunoP6t/w174-h195-no/Thumb-Helm+%25288%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfhvWovnx-LOfnIkL7uARFqzgStQQrCxdftxN3wmyPP-Aa7u-22R1Exs_wJhFwOP6nzj_zcWRgtavkiJcdenWdOJ6vSc3xsjPmezYRWz9EwjqAEnYxqxhAc0tUfMinXAkTmw8Gd9Fk3zC/w550-h350-no/Helm+%25289%2529.jpg" title="Helm-Type 9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3rXXD8C82uuc_mDHJO1M0iuig6kNPOQoPVu8wY6TzRoeOBmbnOP5rhTimHRFfUSDAGaiA89U51yXnsBVSzvRiclNCvRg-CKEUlzy8ctbxg_WRIJSzVcuF5dRxx8Ntvavl40uSP_a0ea3/w174-h195-no/Thumb-Helm+%25289%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhl1Gxu_WydPVjRwcv30pk31AeujhU27G9twaJagH-OOy80YjRC3990oY14uadYXWrRQjXtH43IQgP4Z1vdVJNlHvtUsm9qgtvMCP3_mYJa50EKuyvMGCP8iKjHwUW73sq4tJq1cp9JTdH/w550-h350-no/Helm+%252810%2529.jpg" title="Helm-Type 10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj08Y-377ABl_LIPd208qd1Cb8pwhoA8h4J_MzyzIWAi8MCxSMvIBRuZYP1mf8DRcFchiLZrWqJDmrSSpD9DCcm7AR0cu_SRm1mo6VWTB6k8slywKzAp5a4jkzb5fYCVqOEFoyCPnJaz6Yk/w174-h195-no/Thumb-Helm+%252810%2529.jpg" /></a><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIAxAAbud-3en-qg5SQma0Pau8ae8NexPd9CZX9bTUmFhe5ShnWbCd3PNneSOtjDMCxkxnHiftHwzm7ei_bV7OjVdeDOoj4P49vLjAqxxuFJE98KYDeoyS2eWiuI9CIMT5mAXBtQtGZbT9/w550-h350-no/Helm+%25281%2529.jpg" title="Helm-Type 11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQxklBg0R4Weyq1cVji5KDooj_aKZ4qfAiBBrkztpEM6FRAe-CFVkrnyw6ILPEVf7YfYYns5s3OxXFCLa-W58B3NPn5HxYmIVn6JbMWXbohfozcuAcsTagWHKkaqNgfdROX2f5-0aCxv_l/w174-h195-no/Thumb-Helm+%25281%2529.jpg" /></a><br /></p></blockquote><div style="text-align: justify;">Keterangan:<br />Ganti URL gambar dengan yang di inginkan.<br /><br />3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.<br /><br /><b>DEMO</b>:</div>Klik gambar yang kecil. <br/> <script src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ $("dum").append('<i></i>') $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("dum em").html(" (" + largeAlt + ")"); return false; }); }); </script> <style type="text/css">#largeImg { border: solid 2px #52e052; width: 530px; height: 350px; } .thumbs img { border: solid 2px #52e052; width: 100px; height: 100px; } .thumbs img:hover { border-color: #FF9900; } </style><br /><p class="thumbs"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpEzPtzZHq9LTbgkLebtJ_3lBCJjPJsDSzMc0DAiXTgQZdh6K1jO0IXEpfnPn8EJNAIEK4L0lNqSEZUvtykOKsXe1Stk62Qds3xQ_F2R8z-EwdKaza5C_iOrI91bGW6HyaNxdfq-ZinSW/w550-h350-no/Helm+%252812%2529.jpg" title="Helm-Type 2"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuYxPy_rYsN0AK2daqssOiF-HWmTstw2228XEHyjPDcurg-KidPgy4zI3vMt3IfRs0DRFf5OLBkbDTXnsvNwBGMEUguHZrS7tDTfT52qOWhYcZ2dEcFXNF97ljpoYNzPxruJo3ZjqNCh2/w174-h195-no/Thumb-Helm+%252812%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGCf9PlG7okeEjnhWZVmqal5VUFStmMDG2AlXBiUJCYxTqWx647r6S1EHvX0uIqpTIhUnfzzNRn9Ub8aXrpdIO2UOovTQ6u7gitFeTiTitMwVzqUOuOos0hHkFvzyZn_zhRpqDb3QGaBs/w550-h350-no/Helm+%25282%2529.jpg" title="Helm-Type 3"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5eU35xx37qP6hlcIM6rKg_DiiYUM-cyJbEf6ZSQde_c5AgpQxigvVKPu1WICaGtWopQy2tpNA8dMp573NNbvKD2wrWacoqLf-g9xbyfF0xR1iYCVbGEdtFzeXENdEZtlrqhEPpXDohYH/w174-h195-no/Thumb-Helm+%25282%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfE7bGPVlaz9AGwudOowMvLv7MQA5Ztk4gepAFl9MjfCc3t5VRNkVbwQvxnu2Abs7eyesby2lZGkakyu70Gk4Sk9UvpDbLIl_Ou22BhtidsbwK9znjTRShB62e2fM4ZSg2AbKqmg_lBTQF/w550-h350-no/Helm+%25283%2529.jpg" title="Helm-Type 4"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgeWwaTD8F5fuDZmT98OsXn50YW3SNnxGxW1HHGEapXn9Ed7MfydcfWvPVDodDVu9w0WOz0A_ZT6lo22dRw6GD7zEMkZqgtavqEFtwN9PHhGJoeYJbyi2RhZwPgk4tclvc05LJKLC2adh/w174-h195-no/Thumb-Helm+%25283%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWqqL0Y0mfITs9Be8M9co5lkp9tr0_aGl2-ft1XWF6v9GDzGGOcK__MeWja3V7DpZJ-t3fwjF5B2LpXcJf3kdsq3Fm_OOUOo9jfVuz3Uv29WmPvYUMCJZvKfkc2NDHB4C3GQjn8LHCq7N/w550-h350-no/Helm+%25284%2529.jpg" title="Helm-Type 5"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyWbu3vVSf0I0AqRImCpCHPwJIl2CAoeR3GoVAoKswXtBAYPi1cj90jKJAWz7M7YBuemMAnIKBegK6JjrK8QDyV9GQBAiiJDz5SP0irRma7LfTrsLP8uO_JeT_CNqnMWFoXbKfxH4snaa/w174-h195-no/Thumb-Helm+%25284%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrtLZz2r4suK_SgUT-4HVfDh0nRgR1LaXklXdFj1apga2LGoxERegUFSkc14fnARQXap_RS26376scsmp94f0bul1YeBuBtHFWuotz6rqLPgVv7-322ZOzMH3bSYykoJ87v5Xe1-VWYr-/w550-h350-no/Helm+%25285%2529.jpg" title="Helm-Type 6"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuPbOof8DbmPxsZAAZtrtWC18KzzeheYsKHCcoriIY3Igk1Fon6kmTFE61GIuZTwm_-O2KbaWDqwF2-aqmPRk3CB9yvT_614USNjeSCqSq1Fzqtk19fCPhsi-dtJ3Z-wakGitwq1npDH5/w174-h195-no/Thumb-Helm+%25285%2529.jpg" /></a></p><p><img alt="Helm Keren" id="largeImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7aMplE26iXNhq-P5cUJz2GU5PiPyrpz7ufLGNw5OAMilQqQrxRl2i5HasYp_tWXT7yr3uAe7wbwxyYoaF8hyphenhyphenZOcO0nulx-QxPqPCxvFomIPwSTohAc_22iEVOGAVENpJ32AU2CGF_ypfH/w550-h350-no/Helm+%252813%2529.jpg" /></p><p class="thumbs"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnrgG4Sstds_0Ub7E0U6CShJWL4QX2k0m7iYx96hExs8x_OqZPXDgq7Le3-5mcOnTtyx2hb0eTis5BJxcuWxiyPBco2sNDtuuFSSye4sqDxgf_Ru0l9fvlhskFcL94zkSYUToeg26maQS/w550-h350-no/Helm+%25287%2529.jpg" title="Helm-Type 7"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UBWx3lU1uu6wbGeeNlR078QHOu3iM76N0REPczu961j6ODAjHWZy1DcWQ40fHpfNW74O6pMqT77VT7nJvLH4WRS2k9VhN0zcSmlor7vXDBxcnwKCX_gauAf6uhxvOu0ibeU4TJO5hNyf/w174-h195-no/Thumb-Helm+%25287%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSRbcKE-oBOnKsy6PSlOQ0Fo2FvTgDVqfDTConH08nzqITc4xSH9d-n1qOVeQAXeCtlWDHJzXK25-dcyW7qng0P8xPgVy1oq4liSuqaKUBdGh_ktzRP5WdGXYSTmwGvDmss_q4slpK2ZI/w550-h350-no/Helm+%25288%2529.jpg" title="Helm-Type 8"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qO7YtNhyjSn0OV-u4mN2WCu_LNSHMIZ_saPn1xhb5GTge356yUKGKRF9v_zE5VCaXjTbqcQmreai3km3A676wA5sI3Q78qUGvM_iTyHtzmNBQ5epveV83ZOiuPo3sxTnE3NG-aunoP6t/w174-h195-no/Thumb-Helm+%25288%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfhvWovnx-LOfnIkL7uARFqzgStQQrCxdftxN3wmyPP-Aa7u-22R1Exs_wJhFwOP6nzj_zcWRgtavkiJcdenWdOJ6vSc3xsjPmezYRWz9EwjqAEnYxqxhAc0tUfMinXAkTmw8Gd9Fk3zC/w550-h350-no/Helm+%25289%2529.jpg" title="Helm-Type 9"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3rXXD8C82uuc_mDHJO1M0iuig6kNPOQoPVu8wY6TzRoeOBmbnOP5rhTimHRFfUSDAGaiA89U51yXnsBVSzvRiclNCvRg-CKEUlzy8ctbxg_WRIJSzVcuF5dRxx8Ntvavl40uSP_a0ea3/w174-h195-no/Thumb-Helm+%25289%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhl1Gxu_WydPVjRwcv30pk31AeujhU27G9twaJagH-OOy80YjRC3990oY14uadYXWrRQjXtH43IQgP4Z1vdVJNlHvtUsm9qgtvMCP3_mYJa50EKuyvMGCP8iKjHwUW73sq4tJq1cp9JTdH/w550-h350-no/Helm+%252810%2529.jpg" title="Helm-Type 10"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj08Y-377ABl_LIPd208qd1Cb8pwhoA8h4J_MzyzIWAi8MCxSMvIBRuZYP1mf8DRcFchiLZrWqJDmrSSpD9DCcm7AR0cu_SRm1mo6VWTB6k8slywKzAp5a4jkzb5fYCVqOEFoyCPnJaz6Yk/w174-h195-no/Thumb-Helm+%252810%2529.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIAxAAbud-3en-qg5SQma0Pau8ae8NexPd9CZX9bTUmFhe5ShnWbCd3PNneSOtjDMCxkxnHiftHwzm7ei_bV7OjVdeDOoj4P49vLjAqxxuFJE98KYDeoyS2eWiuI9CIMT5mAXBtQtGZbT9/w550-h350-no/Helm+%25281%2529.jpg" title="Helm-Type 11"><img alt="Helm Keren" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQxklBg0R4Weyq1cVji5KDooj_aKZ4qfAiBBrkztpEM6FRAe-CFVkrnyw6ILPEVf7YfYYns5s3OxXFCLa-W58B3NPn5HxYmIVn6JbMWXbohfozcuAcsTagWHKkaqNgfdROX2f5-0aCxv_l/w174-h195-no/Thumb-Helm+%25281%2529.jpg" /></a></p>

Membuat Gallery Photo Thumbnail With jQuery – masih seperti tema pada postingan sebelumnya yakni modifikasi gambar pada posting blog, dan t...

Read More