Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Gambar Berganti-Ganti Saat Disentuh (Hover) Pada Konten Blog

Gambar ataupun foto yang di pasang di artikel menjadi sebuah faktor komplemen untuk setiap k Cara Membuat Gambar Berganti-Ganti Ketika Disentuh (Hover) Pada Konten Blog
Gambar ataupun foto yang di pasang di artikel menjadi sebuah faktor komplemen untuk setiap konten yang ada di blog kita. Memasang gambar di artikel dilarang di remehkan atau di anggap sebelah mata saja karna gambar tersebut itu mengandung arti yang luas untuk artikelnya sendiri. Kebanyakan pengunjung gampang tertarik apabila gambar yang di berikan menarik sehingga hal ini juga sanggup meningkatkan SEO blog kita.  Seperti yang telah kita ketahui gambar merupakan unsur visual dari sebuah artikel tentunya mempunyai efek yang cukup besar juga. Coba Anda bayangkan sebuah artikel yang tidak mempunyai gambar sama sekali. Pasti Anda sendiri akan merasa bosan bukan atau kurang menikmati artikel yang disajikan? Dan sanggup saja Anda pribadi meninggalkan artikel blog tersebut. Hal ini akan memperparah bounce rate blog tersebut. Agar hal ini tidak terjadi pada blog Anda, jadi pastikan biar Anda selalu mengupload setidaknya 1 gambar pada blog Anda. Nah kali ini aku akan menawarkan tutorial bagaimana cara menampilkan gambar di website dalam sebuah kolom / pembungkus dan sanggup berubah gambarnya saat di sentuh oleh mause, kurang lebih gambar ini akan berganti-ganti dengan gambar lainnya secara otomatis (hover) saat kita sentuh dengan mouse, ya 2 gambar akan dijadikan satu namun salah satunya disembunyikan sehingga tampak akan silih berganti. Lalu Bagaiamana caranya? Simak cara berikut

Cara Mengganti Gambar Ketika Disentuh (Hover) Di Blog

1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>

 .taruhgambar {     position: relative;     width: 50%;     top: 0;   }   .taruhgambar img {     position: absolute;     left: 50%;     width: 100%;     -webkit-transition: opacity 1s ease-in-out;     -o-transition: opacity 1s ease-in-out;     -moz-transition: opacity 1s ease-in-out;     -ms-transition: opacity 1s ease-in-out;     transition: opacity 1s ease-in-out;   }   .taruhgambar .gambar2:hover {     opacity: 0;   }

Nah disini Anda sanggup mengatur pembungkusnya (div) sebagai relative dan isinya sebagai absolute. Dengan cara menyerupai itu gambar akan saling tumpang tidih dengan yang lainnya dan hanya akan terlihat satu saja yakni gambar (img) yang kita sisipkan kedua. Gambar ke-2 itu akan di pudarkan hingga tidak terlihat (opacity: 0) saat di hover, jadi di sini seakan-akan ini mengganti gambar padahal bergotong-royong kedua gambar sudah tampil dari awal hanya saja gambar paling atas (yang menimpa) disembunyikan saat hover.
Selanjutnya silahkan pergi ke Postingan dan jangan lupa siapkan terlebih dahulu beberapa link URL gambar yang ingin dibentuk berubah-ubah pada artikel maksimal 2 gambar saja yang sanggup dipasang.  Jika sudah masukan Link URL tersebut ke arahan HTML di bawah ini, dan pasang kodenya di artikel atau postingan Anda.

 <div class="taruhgambar">   <img src="Link URL gambar1.jpg" class="gambar1">   <img src="Link URL gambar2.jpg" class="gambar2"> </div>

Kemudian terakhir Publikasikan, dan cek gambarnya.

Nah itulah beberapa cara sederhana menciptakan gambar di postingan blog sanggup berganti-ganti dengan effect hover sehingga nantinya gambar akan terlihat lebih menarik lagi pada konten Anda. Jika ada yang ingin Anda tanyakan atau tidak mengerti silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :