Disable Klik Kanan

Mendisable klik kanan pada blog memang kadang dirasa perlu ketika sebuah artikel yang kita buat dengan susah payah tiba - tiba berpindah ke blog lain begitu saja tanpa seizin dari kita.

Pada artikel kali ini saya akan mencoba membantu bagi kamu yang ingin melindungi artikelnya. Jadi jika nanti ada seorang pengunjung melakukan klik kanan di blog kamu maka yang muncul bukanlah kotak sebuah kecil yang bertuliskan pesan "Maaf DILARANG klik kanan" melainkan sebuah gambar.

Saran saya pikirkan kembali jika kamu ingin menerapkan ini karna nanti si pengunjung akan merasa tidak nyaman.

Demo

Berikut cara memasangnya :
1. Login ke Blogger masuk ke Rancangan -> Edit HTML
2. Cari kode berikut

]]></b:skin>

3. Copy kode di bawah ini dan paste di atas kode no 2

rightclick{ 
background-image:url(http:url-gambar-sobat-blogger); 
z-index:99999;background-repeat:no-repeat; 
background-position:center center; 
background-attachment:fixed; 
background-color:rgba(0,0,0, 0.85); 
display:none; 
width:100%; 
height:100%; 
position:fixed; 
top:0%;left:0%;right:0%;bottom:0%; 
cursor: crosshair;}

4. Cari kode berikut

</body>

5. Copy dan paste kode di bawah ini di atas kode tadi

<script type='text/javascript' src='http://purnamalabs.googlecode.com/files/klikkanan.js'></script> 

6. Cari kode berikut

<body>

7. Ganti kode tersebut dengan kode di bawah ini

<body oncontextmenu='rightclickfalse();return false;'>

Semoga Bermanfaat

Read More

On Mouseover Alert

On mouseover alert berfungsi untuk menampilkan pesan ketika seorang pegunjung blog menggerakan cursor di atas gambar. Script yang digunakan merupakan script JavaScript yang sangat sederhana. Efek ini juga bisa di tampilkan di dalam sebuah artikel maupun di dalam widget. Jika masih bingung silakan arahkan cursor ke gambar berikut




Cara memasangnya kamu cukup copy dan paste kode di bawah ini dan paste di posting

<a href="" onMouseOver="alert('PESAN YANG INGIN DITAMPILKAN');return true;">
<img src="URL_GAMBAR" ></a>

Semoga Bermanfaat

Read More

Membuat Gambar Bergetar

Pada postingan kali ini saya akan membahas tentang cara membuat gambar bergetar di blogger,
jadi ketika gambar di sorot oleh cursor mouse maka gambar tersebut akan bergetar otomatis.

Cara ini berlaku untuk gambar yang berada di artikel maupun yang berada di widget blog.
Jika masih bingung silakan lihat demonya.

Demo

Cara memasangnya :
1. Login ke Blogger masuk ke -> Rancangan -> Edit HTML
2. Cari kode berikut

]]></b:skin>

3. Copy dan paste kode CSS ini di atas kode tadi

.gambargetar{
position:relative
}

4. Cari lagi kode berikut

</body>

5. Lalu masukan kode di bawah ini di atas kode no 4

<script type="text/javascript" src="http://purnamalabs.googlecode.com/files/Bergetar.js"></script>  

6. Untuk memanggilnya kamu bisa masukan kode di bawah ini pada artikel atau widget

<img src="MASUKAN_URL_GAMBAR_DI_SINI" class="gambargetar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()">

Semoga bermanfaat

Read More

Membuat Read More Otomatis

Fungsi Read more atau baca selengkapnya adalah untuk menyingkat artikel panjang sehingga terlihat menjadi rapi dan menarik.

Selain itu Read more otomatis ini akan mengambil gambar thumbnail dari artikel.

Jika menggunakan Read more versi lama tentu kita akan direpotkan ketika ingin membuat artikel harus menambahkan beberapa kode ke dalam artikel.

Oke sekian basa basinya berikut langkah membuatnya :

1. Login ke Blogger masuk ke -> Rancangan -> Edit HTML dan centang "Expand Widget Template"
2. Cari kode berikut

</head>

3. Kemudian copy kode di bawah ini dan paste sebelum kode no 2

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/hitsukeproject/summarypost.js' type='text/javascript'/>

* Keterangan kode

summary_noimg = 430; //untuk memotong tinggi tanpa gambar
summary_img = 340; //untuk memotong tinggi dengan gambar
img_thumb_height = 100; //untuk mengatur gambar thumbnailnya
img_thumb_width = 120; //untuk lebar gambar thumbnailnya

4. Cari lagi kode

<data:post.body/>

5. Ganti kode no 4 dengan kode di bawah ini

<b:if cond='data:blog.pageType != "item"'> 
<div expr:id='"summary" + data:post.id'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); 
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More </a></span>
</b:if> 
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> 

Semoga Bermanfaat

Read More