Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Anti Copy/ No Copy Image using CSS3

Sebuah fungsi anti copy yang sering juga disebut sebagai no right click, disable right click tidak hanya dapat difungsikan secara total pada sebuah blog ataupun web, namun juga dapat difungsikan pada bagian-bagian terkecil dari blog atupun web, seperti halnya image/gambar. Fungsi anti copy/no right click/disable right click dapat dibangun menggunakan javascript atau kode CSS. Sekalipun sebuah fungsi anti copy tak mungkin seratus persen dapat menjamin blog/web atau image tak dapat dicopy atau dibongkar kode html-nya, namun setidak-tidaknya bisa sedikit menjaga agar beberapa bagian yang yang ingin dirahasiakan tetap aman.

Jika dibanyak panduan dan tutorial ataupun tips & trick blogger sebuah anti copy lebih banyak dibuat menggunakan javascript, namun untuk kali ini kita akan buat menggunakan kode CSS3. Tak banyak kode CSS yang akan kita gunakan, namun anti copy ini cukup mampu memberi sedikit kejutan karena akan terlihat sebagai sebuah tipuan kecil bagi pengunjung. Mengapa kita sebut sebagai sebuah tipuan kecil? Yah ... karena klik kanan akan tetap berfungsi namun bukan lagi fungsi yang berkaitan dengan image atau apa yang sebelumnya diharapkan pengunjung. Bagaimana ini bisa terjadi dan apa maksud sebenarnya? He ... he ... silahkan saja coba dengan klik pada demo yang dapat dibuka melalui link di bawah ini:

D e m o

D E M O

Cara membuat anti copy pada image/gambar
Untuk membuat fungsi anti copy image/gambar menggunakan css3 kita hanya memerlukan kode css yang nantinya harus disimpan di atas kode ]]></b:skin> yang letaknya di atas tag penutup </head>.
  1. Login ke blogger
  2. Halaman Dasbor (Dasboard)
  3. Klik Rancangan (Design)
  4. Klik Edit HTML
  5. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode. Bagi yang belum jelas buka Special Tutorials yang ada di deret menu sebelah kiri.
  6. Latakkan kode CSS tepat di atasnya
  7. Klik Save Template

Kode CSS dan posisinya thd ]]></b:skin>
/* gubhugreyot * 02 januari 2012 */
.anticopy_left, .anticopy_center{
     position:relative;
     float:left; /* original code by: gubhugreyot.blogspot.com */
     padding:0;
}
.anticopy_center{
     float:none;
     margin:0 auto;
     text-align:center;
}
.anticopy_left:before, .anticopy_center:before{
     content:"";
     padding:5px;
     height:100%;
     margin-top:-5px;
     margin-left:-5px;
     width:100%;
     left:0;
     top:0; /* original code by: gubhugreyot.blogdetik.com */
     position:absolute;
}

]]></b:skin>

Kode HTML posting anti copy: Image di kiri

<div class="anticopy_left">
<img src="image.jpg" style="float:left;margin:5px 15px 5px 0;width:...px;height:...px;" />
</div>

Kode HTML posting anti copy: Image di Tengah

<div class="anticopy_center">
<img src="image.jpg" style="float:none;margin:10px auto;text-align:center;width:...px;height:...px;" />
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :





» Happy Blogging - gubhugreyot «

5 komentar:

  1. bos, nyimpan kode JS disebelah mana?
    http://acengchayangsiska.blogspot.com/
    makasih

    BalasHapus
  2. Ajarin dong buat blog yg kren bngt kyk pux qmu in ... ! kalau berminat ajarin saya .. hubungi saya di nmor in : 089661549945 atau 082348580613 ... Dari Crystian August Valencia

    BalasHapus
  3. Numpang Gan sy salut dengan blog ini dari namanya cuman gubhug reyot,tapi dari hasilnya wahhh ini istana buat saya..
    yang sy mu tanyakan bagaimana cara membuat blog sebagus ini tampilannya?
    ya salah satunya,ada yang melayang-layang gitu waktu di tunjuk oleh mouse dan cara buatnya bagaimana?kalo boleh, kasih tau caranya,
    sy baru belajar buat blog
    counter-excell45.blogspot.com
    trimakasih ya gan.

    BalasHapus

 
GR | Edited by | gubhug reyot