Blognya Ifud: October 2010

Menonaktifkan Klik kanan pada Web/Blogger

jQuery ini bekerja pada semua platform baik web atau blog, langsung saja.

Tambahkan kode dibawah ini sebelum </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>

Lalu save file html/template anda..

Cara menghapus tulisan "No posts match your query"

Cari kode ini :

<b:include data='top' name='status-message'/>

Lau modif seperti dibawah ini (usahakan jangan menghapus)

Lalu simpan template :)

Membuat "cloacking" link/button penyamaran link Affiliate

Thanks sebelumnya buat bantuan teman di kaskus agan AaEzha di postingan saya tentang bagaimana caranya membuat jQuery tentang cloacking ini menuju ke new tab / halaman baru, jadi tidak pada current page (halaman yang sama.

Cara membuat clocking link/button

Pertama copy-pastekan kode dibawah ini dibawahnya tag <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(".cloaked").click(function(e) {
e.preventDefault();
window.open("http://tinyurl.com/39z3wnd", "_blank");
});
});
</script>

Yang bisa dirubah adalah yang berwarna merah
.cloaked bisa diganti nama lain inget pake "titik" lalu namanya, misalnya : .linksamar
http://URLku/ ini bisa diganti dengan target url yang sebenarnya, misal : www.jualtahu.com/affid?=231242

Nah setelah ini untuk membuat anchor text atau link untuk button kira-kira penerapannya seperti ini:

<a href="http://www.bukanurlsebenarnya.com" class="cloaked" target="_blank">Masuk Yuk</a>

Sedikit penjelasan, sewaktu visitor mengarahkan pointer mouse ke atas anchor text link atau button, maka yang kelihatan di status bar yang ada di browser adalah link tersebut seakan-akan mengarah ke http://www.bukanurlsebenarnya.com karena orang berpikir apa yang muncul di status bar adalah link sebenarnya untuk Anchor text link / button tersebut.

Optimasi lain tentang cloaking

Cara diatas bila visitor mencoba klik anchor text atau button tersebut maka akan mengarah ke halaman yang sama (current page), nah kalau ingin link tersebut kalau diklik linknya mengarah ke halaman baru (new tab / new window ), coba kita edit sedikit kode diatas tadi menjadi seperti ini.

Cara membuat clocking link/button

Pertama copy-pastekan kode dibawah ini dibawahnya tag <head>

<script type="text/javascript">
$(document).ready(function() {

$(".cloaked").click(function(e) {
e.preventDefault();
window.location='http://URLku/','_blank';
});

});
</script>

Lihat dini LIVE DEMO

Maka ketika diklik link tersebut akan mengarah ke new tab :)

Semoga berguna...

Regards,

Membuat "dynamic meta tags" pada blogger

Satu masalah ketika flatform kita blogging adalah blogger/blogspot adalah duplikat meta content, coba kita rubah sedikit di template (tempat kita men-setup met tags).

Pertama cari kode ini

<title><data:blog.pageTitle/></title>

Replace / ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='keyword1, keyword2, keyword3, dst.' name='keywords'/>
<meta content='Deskripsi ini penting untuk search engine :)' name='description'/
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " by " +
data:blog.title' name='Description'/>
<meta expr:content='data:blog.pageName + ", " +
data:blog.title' name='Keywords'/>
</b:if>

Lalu Save! template.

Ganti kode berwarna merah sesuai keyword dan description blog anda.

Mengganti warma tulisan "0 comment" dibawah posting

Adakalanya kita pingin yang berbeda dengan apa yang disuguhkan blogger, mengganti warna tulisan yang ada dibawah posting pada blogger.

Caranya :

Cari kode ini

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Lalu tambahkan pada bagian <h4> menjadi <h4 class='merah'>

Nanti lengkapnya seperti ini

<h4 class='merah'>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Nah setelah itu bikin CSS nya, tambahkan sebelum kode ]]></b:skin>

Kira-kira seperti ini

.merah {
color: red;
}

]]></b:skin>

Save template !

Thanks

Mengganti warna judul post (warna h1 pada post-title)

Mengganti warna h1 pada post-title di blogger.

Cari kode

]]></b:skin>

Sebelum kode tersebut lalu paste paste kode dibawah ini

.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: #ff99cc;
}

Pada bagian color: #ff99cc; bisa diganti sesuai kebutuhan :)

Menghapus border, shadow dan rounded pada image pada blogger (template designer)

Masih di dunia template designer :) cara menghapus image border pada image yang ada di posting, atau bahkan semua image di blogger (template designer), tapi disini kita bahas dibagian post-body dulu.

Cari kode ini

.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);
}

Rubah dulu border: 0px solid $(image.border.color); Hapus kode yang berwarna tebal :) lalu Save template.

Membuat komen author berbeda di blogger (template designer)

Akhirnya setelah keliling kesana-kemari ada di blog orang (jeremymartin - Thanks). Sedikit berbeda dengan template blogger yang lama, disini menggunakan jQuery.

Pertama copy - lalu pastekan kode dibawah ini setelah penutup </head>

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>

Save template dulu :)

Setelah itu kita lanjutkan, jangan lupa Klik dulu Expand Widget Templates. Tapi sebelum itu, apakah blog authornya cuman satau atau beberapa author. Lanjut yuk !

Cara 1 : Authornya cuman 1 orang

Cari kode ini

<b:else/>

Setelah ketemu. Copy lalu pastekan kode ini dibawahnya :

<script type='text/javascript'>
$().ready(function() {
$('dl#comments-block dt a').each(function(i) {
if($(this).attr('href') == '<data:userUrl/>') {
$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
}
});
});
</script>

Lanjut menuju bagian CSS di Cara 2
Lalu save..
* Untuk cara yang ini belum sempet di test

Cara 2 : Beberapa author dan anda sebegai co-author

Untuk cara yang kedua ini udah di test seperti yang telah di terapkan di blog ini :) Mari kita lanjutkan

Cari kode ini

<b:if cond='data:team == "true"'>

Lalu pastekan dibawahnya kode ini

<script type="text/javascript">
var author_urls = new Array();
</script>

Lanjut cari kode ini

<b:loop values='data:authors' var='i'>

Pastekan dibawahnya kode ini

<script type="text/javascript">
author_urls[author_urls.length] = '<data:i.userUrl/>';
</script>

Lanjut dibawahnya cari

</ul>

Pastekan tepat dibawahnya :

<script type='text/javascript'>
$().ready(function() {
var urlsReg = new RegExp(author_urls.join("|"));
$('dl#comments-block dt a').each(function(i) {
if(urlsReg.test($(this).attr('href'))) {
$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
}
});
});
</script>

Nah selesai juga semua tentang javascript, panjang juga yah :)

Bagian CSS
Belum selesai lanjut ke CSS nya, pastekan kode dibawah ini tepat diatasnya </style>

dl#comments-block dt.author-comment {

background-image: none;

background-color: #EDE5BE;

margin-bottom: 0px;

padding: 6px 0 6px 10px;

border: 1px solid #ccc;

border-bottom: 1px solid #FFF7CF;

}

dl#comments-block dd.comment-body.author-comment {

color: #593622;

background-color: #EDE5BE;

margin-top: 0px;

margin-bottom: 0px;

padding: 10px;

border: 1px solid#ccc;

border-top: 1px solid #CBC4AC;

}

dl#comments-block dd.comment-footer.author-comment {

font-size: .8em;

background-color: #CBC39C;

padding: 3px;

margin-top: 0px;

float: right;

border: 1px solid #ccc;

border-top: none;

}

Save ! selesai akhirnya

lihat demonya disini

Semoga berguna :)

Blognya Ifud

Pages