perbesar gambar

Arahkan kursor ke gambar ! gambar akan menjadi besar. Ini diperlukan jika anda ingin menampilkan gambar dalam sebuah posting tetapi gambar tidak langsung besar, karena kalau gambar  yang anda masukkan banyak dan ukuran gambar besar akan banyak memakan space, hal ini dapat diatasi dengan gambar tampil kecil dan akan menjadi besar jika kursur didekatkan. Bagaimana cara membuatnya? ikuti tutorial berikut ini !
1. Login ke blog anda.
2. Klik design dan pilih Edit HTML
3. Copy koding css dibawah ini dan letakkan DIATAS ]]></b:skin>  pada koding Template Edit HTML :

Koding CSS untuk perbesar gambar

  img.GRie { position: absolute; cursor: pointer; display: block; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 2px solid #555; padding: 2px; background: #000; margin: 0 5px 5px 0px; opacity: 0.6; height: 120px; width: 110px; -o-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s; -moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s; -webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1.2s, border 1.2s linear 2.5s; } img.GRie:hover { -o-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s; -moz-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s; -webkit-transition: width 1s ease-in 400ms, opacity 1.2s ease-in 1,2s, border 1.2s linear 2.5s; opacity: 1.0; z-index: 9; border: 10px solid #fff; width: 400px; height: auto; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background: #aaa; box-shadow: 1px 1px 10px #000; -moz-box-shadow: 1px 1px 10px #000; -webkit-box-shadow: 1px 1px 10px #000; } .leftGRie { float:left; width: 135px; height: 130px; }

4.Simpan Template.
5. Bagaimana cara menggunakan? jika anda mau posting dengan gambar, arahkan ke tabs EDIT HTML pada area posting dan    tuliskan koding yang digunakan untuk memanggil class="leftGRie"  dan class="GRie", jika anda ingin mengatur tinggi gambar  ubah nilai height="196" dan mengubah lebar gambar width="200". Perhatikan contoh koding  berikut ini !

Contoh Penggunaan di postingan

<div class="leftGRie"> <a href="alamat gambar kalau diklik"><img class="GRie" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_OvUWdK-V2LuC5dj2Bm_QTGiDBUVI3bTfoc-jzntpnKfDOWtfiwTaUTdsx8QTsPdP7k-iFwsTyB6_9a6boEcwMXButybIWbBAqL4Sr_wDRhj3MaB1xmXBMRxYQabHQTamtoPF0m904Kyu/s200/383236-001%255B1%255D.jpg" width="200" /></a></div>

Lihat Artikel TOP Terkait:

Posted in: Tutorial Blog