Cara Membuat Anti Klik Kanan Pada Blogspot

Setalah kemarin saya share tentang Cara Membuat Halaman Maintenance Pada Blogspot, sekarang lanjut lagi Cara Membuat Anti Klik Kanan, Disable Block Text, dan Disable Ctrl+ C, pada Blogspot (Anti Kopas). Cara ini pastilah sudah banyak yang share, dan tentunya engan macam-macam cara dan beda kode tentunya. Nah yang ingin saya share disini yaitu dengan cara dan kode yang menurut saya paling simpel dan gak pakek ribet. Dan dengan satu kode ini kita sudah bisa membuat 3 trik sekaligus, yaitu:

1. Disable Klik Kanan (onmousedown)
2. Disable Block Text (oncontextmenu)
3. Disable Ctrl+C / Ctrl+V (onkeydown)

Lanjut ke topik bahasan, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: <body> (gunakan Ctrl+F di keyboard untuk memudahkan pencarian), setelah ketemu, gantilah kode <body> dengan kode dibawah ini:

<body oncontextmenu='return true;' onkeydown='return true;' onmousedown='return true;'>

6. Simpan template, dan lihat hasilnya.

Begitulah kiranya cara simpel membuat anti kopy paste pada blogspot.
Semoga bermanfaat.

Cara Membuat Link Nudging (Bergerak) Dengan jQuery

Cara Membuat Link Nudging Dengan jQuery. Sebenarnya masih banyak tips dan trik blogspot yang saya bookmark tapi belum sempat saya share disini, jadi kalau tips ataupun triknya udah ketinggalan jaman, harap dimaklumi saja ya. Kali ini saya akan membahas seputar jQuery, pastinya menarik untuk disimak dan dipraktekan sob, sobat pasti udah sering mendengar link nudging atau gampangannya yaitu sebuah link bila tersentuh kursor maka link tersebut akan bergeser kesamping kanan, bisa juga hover link yang bergerak.

Agar lebih jelasnya silahkan lihat demonya dibawah ini :

DEMO LINK NUDGING: Coba arahkan kursor ke arah link dibawah ini

• Tutorial Blog
• Blogger Trik
• Tips SEO
• jQuery
• Blogger Hack
• Blogger Widgets
• Alexa

Tertarik untuk membuatnya?? Berikut langkah-langkahnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

6. Sekarang simpanlah template sobat.

Penting:

Bila di blog sobat sudah ada file.js untuk kode :
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
Maka sobat tidak perlu lagi memasang file.js tersebut.

7. Cara memasang di link sobat cukup tambahkan kode class "linknudge" untuk link sobat seperti contoh dibawah ini :

<a class='linknudge' href='http://kode-blogger.blogspot.com/'>Kode Blogger</a>

8. Selesai!
Nah cara atau kode di atas adalah untuk link kostum, dengan menambahkan kode class 'linknudge'.
Berikut ini adalah kode lain untuk label dan untuk link kustom sobat:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

Keterangan:

Untuk pemasangan kode sama seperti yang sudah saya jelaskan diatas.
Sekian dari saya, itulah Cara Membuat Link Nudging Dengan jQuery, Semoga bermanfaat.

Cara Membuat Teks Area dengan Select All

 Berawal ketika chating di Facebook seorang teman menanyakan, bagaimana cara membuat teks yang ketika di pilih semua teks akan terpilih seperti select all. Sampai disini saya kira sudah mengerti, baiklah buat sobat Dunia Tutorial semua ikutilah langkah-langkah dibawah ini.

• Login ke dashboard blog kamu - Rancangan - Edit HTML
• Geser kebawah dan temukan kode </head>
• Copy kode dibawah ini sebelum kode </head>

<script type="text/javascript">

function selectAll()
{
document.form1.demo.focus();
document.form1.demo.select();
}

</script>

• Simpan Template kamu
• Nah sekarang buka Dashboard - Rancangan - Elemen Halaman
• Pilih Tambah Gadeget - HTML/javascript

<form name="form1" >
<textarea cols="25" rows="10" name="demo">
TEKS MU DISINI

</textarea>
<input type="button" name="selectit" value="Select All" onclick="selectAll ();">
</form>

• Terakhir, rubah tulisan  TEKS MU DISINI dengan teks yang kamu inginkan
• Simpan dan selesai

Hanya Menampilkan Judul Posting ketika Label di klik

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
lalu cari kode berikut ini:

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
</div>

Kalau sudah ketemu ganti kode yang berwarna biru dengan kode berikut

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya
Baca Juga Artikel Terpopuler :

• Sejarah CorelDraw dan Perkembangannya
• Astrid Ellena, Miss Indonesia 2011
• Operasi Keperawanan Dewi Persik
• Menikmati Sex Yang Aman Saat Hamil
• Letusan Gunung Terdasyat Di Dunia
• Ingin Tahu AI-Qur'an Itu Apa ?
• Menerapkan SEO Pada Gambar Postingan
• Dari Dapur, Wanita Menuju Surga
• Cinta Kasihku Kepada Rasulullah SAW
• GRATIS !!! Submit untuk meningkatkan pengunjung blog/website Anda.

Cara Membuat Background Warna Gradasi

Untuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari fitur CSS. Selain tampilan web menjadi lebih ringan, fitur CSS lebih mudah untuk mengatur pemilihan warna, nilai posisi warna, ketebalan warna, untuk membuat background dengan warna gradasi sesuai selera.

Dibawah ini beberapa contoh gradasi beserta kodenya, silahkan anda bisa mencoba untuk mengubah nilai - nilainya sesuai kebutuhan anda.

1. Gradasi warna terang atas

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-atas
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%, #c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#c4d69f));
}
</style>

<div class="terang-atas">TEKS DISINI</div>

2. Gradasi warna terang bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="Horisontal-terang-tengah">TEKS DISINI</div>

3. Gradasi Horisontal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="Horisontal-terang-tengah">TEKS DISINI</div>

4. Gradasi Horisontal warna terang atas bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-atas-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="Horisontal-terang-atas-bawah">TEKS DISINI</div>

5. Gradasi Vertikal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-tengah">TEKS DISINI</div>

6. Gradasi Vertikal warna terang kanan kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop
(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}

</style>

<div class="vertikal-terang-kanan-kiri">TEKS DISINI</div>

7. Gradasi Vertikal warna terang kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-kiri">TEKS DISINI</div>

8. Gradasi Vertikal warna terang kanan

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="vertikal-terang-kanan">TEKS DISINI</div>

9. Gradasi Vertikal warna terang kanan

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

Berikut kodenya :

<style type="text/css">
div.ellip-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius-topright: 700px 300px;
-webkit-border-radius-topright: 700px 300px;
-moz-border-radius-topleft: 700px 300px;
-webkit-border-radius-topleft: 700px 300px;
-moz-border-radius-bottomright: 700px 300px;
-webkit-border-radius-bottomright: 700px 300px;
-moz-border-radius-bottomleft: 700px 300px;
-webkit-border-radius-bottomrleft: 700px 300px;
padding: 40px;
margin-left: 60px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="ellip-terang-kanan">CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.</div>

Selamat mencoba dan Semoga bermanfaat.....