Xivanki Share !!: Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot

Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot !! Semoga tulisan dengan kategori Tips Blogging dan internet !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Tips blog kali ini masih soal utak-atik image di blogspot. Kalau sebelumnya saya post cara membuat gallery foto di blogspot, sekarang adalah cara membuat efek thumbnail hover preview image di blogspot. Sebutan nya agak ribet ya, intinya image yang menggunakan efek hover ini akan membesar ketika mouse kita sentuhkan ke image tersebut. Untuk lebih jelas nya lihat live previewnya disini : LIVE DEMO HOVER PREVIEW IMAGE

Bagaimana sob, tertarik ingin buat image seperti itu ? . Caranya sangat mudah sobat tingal masukan kode berikut ini kedalam add gadget HTML :

<style>
.prevthumbhover{ cursor: default;list-style: none;}
.prevthumbhover a{ cursor: default;}
.prevthumbhover a .preview{ display: none;}
.prevthumbhover a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}
.prevthumbhover img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;}
.prevthumbhover li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;}
.prevthumbhover .preview{ border-color: #000;width: 200px;height: 150px;}
</style>
<ul class="prevthumbhover">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4uluSxmo5msAK_CY8IeiR7pTPB3yEYt9GDK1Ce6cixILXSQWBJT7nAptbntZtV_8Lt_SZfqCGlo_vrVBAS-Kvmu1BVlnMH0V88Y1jk2B-5Rnk4CGfrQwVB_wTp7VHJI3xMJezmwYlFd5o/s1600/norman-k.jpg" alt="norman-k" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4uluSxmo5msAK_CY8IeiR7pTPB3yEYt9GDK1Ce6cixILXSQWBJT7nAptbntZtV_8Lt_SZfqCGlo_vrVBAS-Kvmu1BVlnMH0V88Y1jk2B-5Rnk4CGfrQwVB_wTp7VHJI3xMJezmwYlFd5o/s1600/norman-k.jpg" alt=" norman-k" class="preview" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBWQHDhP0fn8KRc-Xj3NVbGyc1bn3rGeUxIZmZ6bdAGlz544r3nvS-eVkCobBL9hWLyoTklDlFbGrTOorRuaQ-qDEg8PinBhf0CDJSj98qypSJBxU8PKyXT4IJFLOkKFKonpnq4jJhHc1/s1600/din-udin.jpg" alt="udin-s" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBWQHDhP0fn8KRc-Xj3NVbGyc1bn3rGeUxIZmZ6bdAGlz544r3nvS-eVkCobBL9hWLyoTklDlFbGrTOorRuaQ-qDEg8PinBhf0CDJSj98qypSJBxU8PKyXT4IJFLOkKFKonpnq4jJhHc1/s1600/din-udin.jpg" alt=" udin-s" class="preview" /></a></li>
<li><a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt-ALWPtn1ghN3N2lljAFAenfJaSiOn2lJtNvxxMlhWq4pgAzI7XBlceWpgGUxcbEKjeh9DbXg3kT4WVv-P52oow8L5YI9Bcm83P3HmFq187PShSeCPry3pH6D390dnAZ1bq_vWGoG6UOS/s1600/justin-be.jpg " alt="justin-b" /><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt-ALWPtn1ghN3N2lljAFAenfJaSiOn2lJtNvxxMlhWq4pgAzI7XBlceWpgGUxcbEKjeh9DbXg3kT4WVv-P52oow8L5YI9Bcm83P3HmFq187PShSeCPry3pH6D390dnAZ1bq_vWGoG6UOS/s1600/justin-be.jpg " alt=" justin-b" class="preview" /></a></li>
</ul>

Note :
Yang diberi stabilo warna merah adalah link gambar. Sobat bisa menampilkan lebih banyak gambar lagi, pokoknya atur sendiri ya sesuai kebutuhan.

Cukup sekian tips blog kali ini Cara Membuat Efek Thumbnail Hover Preview Image di Blogspot.


Selamat mencoba.