Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog

Discussion in 'Blogger' started by Kanggarda, Feb 14, 2014.

  1. Kanggarda

    Kanggarda Member

    Joined:
    Aug 20, 2013
    Messages:
    57
    Likes Received:
    12
    Trophy Points:
    8
    Google+:
    Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog – Pernah saya menemukan beberapa blog yang memakai script tertentu pada blognya yang memungkinkan gambar yang ada di artikel blognya akan membesar dengan ukuran tertentu daripada aslinya ketika disorot dengan mouse. Nah pada waktu itu saya belum menemukan apa sih manfaatnya.? namun pada beberapa hari terakhir ini saya memosting di blog saya mulai menemukan manfaatnya, karena artikel saya di Garda Pengetahuan berorientasi pada ilmu pengetahuan seperti Fisika dan Matematika, maka ada banyak rumus yang saya masukkan didalamnya dalam bentuk gambar, yang terkadang gambarnya ini kecil dan sulit dilihat, sehingga script membantu untuk lebih jelas melihat rumusnya. Ini dia scriptnya:

    Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog

    1. Login ke akun blog kamu

    2. Masuk ke edit template

    3. Pilih edit HTML

    4. Tekan ctrl + f lalu cari kode ]]>

    5. Copy kode di bawah ini lalu letakkan di atas kode ]]>


    Code:
    .post-body img:hover { 
    -o-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s;
    -moz-transform: scale(1.3,1.3);
    -o-transform: scale(1.3,1.3);
    -webkit-transform: scale(1.3,1.3); }
    
    6. Klik simpan/save

    7. Buka blog kamu lalu cek apakah berhasil.

    Jika misalnya tidak berhasil, maka coba kamu gunakan script kedua di bawah ini


    Code:
    .post .post-body img{margin:5px; padding:5px; border:1px solid #e0e0e0; -o-transition: all 0.5s; -moz-transition:all 0.5s; -webkit-transition: all 0.5s;}
    .post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
    


    8. Klik simpan dan cek kembali

    Info:

    angka 1.3 adalah angka perbesaran yang akan terjadi apabila kamu menyorotnya. kamu bisa menggantinya sesuka hati tergantung keinginan.

    Demikianlah informasi mengenai Cara Membuat Gambar Membesar Otomatis Ketika Disorot di Blog semoga bisa bermanfaat.
    sumber
     
  2. iskandar22

    iskandar22 Member

    Joined:
    Sep 26, 2013
    Messages:
    802
    Likes Received:
    40
    Trophy Points:
    28
    wah saya pernah liat efek

    wah saya pernah liat efek zoom yang dimaksud ketika krusor menyentuh gambar langsung membesar. ternyata prakteknya cukup mudah, baiklah akan saya coba biar blog tambah keren *bagus*
     
  3. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Bagus juga.. misal klo gambar

    Bagus juga.. misal klo gambar di klik dan muncul pop up frame gambar tsb gmn ya?
     
  4. egelz

    egelz Member

    Joined:
    Jan 5, 2014
    Messages:
    44
    Likes Received:
    1
    Trophy Points:
    8
    jadi lebih menarik

    jadi lebih menarik blognya. Tapi mempengaruhi loading blog ngga ?
     
  5. egelz

    egelz Member

    Joined:
    Jan 5, 2014
    Messages:
    44
    Likes Received:
    1
    Trophy Points:
    8
    jadi lebih menarik

    jadi lebih menarik blognya. Tapi mempengaruhi loading blog ngga ?
     
  6. avirss

    avirss Member

    Joined:
    May 1, 2014
    Messages:
    220
    Likes Received:
    13
    Trophy Points:
    18
    wah scrip ini yg saya cari bayak situs luar menggunakannya. khusus untuk saya ini butuh membuat paymen proof dasi situs ptc . http://www.avirss.com
     
  7. bmaster23

    bmaster23 New Member

    Joined:
    May 7, 2014
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    3
    Google+:
    boleh di coba nih gan :)
     
  8. Lano pratama

    Lano pratama Member

    Joined:
    Aug 26, 2014
    Messages:
    124
    Likes Received:
    3
    Trophy Points:
    18
    Google+:
    Makasih work thanks yah gan makin mantap nih hehe *bagus*
     
Loading...

Share This Page