MOZZA TASK

04.34

Membuat Blog Anti Copas

Apalah yang paling menjengkalkan hati seorang blogger selain ketika artikelnya di Copas ( salin ) tanpa seizinnya. Bayangkan saja sob, artikel yang dengan susah payah di ketik dengan bercucuran keringat dan menguras otak ( hehe.. berlebihan ya?? ) akhirnya harus ada duplikatnya tanpa se izin dari yang empunya artikel.
Meskipun tak sedikit yang tidak mempermasalahkan tindakan Copy paste artikel ini, namun yang namanya mencuri hasil karya tanpa ada ijinnya tetap saja dianggap sebagai tindakan kurang sportif.. sebetulnya saya sendiri tidak mempermasalahkn tindakan copy paste terutama yang lakukan di blog ini, asalkan sobat menyertakan link aktif artikel yang di copas sebagai sumbernya, kira - kira dengan cara seperti itulah kita bisa saling menghargai hasil ketikan jari sesama blogger. Berikut beberapa teknik anti Copas yang bisa saya share untuk sobat blogger.

Gunakan script berikut untuk meletakkan link sumber ( link source ) otomatis ketika di copas
Letakkan script berikut di atas kode <body> kemudian di save.

Catatan :
Ubah tulisan berwarna biru sesuai keinginan. misalnya "artikel bersumber dari"

Namun jika sobat blogger memang sama skali tak mentolerir tindakan ini atau memang tidak mau artikelnya sampai di duplikat orang lain, maka bisa sobat siasati dengan memasang 2 trik anti copas ( disable klik kanan ) berikut.

Membuat Artikel Tidak Bisa di Copas

1. Trik Pertama :

1. Klik rancangan -->Edit HTML
2. Cari dan ganti kode <body> dengan kode berikut

3. klik save

2. Trik Ke Dua :
Menonaktifkan klik kanan sekaligus mengeluarkan pesan peringatan
Caranya :
1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. masukkan kode dalam kotak yang di sediakan

catatan:
Ubah tulisan yang berwarna merah dengan pesan peringatan yang di inginkan.

3. klik save

Silahkan pilih yang mana yang di rasa lebih baik, apakah sobat memperbolehkan Copas tapi harus ada link sumbernya, atau sama sekali tidak ingin ada yang meng-copas artikelnya.

04.18

membuat menu animasi mendatar dengan CSS3.

1. Login ke akun blogger sobat
2. Klik Rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>

.Hansuperanima{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
}
ul#superAnima{

width:599px;

        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#superAnima li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#superAnima li a.anima{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://lh4.googleusercontent.com/-a0zdLvnsQE8/T2XFNjkIrWI/AAAAAAAAAcQ/rrmwCSZMx3k/h120/gradBlueH2V53.gif) top left repeat-x;
        text-align:center;
        transition:all 1.2s ease-in-out;
        -o-transition:all 1.2s ease-in-out;
        -moz-transition:all 1.2s ease-in-out;
        -webkit-transition:all 1.2s ease-in-out;
        -ms-transition:all 1.2s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}
ul#superAnima li a.anima:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}
ul#superAnima li a.anima span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 1.6s ease-out;
        -o-transition:all 1.6s ease-out;
        -moz-transition:all 1.6s ease-out;
        -webkit-transition:all 1.6s ease-out;
        -ms-transition:all 1.6s ease-out;
        transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -o-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -moz-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -webkit-transform:scale(8.0) rotate(0deg) translate(0,-10px);
        -ms-transform:scale(8.0) rotate(0deg) translate(0,-10px);
}
ul#superAnima li a.anima span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        padding:4px 9px;
        height:18px;
        transform:scale(1.0) rotate(0deg) translate(0,0);
        -o-transform:scale(1.0) rotate(0deg) translate(0,0);
        -moz-transform:scale(1.0) rotate(0deg) translate(0,0);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);
        -ms-transform:scale(1.0) rotate(0deg) translate(0,0);
        color:#FF0;
        border:2px solid #000;
        background:#555;
        text-shadow:1px 1px 1px #000;
        box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px orange, -3px 3px 3px yellow;
        border-radius:4px;
}
ul#superAnima li{
        border:1px solid transparent;
        background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif);
}
ul#superAnima li:hover{
        background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);
        border:1px solid #777;
}

Catatan:
Sesuaikan kode angka yang berwarna biru dengan ukuran template.

4. Klik save dan lanjut ke tahap ke 2.
5. Klik Rancangan --> Elemen laman
6. Klik Tambah Gadget tepat di bawah header dan kemudian pilih HTML/Javascript..

04.15

cara membuat buku tamu auto hide di blog

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut diHTML/Javascript blog sobat.

<div id="cboxdiv" style="text-align: center; line-height: 0">

</div>

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank"href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

Caranya :

Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan kodenya di kotak yang di sediakan.
Klik Save

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

04.09

Cara Membuat Tulisan Berjalan

1. Tulisan bergerak dari kanan ke kiri

<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

hasilnya

Contoh Tulisan Berjalan

2. Tulisan bergerak dari kiri ke kanan

<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri

<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

5. Teks bergerak dari atas ke bawah

<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

6. Teks bergerak dari bawah ke atas

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

7. Teks bergerak mondar- mandir dari atas ke bawah

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

8. Teks bergerak zig - zag ( diagonal ) memantul

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

9. Teks bergerak zig - zag ( diagonal ) tembus

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

Cara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.

tambahan :

Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan kode marquee antara kode berikut

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>

hasilnya :

Contoh Tulisan Berjalan

Untuk menyisipkan link pada marquee, gunakan kode berikut :

<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-teks-berjalan-di-blog.html"/>Cara Membuat Teks Berjalan di Blog</a></marquee>
</div>

catatan :
ganti tulisan yang berwana biru dengan Url yang di inginkan.

hasilnya :

Cara Membuat Tulisan Berjalan di Blog

Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=" http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html/">cara membuat permalink di blog</a><br/>
<a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-logo.html">cara membuat logo</a><br/>
<a href="http://christiantatelu.blogspot.com/2012/03/blog-di-blogspot-dan-blog-di-wordpress.html">blog di blogspot dan blog di wordpress</a><br/>
</marquee>

catatan :
kode yang di cetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer

Hasilnya :

cara membuat permalink di blog

cara membuat logo

blog di blogspot dan blog di wordpress

04.02

Efek - Efek Blog

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blogberikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan

2. Efek hati bertaburan

3. Efek bintang bertaburan

4. Efek kembang api

5. Efek Gelembung

5. Efek Kupu - Kupu Terbang

Cara pemasangan :

Klik rancangan --> Edit html
Letakkan script efek di atas kode </body>
Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh

2. Banjir

3. Bunga Mekar

4. Bom Atom

5. Ufo

6. Graffity

7. Shaver

8. Gun

9.Bloody gun

10. Paint ball

11. Chainsaw

12. Dinosaur

13. Lebah

14. Lalat

15. Semut

16. Siput

17. Cacing

18. Mold

19. Bayi merangkak

20. Telur mata sapi

21. Kopi tumpah

22. Terbakar

23. Tomat

24. Creampie

25. Murka

26. Sapi Jorok

27. Anjing Jorok

28. Kencing Sembarangan

Cara pemasangan :

Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan script efek di dalam kotak yang di sediakan
Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ). so, pilih mana yang terbaik menurut sobat.. salam..

MOZZA TASK

Membuat Blog Anti Copas

membuat menu animasi mendatar dengan CSS3.

cara membuat buku tamu auto hide di blog

Cara Membuat Tulisan Berjalan

Efek - Efek Blog

Post

Ramalan

Entri Populer

Label