Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Cara Membuat Efek Photo Samar (blur)

Duh tak terasa ya sudah dua minggu ya saya tidak ngeblog, tapi tenang saja saya masih ada di sini bersama blog ini, hihihi… so jadi artis saja ya,  absen ngeblog pake acara pengumumam segala rupa.  Walaupun sedikit agak kaku untuk membuat tulisan, tapi biar di paksain saja deh soalnya kalau tidak ngeblog saku juga jadi kempes nih, hehehe.

Banyak sekali yang bertanya, dan yang paling dominan di tanyakan oleh banyak orang yaitu bagaimana cara mengembalikan kotak komentar dari haloscan ke kotak komentar blogger? duh gimana ya, agak sedikit ribet memang, walaupun begitu saya pernah di minta bantuan oleh seorang teman melalui chatting untuk mengerjakan hal yang tadi dan hasilnya sukses. Akan tetapi saya lupa untuk mencatat apa saja yang saya ganti, jadi untuk yang punya masalah seperti ini di tunggu saja ya soalnya saya harus melihat lagi kode apa yang harus di ganti.

Beralih ke pertanyaan lain yaitu bagaimana cara membuat efek photo samar (blur) pada blog/web? wah sepertinya ini tidak terlalu sulit untuk di terangkan, soalnya masih sedikit kaku nih jadi mending yang gampang-gampang saja dulu. Setelah melihat contoh yang di berikan oleh sahabat yang betanya, ternyata memang menarik juga untuk di pasang. Efek photo yang di maksud adalah photo (gambar) akan terlihat samar ketika pertama kali dilihat, namun apabila photo atau gambar tersebut di sorot oleh mouse komputer anda maka photo atau gambar tersebut menjadi terlihat jelas, bingung? sok di sorot dahulu photo di bawah ini agar jelas apa yang sedang saya bicarakan :

 

.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.0);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}kang rohman

 

 

 

Tertarik juga untuk membuat efek yang seperti di atas, begini nih caranya :

 

Langkah #1

 

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata letak.
  3. Klik tab Edit HTML.
  4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
  5. Silahkan cari kode berikut : ]]></b:skin>
  6. Copy paste kode berikut di atas kode ]]></b:skin>

     

    .linkopacity img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    }
    .linkopacityxtra:hover img {
    filter:alpha(opacity=1.1);
    -moz-opacity: 1.1;
    opacity: 1.1;
    border:0;
    }

      

  7. Klik tombol Simpan Template.
  8. Langkah #1 selesai.

 

 

Langkah #2

 

Setiap anda memasang photo atau gambar, sisipkan kode seperti ini :

 

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

 

Misalkan kang rohman mempunyai alamat gambar seperti ini :

http://24rohman.googlepages.com/Water-06.jpg

Semisal gambar ini ingin nge link ke http://www.blogspottutorial.com, maka kode yang di pasang adalah seperti di bawah ini :

<a href="http://www.blogspottutorial.com" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik saja jika mau :

blogspot tutorial

Jika gambar anda tidak ingin nge link ke mana-mana, maka cukup gantikan saja alamat url tujuan dengan dengan kode #nogo, contoh :

<a href="#nogo" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik dan pasti tidak akan terjadi apa-apa :

klik saja soalnya ga akan ke mana-mana

Sudah paham? pastinya sudah, soalnya tentang cara nampilin gambar pernah saya tulis panjang lebar pada postingan tentang Google page creator, di baca lagi jika masih belum paham betul.

Sedikit clue tentang kode CSS yang di atas, anda bisa mengubah tingkat pengkaburan gambar (blur) dengan cara menambah atau mengurangi nilai opacity, contoh :

 

.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh :

 

.linkopacity img {
filter:alpha(opacity=10);
-moz-opacity: 0.10;
opacity: 0.10;
border:0;
}

Silahkan bereksperimen sendiri untuk mendapatkan hasil yang lebih baik. Sampai jumpa pada posting berikutnya. Don’t miss it dude.

Iklan

13 Juli 2008 - Posted by | blog tutorial, blogging tutorial, blogspot tutorial

14 Komentar »

  1. pertamax…. :)) kang kemana aja nih? langsung praktek ah…

    Komentar oleh alif | 13 Juli 2008 | Balas

  2. sedang kurang semangat aja nih, sibuk dengan aktiviatas sehari hari

    Komentar oleh Rohman | 13 Juli 2008 | Balas

  3. kang buat atur lebih gelap lagi gimana ? opacity-nya yah ?

    sapa tau nih mo pasang ilustrasi foto/gambar yg serem biar gk bikin mual gitu .. kayak foto kejadian kecelakaan misalnya.

    thx atas tutornya yah.

    Komentar oleh D i d i | 13 Juli 2008 | Balas

  4. Akhirna “muncul” kembali si akang. Muncul? Emangnya penampakan b-(

    Mo tanya nih. Berarti bisa di setting, mis gmbar kotak saja atau transparan sm sekali. Begitu kurosor diarahkan langsung muncul. Bisa ya?

    Komentar oleh bani risset | 13 Juli 2008 | Balas

  5. @didi, @bani risset : tinggal di atur nilai opacity nya, lebih rendah nilainya maka semakin transparan

    Komentar oleh rohman | 13 Juli 2008 | Balas

  6. nah mana ya kang rohman kok jadi kabur gini nih 😀 apa mataku ya buram b-(

    Komentar oleh oom | 13 Juli 2008 | Balas

  7. iy koq gak jelas gitu mukanya kang rohman sih? apa mmg mataku dah ngantuk ya.. =))

    Komentar oleh Fachia | 13 Juli 2008 | Balas

  8. ko tambah ganteng kang kemana aja sih????padahal udah di nanti ama penggemarnya nih/…

    Komentar oleh Pencuri Kode | 13 Juli 2008 | Balas

  9. Asik juga tuh kang…tapi bikin berat ga kang?

    Komentar oleh —Adnane— | 14 Juli 2008 | Balas

  10. Absen kang ah …. kalo menurutku sih ga’ menarik :)) wong sing kabur ja di bikin jelas masa yang jelas di bikin kabur sepi dong penjara nanti .. :)) trus polisi maem po jal =))

    Komentar oleh Mas Dede | 17 Juli 2008 | Balas

  11. Kang nepangkeun abdi Hasan tea

    Komentar oleh Hasan | 23 Juli 2008 | Balas

  12. Ari kitu mah teu jelasnya fotona…..

    Komentar oleh Hasan | 23 Juli 2008 | Balas

  13. bos bisa dijelasin satu-satu artinya perkata dari css
    .linkopacity img {
    filter:alpha(opacity=10);
    -moz-opacity: 0.10;
    opacity: 0.10;
    border:0;
    }
    pingin belajar nih

    Komentar oleh Tito-kun | 24 Juli 2008 | Balas

  14. thanx oom ilmunya…..

    Komentar oleh Qie | 19 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: