Bagaimanakah cara untuk membuat gambar dalam single post membesar apabila disentuh cursor? Korang cuma nak buatkan gambar hanya dalam post yang tertentu sahaja? OK, di sini khai akan ajarkan cara untuk membuat gambar zoom in dalam single post. Caranya ada sedikit berbeza dengan Cara membuatkan Gambar membesar di keseluruhan blog post.
Tutorial blog - Cara untuk membuat Gambar Membesar bila disentuh Cursor dalam post tertentu sahaja.
Sila ikuti langkah ini
1. Login ke Blogger Dashboard > Template > Edit Html > Hit Expand Widget Templates
2. Kemudian Cari code di bawah, Tekan Ctrl+F pada keyboard untuk memudahkan korang mencari.
]]></b:skin>
3. Lepas tu, Copy code di bawah dan paste di Atas code yang korang cari tadi.
<!-- Auto Zoom-in Zoom-out Pic Start -->
.enlargepic {
padding:5px;
position:fixed;
bottom: 30px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.enlargepic:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
<!-- Auto Zoom-in Zoom-out Pic End-->
5. Sekarang cara untuk menggunakannya dalam post. Korang kena masukkan kod untuk gambar di bawah ke dalam HTML post korang.
<a href="URL Page" class="enlargepic"><img width="120px" height="120px" src="URL Image Korang" /></a>
Customize :
- Tukarkan URL Page kepada URL yang korang nak tujukan apabila gambar diklik.
- Tukarkan URL Image kepada URL Image yang korang nak letak.
- Tukarkan nilai 120 untuk menetapkan sais asal gambar sebelum zoom in. Width=lebar Height=Tinggi.
Selamat mencuba ^^
Nota : Cara ini membuatkan gambar membesar dalam single post sahaja. Untuk mengetahui cara untuk membuat gambar membesar untuk setiap post Klik Sini.
Smile :D
No comments:
Post a Comment
Don't forget to drop your comment.. Thanks ya!