mas template

Membuat Efek Blur Pada Gambar di Blogspot

Selamat pagi teman-teman blogger semua. Kali ini saya menulis tutorial ini pagi hari sekali, ya kira-kira jam 06.00 WIB. Tutorial sederhana ini sebenarnya hanya membutuhkan sedikit kode css pada template. Cara membuat efek blur pada gambar, ya begitulah kira-kira pembahasan kali ini. Efek blur ini akan terjadi jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar. Dan nanti akan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada (tidak ngelink kemana-mana).

Caranya gampang aja kok, silahkan ikuti langkah-langkahnya berikut ini :
  1. Login ke Blogger dulu ya.
  2. Silahkan sobat tuju halaman Edit HTML.
  3. Kemudian cari kode ]]></b:skin>
  4. Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin> 
.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
Simpan Template.

Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :
<a href="http://creatingwebsite-maskolis.blogspot.com"><img border="0" src="https://lh4.googleusercontent.com/-hULkPQj0cWM/TXIl6MYR3KI/AAAAAAAAAiU/pRZNcCufS9U/s1600/empuss.jpg></a>
Maka tampilan normalnya seperti dibawah ini :
Untuk menambahkan efek blur kedalam gambar, maka kode yang harus sobat tambahkan adalah class="linkopacity" dan hasilnya seperti dibawah ini :
<a href="http://creatingwebsite-maskolis.blogspot.com" class="linkopacity"><img src="img border="0" src="https://lh4.googleusercontent.com/-hULkPQj0cWM/TXIl6MYR3KI/AAAAAAAAAiU/pRZNcCufS9U/s1600/empuss.jpg"></a>
Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.
Agar gambar yang di klik tidak ngelink kemana-mana atau tidak pindah ke halaman link yang ada, maka sobat tinggal mengganti linknya menjadi "#nogo" dan hasilnya seperti berikut :
<a href="#nogo" class="linkopacity"><img src="img border="0" src="https://lh4.googleusercontent.com/-hULkPQj0cWM/TXIl6MYR3KI/AAAAAAAAAiU/pRZNcCufS9U/s1600/empuss.jpg"></a> 
Silahkan di sorot dan di klik, maka gambar tidak akan lari kemana-mana

Untuk merubah tingkat keburaman pada gambar, sobat tinggal atur angka pada kode css yang sudah disimpan pada template tadi. Ubah saja angka “30” menjadi angka yang lebih rendah untuk mendapatkan tingkat blur yang lebih gelap, contoh jika saya ubah angkanya menjadi “10” maka kodenya menjadi seperti berikut :
.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=10); -moz-opacity:0.3; opacity:0.3;border:0;} 
Selamat mencoba ya.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

9 comments:

  1. keren gan, ane suka nich postingan

    ReplyDelete
  2. Terasa banget perubahannya blur nya ya mas, saya sudah coba di blog saya nih! Termakasih mas. :)

    ReplyDelete
  3. Wah, keren banget tuh.. Mesti dicoba nih. Makasih telah share ya...

    ReplyDelete
  4. langsung saya terapkan gan, mksh infonya..
    ditunggu kunbal+follbacknya...
    siunus.blogspot.com

    ReplyDelete


  5. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  6. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger