Kumpul Tips Trik: January 2012

Monday, 23 January 2012

Cara Membuat Effect Zoom Pada Gambar Di Blog

Membuat Effect Zoom pada Gambar, hemm, pasti Kalian tidak asing lagi kan. Sebagai contoh Kalian bisa lihat gambar di bawah, coba Kalian sorotkan kursor Kalian ke gambar itu, pasti dengan sendirinya akan membesar.

OK, pasti sudah paham kan, kita masuk ke langkah-langkahnya :

[1]. Login dulu ke Blog Kalian,
[2]. Cari Rancangan --> Edit HTML,
[3]. Trus cari Code ]]></b:skin>,
[4]. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di atas Code tadi.

.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-
transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-
duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px
0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-
transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px
gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px
gray;opacity:1}

[5]. Kalo sudah, tinggal di SAVE.

Cara Memeberikan Effectnya :

Kalian hanya perlu menambahkan Code di bawah ke dalam Code Gambar Kalian.

<div class="hovergallery">URL Gambar Kalian</div>

Sebagai Contoh :

<div class="hovergallery">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoGweYk2xSPuMHn_hh1_5-8j6MaklNsG4pB-v0oopZoQWX0vJhmLWpq8jeB145bmqSEWzcJKBHgq56XzLFSCvCXQfNV5lH9jgyRd35Vusr79dPZwVe_c9zbzZGn_41_SY4aWqm8PLhgs7M/s1600/Fb-IB-JmK-%25E2%2584%25A24.png</div>

NB :
- Kalo ada pertanyaan silahkan tuliskan pertanyaan Kalian di Kotak Komentar.

Semoga Berhasil...!!!

Cara Membuat/Megganti Icon Label Blog

Tips kali ini membahas tentang Icon Label Blog, Kalian tentunya tau dong Label Blog, kalo tidak tahu coba Kalian perhatikan gambar di bawah :

OK pasti sudah tahu dong...???. Kita langsung masuk ke langkah-langkahnya saja. Berikut langkah-langkahnya.

[1]. Pertama pastinya Login dulu ke Blog Kalian.

[2]. Lalu cari Rancangan --> Edit HTML --> Centang tulisan "Expand Widget Template".

[3]. Trus cari Code ]]></b:skin> (agar lebih mudah mencari tekan CTRL + F atau F3 pada Keyboard).

[4]. Kalo sudah ketemu Copy dan Paste-kan Code di bawah, tepat di atas Code tadi.

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://www.paramitra.com/gfx/icon-flag-id.gif) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

NB :
- Ganti URL gambar yang ada pada Code (http://www.paramitra.com/gfx/icon-flag-id.gif), dengan URL gambar Kalian. Ingat gambar harus berukuran kecil, agar pas.

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya. Pasti Icon Label Blog Kalian sudah berubah.

Ohh ya, Saya hampir lupa, pada Pengaturan Widget Label harus dalam Mode "Daftar", kalo tidak maka Iconnya tidak akan muncul. Agar lebih jelasnya, Lihat Gambar Di Bawah.

Semoga Bermanfaat...!!!

Thursday, 19 January 2012

Cara Mencegah Orang Lain Meng-Copas Artikel Kita

Trik kali ini membahas tentang Cara Mencegah Orang Lain Meng-Copas Artikel Kita, sebelumnya saya sudah pernah Posting tentang Cara Mendisbled (Mematikan) Klik Kanan Pada Blog. Sebenarnya trik ini hampir sama dengan trik di atas, kalau trik diatas bisa Nge-Blok Postingan, kalau trik kali ini tidak bisa Nge-Blok Postingan kita. OK. langsung saja ke langkah-langkahnya :

[1]. Pertama pastinya Login dulu ke Blog Kalian masing2

[2]. Trus cari Rancangan --> Edit HTML

[3]. Kemudian cari Code <head>

[4]. Copy dan Paste-kan Code di bawah, tepat di bawah Code <head>

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined")
{document.onselectstart=new Function ("return false");}
else{ document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true"); }
</SCRIPT>

[5]. Terakhir tinggal di SAVE, dan coba Kalian lihat Postingan Kalian, apakan masih bisa di Blok atau di Copas, harusnya tidak bisa...!!! Hehehe...

Sekian dulu Trik kali ini, Selamat Mencoba dan Semoga Berhasil...!!!

Saturday, 14 January 2012

Cara Membuat Variasi Text Pada Blog

Kalian mungkin masih asing dengan Judul Postingan kali ini, agar Kalian tidak merasa bingung tentang Variasi Text Pada Blog, maka Saya sertakan contohnya. Bisa di lihat pada tulisan di bawah, coba arahkan Kursor Kalian ke tulisan di bawah. Atau pada Judul Postingan kali ini.

Cara Membuat Variasi Text Pada Blog

Jadi seperti itulah maksud Judul Postingan Kali ini.
Ok, kalo Kalian merasa tertarik, silahkan ikuti langkah-langkah berikut ini :

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Trus cari Rancangan --> Edit HTML.
[3]. Lalu cari Code ]]></b:skin> (agar lebih mudah mencari tekan CTRL + F atau F3, pada Keyboard).
[4]. Copy dan Paste-kan Code di bawah ini tepat di atas Code yang tadi.

.comments2{color: #613838;}.comments2:hover{font-family:Georgia,Century gothic,Arial,Helvetica,sans-serif;text-shadow: 0 0 3px #000000, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;}

[5]. Kalo sudah tinggan di SAVE.
[6]. Sekarang coba buat Postingan, trus masuk ke kolom Edit HTML pada Postingan, lalu masukan Code di bawah ke dalam Postingan Kalian. Contohnya bisa di lihat di bawah.

<div class="comments2"> </div>

Cara memasukannya bisa di lihat di bawah.

<div class="comments2">Kata-kata atau Postingan Kalian</div>

NB :

- Tulisan yang berwarna Hijau, itu adalh Code yang harus di masukan kedalam Postingan.

- Sedangkan tulisan yang berwarna Biru, itu adalah kata-kata atau tulisan yang akan di beri Effect.

[7]. Terakhir tinggal klik Terbitkan Entri dan lihat hasilnya. Coba Kalian sorotkan Kursor Kalian ke Tulisan yang tadi di beri Effect.

Semoga Bermanfaat...!!!

Friday, 13 January 2012

Cara Mendisable Klik Kanan Pada Gambar Di Blog

Sebelumnya Saya sudah pernah Posting tentang Cara Mendisable Klik Kanan Pada Blog, dan kali ini Saya akan Pos tentang Mendisable Klik Kanan Pada Gambar Di Blog. Sebenarnya kita hanya menambahkan sedikit Script pada Script Gambar.

Script Gambar Standar :

<img src="JmK.jpeg"/>

Dan kita hanya perlu menambah Script di bawah ini ke dalamnya :

oncontextmenu="return false;"

Contohnya Kalian bisa lihat pada Script di bawah ini :

<img src="JmK.jpeg" oncontextmenu="return false;"/>

Semoga Kalian mengerti dan semoga bermanfaat...!!!

Thursday, 12 January 2012

Cara Membuat Effect Bayangan Api Pada Link Blog

Kali ini Saya akan memberikan Tips, Cara Membuat Effect Bayangan Api Pada Link Blog. Effect Banyangan Api pada Link Blog, hemm, ketika Kalian mengarahkan Kursor Blog Kalian pda sebuah Link, maka akan keluar Effect Bayangan Api. Bagaimana, Kalian tertarik...? Kalau Kalian tertarik, silahkan ikuti langkah-langkah berikut.

[1]. Pertama pastinya Login dulu ke Blog Kalian.

[2]. Trus cari Rancangan --> Edit HTML.

[3]. Lalu cari Code a:hover kira-kira Codenya seperti di bawah..

a:hover {
text-decoration: underline;
color: #ff0000;
}

[4]. Kalo sudah ketemu, ganti tulisan [underline] menjadi [none], dan hapus Code pada bagian bawahnya. kira-kira Codenya seperti ini color: #ffoooo:

[5]. Lalu Copy dan Paste-kan Code di bawah ini, tepat di bawah Code yang tadi di hapus, atau di belakang Code yang tadi di hapus.

text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;

[6]. Kalo Kalian bingung, coba Kalian lihat Code di bawah ini.

a:hover {
text-decoration: none; text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;
}

[7]. Kalo sudah selesai, tinggan di SAVE, dan lihat hasilnya. Link Blog Kalian jadi ada Effect Bayangannya.

Semoga Berhasil...!!!

Wednesday, 4 January 2012

Cara Menambahkan Gambar Di Pojok Bawah Blog

Seperti pada judul postingan kali ini, saya akan memberikan Tips Cara Menambahkan Gambar Di Pojok Bawah Blog. Kalo Kalian lihat di Bawah Pojok Kanan Blog ini, maka kita akan membuat yang seperti itu. Ok, tidak usah berlama-lama lagi, langsung saja, berikut langkah-langkahnya :

[1]. Seperti biasa Login dulu ke Blog Kalian

[2]. Lalu cari Rancangan --> Edit/HTML

[3]. Cari Code ]]></b:skin> (Agar lebih mudah mencari tekan F3 atau CTRL + F pada Keyboard)
[4]. Copy dan Paste-kan Code dibawah ini Di Atas Code yang tadi

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); }

NB :
- Tulisan yang berwarna Biru, menunjukan Posisi Gambar, ganti dengan keinginan Kalian (right [kanan], left [kiri])

[5]. Kalo sudah, sekarang cari Code </body>, dan Copy dan Paste-kan Code di bawah.tepat di atas Code tadi.

<div id='trik_pojok'>
<a href='http://indonesianblog-jmk.blogspot.com'>
<img border='0' src='https://sites.google.com/site/rakasajmk/download-1/download-2/JmK.png'/></a>
</div>

NB :

- Tulisan yang berwarna Merah, ganti dengan Link Blog Kalian

- Dan yang berwarna Biru, ganti dengan Link Gambar Kalian

[6]. Terakhir tinggal di SAVE, dan lihat hasilnya

Selamat Mencoba...!!!

Laman