Blogger Tune-Up

jQuery Menu Malu

2011-12-17T20:47:00.001+07:00

Bismillah. Alhamdulillah. Sebelum menulis artikel ini, aku sudah "lemes" tertawa sendiri. Seperti tidak ada judul lain saja menggunakan nama "jQuery Menu Malu". Penamaan ini sebenarnya spontanitas ketika melihat hasil akhir dari efek menu tersebut. Kronologi kejadiannya itu tadi malam, karena tidur terlalu sore (sekitar jam 10) maka terbangun masih dini hari (sekitar jam 3), mata langsung segar dan bingung mau melakukan apa. Buka-buka buku menemukan naskah pidato Bacharudin Jusuf Habibie waktu di kampus UI sebanyak lima halaman. Begitu selesai otak justru menjadi "njlimet" antara mengerti dan tidak mengerti dengan isi pidato tersebut. Akhirnya buka laptop dan cari-cari inspirasi, mata tiba-tiba tertuju pada suatu gambar background berwarna gelap (yang nanti akan kita gunakan), maka lahirlah inspirasi untuk menulis kode jQuery. Menulis kode jQuery-nya juga cukup lama, hampir satu jam karena berganti-ganti ide dan efek yang digunakan. Dan akhirnya efek yang digunakan adalah on-hover, un-hover, slideUp dan slideDown seperti demo dibawah ini.

Demo jQuery Menu MaluKlik disini untuk melihat Demo jQuery Menu Malu

Deskripsi jQuery Menu Malu

jQuery Menu Malu pada mulanya disembunyikan, kemudian ditampilkan saat awal halaman di-load, beberapa saat kemudian menu kembali disembunyikan. Ketika mouse berada pada wilayah menu (on-hover) maka menu akan memanjang sendiri tanpa di klik dan menu pun akan ditampilkan. Ketika mouse meninggalkan area menu (un-hover) maka menu akan memendek sendiri tanpa di klik dan menu pun disembunyikan. Pada saat menu membuka efek slide dibuat lambat (slow) dan ketika menu menutup efek slide dibuat cepat jadi seakan-akan seperti malu-malu. Makanya kemudian di beri nama jQuery Menu Malu. Menu ini harus di sentuh baru membuka dan menutup jika di tinggalkan.

Skenario HTML jQuery Menu Malu

Dibawah ini adalah susunan kode HTML yang digunakan untuk membuat jQuery Menu Malu:

<div id="menumalu">
 <div id="topi"></div>
 <div id="isimenu">
  <ul>
   <li><a href="http://URL_1">Menu 1</a></li>
   <li><a href="http://URL_2">Menu 2</a></li>
   <li><a href="http://URL_3">Menu 3</a></li>
   <li><a href="http://URL_4">Menu 4</a></li>
   <li><a href="http://URL_5">Menu 5</a></li>
  </ul>
 </div>
 <div class="sepatu"><span class="panwah">&nbsp;</span></div>
</div>

Penjelasan:

Jika diperhatikan maka menu ini terdiri dari satu wadah (container) utama yaitu <div id="menumalu">. Didalam container utama terdiri dari 3 bagian yaitu; <div id="topi"> (topi berarti bagian atas), <div id="isimenu"> (berisi menu-menu, sebenarnya bebas mau diisi apa saja), dan <div class="sepatu"> (sepatu berarti bagian bawah).
Pada bagian '"sepatu" memiliki sebuah "span" yang nantinya akan digunakan untuk container anak panah. Jika menu terbuka maka anak panah menunjukan arah ke atas, jika menu tertutup maka anak panah menunjukan arah ke bawah. Inilah fungsi "span" pada bagian sepatu.
Sedangkan untuk menu-menu yang ada didalamnya (didalam "isimenu") silahkan sesuaikan saja dengan kebutuhan.

Skenario CSS jQuery Menu Malu

Dibawah ini adalah susunan kode CSS yang akan digunakan untuk mempengaruhi tampilan HTML dan fungsi jQuery:

#menumalu{
 top: .4em;
 left:2em;
 width:230px;
 position: fixed;
 z-index: 200;
}
#topi {
 margin:0 ;
 padding:0;
 height:55px;
 background:url(malusprite.png) no-repeat 0 0;
 border-bottom:1px solid #000;
}
#isimenu{
 margin:0 ;
 padding:0;
 width:230px;
 background:url(malubg.png) repeat-y;
}
.sepatu{
 margin:0;
 padding:0;
 height:78px;
 background:url(malusprite.png) no-repeat 0 -80px;
 display:block;
 border-top:1px solid #302F2F;
}
span.panwah,span.pantas{
 width:27px;
 height:26px;
 display:block;
 margin-left:103px;
 margin-top:35px;
}
span.panwah{
 background:url(malusprite.png) no-repeat 0 -158px;
}
span.pantas{
 background:url(malusprite.png) no-repeat -27px -158px;
}

Penjelasan:

Kode CSS ini tidak akan di jelaskan satu persatu, jadi (ma'af) silahkan dipelajari sendiri. Hanya bagian pentingnya saja yang akan dijabarkan. Perhatikan kode CSS diatas sepeti ditulis ulang dibawah ini:

#menumalu{
 top: .4em;
 left:2em;
 width:230px;
 position: fixed;
 z-index: 200;
}

Kode ini digunakan untuk menempatkan posisi menu, seperti:

top: .4em; digunakan untuk menentukan jarak dari bagian atas halaman ke menu. Ubah nilai .4em sesuai keinginan, jika tidak menemukan posisi tepat silahkan ganti satuannya. Gunakan satuan pixel agar lebih mudah dalam mengatur posisinya (misal; .4em diubah menjadi 4px).
left:2em; digunakan untuk menentukan jarak dari sisi sebelah kiri halaman ke menu. Silahkan ubah nilainya atau ganti satuannya dengan pixel (misal; 2em diubah menjadi 20px). Jika anda ingin memposisikan menu pada sebelah kanan halaman, ubah "left" menjadi "right" maka menu akan berpindah pada sebelah kanan.
width:230px; Nilai ini jangan diubah karena sudah disesuaikan dengan lebar gambar yang digunakan. Kecuali jika ingin mengganti gambarnya.
position: fixed; Ini digunakan untuk menempatkan posisi menu dimana saja tanpa terpengaruh oleh elemen lain. Ini juga tidak perlu diubah.
z-index: 200; Ini digunakan untuk menempatkan posisi menu terhadap elemen lain. Jika menu ini berada dibelakang menu lain, ubah nilai 200 menjadi lebih besar.

Skenario jQuery jQuery Menu Malu

(Nek urung kroso mumet, monggo di lajeng. Nanging ojo mekso... Ngunjuk tuyo kopi benter rumiyen sinambi ngeses...)
Di bawah ini adalah kode jQuery yang digunakan untuk memberikan efek pada menu:

$(document).ready(function () {

    jQuery('#isimenu').hide();
    jQuery(window).load(function () {
        jQuery('#isimenu').slideDown(1500, function () {
            jQuery('#isimenu').slideUp(200, function () {});
        });
    });
    jQuery('#menumalu').mouseenter(function () {
        jQuery('#isimenu').slideDown(1000, function () {
            jQuery('.sepatu span').removeClass('panwah').addClass('pantas');
        });
    });
    jQuery('#menumalu').mouseleave(function () {
        jQuery('#isimenu').slideUp(200, function () {
            jQuery('.sepatu span').removeClass('pantas').addClass('panwah');
        });
    });

});

Penjelasan:

$(document).ready(function () {

Kode di atas adalah kode wajib dalam menulis kode-kode jQuery

jQuery('#isimenu').hide();

Saat pertama kali halaman dipanggil #isimenu akan disembunyikan

jQuery(window).load(function () {

Pada saat halaman di load fungsi akan dimulai

jQuery('#isimenu').slideDown(1500, function () {

#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1500 milidetik dan fungsi lain dimulai...

jQuery(this).slideUp(200);

#isimenu kemudian akan ditutup lagi dengan efek slide keatas pada kecepatan 200 milidetik

});

Efek slide ditutup

});

Fungsi load halaman di tutup

jQuery('#menumalu').mouseenter(function () {

Pada saat pointer mouse berada di area #menumalu maka fungsi dimulai...

jQuery('#isimenu').slideDown(1000, function () {

#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1000 milidetik dan fungsi lain dimulai...

jQuery('.sepatu span').removeClass('panwah').addClass('pantas');

'class' dengan nama "panwah" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "pantas"

});

Fungsi menampilkan #isimenu akan ditutup

});

Fungsi pointer mouse pada area menu akan ditutup

jQuery('#menumalu').mouseleave(function () {

Pada saat pointer mouse meninggalkan area #menumalu maka fungsi dimulai...

jQuery('#isimenu').slideUp(200, function () {

#isimenu akan ditutup dengan efek slide ke atas pada kecepatan 200 milidetik dan fungsi lain dimulai...

jQuery('.sepatu span').removeClass('pantas').addClass('panwah');

'class' dengan nama "pantas" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "panwah"

});

Fungsi menutup #isimenu akan ditutup

});

Fungsi pointer mouse meninggalkan area menu akan ditutup

});

Fungsi jQuery ditutup

Unduh jQuery Menu MaluKlik disini untuk mengunduh sourcecode jQuery Menu Malu

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Autolink Mini MP3 Player for Blogger Version 2.0

2011-12-16T17:32:00.003+07:00

Bismillah. Alhamdulillah. Plugin Autolink Mini MP3 Player for Blogger Version 2.0 adalah pengembangan dan perbaikan dari Autolink Mini MP3 Player for Blogger Version 1.0. Terima kasih untuk para pembaca setia Blogger Tune-Up atas kritik, saran dan masukannya sehingga Autolink Mini MP3 Player for Blogger terus dikembangkan dengan harapan akan semakin mendekati kebutuhan para Blogger tanah air. Secara garis besar plugin Mini Music Player kali ini masih berbasis dari script plugin sebelumnya dan dengan player yang sama pula. Lalu apa pengembangannya? Hanya sedikit tapi lumayanlah lebih bagus dari sebelumnya...

Autolink Mini MP3 Player Version 2.0Klik disini untuk melihat Autolink Mini MP3 Player Version 2.0

Update 15-12-2011 Autolink Mini MP3 Player Versi 2.0

Seluruh file diletakan pada server Google, sehingga loading lebih cepat (mudah-mudahan akun Blogger Tune-Up di Google Code tidak ditutup lagi)
Disertakan pengaturan penggantian keterangan file MP3 yang ada dibawah player
Disertakan pengaturan penggantian keterangan file MP3 yang ada dibawah player saat mouse diatas link Unduhan (hover)

Kekurangan Autolink Mini MP3 Player Versi 2.0

Background Keterangan file MP3 yang ada dibawah Player masih belum bisa di setting sesuai keinginan
Baru bisa mengenali file dengan ekstensi .mp3 saja, untuk .ogg, .wav, dan .swf (khusus untuk .swf sebenarnya tidak diperlukan player) belum bisa mengenalinya
Mohon bantuan untuk menemukan kelemahan dan kekurangan lainnya

Integrasi Autolink Mini MP3 Player Versi 2.0

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini (pilih salah satu saja):

</head>

atau:

</body>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script style='text/javascript'>//<![CDATA[
var unduhan ="Download";
var mos = "Right click - Save Target As for download";
//]]></script>
<script type='text/javascript' src='https://sites.google.com/site/henscripts/jscript/minimusicplayer.min.js'/>

Langkah 5
Simpan template...

Setting Keterangan Autolink Mini MP3 Player Versi 2.0

var unduhan ="Download"; ubahlah kata "Download" sesuai dengan keinginan anda (misal; Unduh, Sedot, Hisap, Sikat dan lain sebagainya). Kata ini akan muncul sebagai keterengan pada bagian bawah player.
var mos = "Right click - Save Target As for download"; ubahlah kata "Right click - Save Target As for download" sesuai dengan kalimat yang anda sukai. Kalimat ini akan muncul pada saat mouse berada diatas keterangan file yang berada dibawah player.

Memasukan File MP3 pada Artikel/Widget

Untuk memasukan file MP3 pada artikel blog atau widget, caranya sama saja seperti versi sebelumnya. Silahkan baca disini.

Autolink Mini MP3 Player Version 2.0Klik disini untuk melihat Autolink Mini MP3 Player Version 2.0

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Link Kredit Efek jQuery Ease Out Bounce

2011-12-15T15:09:00.005+07:00

Bismillah. Alhamdulillah... Kali ini kita akan membahas proses pembuatan suatu efek Ease Out Bounce yang di terapkan pada link kredit yang biasanya terdapat pada bagian bawah halaman blog. Mungkin sebagian blogger menyebutnya sebagai tooltips namun sebenarnya lebih dari sekedar tooltips dan saya lebih cocok menyebutnya sebagai Credits Ease Out Bounce. Kata Ease Out Bounce sendiri di ambil dari efek yang dihasilkan dari sebuah plugin jQuery Easing yang dibuat oleh George McGinley Smith. Penekanan pada artikel ini lebih ke pemahanan tentang pemanfaatan plugin jQuery Easing sehingga setelah artikel ini anda baca, pembaca bisa mengembangkannya sesuai dengan imajinasinya sendiri. Artikel ini tidaklah bersifat copy paste dan langsung dapat digunakan namun hanya berupa pancingan mengenai indahnya menulis script jQuery. Mari mulai bermain-main dengan jQuery...

Efek jQuery Ease Out BounceKlik disini untuk mengunduh sourcecode jQuery Ease Out Bounce

Skenario Efek

Ketika pointer mouse (hover) berada diatas link kredit maka seketika sebuah kotak kecil akan muncul dengan efek melebar hingga mencapai ukuran yang telah ditentukan dan kemudin di ikuti oleh sebuah kotak kecil lainnya yang ditempatkan diatas kotak awal yang muncul dengan efek meninggi hingga mencapai ukuran tertentu. Setelah kedua kotak ini tampil maka di ikuti tampilnya informasi yang berada di dalam kotak tersebut dengan efek fade.

Ketika pointer mouse meninggalkan link kredit maka kotak kecil paling atas akan menutup dengan efek layaknya slide down sehingga informasi yang ada di dalam kotak akan tertutup dan menghilang, sedangkan kotak kecil paling bawah juga akan tertutup dengan efek memendek hingga menghilang.

Skenario HTML

Dibawah ini skenario yang akan digunakan untuk membuat Link Kredit Efek jQuery Ease Out Bounce:

<div id="kredit">
<div id="latarkredit"></div>
<div id="latarlinkredit"></div>
<div id="kotakredit">
<p>Hendriono is a blogger and web designers especially as jQuery, CSS and HTML.</p>
<ul>
<li id="alamat"><a href="http://www.hendriono.web.id/">Read more Hendriono Online</a></li>
<li id="facebook"><a href="http://www.twitter.com/dedehendriono">Follow Dede Hendriono on Twitter</a></li>
<li id="twitter"><a href="http://www.facebook.com/dede.hendriono">Follow Dede Hendriono on Facebook</a></li>
<li id="rss"><a href="http://www.facebook.com/dede.hendriono">Follow Dede Hendriono on Facebook</a></li>
</ul>
</div>
<p id="urlkredit"><a href="http://modification-blog.blogspot.com/">Website kindly created by <span>henstudio</span></a></p>
</div>

Penjelasan skenario kode HTML:

Jika diperhatikan kode HTML diatas maka akan diketahui bahwa kita akan melibatkan 4 buah container yaitu <div id="kredit"><div id="latarkredit"><div id="latarlinkredit"> dan <div id="kotakredit">
<div id="kredit"> adalah container utama yang mewadahi 3 container lainnya.
<div id="latarkredit"> adalah container paling atas
<div id="latarlinkredit"> adalah container paling bawah
<div id="kotakredit"> adalah container yang berisi informasi-informasi yang akan kita masukan

Skenario CSS

Dibawah ini merupakan kode CSS yang membentuk kotak-kotak kecil dan beberapa informasi yang ada didalamnya:

#kredit { position:relative; float:right; margin:-5em 2em 0 0; width:28em; height:13em; }
#kredit a { text-decoration:none; }
#latarkredit { display:none; position:absolute; bottom:3.5em; width:28em; height:0; border:1px solid #555759; border-bottom:0; background:#040607; opacity:0.95; border-top-right-radius:5px; border-top-left-radius:5px; -moz-border-top-right-radius:5px; -moz-border-top-left-radius:5px; z-index:10; }
#latarlinkredit { display:none; position:relative; z-index:10; width:0; margin:0 auto; top:9.5em; height:3.5em; background:#16191b; border:1px solid #555759; border-bottom-right-radius:5px; border-bottom-left-radius:5px; -moz-border-bottom-right-radius:5px; -moz-border-bottom-left-radius:5px; }
#urlkredit { position:absolute; bottom:0; left:0; width:28em; height:3.5em; z-index:20;  }
#urlkredit a { display:block; width:28em; height:3.5em; text-align:center; color:#a0a1a1; line-height:3.5em; vertical-align:middle; border:0; }
#urlkredit a span { text-indent:-9999em; display:inline-block; width:75px; margin:0 2px 1.35em; height:12px; line-height:3.5em; vertical-align:bottom; background:url('logohens.png') no-repeat; }
#urlkredit a:hover span, #urlkredit a.active span { background-position:0 -12px; }
#kotakredit { display:none; position:absolute; width:28em; height:9.5em; z-index:15; top:0em; }
#kotakredit p { position:relative; top:0; left:0; margin:1em; }
#kotakredit p a { color:#a0a1a1; font-size:1.1em; font-family:"DroidSerifRegular", Georgia, Times New Roman, serif; }
#kotakredit ul { list-style-type:none; position:relative; margin:0; }
#kotakredit ul li { border:0; display:inline-block; margin:0; padding:0; }
#kotakredit ul li#alamat, #kotakredit ul li#facebook, #kotakredit ul li#twitter, #kotakredit ul li#rss { height:34px; line-height:34px; vertical-align:middle; }
#kotakredit ul li#facebook, #kotakredit ul li#twitter { width:45px; }
#kotakredit ul li#alamat { padding:0 1em 0 1em; }
#kotakredit ul li#alamat a { color:#bbb; text-decoration:underline; font-size:1.1em; }
#kotakredit ul li#alamat a:hover { color:#fff; }
#kotakredit ul li#facebook a, #kotakredit ul li#twitter a, #kotakredit ul li#rss a { width:45px; padding:0; height:34px; display:block; text-indent:-9999em; background:url('followus.png') no-repeat 0 -34px; }
#kotakredit ul li#facebook a:hover { background-position:0 0;}
#kotakredit ul li#twitter a { width:45px; height:34px; background-position:-45px -34px; }
#kotakredit ul li#twitter a:hover { background-position:-45px 0; }
#kotakredit ul li#rss a { width:45px; height:34px; background-position:-90px -34px; }
#kotakredit ul li#rss a:hover { background-position:-90px 0; }

Perhatikan gambar dibawah ini:

Penjelasan kode CSS hanya membahas tentang kunci dari efek saja, selebihnya silahkan jabarkan sendiri. Berikut penjelasannya :

Kode CSS pada #kredit hanya menentukan lebar (width) sebesar 28em dan tinggi (height) sebesar 13em dengan posisi (position) relative
Kode CSS pada #latarkredit justru menentukan tingginya (height) sebesar 0. Dengan nilai 0 ini berarti kotak tidak memiliki tinggi. Tinggi #latarkredit kemudian akan ditentukan pada kode jQuery pada bagian bawah.
Kode CSS pada #latarlinkredit juga menentukan lebar (width) sebesar 0, itu artinya kotak tidak memiliki lebar. Lebar #latarlinkredit kemudian akan ditentukan pada kode jQuery.
Jika diperhatikan kode CSS diatas maka #latarkredit harus meninggi sebesar 9.5em karena tinggi #latarlinkredit sudah ditentukan sebesar 3.5em. Jadi #latarkredit 9.5em + #latarlinkredit 3.5em = 13em. Nilai 13em sama dengan yang telah ditentukan pada tinggi (height) #kredit sebesar 13em. Maka efek jQuery harus diberi nilai tinggi untuk #latarkredit sebesar 9.5em. (Catat #latarkredit height : 9.5em)
Sedangkan #latarlinkredit belum ditentukan lebarnya (width). Jika merujuk pada kode #kredit maka lebarnya adalah 28em, maka #latarlinkredit juga harus diberi nilai sama yaitu 28em. (Catat #latarlinkredit width : 28em)

Skenario jQuery

(Ngaso rumiyen nek kroso mumet, monggo di unjuk kopi benter sampean sinambi ngeses... sueger!!!)
Dibawah ini adalah kode jQuery yang akan kita gunakan:

<script src='http://yandex.st/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {

$('#urlkredit > a').mouseenter(function() {
$('#latarlinkredit').show().stop().animate({width: '28em'}, 400, 'easeOutBounce', function() {
$(this).css("border-top","0");
$('#latarkredit').show().stop().animate({height: '9.5em'}, 400, 'easeOutBounce', function() {
$('#kotakredit').fadeIn(100);
});
});
});

$('#kredit').mouseleave(function() {
$('#kotakredit').stop().fadeOut(100);
$('#latarkredit').stop().animate({height: '0'}, 200, function() {
$(this).hide();
$('#latarlinkredit').stop().animate({width: '0'}, 200, function() {
$(this).hide();
$(this).css("border-top","1px solid #555759");
});
});
});

});
//]]></script>

Framework, Plugin dan Aturan Dasar
Ini adalah hal penting yang tidak boleh tertinggal dan hukumnya wajib untuk diikutsertakan dalam setiap menulis kode jQuery. Terdiri dari 3 bagian secara berurutan, yaitu framework jQuery, Plugin jQuery Easing dan aturan dasar penulisan kode jQuery.

<script src='http://yandex.st/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
<!-- tulis kode jQuery disini -->
});
//]]></script>

Ketika mouse berada diatas Link (mouseenter)
Perhatikan penjelasan kode berikut :

$('#urlkredit > a').mouseenter(function() {

Ketika mouse masuk kedalam link #urlkredit maka...

$('#latarlinkredit').show().stop().animate({width: '28em'}, 400, 'easeOutBounce', function() {

#latarlinkredit akan ditampilkan dan dihentikan dengan animasi melebar 28em selama 400 milidetik dengan efek pantul melebar (easeOutBounce) dan...

$(this).css("border-top","0");

Border top #latarlinkredit akan dihilangkan dengan nilai 0 dan dilanjutkan...

$('#latarkredit').show().stop().animate({height: '9.5em'}, 400, 'easeOutBounce', function() {

#latarkredit akan ditampilkan dan dihentikan dengan animasi meninggi 9.5em selama 400 milidetik dengan efek pantul meninggi (easeOutBounce) dan...

$('#kotakredit').fadeIn(100);

#kotakredit akan ditampilkan dengan efek fadeIn selama selama 100 milidetik

});

efek pada #latarkredit di tutup

});

efek pada #latarlinkredit di tutup

});

efek ketika mouse masuk ditutup

(Maem duren dese ah, ono tonggo panen duren, kecipratan 2 beton... trus ngeses karo ngopi... muantap...)

Ketika mouse meninggalkan link (mouseleave)
Perhatikan penjelasan kode berikut :

$('#kredit').mouseleave(function() {

Ketika mouse meninggalkan container #kredit maka...

$('#kotakredit').stop().fadeOut(100);

#kotakredit akan dihilangkan dengan efek fadeOut selama 100 milidetik kemudian...

$('#latarkredit').stop().animate({height: '0'}, 200, function() {

#latarkredit akan dihentikan dengan animasi menutup slidedown hingga tidak memiliki tinggi (height : 0) kemudian...

$(this).hide();

#latarkredit disembunyikan

$('#latarlinkredit').stop().animate({width: '0'}, 200, function() {

#latarlinkredit juga akan dihentikan dengan animasi memendek hingga lebarnya 0 (width : 0) kemudian...

$(this).hide();

#latarlinkredit disembunyikan kemudian...

$(this).css("border-top","1px solid #555759");

#latarlinkredit akan ditambahkan border-top sebesar 1px sebelum akhinya menghilang...

});

Animasi pada #latarlinkredit ditutup

});

Animasi pada #latarkredit ditutup

});

Animasi pada saat mouse meninggalkan container #kredit ditutup...

Demo Efek jQuery Ease Out BounceKlik disini untuk melihat Demo Efek jQuery Ease Out Bounce

Demikian penjelasan panjang lebarnya. Mudah-mudahan bermanfaat dan selamat mencoba, semoga berhasil. Happy Blogging :)

Blogger Error bX-l4u1mh

2011-12-13T16:31:00.003+07:00

Tanggal 12 Desember 2011 banyak Blogger melaporkan telah terjadi galat pada template blogger dengan kode galat bX-l4u1mh. Hal ini muncul ketika Blogger masuk ke menu "Rancangan - Elemen Laman". Sampai dengan artikel ini ditulis, Blogger belum mengumumkan perbaikan (fix) terhadap terjadinya galat bX-l4u1mh tersebut. Terlihat dari blog Known Issues for Blogger yang menuliskan keterangan "Some users are reporting bX-l4u1mh when editing the Layout of their blog. We're investigating the issue and will report back as soon as we have more information." ditulis pada tanggal 12 Desember 2011.

Ini hanya perkiraan saja, galat bX-l4u1mh ini terjadi setelah Blogger melakukan perbaikan dan perubahan tampilan Blogger Profile. Mungkin ID dari perubahan tampilan profile tersebut belum bisa terhubung sempurna dengan ID Racangan - Elemen Laman dari Blogger sehingga terjadi galat bX-l4u1mh. Namun itu hanya perkiraan.

Solusi Sementara Untuk Mengatasi Blogger Error bX-l4u1mh

Langkah 1
Login ke Blogger dengan Browser Firefox
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Blogger Error bX-l4u1mh akan tampil seperti gambar dibawah ini:

Langkah 4
Logout (klik link Keluar) dari Blogger
Langkah 5
Login kembali ke Blogger dengan Browser Chrome
Langkah 6
Masuk ke "Racangan - Elemen Laman" seperti gambar dibawah ini:

Langkah 7
Mudah-mudahan sampai disini error (galat) bX-l4u1mh telah teratasi dan silahkan lanjutkan kegiatan blogging anda...

Perhatian ! Intinya untuk mengatasi Blogger Error (galat) bX-l4u1mh kita harus menggunakan browser Google Chrome (Browser lain belum dicoba)... Hiks....

Percantik Huruf Artikel Blog dengan Plugin Cufón

2011-12-11T19:03:00.005+07:00

Bismillah. Banyak cara untuk mempercantik tampilan blog baik itu dengan custom template, percampuran warna, gambar-gambar pendukung, animasi dan lain sebagainya. Salah satu dari sekian banyak cara untuk mempercantik tampilan blog adalah memilih bentuk huruf yang menarik dan nyaman untuk dilihat. Bentuk huruf standar sebenarnya sudah cukup menarik, seperti arial, tahoma, verdana dan lain-lainnya, namun sebagian Blogger merasa tidak puas jika tampilan bentuk huruf-nya terlalu standar, kemudian mereka mencari alternatif untuk bisa menampilkan bentuk huruf yang berbeda dari standar namun tetap nyaman untuk dibaca. Google bahkan memfasilitasi para Blogger dengan memberikan font-font gratis dengan hosting yang gratis pula agar para Blogger memilih sendiri bentuk huruf yang sesuai dengan keinginan.

Namun keinginan para Blogger ternyata belum juga tercukupi dengan disediakannya huruf standar, tetap tidak puas walau Google menyediakan font secara gratis. Para Blogger tetap mengembangkan cara lain untuk mengubah bentuk huruf sesuai dengan keinginan. Jika anda merasa tidak puas dengan jenis huruf (font style) standar atau tidak puas dengan font dari Google maka ada alternatif lain yaitu Cufón.

Apa itu Cufón?

Cufón awalnya bertujuan sebagai alternatif pengganti sIFR (Scalable Inman Flash Replacement), walau pun belum mencapai tahap sempurna namun sudah bisa digunakan sebagai alternatif yang terbaik diantara metode lain. Dalam mencapai tujuan ambisius sang pengembang, maka Cufón harus memenuhi persyaratan sebagai berikut:

Tidak dibutuhkan plug-in - hanya dapat menggunakan fitur asli (native) yang didukung oleh browser
Kompatibilitas - ia harus bekerja pada semua browser yang tersedia di pasaran
Kemudahan penggunaan - tidak ada konfigurasi atau mendekati konfigurasi nol yang diperlukan dalam penggunaan kasus-kasus standar
Kecepatan - harus cepat, bahkan untuk jumlah teks yang cukup besar

Dan sekarang, setelah hampir satu tahun perencanaan dan penelitian Cufón telah dianggap memenuhi persyaratan ini.

Bagaimana cara kerja Cufón?

Cufon terdiri dari dua bagian individu yaitu sebuah generator font, yang mengubah font untuk format proprietary dan sebuah mesin rendering yang ditulis dalam JavaScript.

Pada kenyataannya generator merupakan bagian kecil dari antarmuka berbasis web yang dikembangkan oleh FontForge. Pertama, generator dibuat dengan kustom script FontForge berdasarkan input pengguna dan kemudian menjalankannya, hasil generator disimpan sebagai font SVG. Font SVG kemudian diurai dan dikonversi dari jalur SVG ke jalur VML. Ini merupakan langkah penting dalam mencapai kinerja terbaik bagi Internet Explorer, yang mendukung VML asli (native). Dokumen yang dihasilkan kemudian diubah menjadi font SVG. Font SVG kemudian diurai dan dikonversi dari jalur SVG ke jalur JSON dengan mencampurkan fungsi JavaScript. Hal ini memiliki banyak keuntungan diantaranya:

Untuk mengintegrasikan font, kita hanya perlu memuat tag standar <script> sebagaimana file JavaScript lainnya dan font akan terdaftar secara otomatis.
Tidak diperlukan penguraian file lagi secara manual pada sisi klien
File eksternal JavaScript eksekusinya akan diblok sampai font telah dimuat, hal ini untuk membantu penampilan font yang bebas flicker dan penggantian font yang bersih
File JavaScript font di kompress dengan sangat baik. Jika tidak di kompress biasanya ukuran file menjadi sangat besar, sedangkan dengan di kompress ukuran file biasanya 60-80% lebih kecil dari pada aslinya.

Untuk sisa font (jika ada) proses ini kemudian diulang untuk dikirimkan kembali ke generator dan file JavaScript yang dihasilkan dikirim kembali ke klien dengan nama file yang khas.

Bagaimana penyajian (rendering) Cufón?

Proses penyajian Cufón sedikit lebih rumit. Terdiri dari 3 bagian mesin, yaitu; sebuah mesin inti yang menyediakan fungsi API dan fungsi-fungsi umum lainnya dan dua buah mesin penyaji (render). Salah satu mesin penyaji digunakan untuk membuat bentuk VML yang digunakan untuk Internet Explorer (untuk versi 5.5) dan satu mesin penyaji menggunakan elemen HTML <canvas> untuk dukungan yang lebih luas. Karena jalur data sudah VML, maka mesin VML lebih ringan melakukan pekerjaan penyajian. Sedangkan mesin canvas, bagaimana pun harus menkonversi seluruh jalur ke setting yang sesuai dengan perintah penggambaran yang disediakan oleh canvas API. Pada awalnya hal ini sangatlah rumit, tetapi solusi ditemukan setelah dua kali penulisan ulang diselesaikan dalam bentuk generasi kode dan cache, sehingga penyajian menjadi sangat cepat. Inline SVG pada mulanya di pertimbangkan namun dengan cepat ditolak karena penyajian pada browser menjadi lebih lambat untuk jenis browser yang mendukung penuh Cufón.

Browser apa yang didukung Cufón?

Dibawah ini daftar Browser yang didukung Cufón:

Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (termasuk 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ juga termasuk 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (untuk versi tertentu)

Pada beberapa browser turunan Gecko dan WebKit, Cufón dapat bekerja dengan baik.

Bagaimana membuat file font (huruf) Cufón?

Sebelum mengintegrasikan Cufón kedalam blog, seperti dijelaskan diatas bahwa Cufón memerlukan dua (dalam penjelasannya ada tiga mesin) file JavaScript individu, yaitu file yang berfungsi sebagai mesin inti dan file yang berfungsi sebagai mesin penyaji. File yang berfungsi sebagai mesin penyaji didalamnya berisi jenis font (huruf) yang akan kita gunakan pada blog. Namun file ini haruslah dibuat terlebih dahulu sebelum digunakan. Dalam penjelasan ini akan dibagi menjadi dua metode, yaitu:

Metode Rumit (Membuat Sendiri)
Langkah 1

Siapkan file font berupa TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) dan PostScript. Atau anda bisa mencari dan mengunduhnya disini.

Langkah 2

Konversi file font yang telah kita unduh menjadi file JavaScript sebagai mesin penyaji font dengan menggunakan bantuan Online Cufón Generator (cara menggunakan Online Cufón Generator akan dibahas pada artikel terpisah) atau menggunakan salinan Cufón generator sendiri yang bisa diunduh dari GitHub.

Langkah 3

Unduh file JavaScript yang dihasilkan dari konversi. Nama file yang dihasilkan akan mencakup nama font dan ukuran font (seperti nomor 400 adalah setara dengan "normal" dan 600 berarti "tebal/bold"). Jadi, misal, versi tebal (bold) dari Bitstream Vera Sans akan menghasilkan sebuah file bernama Bitstream_Vera_Sans_600.font.js. Nama file tidaklah harus sama, tapi itu membuat kita lebih mudah untuk mengidentifikasi font yang telah kita buat.

Langkah 4

Upload file JavaScript yang sudah kita unduh ke dalam hosting file milik kita dan catat alamat URL file JavaScript Cufón tersebut untuk diikutsertakan pada blog kita. (Lihat artikel dibawah ini "Bagaimana menggunakan Cufón pada Blogger?" pada langkah 4. Alamat yang sudah kita catat untuk menggantikan http://URL/Nama_Font_Anda.font.js)

Metode Mudah (Langsung Download)
Langkah 1
Pilihlah jenis font yang akan kita gunakan pada situs CufónFonts.com
Langkah 2

Unduh (Download) file Cufón melalui link "Cufón File Download" dan cari tombol unduhan "Font Download sebagai Cufón" pada bagian bawah halaman

Langkah 3

Bagaimana menggunakan Cufón pada Blogger?

Integrasi Cufón pada Blogger sebenarnya cukup sederhana. Ikuti langkah dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:
Untuk penggunaan satu jenis font:

<script src='http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i' type='text/javascript'/>
<script src='http://URL/Nama_Font_Anda.font.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace('h1, #judul');
</script>

Untuk penggunaan jenis font yang lebih dari satu:

<script src='http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i' type='text/javascript'/>
<script src='http://URL/Nama_Font_Anda1.font.js' type='text/javascript'/>
<script src='http://URL/Nama_Font_Anda2.font.js' type='text/javascript'/>
<script type="text/javascript">
Cufon.replace('h1, #judul', { fontFamily: 'Nama Font 1' });
Cufon.replace('h2, .title', { fontFamily: 'Nama Font 2' });
</script>

Khusus untuk Internet Explorer:
Beginilah Internet Explorer yang selalu saja terjadi masalah pada JavaScript, Elemen HTML ataupun CSS dan termasuk Cufón. Dalam beberapa kasus yang ditemui, terjadi jeda (delay) penggantian font asli dengan font Cufón akan. Kita dapat menghindarkan jeda tersebut dengan menuliskan script dibawah ini tepat diatas tag </body> atau sebelum script lainnya, misal; script Google Analytic.

<script type="text/javascript"> Cufon.now(); </script>

Langkah 5
Simpan template dan preview blog anda...

Demo Plugin CufónKlik disini demo Plugin Cufón

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Menyisipkan Kode atau Script pada Artikel Blog

2011-12-10T00:48:00.001+07:00

Bismillah. Sebenarnya artikel tentang insert script code into blogger post atau menyisipkan kode-kode atau script kedalam artikel blog pernah dibahas pada artikel sebelumnya dengan memanfaatkan fasilitas plugin SyntaxHighlighter yang dikembangkan oleh Alex Gorbatchev. Dua artikel sekaligus telah di tulis untuk menjelaskan tentang Integrasi SyntaxHighlighter pada Blogger dan Konfigurasi SyntaxHighlighter pada Blogger. Namun pada artikel kali ini kita akan memanfaatkan fasilitas dari pihak ketiga tanpa menggunakan plugin. Pihak ketiga penyedia layanan insert code sebenarnya banyak, namun kali ini kita akan memanfaatkan fasilitas dari pastebin.com karena situs ini sudah cukup lama dan paling banyak digunakan oleh para blogger.

Kenapa memilih Pastebin?

Beberapa alasan berikut bisa menjadi pertimbangan kenapa memilih fasilitas dari Pastebin:

Mendukung banyak bahasa pemrograman
Tanpa perlu melakukan perubahan kode pada template
Bukan merupakan plugin bagi blog sehingga lebih ringan bagi blog (namun dipengaruhi kecepatan server Pastebin)
Pastebin menggunakan software syntax highlighting GeSHi yang telah mendapat penghargaan "Innovation Award" sebagai salah satu software dengan kualitas terbaik.
Kode/Script yang telah dibuat pada Pastebin akan tersimpan dengan baik sehingga lebih aman dan mudah jika suatu hari akan dilakukan perubahan/perbaikan kode/script.
Disediakan software pendukung untuk membuat dan mengelola kode/script yang telah kita buat pada Pastebin. Software Pastebin ini mendukung banyak platform, baik untuk Windows, iPhone, iPad, Android, Mac OS X, dan lain-lain.
Didukung pengembangan dengan API dan setiap pengguna memiliki API Key unik tersendiri.

Membuat kode pada Pastebin

Melalui Situs Pastebin
Langkah 1
Buatlah akun Pastebin, ikuti aturan pendaftaran.

Langkah 2
Login ke Pastebin dengan akun yang baru saja dibuat.

Langkah 3
Klik link "Create New Paste"

Langkah 4
Halaman "New Paste" terbuka dan masukan kode/script yang akan dibuat.

Langkah 5
Tentukan bahasa pemrograman yang digunakan pada "Optional Paste Settings". Contoh dibawah menggunakan bahasa JavaScript

Optional Paste Settings:
Syntax Highlighting : untuk menentukan bahasa pemrograman yang sesuai dengan kode/script yang dibuat
Paste Expiration : untuk menentukan batas ketersediaan kode di Pastebin
Paste Exposure : untuk menentukan ketersediaan secara umum (Public) atau pribadi (Private)
Paste Name / Title : untuk memberikan nama kode/script yang kita buat.
Setelah selesai menuliskan kode/script dan yakin, klik tombol "Submit"
Langkah 6

Jika kode/script yang kita buat ternyata mencurigakan maka Pastebin akan menampilkan "Spam Detection For Pastebin", jika anda yakin kode/script yang dibuat bukanlah untuk tujuan spam maka isikan "Enter Captcha" sesuai dengan yang tampil pada "Captcha Image" kemudian klik tombol "Submit"

Langkah 7

Sebuah jendela yang menampilkan dua kotak, kotak atas adalah kode yang sudah diberi sentuhan highlight sedangkan kotak bawah bersifat RAW untuk melakukan perubahan pada kode jika dianggap masih ada kekurangan.

Langkah 8
Klik link "EMBED" untuk menampilkan kode yang akan disisipkan pada artikel.

Langkah 9

Halaman "Embed Codes For Paste" terbukan dan kita diberikan dua metode penyisipan kode, pilih salah satunya. Apakah akan menggunakan "JavaScript Embedding" atau menggunakan 'Iframe Embedding". Metode yang paling aman adalah menggunakan yang kedua, namun yang paling sederhana menggunakan metode ke satu.

Langkah 10
Copy paste kode penyisipan pada artikel blog.

Melalui Software Pastebin
Langkah 1

Unduh (Download) software "Pastebin Desktop for Windows" karena kebetulan saya menggunakan sistem operasi Windows. Sesuaikan saja dengan sistem operasi anda.

Langkah 2
Install Software Pastebin

Langkah 3
Buka software Pastebin dan Login sesuai dengan akun yang telah kita buat sebelumnya.

Langkah 4
Sebuah jendela "New Paste" akan terbuka. Tentukan nama kode/script yang akan kita buat dan tuliskan kodenya.

Langkah 5

Untuk menentukan bahasa pemrograman yang kita gunakan, klik link "My Setting" dan sebuah jendela akan terbuka. Klik tombol "Save" jika setting-an sudah sesuai kebiasaan kita.

Ada beberapa option tambahan untuk versi software ini yaitu:

Link type : untuk menentukan link yang akan dibuat secara otomatis pada saat kita meng-klik tombol "Submit"
Quick paste key combination : untuk menentukan kombinasi tombol keyboard dalam membuat link baru
Copy the link to the clipboard automatically : untuk meng-copy link secara otomatis pada clipboard
Open the link in the browser automatically : untuk membuka link secara otomatis pada saat proses pembuatan kode telah selesai
Automatically start program when Windows starts : untuk mengaktifkan software secara otomatis pada saat sistem operasi diaktifkan pertama kali

Klik tombol "Submit" jika kode/script telah selesai dibuat.
Langkah 6
Sebuah link akan diberikan secara otomatis. Bukalah situs Pastebin dan carilah link "EMBED"

Langkah 7
Lakukan hal sama seperti yang kita lakukan (Lihat langkah 8 Melalui Situs Pastebin)

Menyisipkan Kode/Script pada Artikel Blog

Langkah 1
Login ke Blogger
Langkah 2
Buatlah sebuah artikel dan pindahkan pada mode "Edit HTML"

Langkah 3
Sisipkan (copy paste) script yang telah diberikan oleh Pastebin (lihat langkah 9 Melalui Situs Pastebin)
Langkah 4
Terbitkan artikel anda dan lihatlah hasilnya...
Langkah 5
Ambil makanan ringan dan duduk manis sambil menunggu pembaca budiman berkomentar...

Contoh kode dari Pastebin

Kode JavaScript Save The Environment

Kode CSS Save The Environment

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Aktikan dan Non Aktifkan Fitur Lightbox Blogger

2011-12-08T21:42:00.005+07:00

Akhirnya Blogger menambahkan menu untuk mengaktifkan dan menonaktifkan fitur lightbox. Lightbox menurut keterangan Blogger yaitu "Saat diklik, gambar Anda akan terbuka dalam hamparan di bagian atas blog. Jika pos Anda memiliki beberapa gambar, gambar tersebut akan muncul sebagai thumbnail di sepanjang bagian bawah."

Sebenarnya fitur ini sangat bermanfaat bagi para pengguna Blogger yang menerima fasilitas bawaan Blogger, namun bagi para pecinta custom code hal ini sangat mengganggu eksperimen code-code image slideshow. Dengan beberapa alasan Blogger Tune-Up lebih senang untuk menonaktifkan fasilitas Lightbox. Alasan tersebut misal; tampilannya kurang menarik. Namun bagi anda yang tidak ingin pusing dengan permainan kode, Lightbox default Blogger sudah sangat bagus, selain ringan, tidak perlu dilakukan perubahan kode, karena otomatis Lightbox akan mendeteksi file gambar yang terdapat pada postingan blog.

Bagaimana mengaktifkan dan menonaktifkan fitur lighbox bawaan Blogger?

Langkah 1
Login ke Blogger
Langkah 2
Untuk antar muka lama:
Masuk ke "Setelan - Format"

Untuk antar muka baru:
Masuk ke "Buka daftar Entri - Setelan"

Langkah 3
Untuk antar muka lama:
Scroll ke bawah dan cari menu "Tampilkan gambar dengan Lightbox" seperti gambar dibawah ini:

Untuk antar muka baru:
Scroll ke bawah dan cari menu "Setelan", kemudian pilih "Pos dan komentar". Cari menu "Tampilkan gambar dengan Lightbox" seperti gambar dibawah ini:

Langkah 4
Pilih "Ya" untuk mengaktifkan fitur Lightbox dan pilih "Tidak" untuk menonaktifkan fitur Lightbox
Langkah 5
Klik tombol "Simpan Setelan" dan preview blog anda...

Selamat mencoba. Happy Blogging :)

Menambahkan Widget Page Loading Time

2011-12-08T17:38:00.001+07:00

Kali ini kita akan membuat script Page Loading Time. Page Loading Time atau Waktu Pemuatan Halaman merupakan perangkat bantu untuk mengetahui waktu yang dibutuhkan untuk memanggil keseluruhan halaman dari suatu halaman situs atau blog. Dengan widget ini kita bisa mengetahui kecepatan load halaman blog, ini akan memicu pengelola blog untuk mengoptimasi blognya agar lebih cepat. Langkah-langkah untuk mengoptimasi blog akan dibahas pada artikel berikutnya. Satuan yang akan digunakan adalah milidetik jadi jika anda ingin menggunakan satuan waktu menit kira-kira bagaimana ya? Mari kita coba memasang script page loading time.

Memasang Script Page Loading Time

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script type='text/javascript'>//<![CDATA[
var now = new Date();
window.onload = function() {
document.getElementById("waktuload").style.display = "block"; 
document.getElementById("milidetik").innerHTML = (new Date()).getTime() - now.getTime();  
}
//]]></script>

Langkah 5
Cari kode dibawah ini:

<body>

Langkah 6
Sisipkan kode dibawah ini:

id="waktuload"

pada kode langkah 5, sehingga menjadi seperti dibawah ini:

<body id="waktuload">

Langkah 7
Tempatkan kode dibawah ini dimana saja sesuai dengan keinginan anda

Loading time <span id='milidetik'/> ms

Perhatian : Kode diatas akan menampilkan waktu pemuatan halaman yang sedang anda lihat.
Langkah 8
Simpan template dan preview blog anda....

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Membuat Gadget Status Twitter (Plugin Twitter JS)

2011-11-24T20:34:00.005+07:00

Membuat gadget untuk menampilkan status Twitter sebenarnya pernah dibahas pada artikel sebelumnya, namun pada tips trik blog kali ini kita akan mencoba memanfaatkan plugin JavaScript yang dibuat oleh remysharp.com. Dengan menggunakan plugin Twitter JS proses pembuatan widget untuk menampilkan status Twitter menjadi sangat mudah, sederhana dan menarik. Plugin Twitter JS memberikan kesempatan penggunanya untuk membuat style yang sesuai dengan keinginan, lebih menarik serta bukan hanya untuk menampilkan status Twitter kita namun bisa juga digunakan untuk menampilkan status orang lain, atau status kumpulan orang lain yang sudah kita kelompokan.

Demo Gadget Status TwitterKlik disini demo Gadget Status Twitter

Untuk menambahkan gadget status Twitter pada blog dengan menggunakan plugin Twitter JS, maka ada 3 kelompok kode yang akan digunakan, yaitu sebagai berikut:

Kode JavaScript

Kode JavaScript ini digunakan untuk memanggil status dari server Twitter sesuai dengan id penggunanya. Jika anda ingin menggunakan hosting sendiri, silahkan download file JavaScript Twitter JS disini.

Script Dasar

<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>

Settings Option JavaScript

Dibawah ini adalah option untuk mengeset bagian yang akan di tampilkan dari status Twitter. Tidak semua option dibawah ini harus diikut sertakan.

id : nama tampilan anda pada twitter, misal nama tampilan saya "dedehendriono". id juga dapat juga diganti dengan daftar (list) dari status orang-orang yang sudah kita kumpulkan (dalam format user/nama-daftar, misal dedehendriono/motivator) atau dapat juga disini hash tag.
count : jumlah status twitter yang ingin ditampilkan, secara default di isi 1.
clearContents : true/false - jika anda memiliki isi didalam sebuah wadah maka kita bisa memindah bariskannya. Secara default adalah true
enableLinks : true/false - untuk memeriksa tweet yang mengandung link dan membuatnya bisa di klik, termasuk @balasan dan#hashtag. Secara default adalah true.
ignoreReplies : true/false - tetap menampilkan tweet yang dimulai dengan @. Jika permintaan 1 tweet, dan flag ini di set, dibelakang layar ia akan meminta 2 dengan kasus yang pertama dimulai dengan @. Tetapi jika permintaan lebih dari 2 balasan, maka tidak akan ditampilkan.
withFriends : true/false - apakah akan menyertakan tweet dari teman. Secara defaults di set false.
template : HTML template digunakan dalam setiap elemen li. Lihat variabel template dibawah.
prefix : jika tidak menggunakan template, anda dapat menggunakan set ini. Misal kita ingin menambahkan 'Hendriono berkata:'. Disini juga anda bisa saja menambahkan variabel template.
timeout : nilai dalam milidetik sebelum memicu onTimeout. Jika onTimeout diatur, batas waktu default adalah 10 detik.
onTimeout : fungsi untuk panggilan ketika batas waktu tercapai. Konteks diatur ke tweet elemen HTML yang akan dimasukkan ke dalamnya.
onTimeoutCancel : true/false - jika tidak di atur maka tidak ada batasan picu, namun script Twitter akan dapat dipanggil secara lengkap dan tidak ada pembatalan. Untuk menghindari hal ini, ditetapkan onTimeoutCancel = true. Set default adalah true.
newwindow: true/false - jika di set true, semua link didalam tweet (tidak terkecuali) akan dibuka pada sebuah jendela baru. Set defaults adalah false.
callback - fungsi untuk memanggil ketika twitter telah sempurna di render. Tidak ada batasan waktu.

Variabel Template
Semua variabel harus diapit oleh simbol% (lihat contoh di atas atau dibawah).

text - pesan status yang akan ditampilkan
id_str - id dari pesan status (catatan bahwa id telah digunakan sebelumnya, tapi untuk mendapatkan id yang benar, Anda perlu menggunakan id_str)
time - waktu relatif
created_at - waktu baku
user_name - nama asli
user_screen_name - nama tampilan
user_id_str - id pengguna
user_profile_image_url - gambar avatar pengguna sesuai id
user_url - alamat (link url) pengguna sesuai id
user_location - lokasi pengguna sesuai id
user_description - deskripsi pengguna sesuai id

Kode HTML
Kode HTML dibawah ini digunakan sebagai wadah (container) untuk menampilkan status twitter.

<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>

Kode CSS
Kode CSS dibawah ini hanyalah contoh. Anda bisa saja berkreasi menurut imajinasi anda.

#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://lh3.googleusercontent.com/-oZJPL6G6f9Q/TnL_1OfsHpI/AAAAAAAABZI/sJnki43BTE8/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}

Gadget Status Twitter dengan Twitter JS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih gadget "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada kotak "Konten":

<style>
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://lh3.googleusercontent.com/-oZJPL6G6f9Q/TnL_1OfsHpI/AAAAAAAABZI/sJnki43BTE8/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}
</style>
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>

Perhatian! Kode diatas hanyalah contoh, silahkan anda berkreasi dengan Twitter JS
Langkah 5
Klik tombol "SIMPAN" dan preview blog anda...

Selamat mencoba dan semoga berhasil... Happy Blogging :)

Special thanks to remysharp.com for Twitter JS Plugin

Memahami jQuery Show Hide dan Cookie

2011-11-12T17:58:00.001+07:00

Pada artikel sebelumnya Blogger Tune-Up membahas artikel tentang "Tampilkan Sembunyikan Isi dan Form Komentar". Pada artikel kali ini merupakan penjelasan script jQuery yang digunakan pada artikel tersebut. Bertahap untuk memahami fungsi-fungsi jQuery dengan memahami script-script sederhana. Mohon ma'af untuk para master jQuery, silahkan tinggalkan artikel ini jika dianggap tidak bermanfaat. Script jQuery Show Hide sebenarnya pernah dibahas dan disertakan pada beberapa tips trik jQuery, namun demikian tidak ada salahnya kita ungkap kembali mengenai penggunakan script tersebut, serta di tambahkan peranan Cookie dalam mengatur perilaku pengunjung pada terhadap tombol yang tersimpan pada Cookie browser.

Pada artikel kali ini kita akan menggunakan efek jQuery sederhana yaitu efek show, efek hide dan efek slide serta akan melibatkan sebuah plugin jQuery Cookie yang dibuat oleh Klaus Hartl (https://github.com/carhartl) yaitu sebuah plugin jQuery sederhana yang digunakan untuk membaca, menulis dan menghapus cookie dari browser.

Skenario HTML

Dibawah ini adalah kode HTML yang digunakan:

<b:includable id='comments' var='post'>

 <div class='comments' id='comments'>
 <!-- Berisi Kode Komentar dan Form Komentar -->
 </div>
 
 <button class='tombol black' id='bukakeun'>Click here for comment</button>
 <button class='tombol black' id='tutupkeun'>Click here for close</button>
 
</b:includable>

Keterangan Skenario HTML:

<div class='comments' id='comments'>
<!-- Berisi Kode Komentar dan Form Komentar -->
</div>

Kode diatas menggambarkan suatu kotak komentar yang memiliki identitas atau ID comments (id='comments'). comments ini berisi form komentar dan isi komentar yang akan ditampilkan (show) dan disembunyikan (hide) dengan menggunakan tombol yang telah disiapkan dibawahnya.

<button class='tombol black' id='bukakeun'>Click here for comment</button>
<button class='tombol black' id='tutupkeun'>Click here for close</button>

Tombol yang akan digunakan terdiri dari 2 tombol yaitu tombol dengan ID bukakeun (id='bukakeun') dan tombol dengan ID tutupkeun (id='tutupkeun'). Kedua tombol ini akan ditampilkan secara bergantian sesuai dengan keadaan cookie.

Skenario jQuery

Dibawah ini adalah kode jQuery yang digunakan:

<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
 jQuery('#bukakeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({display: 'none'});
  jQuery('#tutupkeun').show();
  jQuery.cookie('komen', 1);
  return false
 });
 jQuery('#tutupkeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({display: 'none'});
  jQuery('#bukakeun').show();
  jQuery.cookie('komen', null);
  return false
 });
 if (jQuery.cookie('komen') == 1) {
  jQuery('#comments').show();
  jQuery('#bukakeun').hide()
 } else {
  jQuery('#comments').hide();
  jQuery('#tutupkeun').hide()
 }
});
//]]></script>

Keterangan Skenario jQuery
Script ini digunakan untuk memanggil (load) framework jQuery, jika anda pernah memasang sebelumnya pada template maka script dibawah ini tidak perlu diikutsertakan. (Baca artikel Perpustakaan jQuery pada Blogger).

<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

Script dibawah ini digunakan untuk memanggil (load) plugin jQuery Cookie yang berfungsi untuk membaca, menulis dan menghapus cookie.

<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>

Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi JavaScript

<script type='text/javascript'>//<![CDATA[

Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi jQuery

jQuery(document).ready(function () {

Jika tombol dengan id bukakeun (id='bukakeun') di klik maka fungsi dimulai...

jQuery('#bukakeun').click(function () {

Wadah (container) dengan id comments (id='comments') akan terbuka dengan efek slideToggle berdurasi lambat

jQuery('#comments').slideToggle('slow');

Tombol dengan id bukakeun (id='bukakeun') akan disembunyikan

jQuery(this).css({display: 'none'});

Tombol dengan id tutupkeun (id='tutupkeun') akan ditampilkan

jQuery('#tutupkeun').show();

Plugin jQuery Cookie akan menuliskan cookie dengan nama 'komen' dengan nilai 1 pada browser menandakan bahwa kita melakukan klik pada tombol dengan id bukakeun (id='bukakeun')

jQuery.cookie('komen', 1);

Fungsi akan diulang jika mengalami kegagalan load

return false

Fungsi tombol dengan id bukakeun (id='bukakeun') ditutup

});

Keterangan : Sampai script diatas maka browser akan selalu menyimpan cookie dengan nama komen hingga waktu tidak tentu. Selama cookie pada browser dengan nama komen tersimpan maka isi komentar dan form komentar akan selalu terbuka walaupun pengunjung menutup browser atau berpindah halaman.

Jika tombol dengan id tutupkeun (id='tutupkeun') di klik maka fungsi dimulai...

jQuery('#tutupkeun').click(function () {

Wadah (container) dengan id comments (id='comments') akan tertutup dengan efek slideToggle berdurasi lambat

jQuery('#comments').slideToggle('slow');

Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikan

jQuery(this).css({display: 'none'});

Tombol dengan id bukakeun (id='bukakeun') akan ditampilkan

jQuery('#bukakeun').show();

Plugin jQuery Cookie akan menghapus cookie dengan nama 'komen' dengan nilai null (kosong) pada browser menandakan bahwa kita melakukan klik pada tombol dengan id tutupkeun (id='tutupkeun')

jQuery.cookie('komen', null);

Fungsi akan diulang jika mengalami kegagalan load

return false

Fungsi tombol dengan id tutupkeun (id='tutupkeun') ditutup

});

Keterangan : Sampai script diatas maka browser sudah menghapus cookie dengan nama komen hingga waktu tidak tentu. Jika cookie pada browser dengan nama komen sudah dihapus maka isi komentar dan form komentar akan selalu tertutup walaupun pengunjung menutup browser atau berpindah halaman.

Kumpulan script dibawah ini digunakan untuk memeriksa keberadaan cookie pada Browser, apakah tersedia atau tidak.
Jika jQuery Cookie menemukan cookie pada browser dengan nama komen dan tersedia maka...

if (jQuery.cookie('komen') == 1) {

Wadah (container) dengan id comments (id='comments') akan terbuka dan...

jQuery('#comments').show();

Tombol dengan id bukakeun (id='bukakeun') akan disembunyikan

jQuery('#bukakeun').hide()

Jika browser tidak memiliki cookie dengan nama komen maka...

} else {

Wadah (container) dengan id comments (id='comments') akan tertutup dan...

jQuery('#comments').hide();

Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikan

jQuery('#tutupkeun').hide()

Fungsi periksa cookie ditutup

Pendeklarasian fungsi jQuery di tutup

});

Pendeklarasian fungsi JavaScript di tutup

//]]></script>

Mudah-mudahan artikel diatas bermanfaat dan silahkan dikembangkan sesuai dengan imajinasi anda. Happy Blogging... :)

Catatan kaki:

Tampilkan Sembunyikan Isi dan Form Komentar

2011-11-11T17:12:00.005+07:00

Kembali lagi menulis setelah sekian lama bersemedi. Kali ini Blogger Tune-Up akan mengawali artikel terbaru di Blog ini dengan tips dan trik jQuery sederhana. Sebenarnya sudah banyak para Blogger yang membahas hal ini, namun sebagian besar menggunakan form komentar dari pihak ketiga seperti DisqUs atau IntenseDebate. Sedangkan form bawaan Blogger dinonaktifkan hal tersebut dengan beberapa alasan diantaranya form komentar bawaan Blogger tidak valid XHTML dan menggunakan metode iframe sehingga kurang fleksibel dalam memodifikasi tampilannya. Terlepas dari alasan-alasan tersebut, Blogger Tune-Up tetap akan membahas cara menyembunyikan dan menampilkan isi komentar dan form komentar bawaan Blogger dengan satu tombol yang terekam melalui jQuery Cookie. jQuery Cookie digunakan untuk merekam tingkah laku pengunjung blog terhadap tombol show/hide comment. Ketika pengunjung me-load halaman pertama kalinya dan cookie browser kosong (null) maka isi komentar dan kotak komentar akan disembunyikan, sebuah tombol "Show" akan ditampilkan.

Ketika tombol "Show" ditampilkan maka isi komentar dan form komentar akan ditampilkan, sebuah tombol "Hide" akan ditampilkan. Pada saat pengunjung meng-klik tombol "Show" maka browser akan menyimpan cookie, sehingga ketika pengunjung berulang-ulang kali berpindah halaman atau bahkan keluar dari browser dan kemudian kembali lagi mengunjungi blog maka isi komentar dan form komentar akan tetap terbuka. Namun ketika pengunjung mengklik tombol "Hide" maka isi komentar dan form komentar akan disembunyikan dan cookie pada browser akan dihapus. Hal ini karena jQuery Cookie merekam dan menyimpan tingkah laku pengunjung terhadap tombol "Show Hide Comment". Cara ini cocok bagi Blogger yang menggunakan metode Captcha untuk mengurangi spam pada komentar.

Show Hide Comment FormKlik disini demo Show Hide Comment Form

Menambahkan Tombol Tampilkan Sembunyikan Isi dan Form Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:

.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top,  #444,  #000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top,  #000,  #444);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode, plugin dan framework jQuery dibawah ini diatas kode pada langkah 6:

<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
 jQuery('#bukakeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#tutupkeun').show();
  jQuery.cookie('komen', 1);
  return false
 });
 jQuery('#tutupkeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#bukakeun').show();
  jQuery.cookie('komen', null);
  return false
 });
 if (jQuery.cookie('komen') == 1) {
  jQuery('#comments').show();
  jQuery('#bukakeun').hide()
 } else {
  jQuery('#comments').hide();
  jQuery('#tutupkeun').hide()
 }
});
//]]></script>

Langkah 8
Cari kode dibawah ini:

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Langkah 9
Masukan (copy paste) kode XHMTL dibawah ini diatas kode pada langkah 8:

<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>

Sehingga menjadi seperti ini:

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>
</b:includable>

Langkah 10
Simpan template dan preview blog anda...

Keterangan:

Jika anda sudah pernah memasang framework jQuery (pada langkah 7 baris 1) maka framework jQuery tidak perlu diikutsertakan...

Selamat mencoba semoga berhasil... Happy Blogging... :)

Simple jQuery Twitter Count Follower

2011-09-05T21:47:00.008+07:00

Bismilllah. Alhamdulillah. Ketika kita mengunjungi suatu website kadang kita menemukan penghitungan (counter) jumlah follower Twitter. Hal ini cukup unik juga untuk kita pasangkan pada blog, selain untuk pelengkap blog, juga bisa kita gunakan sebagai pemberitahuan kepada pengunjung tentang jumlah pengikut blog kita di Twitter. Hal yang sederhana namun menarik perhatian. Bagaimana semua itu dibuat? Kali ini kita tetap menggunakan bantuan jQuery untuk menampilkan jumlah pengikut (follower) Twitter. Let's less write do more...

Simple jQuery Twitter Count FollowerKlik disini demo Simple jQuery Twitter Count Follower

Integrasi Simple jQuery Twitter Count Follower pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$(function() {
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: { screen_name: 'NAMA ANDA' },
dataType: 'jsonp',
success: function(data) {
$('#followers').html(data.followers_count.
toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ","));
}
});
});
});
//]]></script>

Perhatian! Jika anda pernah memasang framework jQuery maka kode pada Langkah 4 baris 1 tidak perlu diikutsertakan
Langkah 5
Simpan Template kemudian masuk ke "Rancangan - Elemen Laman"

Integrasi Simple jQuery Twitter Count Follower pada Widget/Gadget

Langkah 6
Tambahkan Gadget baru dengan type "HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini pada bagian konten:

<span id="followers"></span>

Langkah 8
Simpan gadget dan preview blog anda

Keterangan:

Ganti NAMA ANDA sesuai dengan akun twitter anda (lihat Langkah 4 Baris 6)...
Silahkan anda berkreasi menurut imaginasi anda...

Selamat mencoba dan berkarya... Happy Blogging :)

jQuery Anti Adblock Versi 2.00

2011-09-04T22:30:00.012+07:00

Bismillah. Alhamdulillah. Artikel kali ini merupakan update atau perbaikan jQuery Anti Adblock Versi 1.00 yang terkesan rumit dan terlalu banyak script. Pada jQuery Anti Adblock Versi 2.00 ini dilakukan penyederhanaan sehingga proses integrasi pada Blogger lebih mudah dan lebih cepat reaksinya terhadap tingkah laku pengunjung. Mengenai apa jQuery Anti Adblock silahkan merujuk pada artikel sebelumnya.

Demo jQuery Anti AdblockAktifkan Adblock untuk melihat Demo jQuery Anti Adblock

Update jQuery Anti Adblock Versi 2.00 (04 September 2011)

Script ditelatakan pada Hosting Google Code sehingga lebih sederhana
File CSS bisa diarahkan pada hosting sendiri

Integrasi jQuery Anti Adblock pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</body>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

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

<script type="text/javascript">//<![CDATA[

var linkcss = "http://www.onlineleaf.com/savetheenvironment.css" //ubah URL file CSS sesuai letak hosting file CSS

var adminblog = "[ Nama Admin]"; //ubah Nama Admin sesuai keinginan

//]]></script>

<script src='http://hens-pusat-buku.googlecode.com/svn/trunk/jqantiadsblock.js' type='text/javascript'/>

Langkah 5
Simpan template dan preview blog

Integrasi jQuery Anti Adblock pada Iklan

Jika kita sudah memasang jQuery Anti Adblock pada blog maka hal tersebut belum memberikan efek pada blog kita karena iklan kita belum memiliki identitas yang sesuai dengan jQuery Anti Adblock. Kita harus memberikan identitas pada kode-kode iklan yang kita pasang pada blog agar jQuery Anti Adblock mampu membacanya dan kemudian memberikan tindakan. Setiap kode iklan yang kita pasang pada blog haruslah ditempatkan diantara tag dibawah ini:

<div class="adsantilok">

<!-- Simpan Iklan Disini -->

</div>

Jika sudah demikian maka barulah jQuery Anti Adblock mampu bekerja dengan baik, silahkan dicoba untuk mem-preview blog anda dan aktifkan perangkat lunak pemblokir iklan dan lihatlah efek zoom dari jQuery Anti Adblock. SEMPURNA!!!!!!!!!!!!

Perhatian :

Jika pernah memasang framework jQuery maka kode pada langkah 4 baris 1 tidak usah diikut sertakan

jQuery Auto Resize & Image Frame

2011-07-17T16:49:00.009+07:00

Bismillah. Alhamdulillah. Berawal dari malasnya melakukan pengeditan style gambar yang disertakan pada Blogger, maka Blogger Tune-Up pun melakukan manipulasi style pada gambar yang diberikan secara default oleh Blogger. Pada saat kita mengunggah suatu file gambar pada artikel blog maka secara default Blogger memberikan style otomatis berupa lebar (width), tinggi (height), dan alamat thumbnail gambar dengan resolusi rendah. Hal ini terkadang membuat artikel justru kurang menarik dilihat dan kurang nyaman jika gambar yang ditampilkan memiliki kualitas rendah dengan ukuran tidak sesuai dengan lebar artikel. Berawal dari hal inilah kemudian Blogger Tune-Up membuat script jQuery Auto Resize & Image Frame untuk menyempurnakan style yang diberikan oleh Blogger, walaupun sebenarnya script ini bisa dipergunakan untuk pengguna non Blogger.

Demo Auto Resize & Image FrameKlik disini untuk melihat Demo jQuery Auto Resize & Image Frame

Fasilitas jQuery Auto Resize & Image Frame

Otomatis mengganti link gambar berkualitas rendah (thumbnail image) dengan link gambar berkualitas tinggi sehingga gambar yang ditampilkan merupakan gambar berkualitas aslinya
Ditambahkan frame (bingkai) otomatis pada gambar yang ditampilkan sehingga lebih menarik
Melindungi link asli gambar dengan teknik overlay sehingga cocok bagi yang ingin melindungi gambarnya dari pembajakan
Ukuran gambar yang ditampilkan akan selalu dalam ukuran tetap dengan lebar 572px dan tinggi 290px

Kekurangan jQuery Auto Resize & Image Frame

Ukuran gambar tidak boleh kurang dari 572px x 290px agar frame (bingkai terisi penuh)
Frame (bingkai) kaku, ukurannya tidak dapat berubah sesuai besar gambar sehingga bagi para blogger yang memiliki lebar area artikel kurang dari 570 bingkai ini akan keluar dari area artikel
Bug berikutnya belum diketahui, laporkan bug pada komentar

Integrasi jQuery Auto Resize & Image Frame pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Rancangan - Edit HTML
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#boxoverlay {
 margin:10px 0;
 padding:0;
 position:relative;
 height:290px;
 z-index:200;
}
#boxoverlay div {
 width:572px;
 height:290px;
 border:1px solid #4f4f4f;
 overflow:hidden;
 left:8px;
 position:absolute;
 top:0;
 z-index:209;
}
#boxoverlay span {
 position:absolute;
 top:-8px;
 left:0;
 z-index:210;
}
#boxoverlay img {
 padding:0;
 margin:0;
 border:none;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah diatas kode pada langkah 5:

<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
   //remove style and replace image with big resolution for blogger user
   $('a.boxoverlay img').removeAttr('style').each(function () {
       var img_src = $(this).attr('src').replace('s400', 's800');
       $(this).attr('src', img_src);
   });
 //auto insert image box overlay
   $('a.boxoverlay').each(function () {
       $(this).wrap('<div id="boxoverlay"></div>');
       $(this).parent().append('<span><img src="https://lh4.googleusercontent.com/-5Xi2yovn8hw/TiKoCKjBi6I/AAAAAAAABOo/BogbisWIruw/s800/overlay-image.png" alt="" /></span>');
       $(this).wrap('<div></div>');
   });
});
//]]></script>

Perhatian! Pastikan template anda sudah terintegrasi framework jQuery
Langkah 7
Simpan Template

Menyisipkan jQuery Auto Resize & Image Frame pada Gambar Artikel

Langkah 8
Buatlah sebuah artikel kemudian upload sebuah gambar pada artikel
Langkah 9
Pindahkan editor artikel pada mode Edit/HTML
Langkah 10
Cari kode gambar, misal seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://lh5.googleusercontent.com/-8bCcELorTJw/TiKoIcqVMtI/AAAAAAAABOs/LmqRg65DFbg/s800/content_pic1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 700px; height: 320px;" src="https://lh5.googleusercontent.com/-8bCcELorTJw/TiKoIcqVMtI/AAAAAAAABOs/LmqRg65DFbg/s800/content_pic1.jpg" border="0" alt="" />
</a>

Langkah 11
Sisipkan kode pada gambar, menjadi seperti dibawah ini (kode sisipan yang diblok):

<a class="boxoverlay" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://lh5.googleusercontent.com/-8bCcELorTJw/TiKoIcqVMtI/AAAAAAAABOs/LmqRg65DFbg/s800/content_pic1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 700px; height: 320px;" src="https://lh5.googleusercontent.com/-8bCcELorTJw/TiKoIcqVMtI/AAAAAAAABOs/LmqRg65DFbg/s800/content_pic1.jpg" border="0" alt="" />
</a>

Langkah 12
Terbitkan artikel

Download Auto Resize & Image FrameKlik disini untuk mengunduh jQuery Auto Resize & Image Frame

Selamat mencoba dan semoga berhasil...

10 Website Pengguna JavaScript Mengagumkan

2011-07-15T15:18:00.007+07:00

Bismillah. Alhamdulillah. Sejak diperkenalkannya framework JavaScript seperti jQuery, Mootools, Prototype dan lain sebagainya, banyak sekali para web desainer yang beralih dalam menyusun website-nya dari konten berbasis flash menjadi konten berbasis JavaSript. Efek-efek yang dibuat pada website sudah hampir meninggalkan basis flash, mereka berbondong-bondong beralih ke basis JavaScript, selain dapat memperingan load website, juga proses penulisan script yang lebih mudah dari pada menggunakan flash namun tentunya dengan hasil akhir yang tetap memukau.

Dibawah ini adalah kumpulan website yang Blogger Tune-Up bookmark sebagai bahan referensi saat kehilangan ide untuk membuat berbagai efek-efek JavaScript. Website-website ini menggunakan framework yang sangat mudah dipelajari dan sebagian merupakan plugin framework yang murni ditulis sendiri. Selain sebagai referensi juga sebagai pembangkit motivasi diri disaat mengalami kejenuhan coding script.

Krieasi - http://www.kriesi.at/

Aviary - http://aviary.com/

Toolani - http://www.toolani.de/

Podcasttuneup – http://www.podcast-tuneup.com/

We are Sofa - http://www.madebysofa.com/

Monofactor - http://www.monofactor.com/

Alex Buga - http://www.alexbuga.com/

Coda - http://www.panic.com/coda/

Kobe - http://www.arcinspirations.com/kobe/

Dibusoft mmdv - http://www.dibusoft.com/

jQuery Draggable Popup Window

2011-07-13T15:25:00.006+07:00

Bismillah. Alhamdulillah. Dari judul artikelnya saja sudah bisa di tebak, bahwa artikel kali ini akan membahas popup window. Popup window sering kali dianalogikan sebagai cara yang kurang disukai oleh para visitor blog karena popup window yang keluar pada suatu halaman kadang kala membuyarkan konsentrasi mereka saat sedang sibuk mencari-cari sesuatu yang dibutuhkan. Popup Window memang salah satu cara para blogger untuk bisa menyampaikan sesuatu yang di anggap cukup penting atau sekedar untuk menampilkan iklan sebagai sarana untuk menambah penghasilan. Bahkan ada beberapa blogger yang menyamarkan popup window-nya dan ada pula yang menggunakan metode double click to close (dua kali klik untuk menutup) popup window. Terserah para pemilik blog akan menggunakan metode apa, dan kali ini Blogger Tune-Up akan mencoba memberikan satu widget popup window yang bisa di geser.

Fasilitas Draggable Popup Window

Click & Drag yang berfungsi untuk menggeser jendela
Min & Max yang berfungsi untuk menampilkan (maximize) atau melipat (minimize) isi popup window
Close untuk menutup popup window

Kelebihan Draggable Popup Window

Kompatibel dengan berbagai browser
Tersusun dari kode-kode yang sangat kecil namun sangat fungsional
Mudah digunakan
Open Source
Desain yang elegan (CSS3) dengan efek yang indah (jQuery)

Kekurangan Draggable Popup Window

Masih melibatkan tag body
Tidak menggunakan cokie sehingga popup window akan keluar disetiap load halaman
Script terbagi dua bagian yaitu JavaScript murni dan script jQuery
Dan bug-bug lainnya masih di telusuri
Posisi popup window tidak tetap

Demo Draggable Popup WindowKlik disini untuk melihat demo Draggable Popup Window

Kode CSS Draggable Popup Window

Jika anda pengguna Blogger, tempatkan kode CSS ini diatas tag ]]</b:skin>

.ads_popup_window{
left:300px;
top:100px;
width:500px;
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px; 
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, Arial,Helvetica,sans-serif;
text-shadow:0 1px 0 #FFFFFF;
}
.popup_heading{
float:left;
width:480px;
cursor:move;
position:relative;
border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
background: #ff0000;
background: -moz-linear-gradient(center top , red, #454545) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 0, 0, .9)),to(rgba(69, 69, 69, .9)));
border: 1px solid #494949;
color: #FFF;
padding: 4px 2%;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
font-weight: bold;
}
.ads_buttons{
position:absolute;
left:10px;
top:2px;
cursor: pointer;
}
.drag_area{
float:right;
width:92%;
text-align: right;
}
.ads_content{
float:left;
width:96%;
font-size:12px;
padding:2%;
}
.ads_content img {
height:100px;
width:480px;
margin : 4px 0;
}
.ads_buttons {
padding-top: 1px;
}
.left{float:left}
p{float:left; width:100%; padding-left:10px; line-height:18px;}
ul li{float:left; width:95%; padding:5px 0 5px 30px; background:url(images/arrow_small.gif) no-repeat 15px 9px; list-style:none}
ul li a{color:#666; text-decoration:none;}
ul li a:hover{color:#09f; text-decoration:underline}

Kode HTML Draggable Popup Window

Bagi pengguna Blogger, kode HTML ini bisa saja ditempatkan pada Template atau di Gadget HTML/JavaScript, namun harus diperhatikan modifikasi kode penting dibawah ini:

Cari tag <body> lalu tambahkan kode seperti dibawah ini:

<body onmousemove="dragWin(event, 'popupWin')">

Lalu tambahkan kode dibawah ini dibawah kode diatas atau didalam Gadget HTML/JavaScript:

<div class="ads_popup_window" id="popupWin">
<div class="popup_heading">
<div class="drag_area" onmousedown="mouse_down(event, 'popupWin')" onmouseup="mouse_up(event,'popupWin')">Klik &#38; Drag</div>
<div class="ads_buttons"><img src="images/home.png" class="ads_close" alt="" />&nbsp;<img src="images/up.png" alt="" id="minWin" /><img src="images/down.png" style="display:none" alt="" id="maxWin" /></div>
</div>
<div class="ads_content">

<!-- Ganti dengan kode Iklan atau informasi disini -->

</div>
<a style="text-decoration: none !important; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://modification-blog.blogspot.com/" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blogger</span> <span style="color: #f00;">TuneUp</span></a>
</div>

Kode JavaScript Draggable Popup Window

Tempatkan kode JavaScript dibawah ini diantara tag <head></head> :

<script type='text/javascript'>//<![CDATA[
var dragElement = false;
var xDif = 0;
var yDif = 0;

function mouse_down(event, elementName) {
   var leftDim = document.getElementById(elementName).offsetLeft;
   var topDim = document.getElementById(elementName).offsetTop;
   dragElement = true;
   xDif = event.clientX - leftDim;
   yDif = event.clientY - topDim;
}

function dragWin(event, elementName) {
   if (dragElement == true) {
       document.getElementById(elementName).style.left = event.clientX - xDif + 'px';
       document.getElementById(elementName).style.top = event.clientY - yDif + 'px';
   }
}

function mouse_up(event, elementName) {
   dragElement = false;
   document.getElementById(elementName).style.left = event.clientX - xDif + 'px';
   document.getElementById(elementName).style.top = event.clientY - yDif + 'px';

}

$(document).ready(function() {
   $(".ads_close").click(function () {
       $("#popupWin").hide(200);
   });
   $("#showWin").click(function () {
       $("#popupWin").fadeIn('fast');
   });
   $("#minWin").click(function () {
       $(".ads_content").slideUp("slow");
       $(this).hide();
       $("#maxWin").show();
   });
   $("#maxWin").click(function () {
       $(".ads_content").slideDown("fast");
       $(this).hide();
       $("#minWin").show();
   });
});
//]]></script>

Source Code Draggable Popup WindowKlik disini untuk mengunduh source code Draggable Popup Window

Keterangan:

Jangan lupa untuk menambahkan framework jQuery agar efek Draggable Popup Window bisa berjalan dengan baik.
Mohon ma'af tips trik kali ini tidak spesifik dan jelas untuk para pengguna Blogger karena memang script yang dibuat bisa diterapkan untuk berbagai platform website.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Maksimalkan Kerja jQuery dengan Google API Loader

2011-07-12T16:21:00.006+07:00

Bismillah. Alhamdulillah... (bisa kembali menulis). Pada artikel kali ini kita akan belajar memaksimalkan kinerja jQuery dengan memanfaatkan perpustakaan yang telah disediakan oleh Google atau di kenal juga dengan sebutan Google Libraries API. Sebelum membahas lebih jauh tentang perpustakaan Google API mari kita berkenalan dulu dengan API dan Google Libraries API.

Apa itu API?

API merupakan kependekan dari Application Programming Interface atau Antarmuka Pemrograman Aplikasi yang merupakan seperangkat aturan tertentu dan spesifik yang mengikuti program perangkat lunak untuk saling berkomunikasi satu sama lain. API berfungsi sebagai antar muka (interface) antara perangkat lunak yang berbeda dan memfasilitasi interaksi mereka, hal ini mirip dengan cara antar muka pengguna (user interface) yang mampu memfasilitasi interaksi antara manusia dengan komputer. API dapat dibuat untuk aplikasi, perpustakaan, sistem operasi dan lain sebagainya, sebagai cara untuk mendefinisikan "kosakata" dan konvensi permintaan resource (sumber daya). Disini termasuk spesifikasi untuk routines (rutinitas), data structures (struktur data), object classes (kelas objek), dan protocol (protokol) yang digunakan untuk berkomunikasi antara program pengguna (consumer program) dan program pelaksana (implementer program) API. (sumber: wikipedia.org)

Apa Google Libraries API?

Perpustakaan Google API atau Google Libraries API adalah sebuah jaringan distribusi konten (Content Distribution Network - CDN) dan arsitektur pemanggilan dari perpustakaan JavaScript lisensi terbuka (open-source JavaScript libraries) yang paling populer dan banyak digunakan di dunia. Dengan menggunakan metode Google API Loader google.load() ini akan mampu meningkatkan kecepatan aplikasi yang kita buat dengan memberikan akses kedalam daftar terbaik yang paling populer. Perpustakaan JavaScript lisensi terbuka yang tersedia diantaranya:

Google bekerja bersama-sama dengan para pemegang peranan penting didalam setiap pemegang usaha perpustakaan terkait dan menerima versi stabil terbaru yang telah dirilis. Setelah para pemilik perpustakaan tersebut memberikan salinannya maka Google berkomitmen untuk menyimpannya dan merilis pada hosting miliknya.

Perpustakaan API menerima berbagai keluhan dari para pengembang JavaScript ketika menggunakan koleksi perpustakaan yang tersedia. Google mempermudah kita dengan menyediakan host perpustakaan, pengaturan cache header yang benar, dan dengan tetap memperhatikan berbagai perbaikan bug terbaru. (sumber: Google Libraries API)

Google API Loader

Cara ini sebenarnya pernah dibahas pada artikel "Perpustakaan jQuery pada Blogger" tentang penggunaan jQuery Google API Load. Untuk dapat menggunakan berbagai script code jQuery maka terlebih dahulu website harus diintegrasikan dengan framework jQuery. Untuk mengintegrasikannya bisa dengan berbagai cara seperti yang pernah dibahas pada artikel diatas, namun pada kasus kali ini kita akan mencoba mengintegrasikan framework jQuery dengan metode Google API Load seperti dibawah ini:

<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
google.load('jquery', '1.4.2');
//]]></script>

Letakan kode diatas diantara tag <head></head>

Maksimalkan Kerja jQuery

Mulai keinti materi yang lumayan membuat pusing. Mungkin persiapkan dulu obat sakit kepala supaya agak ringan dalam berfikir. (hehehehe...)

Skenario I

Skenario-nya begini, bahwa kita akan membuat tiga buah efek yang berbeda dalam setiap event-nya. Misal; satu efek berpengaruh pada menu navigasi, satu efek berpengaruh pada gambar dan satu efek lagi berpengaruh pada tombol. Maka saya pun menuliskan script jQuery-nya seperti dibawah ini:

Script jQuery untuk memberikan efek pada gambar:

<script type='text/javascript'>
$(document).ready(function() {
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
}); 
});
</script>

Script jQuery untuk memberikan efek pada menu navigasi:

<script type='text/javascript'>
$(document).ready(function() {
$('ul#navi li').hover(function() {
$(this).css({ 'background' : 'transparent'});
$(this).find('span').show();
}, function() {
$(this).css({ 'background' : 'none'});
$(this).find('span').hide();
});
});
</script>

Script jQuery untuk memberikan efek pada tombol:

<script type='text/javascript'>
$(document).ready(function () {
$('.drop-btn').click(function () {
$('.drop').slideToggle('medium');
});
});
</script>

Ketiga kelompok script code diatas semuanya ditulis dengan benar dan dapat berjalan normal pada website. Namun, logikanya begini; seandainya diumpamakan bahwa kelompok script diatas adalah muatan yang harus di antar sampai sebuah tempat (tempat=framework jQuery). Kemudian kita menggunakan sebuah kendaraan (browser) sebagai alat transportasinya maka kendaraan ini akan bolak-balik sebanyak enam kali (3 kali berangkat dan 3 kali pulang) untuk mengantar ketiga kelompok script tersebut sampai tujuan. Jika dalam satu perjalanan dibutuhkan 1 detik maka kendaraan tersebut membutuhkan 6 detik waktu yang diperlukan untuk memuat seluruh script dari ketiga kelompok tersebut.

Skenario II

Karena dibutuhkan waktu yang cukup banyak untuk memuat keseluruhan muatan (script) agar sampai tujuan (framework jQuery) maka saya pun akan mencoba memadatkan ketiga kelompok script tersebut menjadi satu muatan, maka script akan menjadi seperti dibawah ini:

<script type='text/javascript'>
$(document).ready(function() {
$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
}, function(){
$(this).fadeTo('slow',0.5);
}); 

$('ul#navi li').hover(function() {
$(this).css({ 'background' : 'transparent'});
$(this).find('span').show();
}, function() {
$(this).css({ 'background' : 'none'});
$(this).find('span').hide();
});

$('.drop-btn').click(function () {
$('.drop').slideToggle('medium');
});
});
</script>

Setelah kita mengumpulkan ketiga kelompok script diatas menjadi satu muatan maka kendaraan transportasi (browser) hanya akan mengirimkan script menuju ke tujuan (framework jQuery) hanya dengan satu kali pengiriman. Lebih cepat bukan? Sampai disini sebenarnya kita telah mampu membuat sekumpulan script jQuery yang lebih cepat di akses dari pada script sebelumnya dan browser pun hanya cukup satu kali mengirimkan script yang telah kita buat.

Skenario III

Adakah cara yang lebih cepat lagi untuk "mengantar" script-script jQuery yang kita buat menuju framework jQuery? Jawabannya "BISA". Metode yang digunakan bukan lagi "mengantar" namun "menjemput". Mengantar adalah pekerjaan yang cukup melelahkan bagi browser bahkan terkadang tidak semua script yang telah dibuat mampu diantar ke tujuan dengan baik, akibatnya akan ada script yang tidak mampu bekerja dengan baik pada website kita. (Pernahkah anda menemukan kasus seperti itu?) Semua script telah ditulis dengan baik atau bahkan hasil dari copy paste dari website lain yang sudah berjalan dengan baik, namun ketika script itu kita terapkan pada website kita, script tidak mampu bekerja dengan baik. Salah satu masalahnya adalah ketidaksempurnaan browser dalam "mengantarkan" script-script tersebut sampai ketujuan. Lalu bagaimana dengan "menjemput"? Kata menjemput bisa berarti bahwa pekerjaan dibagi menjadi dua, script-script yang ditulis pada website bukan lagi tugas browser untuk menyampaikannya ke framework, browser hanya bertugas menampilkan hasil dari proses eksekusi script-script yang ditulis. Lalu siapa yang "menjemput" script-script yang telah ditulis? Itu menjadi tugas Google API Loader.

Syntax dari Google API Loader untuk "menjemput" script-script jQuery mempunyai aturan spesifik yang wajib ditulis, yaitu:

google.setOnLoadCallback(function(){
//script jQuery disini
});

Script diatas digunakan untuk menggantikan fungsi script normal jQuery dibawah ini:

$(document).ready(function() {
//script jQuery disini
});

Sehingga penulisan script jQuery yang menggunakan Google API Loader menjadi seperti contoh dibawah ini:

google.setOnLoadCallback(function(){

$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
}); 

$('ul#nav li').hover(function(){
$(this).css({'background':'transparent'});
$(this).find('span').show();
},function(){
$(this).css({'background':'none'});
});

$('.drop-btn').click(function(){
$('.drop').slideToggle('medium');
});

});

Dan total penulisan script jQuery dari mulai framework jQuery sampai dengan script jQuery Google API Loader akan menjadi seperti dibawah ini:

<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
google.load('jquery', '1.4.2');

google.setOnLoadCallback(function(){

$('.post img').fadeTo('slow',0.5);
$('.post img').hover(function(){
$(this).fadeTo('slow',1.0);
},function(){
$(this).fadeTo('slow',0.5);
}); 

$('ul#nav li').hover(function(){
$(this).css({'background':'transparent'});
$(this).find('span').show();
},function(){
$(this).css({'background':'none'});
});

$('.drop-btn').click(function(){
$('.drop').slideToggle('medium');
});

});
//]]></script>

Kerja sebenarnya tidaklah seperti pada penjelasan skenario II dan skenario II, namun ini hanya bahasa penyampaian yang disederhanakan untuk memahami bagaimana script-script tersebut di eksekusi. Ma'af bagi para master jQuery yang merasa keberatan dengan perumpamaan diatas. Pembahasan teknis mendalam sebenarnya harus menyentuh debug dan debuger namun hal itu memang cukup rumit. Mungkin lain waktu Blogger Tune-Up akan mencoba menyuguhkan bahasan yang lebih teknis.

Tugas buat para sahabat blogger, apakah anda menemukan kejanggalan pada script diatas? Bandingkanlah script antara Skenario II dan Skenario III. Jika ditemukan kejanggalan script, itulah bug (kesalahan script) yang ditemukan pada saat sudah menggunakan Google API Loader.
Mari belajar dan berdiskusi. Happy Blogging :)

jQuery Easy Organic Blogger Tabs

2011-06-27T07:23:00.003+07:00

Bismillah. Alhamdulillah. Masih ingat dengan artikel "Memahami dan Membuat jQuery Slick Tab" yang pernah ditulis? Berhasilkah atau justru membuat widget blog menjadi tambah kacau? Artikel kali ini merupakan pengembangan dari tips trik artikel tersebut, yang scriptnya dibuat lebih sederhana dan lebih mudah untuk diterapkan pada blog. Seperti biasa, Blogger Tune-Up tidak lagi meng-inject-kan embel-embel link menuju ke blog ini, semua saya kembalikan kepada kesadaran para blogger "republish" untuk bisa saling menghargai antar blogger, atau masih tetap bangga dengan hasil karya orang lain yang kemudian diklaim menjadi hasil karya sendiri.

Script asli jQuery Easy Organic Blogger Tabs diambil dari plugin "Organic Tabs" buatan CSS Tricks. Walaupun sebenarnya tidak semua scriptnya digunakan, hanya beberapa baris kode yang digunakan dan dimodifiaksi, sehingga tampilannya tidak sehalus Organic Tabs yang sebenarnya. Efek "autoheight" dari Organic Tabs tidak diikut sertakan karena terkendala kegagalan kerja saat di coba pada sidebar tab sehingga yang tersisa hanya efek "fade" saja. Penasaran?

Kelebihan jQuery Easy Organic Blogger Tabs

Proses pemasangan pada widget/sidebar sangat mudah tanpa perlu modifikasi kode template
Tidak diperlukan keahlian khusus untuk memasang jQuery Easy Organic Blogger Tabs karena proses pemasangan dilakukan pada "Rancangan - Elemen Laman"
Lebih ringan dari jenis Blogger Tabs sebelumnya
Penambahan dan pengurangan tabs sangatlah mudah hanya perlu mengubah angka
Cari sendiri kelebihannya ya?

Kekurangan jQuery Easy Organic Blogger Tabs

Efek autoheight bawaan Organics Tabs belum bisa diintegrasikan sehingga membuat hasil akhir tab kurang mantap (seperti sayur tanpa garam)
Ditunggu koreksinya...

Jika anda membutuhkan source code jQuery Easy Organic Blogger Tabs lengkap tanpa di kompres, silahkan tunggu beberapa hari lagi, karena blog khusus source code yang pernah dibuat Blogger Tune-Up akan diterbitkan dengan lisensi terbuka dan bebas (Open Source - GNU Public License)

Membuat jQuery Easy Organic Blogger Tabs pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 4
Masukan (copypaste) kode dibawah ini pada bagian konten:

<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/3558628/jQsimpletabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

Langkah 5
Simpan widget tanpa judul dan preview blog anda...

Keterangan:

Widget yang berisi kode pada langkah 4 harus ditempatkan diatas widget yang akan dibuat menjadi organic tab
Untuk mengatur berbagai hal yang berhubungan dengan tampilan jQuery Easy Organic Blogger Tabs silahkan edit atau modifikasi kode-kode CSS-nya
Framework jQuery tidak perlu dipasang jika anda pernah memasang pada template blog anda (lihat langkah 4 baris 8)
Untuk mengatur jumlah tabs ubah nilai 3 pada kode organictabs: 3 (langkah 4 baris 12). Angka 3 berarti kita akan memasukan 3 widget kedalam organic tabs

Selamat mencoba dan semoga berhasil... Happy blogging :)

Autolink Mini MP3 Player for Blogger

2011-06-18T03:33:00.011+07:00

Bismillah. Alhamdulillah. Selesai juga coding JavaScript untuk fasilitas "Autolink Mini MP3 Player" yang diperuntukan bagi pengguna setia Blogger. Script ini tidak pernah di coba diselain Blogger, jadi bagi mereka yang menggunakan platform lain, mohon ma'af sekali. Tapi tidak ada salahnya dicoba, mungkin saja bisa digunakan. Script Autolink Mini MP3 Player sangat cocok digunakan bagi mereka yang suka berbagi file-file musik MP3. Script ini sebenarnya penyederhanaan dari MP3 Player yang pernah dibahas pada artikel sebelumnya. Karena script yang sebelumnya masuk dalam kategori rumit dan ukuran file yang besar membuat beban untuk loading blog menjadi bertambah, ujung-ujungnya blog menjadi agak lambat. Untuk itulah code JavaScript-nya dikurangi dan diperbaiki beberapa kodenya agar menjadi lebih sederhana dan lebih ringan untuk digunakan pada blog sehingga tidak menambah berat loading blog. Makanya nama fasilitas MP3 Player ini adalah Autolink Mini MP3 Player for Blogger.

Demo Autolink Mini MP3 PlayerKlik disini untuk melihat Demo Autolink Mini MP3 Player

Tersedia MP3 Player Versi 2.0Klik disini untuk mempelajari MP3 Music Player Versi 2.0

Kelebihan Autolink Mini MP3 Player

Autolink artinya script ini secara otomatis akan mendeteksi file-file MP3 yang terdapat pada halaman blog yang sedang dibuka
Tidak diperlukan kemampuan khusus untuk menambahkan MP3 player, cukup masukan link file MP3-nya saja pada artikel
Otomatis menambahkan player pada file MP3 yang terdapat pada halaman blog tanpa harus mengotak-atik kode sumber
Ukuran kode JavaScript sangat kecil hanya 2.15 Kilobyte sehingga lebih ringan untuk loading blog
Otomatis tersedia link untuk mendownload file MP3 yang disertakan pada blog
Pemasangan script Autolink Mini MP3 Player pada template sangat mudah
Tampilan MP3 Player berbasis flash yang sangat sederhana dan menarik karena menggunakan Audio Player 1 Pixelout Versi 2 buatan Martin Laine
Dan apa lagi ya? Silahkan dicoba sendiri, keluhan, kesalahan, dan lain-lain tinggalkan pada komentar

Kelemahan Autolink Mini MP3 Player

Tidak menggunakan autoplay karena saya secara pribadi tidak begitu suka dengan blog-blog yang memasang "autoplay MP3 in background"
Tidak bisa bekerja sempurna untuk blog yang memasang tag body onload pada template-nya
Hanya menggunakan satu jenis player

Integrasi Autolink Mini MP3 Player

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

atau

</body>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script type='text/javascript' src='https://sites.google.com/site/henscripts/jscript/minimp3player.js'/>

Langkah 5
Simpan Template....

Menambahkan File MP3 pada Artikel Blog

Langkah 1
Buatlah sebuah artikel blog dan ketikan judul lagu/file MP3 pada editor blog
Langkah 2
Blok (Highlight) judul lagu/file MP3 tersebut kemudian klik toolbar "Tautan"
Langkah 3
Masukan link lagu/file MP3 pada kotak "Masukan URL" lalu klik tombol OK

Langkah 4
Terbitkan artikel dan preview blog anda...
Langkah 5
Klik tombol "Play" dan dengarkan lagunya...
Buffering-kan? Berarti anda harus berlangganan internet dengan bandwidth internet yang lebih cepat...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Percantik Sidebar Komentar (JSON)

2011-05-29T19:51:00.007+07:00

Bismillah. Disela-sela tahap penyembuhan dari sakit yang cukup lama dan disela-sela kesibukan dalam proses penyusunan buku, Alhamdulillah satu widget selesai dikembangkan. Widget ini sebenarnya bisa kita peroleh melalui widget bawaan Blogger namun bagi mereka yang suka utak-atik hal ini bisa menjadikan satu nilai plus untuk mempercantik sidebar anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Yang menarik dari sidebar komentar ini yaitu bisa menampilkan nama user yang memberi komentar dan juga isi dari komentar tersebut, sehingga kita bisa dengan cepat menyetahui siapa sahabat blogger yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses pemanggilan (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan membaca jika malas jangan di tutup blog ini cari lagi artikel lain mungkin anda menemukan sesuatu yang menarik... (agak ngelantur)

Integrasi JSON Sidebar Comments Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

/* Sidebar Komentar JSON */
#komentar {
background: #3eb5da; //warna dasar
margin: 0;
padding: 0;
border: 1px solid #0971C8; //garis pinggir kotak gadget komentar
}
#komentar ul {
margin: 0;
padding: 0; //jarak ke pinggir kotak gadget komentar
}
#komentar ul li: first-child {
border-top: 0 none aqua;
}
#komentar ul li {
border-top: 1px solid #CCC; //garis sekat atas
border-bottom: 1px solid #0971C8; //garis sekat bawah
padding: 2px 0;
list-style: none;
}
#komentar ul li: last-child {
border-bottom: 0 none aqua;
}
#komentar ul li span {
background-position: 2px 2px;
float: left;
height: 16px;
margin-right: 5px;
width: 16px;
}
#komentar ul li b {
color: #ffffff; //warna huruf nama komentator
text-shadow: -1px -1px 1px #3196BA;
}
#komentar ul li: hover {
background-color: #CCC; //warna latar ketika mouse diatasnya
}
#komentar a, #komentar a: link, #komentar a: visited {
clear: both;
color: #FFF; //warna huruf isi komentar
display: block;
padding-left: 20px;
text-decoration: none;
}
#komentar a: hover {
color: #333; //warna huruf ketika mouse diatasnya
}
.komen {
background: transparent url(https: //lh5.googleusercontent.com/_xcD4JK_dIjU/TcA0b1eB4sI/AAAAAAAAFGQ/MlIzrpydae0/s800/top_rss.png) no-repeat 0 0; //icon komentar
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode JavaScript dibawah ini diatas kode pada langkah 5:

<script type='text/javascript'>
//<![CDATA[
/*
Beauty JSON Commentator Sidebar 1.0 (May 29, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
var jmlkomentar = 20;
var jmlkarakter = 80;
function tampilkankomentar(json) {
var entry, urlkomentar, isikomentar, lihatkomentar;
for (var i = 0; i < jmlkomentar; i++) {
entry = json.feed.entry[i];
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
urlkomentar = entry.link[k].href;
break
}
}
urlkomentar = urlkomentar.replace("#", "#comment-");
if ("content" in entry) {
isikomentar = entry.content.$t
} else if ("summary" in entry) {
isikomentar = entry.summary.$t
} else {
isikomentar = ""
}
var re = /<\S[^>]*>/g;
isikomentar = isikomentar.replace(re, "");
if (isikomentar.length > jmlkarakter) {
isikomentar = isikomentar.substring(0, jmlkarakter) + "…"
}
lihatkomentar = "<li>";
lihatkomentar += "<span class='komen'></span><b>" + entry.author[0].name.$t + "</b>";
lihatkomentar += "<a rel='nofollow' href='" + urlkomentar + "'>" + isikomentar + "</a>";
lihatkomentar += "</li>";
document.write(lihatkomentar)
}
}
//]]>
</script>

Langkah 7
"SIMPAN TEMPLATE" dan lanjutkan...

Integrasi JSON Sidebar Comments pada Gadget

Langkah 8
"Tambah Gadget" dengan tipe "HTML/JavaScript"
Langkah 9
Masukan (copy paste) kode dibawah ini didalam konten dan jangan lupa beri Judul Gadget:

<div id="komentar">
<ul>
<script src="/feeds/comments/default?alt=json-in-script&callback=tampilkankomentar"></script>
</ul>
</div>

Langkah 10
"SIMPAN" Gadget dan preview blog anda...

Keterangan:

var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang ingin ditampilkan
var jmlkarakter = 80; Ubah nilai 80 untuk menentukan jumlah karakter isi komentar yang ingin ditampilkan

Bagaimana menurut anda? Cantik bukan? Selamat mencoba dan semoga berhasil... Happy Blogging :)

jQuery 1.6 - Visual Cheat Sheet

2011-05-18T19:21:00.004+07:00

Alhamdulillah. jQuery JavaScript Library Versi 1.6.1 telah di terbitkan pada hari Kamis, 12 Mei 2011. Bagi yang ingin mengetahui penambahan fungsi baru Perpustakaan jQuery silahkan jalan-jalan di website jQuery atau download Visual Cheat Sheet - jQuery Versi 1.6 yang di susun oleh Antonio Lupetti. Edisi baru Visual Cheat Sheet - jQuery Versi 1.6 ini mencakup semua referensi yang Anda butuhkan untuk jQuery 1.6 API. Mari sama-sama belajar tentang jQuery...

jQuery 1.6 - Visual Cheat SheetKlik disini untuk mengunduh jQuery 1.6 - Visual Cheat Sheet

Kesalahan Fatal SEO (Search Engine Optimization)

2011-05-14T10:37:00.003+07:00

Dunai SEO memang sangat menarik untuk dikaji, selain karena menantang, SEO merupakan teknik yang sangat misteri. Hal ini disebabkan tidak ada satu pun search engine (mesin pencari) yang membuka tentang teknologinya dalam mengindeks blog atau website yang ada didunia. Dunia SEO hampir bisa dikatakan sebagai dunia teka-teki, keberadaannya nyata namun entah bagaimana mereka bekerja. Kebanyakan master blogger melakukan research dengan teknik trial and error pada blogger atau website yang di kelolanya. SEO atau Search Engine Optimization adalah cara yang digunakan untuk mengoptimasi atau untuk meningkatkan kualitas website atau blogger dimata mesin pencari sehingga suatu situs atau website akan menempati peringkat pertama pada daftar pencarian (SERP=Search Engine Result Page) dengan kata kunci tertentu di berbagai mesin pencari.

Siapa pun pemilik website atau blogger berharap bahwa blog atau website yang dikelolanya menempati peringkat terbaik dimata mesin pencari apapun kata kunci yang digunakan dalam kategori tertentu. Namun hal ini sangat sulit diimplementasikan dan membutuhkan kesabaran, sehingga proses-proses yang dilakukan untuk mengoptimasi suatu blog atau website agar menempati peringkat terbaik pada mesin pencari adalah suatu perkara yang membutuhkan waktu tidak sebentar. Bahkan banyak blogger yang terjebak pada teknik Black Hat SEO atau teknik SEO dengan jalan pintas dan tidak jujur, hal ini justru merugikan blognya sendiri ketika suatu mesin pencari menemukan teknik-teknik licik untuk meningkatkan peringkat blog atau website bahkan kemungkinan terbesar blog atau website yang menerapkan teknik Black Hat SEO akan di hempaskan (dikeluarkan) dari daftar indeks mesin pencari. Keluarnya blog atau website dari daftar indeks mesin pencari sering dikenal dengan istilah Sandbox (Google Penalty).

Pada artikel kali ini Blogger Tune-Up tidak akan membahas apa itu Black Hat SEO maupun White Hat SEO, namun akan membahas beberapa kesalahan fatal yang sering dilakukan para blogger dalam penerapan SEO pada blog atau situs yang dikelolanya. Hal-hal dibawah ini harus dihindari agar kegiatan ngeblog anda tidak terganggu.

Kesalahan Fatal SEO

1. Keyword

Keyword yang salah target, bahkan hal ini tidak hanya terjadi pada para blogger, justru perusahan-perusahaan besar pun banyak melakukan kesalahan dalam hal keyword yang salah sasaran. Hal ini bisa terjadi karena kesalahan persepsi terhadap "kata kunci" yang sering digunakan oleh para pengguna mesin pencari. Misal kita menggunakan kata kunci "jQuery" pada blog yang kita kelola, padahal para pengguna mesin pencari tidak pernah menggunakan kata kunci tersebut sehingga sehebat apapun artikel yang ada pada blog tersebut, jelas mesin pencari tidak akan mengarahkan para penggunanya ke blog yang menggunakan kata kunci "jQuery". Agar kita tidak salah sasaran/target pengunjung, tidak ada salahnya kita menggunakan perangkat (tool) bantuan dalam menganalisis dan menemukan kata kunci (keyword) yang paling sering digunakan oleh para pengguna mesin pencari yang kira-kira cocok untuk blog yang kita kelola. Contoh tool gratisan yang bisa kita gunakan adalah Keyword Suggestions.

2. Meta Tag

Terlalu terfokus pada meta tag adalah kesalahan berikut yang sering dilakukan oleh para pengelola blog atau website. Para pemilik blog menghabiskan banyak waktu hanya untuk mengoptimisasi meta tag, padahal search engine memiliki teknologi baru dengan alogaritma dari crawler dan robot search engine yang sama sekali tidak melihat lagi meta tag sebagai acuan utama. Hal terpenting bagi blogger sekarang akan lebih baik jika memperkaya konten dari blog atau website yang dikelolanya hal ini untuk memberikan kesempatan lebih besar kepada search engine untuk melakukan indeks blog dari kata kunci yang tersedia banyak pada konten.

3. Blog Gratis

Inilah kelemahan alami para blogger gratisan. Sebenarnya bukan kesalahan fatal namun kesempatan dan kemauan yang sulit terealisasi. Siapapun pasti ingin memiliki/menyewa hosting sendiri dalam kegiatan blog-nya. Namun terkadang keadaan memaksa kita untuk memanfaatkan yang tersedia. Hal ini harus kita akui sebagai para pengguna blog gratisan termasuk diakui oleh Blogger Tune-Up bahwa kelemahan menggunakan blog gratisan adalah sulit meningkatkan kualitas SEO. Bahkan Blogger Tune-Up menemukan hal yang sangat menyedihkan ketika beberapa artikel asli justru diakui oleh blogger lain yang menggunakan layanan hosting sendiri dan lebih menyedihkan lagi ketika menggunakan kata kunci tersebut justru blog bajakan yang nangkring di posisi pertama. Namun Blogger Tune-Up yakin, dengan kualitas artikel yang selalu original dan murni hasil pemikiran akan menggeser dominasi blogger hosting berbayar yang ternyata hasil plagiat. (Ayo kita buktikan!!!)

4. Backlink

Backlink bagaikan dua sisi mata uang, ada sisi yang menguntungkan namun ada sisi lain juga yang merugikan. Backlink yang baik itu berasal dari blog, website atau forum dengan kategori dan konten yang sama/mirip dengan konten dari blog yang kita kelola. Kesalahan para blogger dalam meraih backlink salah satunya dengan bertukaran link dengan blogger lain tanpa memperhatikan materi yang di buat oleh blogger lain. Seandainya satu materi dengan blog kita merupakan keuntungan bagi blog kita, namun jika berbeda materi itulah yang merugikan, karena terlalu banyak backlink yang berasal dari blog yang berbeda materi sering menjadikan backlink tersebut sebagai spamming backlink. Terlalu banyak spamming backlink akan membuat blog kita di banned oleh mesin perncari, maka berhati-hatilah dalam backlink, dan akan lebih baik melakukan pertukaran link itu dalam suatu konten atau artikel, misal dengan saling membahas suatu materi yang saling terkait. Satu blog membahas suatu materi yang ada pada blog lain dan blog yang dimaksud juga melakukan pembahasan materi unik lainnya dari blog sahabatnya. Itu hal terbaik dalam teknik backlink.

5. Image (Gambar)

Gambar merupakan bagian untuk memperkaya konten blog, namun kesalahan yang sering dilakukan yaitu tanpa memberi keterangan pada gambar, sehingga search engine tidak menemukan apa-apa dan tidak dapat mengkaitkan gambar dengan konten artikel. Ini merupakan salah satu kerugian bagi para pemilik blog, gambar tanpa keterangan kurang bermakna bagi konten dan lebih baik kita memberikan keterangan pada gambar yang berfungsi sebagai pelengkap konten blog. Keterangan gambar bisa diberikan dibawah atau diatas gambar, atau memberikan keterangan gambar melalui tag alt, tag title atau dengan memanfaatkan kedua tag tersebut.

6. URL

Nah, ini merupakan kesalahan lainnya yang sering dilakukan oleh para blogger. Pernahkah kita mencoba menggunakan kata kunci tertentu pada mesin pencari dan mesin pencari menampilkan URL dari kata kunci yang kamu masukan? Jika pernah mencoba namun keyword yang kita gunakan tidak menampilkan URL yang menuju blog anda, itu menunjukan bahwa URL yang kita sertakan pada blog tidak mengandung keyword dan itu berarti ini kerugian lagi bagi pemilik blog. Gunakan tag title atau tag alt untuk memasukan keyword pada URL yang kita sertakan pada blog kita, hal ini bisa merupakan bagian dari SEO.

Selamat mengkaji kembali blog yang kita kelola, dan jadilan blogger yang mampu menganalisis SEO dengan baik tanpa kesalahan-kesalahan lagi seperti yang disebutkan diatas. Jika mempunyai masukan lain, silahkan tinggalkan pada komentar. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Perpustakaan jQuery pada Blogger

2011-04-27T00:58:00.006+07:00

Sebenarnya artikel tentang perpustakaan jQuery pernah dibahas lengkap pada beberapa artikel Blogger Tune-Up, namun entah karena arsipnya sudah lama atau karena malas menjelajah Blogger Tune-Up sehingga masih ditemukan beberapa kesalahan-kesalahan dan kekurang telitian para blogger dalam menggunakan perpustakaan jQuery. Perpustakaan jQuery di sebut juga jQuery Library, jQuery Framework atau sering di sebut jQuery saja.

Apa sebenarnya jQuery?

jQuery adalah sebuah perpustakaan JavaScript lintas-browser (cross-browser JavaScript library) yang dirancang untuk menyederhanakan client-side scripting dari HTML. jQuery Versi 1.0 dirilis pada bulan Januari 2006 di BarCamp NYC oleh John Resig. Perpustakaan jQuery telah digunakan oleh lebih dari 43% dari 10.000 website yang paling sering dikunjungi, jQuery adalah pustaka JavaScript yang paling populer dan paling banyak digunakan saat ini.
jQuery dapat digunakan secara bebas karena merupakan bagian dari perangkat lunak sumber terbuka (open source software), memiliki dual-lisensi yaitu di bawah MIT License dan GNU General Public License. Sintak-sintak jQuery Versi 2 dirancang lebih mudah untuk menangani navigasi dokumen, memilih elemen DOM, membuat animasi, menangani event, dan pengembangan aplikasi Ajax. jQuery juga menyediakan kemampuan bagi pengembang untuk membuat plugin di atas perpustakaan JavaScript. Dengan disediakannya fasilitas ini, pengembang dapat menciptakan abstraksi interaksi untuk tingkat rendah (low-level interaction) dan animasi, efek canggih dan tingkat tinggi (high-level), tema-widget. Hal ini memberikan kontribusi untuk penciptaan halaman web yang hebat dan dinamis.
Microsoft dan Nokia telah mengumumkan rencananya untuk membundel jQuery di dalam platform mereka, Microsoft mengadopsinya lebih awal dalam bahasa pemrograman Visual Studio untuk digunakan dalam kerangka kerja Microsoft AJAX ASP.NET dan ASP.NET MVC Framework sementara Nokia telah mengintegrasikannya ke dalam platform pengembangan widget Web Run -Time mereka. jQuery juga telah digunakan pada MediaWiki sejak versi 1.16.

Artikel Perpustakaan jQuery

Blogger Tune-Up pernah membahas jQuery ini dalam beberapa artikel terdahulu. Dibawah ini arsip artikel yang berhubungan dengan Perpustakaan jQuery dan lebih baik anda membaca artikel-artikel dibawah ini dengan seksama supaya lebih mudah untuk memahami jQuery.

Pemasangan Perpustakaan jQuery pada Blogger

Dibawah ini akan dijelaskan kembali beberapa cara untuk melengkapi Blogger dengan perpustakaan jQuery dan silahkan gunakan salah satu cara yang dianggap paling mudah untuk diterapkan.

Cara I - Memanfaatkan Perpustakaan jQuery pada CDN

Karena kehebatan jQuery yang mampu mengubah suatu website menjadi lebih dinamis dan canggih ini membuat beberapa perusahaan terkenal rela menjadi CDN Perpustakaan jQuery. CDN adalah kepanjangan dari content delivery network atau content distribution network yaitu sebuah sistem komputer yang memiliki salinan data yang sama dengan aslinya. Data salinan ini ditempatkan di berbagai titik tempat pada suatu jaringan untuk memaksimalkan bandwidth dalam mengakses keseluruhan data jaringan klien. Dibawah ini beberapa perustakaan jQuery pada CDN yang dapat kita gunakan untuk kita gunakan pada blog kita:

CDN - Google Ajax API
Perpustakaan jQuery dibawah ini terdapat pada server Google dan sangat direkomendasikan menggunakan CDN ini.

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

CDN - Microsoft
Perpustakaan jQuery dibawah ini terdapat pada server Microsoft, CDN ini dapat digunakan sebagai alternatif.

<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js' type='text/javascript'/>

CDN - jQuery
Perpustakaan jQuery dibawah ini terdapat pada server jQuery itu sendiri, CDN ini sangat tidak direkomendasikan.

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

Cara II - Memanfaatkan Google API Load

Selain menggunakan Cara I, dibawah ini merupakan cara lain yang merupakan teknik cara cepat untuk memanggil perpustakaan jQuery. Cara ini dibagi menjadi 2 bagian yaitu tanpa menggunakan API Key dan yang menggunakan API key.

(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key:

<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>

(2) Menggunakan API Key

Cara dibawah ini menggunakan API Key, dan cara ini direkomendasikan untuk digunakan. Karena API Key merukapan identitas unik dari suatu website sehingga Google API akan dengan mudah untuk mengidentifikasi perpustakaan apa saja yang digunakan dan akan memilihkan cara tercepat untuk mengidentifikasi perpustakaan-perpustakaan yang digunakan. Untuk mendapatkan API Key blog anda silahkan klik link ini. Setelah mendapatkan API Key, ganti XXXX pada script dibawah ini.

<script src='https://www.google.com/jsapi?key=XXXX' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>

Cara III - Memanfaatkan Google API AutoLoad

Cara III ini diklaim sebagai cara yang paling cepat untuk memanggil perpustakaan jQuery. Cara III ini dibagi lagi menjadi 3 teknik, silahkan pilih salah satunya saja.

(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key namun lebih cepat dibanding cara II (1)

<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}" type="text/javascript"/>

(2) Menggunakan API Key

Cara dibawah ini mengguankan API Key dan pemanggilan perpustakaan jQuery lebih cepat dari cara diatas. Klik link ini untuk mendapatkan API Key blog anda dan ubah XXXX sesuai dengan API Key yang anda dapatkan sesuai dengan blog yang anda daftarkan.

<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}&amp;key=XXXX" type="text/javascript"/>

(3) Menggunakan URL Encoder

Cara yang terakhir ini adalah cara yang paling rumit namun merupakan cara yang paling cepat untuk memanggil perpustakaan jQuery dibanding semua cara diatas.
Kode dibawah ini adalah kode asli yang digunakan untuk memanggil perpustakaan jQuery (perhatikan Cara III - 2 diatas)

{"modules" : [{"name" : "jquery","version" : "1.5.2"}]}

Kemudian kode tersebut di Encode untuk memudahkan dan mempercepat browser dalam membaca dan memanggil perpustakaan jQuery. Gunakan URL DEncoder buatan Blogger Tune-Up untuk meng-encode kode diatas, sehingga akan dihasilkan kode hasil encode seperti dibawah ini:

%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D

Setelah dilakukan encode pada kode diatas, gabungkan kode sehingga menjadi seperti dibawah ini:

<script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D&amp;key=XXXX"/>

Klik link ini untuk mendapatkan API Key yang sesuai dengan blog anda dan ubah XXXX pada kode diatas.

Ketentuan Memasang Perpustakaan jQuery

Dibawah ini beberapa ketentuan yang harus diperhatikan oleh para blogger agar kesalahan-kesalahan menggunakan jQuery tidak menjadi beban blog anda.

Pilihlah salah satu cara pemasangan perpustakaan jQuery pada blogger
Sebaiknya perpustakaan jQuery diletakan pada template blog diantara tag <head> dan tag </body>
Setiap blog atau web sebaiknya hanya memasang satu perpustakaan jQuery, jadi jika kita pernah memasang perpustakan jQuery maka tidak perlu lagi memasang perpustakaan jQuery lagi walau dalam suatu tips trik di sertakan perpustakaan jQuery, sebaiknya anda membuang perpustakaan jQuery tersebut tanpa mengikut sertakannya jika anda pernah memasang sebelumnya.
Hindarilah memasang perpustakaan jQuery berulang-ulang karena hal tersebut akan membuat ukuran blog menjadi lebih besar dan load halaman menjadi lebih lambat.

Google API KeyKlik disini untuk mendapatkan API Key

URL DEncoderKlik disini untuk mendapatkan URL Dencoder

Selamat mencoba dan semoga berhasil. Happy Blogging :) Write Less, Do More

Animasi CD/DVD Promosi dengan CSS 3

2011-04-19T00:59:00.008+07:00

CSS atau Cascading Style Sheet telah mengalami perkembangan yang semakin hari semakin menakjubkan. Animasi yang sebelumnya di dominasi oleh file-file flash sekarang sudah mulai ditinggalkan dan para profesional desainer web beralih pada penggunaan jQuery dan CSS 3 sebagai animasi pada tampilan website yang dibuatnya. Selain ukuran file lebih kecil sehingga waktu load halaman lebih cepat juga proses penulisan script yang semakin hari semakin sederhana namun tanpa berpengaruh pada hasil akhir yang tetap menakjubkan. Bagi para pemula yang baru saja berkecimpung di dunia web desain mungkin agak sulit untuk membedakan mana animasi yang dihasilkan dari flash dan mana animasi yang dihasilkan dari jQuery atau CSS 3.

Pada artikel kali ini Blogger Tune-Up tidak akan menyuguhkan animasi menggunakan jQuery tetapi kita akan mengeksplorasi kekuatan CSS 3 dalam menciptakan dan menampilkan animasi pada website. Walaupun hanya menggunakan CSS 3 namun hasilnya sangat menawan dan menarik perhatian sehingga tampilan website akan tampak lebih dinamis dan hidup. Bagaimana animasi CD/DVD promosi ini bekerja? Ketika kita mengarahkan pointer mouse pada cover CD/DVD maka cover akan bergerak kesamping agak miring beberapa derajat. Sedangkan kepingan cakram CD/DVD akan berputar keluar dari cover-nya. Ketika kita menggeser pointer mouse keluar dari cover CD/DVD maka cover akan kembali pada posisi semula. Sedangkan kepingan cakram CD/DVD akan berputar dan masuk kedalam cover-nya.
Penasaran ingin mencoba? Lihat demonya pada link dibawah ini dan rasakan kekuatan animasi yang dihasilkan walaupun hanya menggunakan CSS 3.

Demo Animasi CD/DVD PromosiKlik disini untuk melihat demo Animasi CD/DVD Promosi

Integrasi kode CSS 3 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

div.dvd-promo {
width : 940px;
margin : 0 auto 3em auto;
}

div.dvd-promo:after {
content : "\0020";
display : block;
height : 0;
clear : both;
visibility : hidden;
overflow : hidden;
}

div#dvd-promo-wadah {
position : relative;
float : left;
width : 240px;
margin-right : 60px;
padding : 320px 0 1.5em 0;
}

div.dvd-promo img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0;
}

div.dvd-promo img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px;
}

div.dvd-promo a:hover img[alt*="Cover"] {
-moz-transform : rotate(-1deg);
-moz-transform-origin : 50% 100%;
-o-transform : rotate(-1deg);
-o-transform-origin : 50% 100%;
-webkit-transform : rotate(-1deg);
-webkit-transform-origin : 50% 100%;
transform : rotate(-1deg);
transform-origin : 50% 100%;
}

div.dvd-promo a:hover img[alt*="Disc"] {
-moz-transform : translate(40px,0) rotate(300deg);
-o-transform : translate(40px,0) rotate(300deg);
-webkit-transform : translate(40px,0) rotate(300deg);
transform : translate(40px,0) rotate(300deg);
}

div.dvd-promo img[alt*="Cover"], div.dvd-promo img[alt*="Disc"] {
-moz-transition : all .5s ease-in-out;
-o-transition : all .5s ease-in-out;
-webkit-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}

Langkah 5
Simpan template dan lanjutkan...

Memasang Animasi CD/DVD Promosi pada Blogger

Langkah 6
Masuk ke "Rancangan - Elemen Laman"
Langkah 7
Tambahkan sebuah widget dengan jenis HTML/JavaScript
Langkah 8
Masukkan (copy paste) kode dibawah ini pada bagian konten pada widget

<div class="dvd-promo">
<!-- awal bagian -->
<div id="dvd-promo-wadah">
<a href="http://modification-blog.blogspot.com">
<img src="http://hosinganda.com/dvd_cover_promo.png" alt="DVD Cover">
<img src="http://hosinganda.com/dvd_disc_promo.png" alt="DVD Disc">
</a>
</div>
<!-- akhir bagian -->
</div>

Langkah 9
Simpan widget dan preview blog anda

Download Animasi CD/DVD PromosiKlik untuk mengunduh source code Animasi CD/DVD Promosi

Keterangan:

Unduh seluruh source code Animasi CD/DVD Promosi dengan CSS 3 pada link diatas
Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat yang anda maksud
Buatlah sendiri gambar yang anda perlukan dan upload-lah pada situs file hosting anda kemudian gantilah http://hosinganda.com/dvd_cover_promo.png (lihat langkah 8) sesuai dengan alamat URL pada file hosting
Perhatingkan kode yang diblok pada langkah 8, Cover dan Disc pada tag alt harus selalu tersedia, karena tag ini terkait dengan kode CSS yang ada pada langkah 4 dan digunakan untuk memberikan animasi pada DVD Cover dan DVD Disc
Jika anda ingin menambahkan jumlah CD/DVD Cover Disc lainnya silahkan tambahkan kode yang diapit tag  sampai dengan tag  namun semua kode penambahan ini harus berada didalam tag <div class="dvd-promo"> dan </div> paling akhir

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Mohon Bantuan - Akun Facebook di Palsukan

2011-04-16T19:28:00.005+07:00

Entah apa maksud orang ini sehingga melakukan pemalsuan akun. Mungkin karena saya punya salah dimasa lalu atau mungkin bentuk sentimen pribadi saja, yang jelas orang tersebut telah melakukan tidakan yang tidak menyenangkan kepada saya. Untuk itu kepada teman-teman blogger, mohon bantuannya untuk memblok dan melaporkan akun palsu facebook Dede Hendriono.

Beberapa alasan kuat bahwa akun tersebut duplikat dan memalsukan akun saya yang asli adalah sebagai berikut:

Foto profile yang digunakan merupakan foto lama
Foto profile yang digunakan merupakan foto asli dan saya tidak pernah mengunggah foto yang asli pada akun apapun
Akun tersebut memiliki identitas yang sama dengan keadaan saya sekarang
Pada saat artikel ini dibuat akun tersebut baru selesai dibuat

Untuk itu saya berharap bantuan teman-teman blogger untuk melaporkan akun ini bahwa akun tersebut adalah palsu dan merupakan tindakan tidak menyenangkan. Berikut dibawah ini cara untuk melaporkan bahwa akun tersebut palsu atau sahabat blogger bisa menggunakan cara yang lain yang dirasa lebih enak untuk melaporkan.

Ini link akun asli Dede Hendriono :

Akun Asli Dede HendrionoIni akun asli Dede Hendriono

Ini link akun palsu Dede Hendriono :

Akun Palsu Dede HendrionoMohon bantuannya untuk memblok dan melaporkan akun palsuku

Atas segala peduli, partisipasi, apresiasi dan bantuannya saya mengucapkan banyak terima kasih.

Banjarsari, 16 April 2011

Dede Hendriono

jQuery Image Hover Fade Effect

2011-04-13T14:55:00.005+07:00

Bismillah. Tips trik jQuery kali ini digunakan untuk memberikan sentuhan lembut memudar pada gambar blog. Ketika halaman blog dipanggil (load) maka semua gambar pada blog akan tampak memudar (fade). Dan ketika pointer mouse berada diatas (hover) gambar pada blog maka gambar akan ditampilkan dengan jelas namun ketika pointer mouse meninggalkan (mouse out) gambar maka gambar akan kembali memudar. Demikian penjelasan pintas tentang jQuery Image Hover Fade Effect...

Demo jQuery Image Hover Fade EffectKlik disini untuk demo jQuery Image Hover Fade Effect

Integrasi jQuery Image Hover Fade Effect pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

Langkah 5
Simpan template dan preview blog anda, kemudian perhatikan gambar-gambar memudar yang ada pada blog

Memahami Script Code jQuery Image Hover Fade Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>

Kode diatas untuk memanggil framework jQuery, jika anda pernah memasangnya, maka kode ini tidak perlu diikutsertakan.

<script type='text/javascript'>

Script identitas bahwa selanjutnya dikenali sebagai JavaScript

$(document).ready(function() {

Fungsi script jQuery telah siap di-load

$('img').fadeTo('slow', 0.5);

Efek fade sebagai efek default (opacity 0.5) pada semua gambar dengan tag img pada seluruh halaman yang di-load

$('img').hover(function() {

Ketika mouse pointer berada di atas gambar (hover) maka...

$(this).fadeTo('slow', 1.0);

Gambar dengan tag img akan diperjelas hingga 1.0

}, function() {

Jika mouse pointer meninggalkan gambar maka...

$(this).fadeTo('slow', 0.5);

Gambar dengan tag img akan memudar (opacity 0.5) lagi.

});
});

Fungsi script jQuery dihentikan

</script>

Fungsi JavaScript di tutup

Unduh jQuery Image Hover FadeKlik disini untuk mengunduh Script Code jQuery Image Hover Fade Effect

Demikianlah integrasi jQuery Image Hover Fade Effect pada blogger template. Selamat mencoba dan semoga berhasil. Happy Blogging :)

5 Pratinjau Dinamis Baru dari Blogger

2011-04-01T17:01:00.011+07:00

Hebat!!! Itulah komentar yang terucap spontan saat melihat 5 tampilan dinamis yang dipersembahkan oleh Blogger. Tepat tanggal 31 Maret 2011 Blogger memperkenalkan prantinjau baru untuk template Blogger yang sedang direncanakan, dengan harapan para pengguna Blogger akan terbiasa dengan tampilan yang masih dalam pengembangan tersebut. 5 pratinjau tampilan Blogger ini menggunakan teknologi web terbaru termasuk didalamnya Ajax, HTML 5, dan CSS 3.

Sekarang Blogger mengejutkan penggunanya dengan pratinjau dan fasilitas baru diantaranya:

Infinite scrolling; fasilitas ini memberikan kemudahan kepada para pemilik blog dan para pengunjung dengan tampilan satu halaman yang tersusun rapi disertai efek yang lembut, sehingga kita tidak perlu memanggil (load) halaman baru ketika ingin membaca suatu artikel. Cukup klik halaman yang akan dibaca maka slide halaman akan segera muncul dengan cepat tanpa reload.
Layout baru; penampilan yang sangat menarik dan berbeda dari sebelumnya, lebih terkesan futuristik dan canggih sehingga cocok untuk berbagai tipe blog.
Kecepatan; menampilkan gambar hanya ketika kita melihatnya, tanpa ditampilkan semua dihalaman muka. Teknik jitu mengakali bandwitdh yang rendah, sehingga bagi blogger yang memiliki koneksi internet lambat hal ini sangat menguntungkan. Gambar tidak semuanya didownload dari server pada saat awal membuka halaman dan gambar ditampilkan hanya ketika browser diarahkan ke gambar tersebut. Brilian!!!
Interakitivitas; banyak cara sekarang untuk bisa merasakan dan melibatkan konten blog. Lebih mudah, lebih cepat, lebih menarik, lebih canggih dan semua kemudahan ini didapatkan dengan gratis.
Keyboard Shortcut; ini memudahkan para pengunjung dalam memperlakukan halaman yang sedang dibaca. Kombinasi tombol yang digunakan adalah; J untuk posting lama, K untuk posting baru, dan Escape untuk kembali ke halaman utama.

Video Blogger Dynamics View

Silahkan klik pada salah satu link ini untuk menikmati pratinjau baru dan rasakan kecanggihannya baik dari sisi kecepatan, tampilan dan efek-efek yang dihasilkan dari penampilan blogger baru. Inilah hasil dari pratinjau dinamis baru Blogger :

Pratinjau Dinamis FlipcardKlik disini untuk melihat Pratinjau Dinamis Flipcard

Pratinjau Dinamis MosaicKlik disini untuk melihat Pratinjau Dinamis Mosaic

Pratinjau Dinamis SidebarKlik disini untuk melihat Pratinjau Dinamis Sidebar

Pratinjau Dinamis SnapshotKlik disini untuk melihat Pratinjau Dinamis Snapshot

Pratinjau Dinamis TimeslideKlik disini untuk melihat Pratinjau Dinamis Timeslide

Pratinjau Dinamis Blogger Jenis Flipcard

Cara memperlakukan halaman flipcard:

Arahkan mouse salah satu kartu untuk melihat judul posting dan jumlah komentar. Ketika kita menggulung layar kebawah, posting tambahan akan terus di-load.
Klik kartu untuk melihat posting di tampilan penuh. Anda dapat menggunakan navigasi pada halaman posting menggunakan J (posting lama) dan K (posting baru) atau tombol panah. Tombol Escape atau klik Back to all posts untuk kembali ke halaman utama Flipcard.
Pada kiri atas, klik untuk mengurutkannya menurut Tanggal, Penulis dan Kategori.

Pratinjau Dinamis Blogger Jenis Mosaic

Cara memperlakukan halaman mosaic:

Klik pada salah satu ubin maka halaman akan ditampulkan penuh, dan klik halaman posting maka halaman akan kembali ke posisi semula.
Posisi ubin ditentukan secara acak setiap kali halaman blog dipanggil, tetapi tampilan akan muncul secara kronologis dari kiri atas ke kanan bawah.
Setelah posting ditampilan secara penuh, kita dapat berpindah halaman dengan menggunakan tombol panah kiri dan kanan serta J dan K.
Tampilan ini dioptimalkan untuk tampilan tablet, dan mendukung rotasi layar.

Pratinjau Dinamis Blogger Jenis Sidebar

Cara memperlakukan halaman sidebar:

Ini merupakan tampilan halaman yang dioptimalkan untuk penelusuran dan membaca cepat.
Sidebar kiri adalah daftar posting yang disusun secara kronologis, dengan jumlah komentar dan tampilan thumbnail untuk setiap posting.
Tombol J dan tombol K atau panah digunakan sebagai menavigasi perpindahan halaman, dan komentar dapat ditampilkan pada halaman yang sama dengan mengklik link Tampilkan/Show.

Pratinjau Dinamis Blogger Jenis Snapshot

Cara memperlakukan halaman snapshot:

Tampilan ini hanya akan menampilkan tulisan yang memiliki gambar.
Mengklik salah satu foto yang mana saja akan menampilkan halaman posting secara penuh, dengan link navigasi digunakan untuk berpindah posting baru dan lama
Ketika mengarahkan mouse diatas foto apapun maka akan ditampilkan potongan posting

Pratinjau Dinamis Blogger Jenis Timeslide

Cara memperlakukan halaman timeslide:

Pandangan ini membagi konten blog ke dalam tiga wilayah yang berbeda:
Kolom Kiri : Pembesaran gambar dengan potongan artikel, judul, dan snipppet ditampilkan dalam urutan kronologis
Kolom Tengah: Hanya menampilkan judul posting dan sedikit potongan artikel
Kolom Kanan : Hanya menampilkan judul posting
Saat mencari posting pada tampilan timeslide ini, kata kunci yang terkandung dalam artikel hasilnya akan disorot (highlight).

Untuk menikmati prantinjau dinamis pada blog anda sendiri cukup dengan menambahkan "/view" pada akhir url blog anda^[1], misal http://tutsadobe.blogspot.com/view. Menurut informasi dari Blogger Help^[2] bahwa pratinjau dinamis ini dapat bekerja sempurna dengan mengikuti beberapa hal seperti dibawah ini:

Blog anda tersedia sebagai blog public bukan blog private. Siapapun pengunjungnya dapat melihat blog anda tanpa harus sign in.
Fasilitas feed diaktifkan secara keseluruhan pada blog anda. Silahkan periksa pada Pengaturan - Feed Situs dan pastikan terpilih Penuh pada opsi Umpan Entri Blog, sedangkan tampilan penuh pad artikel atau terpenggal (Jump Break) tidak berpengaruh (diperbolehkan).
Fasilitas Tampilan Dinamis diaktifkan. Silahkan periksa pada Pengaturan - Format dan terpilih Ya pada opsi Aktifkan Tampilan Dinamis.

Jika hal diatas tidak dipenuhi maka tampilan pratinjau dinamis baru tidak akan berjalan dan justru akan diteruskan (redirect) pada tampilan asli blog anda dalam beberapa detik.

Jika anda memiliki saran, kritik atau masukan tentang Pratinjau Dinamis Baru Blogger (Dynamic Views in Blogger) silahkan berkontribusi pada pooling yang disediakan Blogger disini.

Referensi:
[1] All about Dynamic Views for Readers
[2] All about Dynamic Views for Authors
[3] Blogger Buzz: Fresh new perspectives for your blog

Ooppss! Aktifkan JavaScript

2011-03-20T01:40:00.006+07:00

Bismillah. Artikel kali ini merupakan lanjutan dari "jQuery Anti Adblock" yang pernah dibahas sebelumnya. jQuery Anti Adblock digunakan untuk memberi peringatan kepada para pengunjung blog agar perangkat lunak blok iklan dinonaktifkan, namun jika para pengunjung blog menonaktifkan fungsi JavaScript pada browsernya maka jQuery Anti Adblock tidak dapat bekerja dan para pengunjung tetap dapat membaca artikel dalam keadaan iklan tidak ditampilkan, hal ini merupakan kerugian bagi para pengelola blog.

Tips Trik blog kali ini merupakan jalan lain untuk tetap memberi peringatan kepada para pengunjung blog ketika mereka menonaktifkan fungsi JavaScript. Ketika para pengunjung blog menonaktifkan fungsi JavaScript maka sebuah layar peringatan akan muncul dan menutupi seluruh halaman blog, secara total pengunjung blog tidak dapat membaca artikel blog tersebut. Jika jQuery Anti Adblock memberi peringatan pada saat pengunjung blog mengaktifkan perangkat lunak untuk memblok iklan, maka JavaScript Disable Warning memberi peringatan saat pengunjung menonaktifkan fungsi JavaScript pada browser. Akhirnya mau tidak mau (baca:memaksa) para pengujung blog tetap harus melihat iklan pada blog yang kita kelola. SEMPURNA...!!!

Memasang Peringatan JavaScript Tidak Aktif (JavaScript Disable Warning)

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#enjs {

z-index: 999;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background-color:#000;

margin:0;

padding:0;

}

#enjs p {

margin:0;

padding:0;

width:100%;

color:#333;

position:relative;

top:40%;

font:bold 18px/20px arial;

text-align:center;

text-shadow:none;

}

Langkah 5
Cari kode dibawah ini:

</body>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<noscript><div id="enjs"><p>Oooops!! Mohon Aktifkan JavaScript</p></div></noscript>

Langkah 7
Simpan template, nonaktifkan fungsi JavaScript pada browser dan preview blog anda...

Keterangan: Sebaiknya kode pada langkah 6 ditempatkan diatas kode pada langkah 5

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Blogger Template SimCleanear (Simple Clean & Clear)

2011-03-18T00:50:00.016+07:00

Bismillah. Alhamdulillah... Satu template telah selesai dibuat oleh Blogger Tune-Up. Sebenarnya kurang begitu percaya diri Blogger Tune-Up mengeluarkan template untuk Blogger karena merasa bukanlah ahli apalagi spesialis template blogger. Tapi tidak ada salahnya untuk mencoba mengeluarkan satu template yang dirancang oleh Blogger Tune-Up sebagai persembahan kepada para pembaca setia Blogger Tune-Up dan sekaligus ucapan terima kasih atas kesetiaannya untuk selalu berkunjung dan mendukung keberadaan Blogger Tune-Up. Selalu menyimak artikel demi artikel dan memberikan komentar-komentar membangun yang mampu memotivasi Blogger Tune-Up untuk terus berkarya dan menulis tips dan trik yang lebih baik. Membuat plugin-plugin jQuery yang lebih sempurna dan sederhana adalah keinginan Blogger Tune-Up dengan harapan para Blogger Indonesia mampu menunjukan pada dunia bahwa kita memiliki kelas sendiri yang unik dan berkwalitas.

Halaman Depan Blogger Template SimCleanear

Blogger Template Simple Clean & Clear ini merupakan hasil rancang bangun Blogger Tune-Up yang dipersembahkan secara gratis untuk seluruh blogger Indonesia pada umumnya dan pembaca setia Blogger Tune-Up pada khususnya. Lalu apa keutamaan (feature) yang disuguhkan dari Blogger Template Simple Clean & Clear ini?

Halaman Artikel Blogger Template SimCleanear

Keutamaan (feature) Blogger Template Simple Clean & Clear

Dari namanya bisa kita tebak yaitu sebuah template yang menyuguhkan kesederhanaan, kebersihan dan kemudahan
Karakternya sederhana tapi profesional
Sedikit sekali melibatkan gambar sehingga proses loading halaman lebih cepat
Cocok untuk blog yang berkarakter index, sitemap atau berupa daftar isi
Tabel sederhana yang sangat elegan dan profesional (tambahan)
Menggunakan framework jQuery dan JSON
jQuery Auto Image Caption yang secara otomatis membuat frame untuk gambar (tambahan)
jQuery Slick Tab yang membuat tampilan bawah artikel terlihat sederhana dan profesional
Terintegrasi fasilitas artikel terkait tanpa harus mengutak-atik kodenya lagi
Terintegrasi tombol berbagi yang mampu menghubungkan dan membagikan artikel kita pada berbagai layanan feed dan jejaring sosial
Terdiri dari 3 kolom dengan 2 sidebar kiri dan kanan
Terdiri dari 2 kolom footer yang cocok dan dirancang khusus sebagai tempat iklan
Terintegrasi statistik pengunjung yang sedang online, tombol bookmark, tanggal, dan fasilitas pencarian

Ketentuan Penggunaan Blogger Template Simple Clean & Clear

Template ini dibuat oleh Blogger Tune-Up di bawah lisensi Creative Commons Attribution 3.0
Tersedia dengan gratis tanpa harus membelinya atau tukar guling dengan apapun
Anda dapat menggunakan dan memodifikasinya sesuai keperluan anda tanpa batasan
Tidak diperkenankan membuang tautan kredit pada bagian bawah template dengan alasan apapun kecuali mendapat persetujuan dari Blogger Tune-Up sesuai perjanjian yang dibuat selanjutnya
Blogger Tune-Up tidak bertanggung jawab atas kerusakan atau kesalahan yang terjadi kedepannya akibat dari penggunaan template ini
Blogger Tune-Up tidak bertanggung jawab jika suatu hari ada pihak yang menggugat anda karena penggunaan template ini

Tata Cara Penggunaan Blogger Template Simple Clean & Clear

Pada tata cara penggunaan Blogger Template Simple Clean & Clear ini tidak akan dijelaskan secara mendetail langkah demi langkah, karena kami anggap anda sudah memahami atau pernah membaca artikel-artikel dari Blogger Tune-Up

1) Menambahkan SEO Tag Meta
Cari kode dibawah ini:

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

Kemudian ganti (replace) dengan kode dibawh ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | Nama Blog atau Alamat Blog</title>
</b:if>
<meta content='index,follow' name='robots'/>
<meta content='en' name='language'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='ganti dengan deskripsi blog' name='description'/>
<meta content='keyword1, keyword2, dan seterusnya' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;keyword1, keyword2, dan seterusnya&quot;' name='keywords'/>
</b:if>

Keterangan: kata yang diblok silahkan disesuaikan dengan blog

2) Mengubah Logo
Cari kode dibawah ini:

#wrap {background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S-KAfOiWMCI/AAAAAAAAEBo/vpJGTe92QQ0/d/logo.gif) no-repeat scroll right 5px #fff;margin:0 auto;width:940px;}

Ubah/ganti alamat URL dibawah ini sesuai dengan logo yang sudah anda buat:

http://lh5.ggpht.com/_xcD4JK_dIjU/S-KAfOiWMCI/AAAAAAAAEBo/vpJGTe92QQ0/d/logo.gif

Keterangan : ukuran logo 148 px X 156 px

3) Mengganti Link Bookmark
Cari kode dibawah ini:

var bookurl="http://URL.com/"
var bookname="Nama Blog"

Ganti URL dan Nama Blog sesuai blog anda

4) Mengubah Judul Tab Link
Cari kode dibawah ini:

<div id='tabs'>
<a expr:href='data:blog.homepageUrl' id='this'>Home</a>
<a href='URL'>Edit Link</a>
<a href='URL'>Edit Link</a>
</div>

Ganti URL sesuai dengan alamat dan Edit Link sesuai nama tab, misal:

<a href='http://namablog.blogspot.com/'>Blog Lainku</a>

5) Mengaktifkan Statistik Pengunjung
Cari kode dibawah ini:

<script src='http://fastonlineusers.com/on2.php?d=URL.com' type='text/javascript'/>

Ganti URL sesuai dengan alamat blog, misal:

namablog.blogspot.com

Keterangan: URL tanpa "htpp://"

6) Memasukan Iklan Link
Cari kode dibawah ini:

<div class='iklanlink'><!-- Iklan Link --></div>
<data:post.body/>
<div class='iklanlink'><!-- Iklan Link --></div>

Ubah/ganti kode dibawah ini:

<!-- Iklan Link -->

Dengan iklan link misal seperti contoh dibawah ini:

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-2925834362764225&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
google_ad_host_channel=&quot;00000&quot;;
/* 468x15 BonProg */
google_ad_slot = &quot;3625572682&quot;;
google_ad_width = 468;
google_ad_height = 15;
//--&gt;
&lt;/script&gt;
&lt;script src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;

Keterangan: Kode iklan harus di encode

7) Mengubah Judul jQuery Slick Tab
Cari kode dibawah ini:

<ul class='slick'>
<li><a class='slick active' href='#terkait' title='content_1'>Related Posts</a></li>
<li><a class='slick' href='#comments' title='content_2'>Comments</a></li>
<li><a class='slick' href='#share' title='content_3'>Share</a></li>
</ul>

Ubah/ganti bagian yang diblok sesuai dengan keinginan

8) Edit Iklan Footer

Hal ini dilakukan jika anda menghapus Gadget HTML bawaan, maka harus ditambahkan lagi kode pada template supaya tampilan kembali normal. Jika tidak di edit dan ditambahkan kode maka tampilan footer ini tidak menarik. Untuk mengedit kode harus dalam mode "Edit HTML - Expand Template Widget"

Cari kode dibawah ini (ini kode bawaan template) dan perhatikan yang di blok:

<div id='iklan'>
<b:section class='iklankiri' id='iklan1' preferred='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content sideadsl'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='iklankanan' id='iklan2' preferred='yes'>
<b:widget id='HTML15' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content sideadsr'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

Jika anda menghapus gadget tadi dan kemudian menambahkan baru maka kode kembali normal seperti dibawah ini:

<div class='widget-content'>

Tambahkan kode sideadsr untuk footer sebelah kanan dan sideadsl untuk footer sebelah kiri sehingga menjadi:

<div class='widget-content sideadsl'>
<div class='widget-content sideadsr'>

9) Menonaktifkan Fungsi Tanggal
Jika tampilan blog anda seperti dibawah ini:
- Nonaktifkan fungsi tanggal melalui "Rancangan - Elemen Laman" klik link edit pada "Posting Blog"
- Halaman "Mengkonfigurasi Posting Blog" akan terbuka lalu cari "Opsi Laman Entri"
- Hilangkan tanda check pada opsi tanggal bagian atas
- Klik tombol "SIMPAN"

Demo Template SimCleanearKlik disini untuk Demo Blogger Template Simple Clean & Clear

Donasi Blogger Tune-UpKlik disini untuk donasi/sumbangan untuk Blogger Tune-Up

Download Template SimCleanearKlik disini untuk download Blogger Template Simple Clean & Clear

Menggunakan Fasilitas Tambahan Blogger Template Simple Clean & Clear

1) Tabel
Selain perlengkapan standar, template simcleanear juga dilengkapi dengan fasilitas tabel yang sangat elegan.
Dibawah ini contoh kode tabel :

<table class="dl1" id="dl1">
<tbody>
<tr><th id="na">Informasi</th><th width="300">Keterangan</th></tr>
</tbody>
</table>

<table class="dl2" id="dl2">
<col/><col width="10"/>
<col width="300"/>
<tbody>
<tr><td>Nama</td><th>:</th><th>Blogger Template Simple Clean & Clear</th></tr>
<tr><td>Versi</td><th>:</th><th>Versi 1.0</th></tr>
<tr><td>Sistem Operasi</td><th>:</th><th>Win XP, Win Vista, Win 7</th></tr>
<tr><td>Password</td><th>:</th><th>-</th></tr>
<tr><td>Website Resmi</td><th>:</th><th><a href="http://programgratisan.blogspot.com/" target="_blank">Program Gratisan</a></th></tr>
<tr><td>Tanggal Rilis</td><th>:</th><th>18 Maret 2011</th></tr>
<tr><td>Ukuran File</td><th>:</th><th>42.8 Kb</th></tr>
<tr><td>Unduh</td><th>:</th><th>[<a href="http://modification-blog.blogspot.com/" target="_blank" rel="nofollow">Rekomendasi</a>]-[<a href="http://bonprog.blogspot.com/" target="_blank" rel="nofollow">Link 1</a>]-[<a href="http://programgratisan.blogspot.com/" target="_blank" rel="nofollow">Link 2</a>]</th></tr>
</tbody>
</table>

Dibawah ini preview hasil akhir tabel:

2) jQuery Auto Image Caption
Selain dilengkapi tabel, template Simcleanear dilengkapi fasilitas jQuery Auto Image Caption yaitu fasiitas yang secara otomatis menambahkan border dan keterangan pada gambar, seperti dibawah ini:
Penambahan kode (yang diblok) pada gambar:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_xcD4JK_dIjU/TBz6BiCp41I/AAAAAAAAELU/pejhLUoBAHM/s400/jQuery-Auto-Image-Caption.jpg">
<img class="gambar" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://2.bp.blogspot.com/_xcD4JK_dIjU/TBz6BiCp41I/AAAAAAAAELU/pejhLUoBAHM/d/jQuery-Auto-Image-Caption.jpg" border="0" alt="jQuery Auto Image Caption" id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

Lebih lengkapnya silahkan baca disini.

Selamat mencoba dan terima kasih atas segala apresiasinya terhadap Blogger Tune-Up. Happy Blogging :)

Apa (Rencana) yang Baru dari Blogger di Tahun 2011?

2011-03-15T00:29:00.012+07:00

Bismillah. Telah kita ketahui bersama bahwa tim pengembang Blogger terus melakukan perbaikan pada platform Blogger. Selama tahun 2010 telah banyak kita rasakan perbaikan-perbaikan pada platform Blogger membuat Blogger semakin mudah dari sisi manajemennya maupun coding. Kenapa Blogger Tune-Up selalu setia dengan platform Blogger?

Fakta Blogger

Dibawah ini sebuah fakta yang memperkuat kenapa Blogger Tune-Up setia dengan platform Blogger

7 tahun yang lalu tercatat kurang lebih 250.000 pembaca aktif Blogger tapi hari ini lebih dari 400 juta pembaca aktif blogger dan itu sudah melebihi jumlah populasi penduduk Amerika Selatan.
Blogger tersedia dalam 50 bahasa.
75 % traffic datang dari luar Amerika.
Para pengguna Blogger telah menulis lebih dari setengah trilliun kata-kata pada Blogger dan itu berarti lebih dari 5,3 juta novel.
Para pengguna Blogger menulis 250.000 kata dalam satu menit itu sama dengan 500 novel baru dalam sehari.

Blogger di Tahun 2010

Template Designer, "...tampilan blog Anda mudah untuk disesuai dengan keinginan dan kebutuhan tanpa harus menguasai HTML atau CSS" - Technorati ^[1]
Web Font, "fitur baru yang memberikan anda pilihan untuk menggunakan gaya huruf pada blog Anda hanya dengan satu klik mouse" - Spice Up Your Blog ^[2]
Real-Time Statistik, "...satu lagi alasan untuk mempertimbangkan itu di atas wordpress untuk blog hosting" - Socialmatica ^[3]
Perbaikan Penyaringan Spam, "ini dikelola google yang memungkinkan pengguna untuk memiliki sistem komentar yang benar-benar terbuka" - ThinkDigit ^[4]
Stabilitas, "karena blogger adalah layanan dengan nol downtime secara keseluruhan, kami melewatkan chart di sini. Kami berharap Anda tidak keberatan. Bukankah ini sangat menarik." - Royal Pingdom ^[5]

Rencana Besar Blogger di Tahun 2011^[6]

1). Antarmuka yang lebih modern (Modern User Interface)

Desain baru ini tidak hanya lebih bersih dan lebih modern, tetapi juga menggunakan Google Web Toolkit, yang merupakan teknologi web terbaru didalamnya.

Tampilan Dashboard Lama

Tampilan Dashboard Baru

Tampilan Editor Artikel Lama

Tampilan Editor Artikel Baru

2). Killer Mobile Experience

Mampu mendeteksi sesuai dengan browser yang digunakan, dan jika kita membuka halaman blog dengan perangkat mobile maka secara otomatis blogger akan mengarahkan kita pada halaman blog dengan konten khusus perangkat mobile yang lebih ringan dan cepat.

Killer Mobile Experience

3). Penemuan Konten Cerdas (Smart Content Discovery)

Blogger akan menyuguhkan fitur konten baru, sebuah penemuan yang memungkinkan Anda menemukan konten yang menarik dan terkait berdasarkan topik blog Anda saat membaca suatu artikel.

Smart Content Discovery

Referensi:
[1] Blogger Template Designer Goes Live
[2] New - Use Over 70 Cool Fonts On Blogger Template Designer
[3] SocialMatica
[4] New comment system on Blogger - filter the spam at ease
[5] The most reliable (and unreliable) blogging services on the Web
[6] Blogger Buzz: What’s New With Blogger

jQuery Anti Adblock

2011-03-09T11:58:00.009+07:00

Bismillah. Alhamdulillah satu widget lagi telah selesai dibuat... Sudah bukan rahasia lagi bahwa kebanyakan Blogger mencari keberuntungannya dari iklan di blog yang dikelolanya. Dan bukan rahasia pula bahwa para pengunjung kemudian merasa terganggu dengan iklan-iklan yang tampil pada suatu blog. Bagi para pengunjung blog yang sudah memahami konsep periklanan tentunya akan menghormati para pemilik blog yang sudah menghabiskan banyak waktunya hanya untuk menulis artikel dengan cara menonaktifkan perangkat lunak pemblokir iklan.

jQuery Anti Adblock Versi 2.00Versi Terbaru jQuery Anti Adblock 2.00

Para pemilik blog sering dibuat kaget ketika penghasilan dari iklannya tidak seimbang dengan jumlah kunjungan (traffic) blognya, hal ini bisa saja terjadi karena banyak faktor (tidak akan dibahas sekarang). Salah satu faktor yang mempengaruhi penghasilan dari program periklanan yang diikuti oleh sebuah blog adalah kurang fair-nya pengunjung blog (baca; kurang bisa menghargai, menghormati atau bahkan tidak mau berterima kasih), padahal bisa saja mereka menemukan sesuatu yang sangat berharga bagi mereka. Ini merupakan sikap mental yang perlu di budayakan ketika seorang pengunjung berjalan-jalan pada suatu blog dan kemudian menemukan sesuatu yang bermanfaat maka selayaknya ada timbal balik kepada pemilik blog minimal dengan cara tidak mengaktifkan perangkat lunak pemblokir iklan. Kecuali iklan yang ditampilkan pada suatu blog sudah sangat mengganggu atau bahkan keterlaluan maka silahkan saja untuk mengaktifkan perangkat lunak pemblokir iklan, bahkan ada beberapa pengelola blog yang curang dengan menyusupkan perangkat lunak yang bisa memicu virus, trojan atau backdoor. Disini memang permasalahan periklanan pada suatu blog sangatlah komplek, semua dikembalikan kepada para pengunjung dan para pemilik blog untuk berbuat fair. Pengunjung ingin nyaman membaca-baca tanpa harus terganggu dengan berserakannya iklan pada halaman sebuah blog, dan para pemilik blog pun ingin memiliki penghasilan dari blog yang dikelolanya maka sebaiknya pemilik blog pun memperhatikan keinginan para pengunjungnya.

Tips trik jQuery kali ini sebenarnya lebih di peruntukan bagi para pengelola blog yang fair dengan memperhatikan kaidah keseimbangan, kenyamanan dan keindahan penempatan iklan pada halaman blognya, yaitu cara memasang Anti Adblock dengan tujuan untuk mengajak berinteraksi dengan para pengunjung bahwa periklanan yang disertakan pada halaman blog kita sangat bermanfaat untuk pengelolaan blog kedepannya. jQuery Anti Adblock ini akan menampilkan informasi bahwa para pengunjung blog mengaktifkan perangkat lunak pemblokir iklan (semacan Adblock) saat berkunjung pada halaman blog kita, secara otomatis pemberitahuan akan muncul dan menutupi seluruh halaman blog yang dimaksud, pengunjung pun tidak dapat membaca-baca artikel. Agar artikel bisa ditampilkan maka perangkat lunak pemblokir iklan harus dimatikan dan kemudian halaman di reload/refresh.

Demo jQuery Anti AdblockAktifkan Adblock untuk melihat Demo jQuery Anti Adblock

Tentang jQuery Anti Adblock

jQuery Anti Adblock ini berfungsi untuk memberitahukan kepada para pengunjung jika mereka mengaktifkan perangkat lunak pemblokir iklan yang kemudian akan menampilkan pemberitahuan kepada para pengunjung dengan cara menutup seluruh artikel yang sedang dibacanya. Dibawah ini yang anda harus ketahuai tentang jQuery Anti Adblock :

jQuery Anti Adblock merupakan pengembangan dari jQuery Save The Environment miliknya OnlineLeaf.com (mode hemat energi)
Secara otomatis dalam jeda waktu tertentu halaman blog akan ditutup dengan sebuah halaman jQuery Anti Adblock dengan warna latar hitam pekat dan berisi informasi untuk berinteraksi dengan para pengunung
jQuery Anti Adblock tidak akan tampil jika pengunjung tidak menggunakan perangkat lunak pemblokir iklan
jQuery Anti Adblock tidak akan berjalan jika pengunjung menonaktifkan fungsi JavaScript para browsernya
jQuery Anti Adblock dikembangkan menggunakan framework jQuery, maka wajib hukumnya memasang framework jQuery pada blog anda
jQuery Anti Adblock dikembangkan oleh Blogger Tune-Up dengan menghabiskan banyak waktu maka jika anda ingin menggunakan jQuery Anti Adblock tidak diperkenankan membuang kredit pada halaman bagian bawah jQuery Anti Adblock
jQuery Anti Adblock ini bersifat gratis dan terbuka untuk digunakan dan dikembangkan pada dan oleh blog siapapun tanpa harus membayar atau tukar guling dengan apapun tetapi tidak diperkenankan membuang kredit pada bagian bawah halaman jQuery Anti Adblock
jQuery Anti Adblock diperbolehkan untuk di review pada blog siapapun dengan atau tanpa pemberitahuan ke Blogger Tune-Up, tetapi wajib memasukan link yang menuju blog Blogger Tune-Up pada artikel yang dibuat
Jika ditemukan bug atau error mohon kesediaannya untuk memberitahukan Blogger Tune-Up melalui email, twitter, facebook atau media yang anda sukai
Jika anda tidak memahami atau tidak sepakat dengan ketentuan diatas maka silahkan anda buat sendiri menurut versi anda yang lebih baik dari apa yang telah dibuat oleh Blogger Tune-Up

Integrasi jQuery Anti Adblock pada Blogger (Cara 1)

Langkah 1
Pastikan bahwa template blog anda telah terpasang framework jQuery
Langkah 2
Login ke Blogger
Langkah 3
Masuk ke "Rancangan - Edit HTML"
Langkah 4
Cari kode dibawah ini:

</head>

atau

</body>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

<script type="text/javascript">

/*

* jQuery Anti Adblock

* @copyright Hendriono http://modification-blog.blogspot.com

* @version 1.00 (9 Maret 2011)

*/

var standby = false;

var adminblog = "Nama Admin";

function CekBlok() {

if ($(".adsantilok").height() == "0") {

TutupHalaman();

}

}

function TutupHalaman() {

if (!standby) {

var h = 0;

h = jQuery(window).height();

jQuery("#energysaving").show().css({

height: "0",

width: "0",

left: "50%",

top: "50%"

}).animate({

width: "100%",

height: h,

left: "0",

top: "0",

opacity: "1"

}, 1000);

standby = true;

}

}

document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">');

function jAntiBlock() {

jQuery(function () {

jQuery(document).ready(function () {

setTimeout("CekBlok();", 1000);

jQuery("body").append('<div id="energysaving"><p>Anda tidak suka iklan?<br /><span>Saya juga. <br/>Tapi anda harus tahu bahwa iklan sangat membantu blog ini agar tetap tersedia dan membuat saya termotivasi untuk terus menulis hal-hal yang menarik pada blog ini.<br/> Mohon pertimbangannya untuk menonaktifkan perangkat lunak blokir iklan (misal; Adblock) khusus untuk blog ini. <br/>Sebagai ucapan terima kasih, saya akan memberikan apresiasi yang setinggi-tingginya jika suatu hari kita bertemu dikehidupan nyata.<br/>'+adminblog+'</span></p><div id="copyrightOnlineLeaf">Copyright 2011 <font style="color: #666666;">Modification-Blog.blogspot.com</font> - All rights reserved - Original Idea by <font style="color: #666666;">OnlineLeaf.com</font></div></div>');

});

});

}

jAntiBlock();

</script>

Langkah 6
Simpan template dan lanjutkan membaca pada "Integrasi jQuery Anti Adblock pada Iklan"

Integrasi jQuery Anti Adblock pada Blogger (Cara 2)

Selain dengan menggunakan cara diatas kita bisa menggunakan cara dibawah ini:
Langkah 1
Login ke Blogger
Langkah 3
Masuk ke "Rancangan"
Langkah 4
Tambahkan sebuah gadget "HTML/JavaScript" pada lokasi yang paling bawah dari blog
Langkah 5

Masukan (copy paste) kode yang ada di Langkah 5 Cara 1 pada bagian konten gadget HTML/JavaScript

Langkah 6
Simpan gadget

Integrasi jQuery Anti Adblock pada Iklan

<div class="adsantilok">

<!-- Simpan Iklan Disini -->

</div>

Source Code jQuery Anti AdblockKlik disini untuk Demo & Sourcecode jQuery Anti Adblock

Keterangan:

Ubah "Nama Admin" dengan nama pengelola blog atau sesuai dengan keinginan anda (Lihat Langkah 5 Cara 1)
Apabila pengunjung blog kita menonaktifkan JavaScript pada browsernya maka jQuery Anti Adblock total tidak dapat bekerja, bagaimana mengatasinya? Tunggu pada artikel berikutnya....

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Membuat Catatan Kaki Otomatis dengan jQuery

2011-02-28T12:06:00.008+07:00

Bismillah. Pada artikel sebelumnya Blogger Tune-Up pernah membahasa tentang "Menambahkan Catatan Kaki pada Artikel Blog", tetapi pada artikel tersebut penambahannya masih menggunakan cara manual. Kemudian Blogger Tune-Up memperbaikinya dengan menggunakan bantuan jQuery agar proses pembuatan catatan kaki dilakukan secara otomatis tanpa perlu kita memasukannya secara manual. Walaupun belum 100% otomatis tapi proses pembuatan catatan kaki dengan jQuery lebih sederhana, kita hanya perlu menambahkan sumber artikel dan judul artikel yang telah kita kutip dari artikel orang lain. Maka secara otomatis catatan kaki pada akhir halaman artikel akan terbentuk dengan susunan secara ascending (dari atas ke bawah) menggunakan nomor, tanpa perlu kita membuatnya.

Bagaimana membuat catatan kaki otomatis dengan jQuery? Ayo pelajari...

Demo jQuery Automatic FootnoteKlik disini demo jQuery Automatic Footnotes

Membuat Catatan Kaki Otomatis dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

blockquote {
 position: relative;
 padding: 0 10px;
 background-color: #ddd;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
blockquote p {
 padding: .5em;
 margin: 0;
}
blockquote sup {
 position: absolute;
 top: 3px;
 right: 3px;
}
#footnotes {
 margin-top: 3em;
 padding: 1em 2em;
 border-top: 4px solid #ccc;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script language='javascript'>//<![CDATA[
$(document).ready(function() {
 $(".blog-posts").append("<a name=\"footnotes\"><ol id=\"footnotes\"></ol></a>");
 footnote = 1;
 $("q[sumber],q[judul],blockquote[sumber],blockquote[judul]").addClass("footnote");
 $(".footnote").each(function() {
  $(this).append("<sup><a href=\"#footnotes\">["+footnote+"]</a></sup>");
  sumber="<li>";
  url=$(this).attr("sumber");
  judul=$(this).attr("judul");
  if(judul && url) {
  sumber+="<a href=\""+url+"\">"+judul+"</a>";
  } else if(judul) {
   sumber+=judul;
  } else if(url) {
   sumber+="<a href=\""+url+"\">"+url+"</a>";
  }
  sumber+="</li>";
  $("#footnotes").append(sumber);
  footnote++;
 });
});
//]]></script>

Langkah 7
Simpan template dan lanjutkan membaca artikel...

Menyisipkan kode Catatan Kaki Otomatis pada Artikel

Untuk mengutip suatu artikel orang lain yang kita masukan dalam artikel kita terdapat dua cara, yaitu :

Ada yang dikutip langsung beberapa baris atau paragraf kedalam artikel kita dan dibuat suatu quote (blockquote)
Ada juga yang hanya mengambil beberapa kalimat atau kata saja yang kemudian kita sisipkan kedalam artikel kita tanpa dipisahkan/diberi tanda khusus, seakan-akan kutipan tersebut menyatu dalam artikel kita.

Dari kedua metode pengutipan tersebut maka Blogger Tune-Up kemudian membedakan kode yang digunakan pada teknik kutipan artikel, yaitu:
(1) Cara kutipan yang kesatu menggunakan kode blockquote (kode ini sebenarnya terintegrasi pada editor blogger)
Contoh:

<blockquote>Hari Valentine (bahasa Inggris: Valentine's Day) atau disebut juga Hari Kasih Sayang, pada tanggal 14 Februari adalah sebuah hari di mana para kekasih dan mereka yang sedang jatuh cinta menyatakan cintanya di Dunia Barat.</blockquote>

(2) Cara kutipan yang kedua menggunakan kode q
Contoh :

Koneksi antara ketiga martir ini dengan hari raya cinta romantis tidak jelas. Bahkan Paus Gelasius I, pada tahun 496, menyatakan bahwa sebenarnya tidak ada yang diketahui mengenai martir-martir ini namun hari 14 Februari ditetapkan sebagai hari raya peringatan <q>santo Valentinus.</q>

Tetapi jika kita perhatikan kode diatas tak mampu menampilkan sumber dan judul artikel yang dikutip, maka harus kita sempurnakan kodenya menjadi seperti dibawah ini:

(1) Cara kutipan yang kesatu menggunakan kode blockquote
Contoh:

<blockquote sumber="http://alamatlink.com" judul="Hari Raya Valentine">Hari Valentine (bahasa Inggris: Valentine's Day) atau disebut juga Hari Kasih Sayang, pada tanggal 14 Februari adalah sebuah hari di mana para kekasih dan mereka yang sedang jatuh cinta menyatakan cintanya di Dunia Barat.</blockquote>

(2) Cara kutipan yang kedua menggunakan kode q
Contoh :

Koneksi antara ketiga martir ini dengan hari raya cinta romantis tidak jelas. Bahkan Paus Gelasius I, pada tahun 496, menyatakan bahwa sebenarnya tidak ada yang diketahui mengenai martir-martir ini namun hari 14 Februari ditetapkan sebagai hari raya peringatan <q sumber="http://alamatlink.com" judul="Hari Raya Gereja">santo Valentinus.</q>

Keterangan:

Untuk mengedit kode-kode catatan kaki artikel maka kita harus pada mode editor "Edit HTML"
Kode didalam sumber="" akan ditampilkan pada catatan kaki sebagai link, jika kode sumber="" tidak di ikuti oleh kode judul="" maka yang akan ditampilkan pada catatan kaki adalah sumbernya saja yang berupa link
Kode didalam judul="" akan ditampilkan pada catatan kaki sebagai judul biasa tanpa link, jika kode judul diikuti oleh kode sumber="" maka judul akan ditampilkan dan judul tersebut memiliki link jika diklik.
Kode sumber="" dan kode judul="" bisa saja tidak disertakan kedua-duanya tetapi wajib menggunakan salah satunya.
Catatan kaki pada akhir halaman akan disusun otomatis dengan angka yang dimulai dari kode catatan kaki yang paling atas dari halaman artikel.
Artikel yang merupakan kutipan secara otomatis akan diberi nomor berupa angka yang tersusun secara otomatis dari atas halaman artikel ke akhir halaman artikel.

Demo & Source CodeKlik disini demo dan source code jQuery Automatic Footnotes

Selamat mencoba dan semoga berhasil...
Special thanks to CSSNewbie.com for great idea

jToCTree Versi 1.0 - Daftar Isi Folder Bercabang

2011-01-28T19:42:00.013+07:00

Bismillah. Alhamdulillah... Satu widget lagi telah selesai di buat untuk para sahabat setia Blogger Tune-Up. Widget ini kemudian diberi nama jToCTree yang merupakan kepanjangan dari jQuery Table of Content Treeview hasil kolaborasi/perpaduan framework jQuery, JSON Feed, dan jQuery Treeview plugin buatan Jörn Zaefferer^[1]. Fungsinya sama dengan jenis Daftar Isi jQuery Accordion^[2] yaitu untuk menampilkan semua data artikel kita sehingga proses pencarian artikel oleh para pembaca blog kita semakin mudah dan menarik.

Adapun ciri khas jToCTree versi 1.0 adalah sebagai berikut:

Tampilan mirip dengan Explorer pada komputer, ketika folder di klik maka isi folder akan ditampilkan
Folder diambil dari kategori/label artikel dan disusun secara ascending (dimulai dari A-Z)
Judul artikel dan alamat artikel ditampilkan secara otomatis tanpa harus kita masukan secara manual dan secara otomatis pula tersusun secara ascending
jToCTree tidak sama dengan dTree yang sempat booming beberapa saat yang lalu, karena dTree bekerja secara manual (data harus dimasukan sendiri oleh pemilik blog)
jToCTree menggunakan animasi slide yang akan menampilkan artikel pada saat kategori tertentu diklik
Dan silahkan telusuri keunggulan jToCTree

Demo jToCTree Versi 1.0Klik disini demo jToCTree Versi 1.0

Jika sahabat blogger tertarik untuk menggunakan jToCTree ini ada beberapa hal yang perlu diketahui/disepakati, diantanya:

Blogger Tune-Up menghabiskan banyak waktu untuk membuat jToCTree ini, donasi atau apresiasi-nya akan sangat membantu Blogger Tune-Up untuk terus berkarya
jToCTree ini dibuat oleh seorang blogger newbie, maka jika anda merasa master (lebih hebat) dari Blogger Tune-Up, saya secara pribadi mohon ma'af yang sebesar-besarnya karena tidak mampu membuat sesuatu yang bagus buat anda yang sudah menjadi master blog
jToCTree ini bersifat gratis untuk digunakan pada blog siapapun tanpa harus membayar atau tukar guling dengan apapun
jToCTree diperbolehkan untuk di review pada blog siapapun dengan atau tanpa pemberitahuan ke Blogger Tune-Up, tetapi wajib memasukan link yang menuju blog Blogger Tune-Up pada artikel yang dibuat
Tidak diperbolehkan melakukan decompile/unpacking terhadap script code jToCTree dengan tujuan untuk membuang kredit link yang menuju ke blog Blogger Tune-Up
Jika ditemukan bug atau error mohon kesediaannya untuk memberitahukan Blogger Tune-Up melalui email, twitter, facebook atau media yang anda sukai
Jika tidak sepakat dengan hal diatas maka silahkan membuat sendiri sesuatu yang mirip dengan jToCTree atau yang lebih baik.

Source Code jToCTree Versi 1.0Klik disini source code jToCTree Versi 1.0

Beberapa hal yang harus diperhatikan sebelum menggunakan jToCTree, diantaranya:

Blogger Tune-Up tidak menyediakan URL untuk script jToCTree maka anda yang akan menggunakan silahkan upload sendiri pada hosting milik anda
Semua gambar pendukung jToCTree disediakan pada hosting Picasa, jadi jika anda ingin menggunakan sendiri gambar yang sesuai dengan selera silahkan upload pada hosting milik anda
jToCTree ini merupakan versi 1.0 maka ada kemungkinan akan diperbaiki pada hari-hari berikutnya
Let's begin for play...

Integrasi jToCTree Versi 1.0 pada Template Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

/*  jToCTree  */
#judafistre {background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;padding:5px;border:1px solid #339DC6; }
.branda { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d/blogger.png) 0px 4px no-repeat !important; }
.judafis { padding:0 0 0 4px; font-weight:bold;}
.treeview, .treeview ul { padding: 0;margin: 0;list-style: none;}
.treeview ul { background-color: transparent; margin-top: 4px;}
.treeview .hitarea { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d/treeview-default.gif) -64px -25px no-repeat; height: 16px; width: 16px; margin-left: -16px; float: left; cursor: pointer;}
* html .hitarea { display: inline; float:none;}
.treeview li { margin: 0; padding: 3px 0pt 3px 16px;}
.treeview a.selected { background-color: #eee;}
#treecontrol { margin: 2px 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d/treeview-default-line.png) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-black li { background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d/treeview-black-line.png); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d/treeview-black.gif); }
.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 18px; display: block; }
.filetree span.folder { background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-4/d/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d/file.gif) 0 0 no-repeat; }
.filetree span.file a { text-decoration:none; }

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script type='text/javascript' src='https://github.com/jzaefferer/jquery-treeview/raw/master/jquery.treeview.js'/>
<script type='text/javascript' src='http://hens-pusat-buku.googlecode.com/svn/trunk/jsontoctreeview.js'/>
<script language='javascript'>//<![CDATA[
var judul = 'Daftar Isi'
function dafisjtoctree() {
$('#hitam').treeview({
animated: 'fast',
collapsed: true,
control: '#treecontrol'
});
}
$(document).ready(function() {
dafisjtoctree();
});
//]]></script>

Langkah 7
Simpan template dan lanjutkan membaca artikel...

Integrasi jToCTree Versi 1.0 pada Halaman atau Widget

Langkah 8

Buat suatu artikel dan pindahkan editor artikel pada mode edit HTML atau buatlah suatu widget dengan jenis HTML/JavaScript

Langkah 9
Masukan (copy paste) kode dibawah ini didalam artikel atau konten widget:

<div id="judafistre">
<div id="treecontrol">
<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder" href="#">Buka Tutup</a>
</div>
<script src="http://modification-blog.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree"></script>
</div>

Langkah 10
Terbitkan artikel atau simpan widget dan preview...

Keterangan:

Lihat langkah 6 baris 1; buang satu baris tersebut jika blog anda telah memiliki framework jQuery
Lihat langkah 6 baris 3; upload-lah file tersebut yang tersedia pada source code yang sudah anda download dan ambil link file jtoctree-1.0.js menggantikan URL/jtoctree-1.0.js
Lihat langkah 6 baris 5; ubahlah kata 'Daftar Isi' dengan nama yang ingin anda gunakan
Lihat langkah 6 baris 8; ubahlah kata 'fast' dengan 'normal' jika ingin mengubah efek slide menjadi lebih lambat
Lihat langkah 6 baris 9; ubahlah kata true menjadi false jika ingin tampilan folder daftar isi langsung terbuka semua pada saat dilihat
Lihat langkah 6 baris 10; buanglah control: '#treecontrol' jika kita tidak ingin menampilkan link/tombol Tutup | Buka | Buka Tutup
Lihat langkah 9 baris 5; ubahlah alamat http://modification-blog.blogspot.com sesuai dengan alamat blog anda atau buang sekalian

Demo jToCTree Versi 1.0Klik disini demo jToCTree Versi 1.0

Source Code jToCTree Versi 1.0Klik disini source code jToCTree Versi 1.0

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan kaki:
[1] Special thanks to Jörn Zaefferer for jQuery Treeview plugin
[2] Daftar Isi jQuery Accordion

jPreCode Auto Width - Tampilkan Kode pada Artikel Blog

2011-01-28T00:23:00.003+07:00

Bismillah. jPreCode Auto Width atau jQuery Pre Code Auto Width digunakan untuk menampilkan kode-kode bahasa pemrograman seperti HTML, XML, Javascript, CSS, C, C++, ASM, HEX, Visul Basic, Delphi, dan lain-lain pada artikel blog. Ketika pembaca mengarahkan pointer mouse ke area kode maka lebar area kode akan bertambah secara otomatis dan ketika pointer mouse meninggalkan area kode maka lebar area kode akan kembali seperti sebelumnya. Hal ini sangat bermanfaat bagi para blogger dan web desainer yang suka berbagi source code didalam artikel yang dibuatnya serta mempermudah para pembaca untuk membedakan antara artikel dengan source code.

Source & Demo jPreCodeKlik disini demo & source code jPreCode AutoWidth

Integrasi jPreCode Auto Width pada Template Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

pre {
 position:relative;
 z-index:50;
 background:#212121 url(precodebg1.gif) top left repeat; 
 border:1px solid #999;
 color:#FFF; /* #000 untuk precodebg2 - #FFF untuk precodebg1 */
 display:block;
 font:13px/18px "Courier New",Courier,monospace;
 margin:10px 0 20px;
 overflow:auto;
 padding:18px 10px 17px;
 overflow-x:scroll;
 width: 450px;
}
pre .infocode {
 color: #999;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function () {
   $('pre').hover(function () {
       $(this).stop().animate({
           width: 820
       }, 300).css({
           'overflow-x': 'scroll'
       })
   }, function () {
       $(this).stop().animate({
           width: 450
       }, 300).css({
           'overflow-x': 'scroll'
       })
   });
});
</script>

Langkah 7
Simpan template dan lanjutkan membacanya...

Integrasi jPreCode Auto Width pada Artikel

Langkah 8
Buat suatu artikel dan masukan source code yang ingin disertakan, contoh seperti kode jQuery dibawah ini:

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

$('.acc_container').hide(); //sembunyikan atau tutup semua keranjang
$('.acc_trigger').css('cursor', 'pointer'); //ubah pointer mouse saat berada pada judul
$('.acc_trigger:first').addClass('active').next().show(); //Tambahkan class "active" untuk judul pertama, maka keranjang akan terbuka/aktif
$('.acc_trigger').click(function(){ //saat judul di klik
 if( $(this).next().is(':hidden') ) { //keranjang berikutnya ditutup
  $('.acc_trigger').removeClass('active').next().slideUp(); //Buang semua class "active" pada ".acc_trigger" dan berikan efek slide up untuk keranjang berikutnya
 $(this).toggleClass('active').next().slideDown(); //Tambahkan class "active" pada ".acc_trigger" untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya
}
return false; //kembali ke awal jika ada kesalahan
});

});
</script>

Langkah 9
Kemudian tambahkan/apitkan tag <pre></pre> pada kode diatas, sehingga seperti dibawah ini:

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

$('.acc_container').hide(); //sembunyikan atau tutup semua keranjang
$('.acc_trigger').css('cursor', 'pointer'); //ubah pointer mouse saat berada pada judul
$('.acc_trigger:first').addClass('active').next().show(); //Tambahkan class "active" untuk judul pertama, maka keranjang akan terbuka/aktif
$('.acc_trigger').click(function(){ //saat judul di klik
 if( $(this).next().is(':hidden') ) { //keranjang berikutnya ditutup
  $('.acc_trigger').removeClass('active').next().slideUp(); //Buang semua class "active" pada ".acc_trigger" dan berikan efek slide up untuk keranjang berikutnya
 $(this).toggleClass('active').next().slideDown(); //Tambahkan class "active" pada ".acc_trigger" untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya
}
return false; //kembali ke awal jika ada kesalahan
});

});
</script>
</pre>

Catatan: Setiap source code yang ingin ditampilkan harus diapit oleh tag <pre></pre>
Langkah 10
Terbitkan artikel dan preview artikel anda...

Keterangan:
Perhatikan kode-kode (dari atas ke bawah) yang diblok pada langkah 4 dan langkah 6 :

background:#212121 url(URL/precodebg1.gif) top left repeat; : ubah warna background dan alamat gambar background sesuai keinginan anda. Download source code jPreCode Auto Width dan ekstrak file hasil download kemudian upload file gambar background tersebut. Terdapat dua pilihan warna background, precodebg1.gif untuk warna latar gelap dan precodebg2.gif untuk warna latar cerah.
color:#FFF; ubah nilai #FFF menjadi #000 agar warna huruf berubah dari putih menjadi hitam.
width: 450px; untuk mengatur lebar kode area sebelum pointer mouse masuk ke area kode. Nilai 450 harus sama dengan nilai 450 pada kode yang ada di langkah 6.
width: 820 adalah lebar area kode maksimal dalam pixel ketika pointer mouse berada di dalam area kode.
width: 450 adalah lebar area kode minimal dalam pixel ketika pointer mouse berada di luar area kode.

Untuk para master blog dan master web desainer mohon ma'af jika artikelnya terlalu katro dan atau ketinggalan jaman. Artikel ini tidak cocok untuk para master yang sudah banyak makan garam di dunia blogging code dan web code.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

jQuery Accordion Versi 2

2011-01-25T19:15:00.006+07:00

Bismillah. Sebenarnya jQuery Accordion^[1] pernah dibahas sebelumnya oleh Blogger Tune-Up tetapi karena banyaknya permintaan dari pembaca setia Blogger Tune-Up maka sekarang akan dibahas jQuery Accordion dengan jenis lainnya yang lebih sederhana dan sekaligus belajar tentang CSS (Cascading Style Sheet) dan penulisan script jQuery. Jenis ini merupakan jQuery Accordion yang di kembangkan oleh Soh Tanaka^[2]. Seperti apa Simple jQuery Accordion Versi 2?

Demo jQuery AccordionKlik disini untuk melihat demo jQuery Accordion Version 2

Skenario HTML

Kita akan membuat suatu wadah utama (class="container") yang terdiri dari 4 buah keranjang (class="acc_container") lagi didalamnya. Sedangkan masing-masing judul (h2) wadah (yang kemudian akan dibuat pemicu saat di klik) diberi class="acc_trigger". Maka perhatikan kode dibawah ini:

<div class="container">

<h2 class="acc_trigger">Web Design &amp; Development</h2>
<div class="acc_container">
<div class="block">
<h3>Need a Website?</h3>
<img src="img1.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>

<h2 class="acc_trigger">Logo / Corporate Identity</h2>
<div class="acc_container">
<div class="block">
<h3>Need a Logo?</h3>
<img src="img2.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>

<h2 class="acc_trigger">Seach Engine Optimization</h2>
<div class="acc_container">
<div class="block">
<h3>Need to be Heard?</h3>
<img src="img3.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>

<h2 class="acc_trigger">eCommerce</h2>
<div class="acc_container">
<div class="block">
<h3>Have Product to Sell?</h3>
<img src="img4.gif" alt="">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>

</div>

Jangan dulu dilanjutkan membacanya jika skenario HTML diatas belum dipahami!!! (wuih pake tanda seru)

Skenario CSS

Dalam skenario ini tidak akan dijelaskan attribute CSS yang menyertainya, hanya akan dijelaksan garis besarnya saja. Perhatikan gambar dan skenario CSS dibawah ini:

.container berfungsi untuk membuat suatu wadah utama
h2.acc_trigger berfungsi untuk memberikan efek pada judul pada masing-masing keranjang (acc_container)
h2.acc_trigger:hover berfungsi untuk memberikan efek pada judul pada masing-masing keranjang (acc_container) saat mouse pointer berada pada judul tersebut
h2.acc_trigger.active berfungsi untuk memberikan efek pada judul pada masing-masing keranjang (acc_container) saat wadah sedang diaktifkan (ditampilkan)
.acc_container berfungsi untuk membuat keranjang yang berisi artikel dan gambar
.acc_container .block berfungsi untuk membatasi artikel dan gambar agar tidak terlalu dekan dengan wadahnya kecil (acc_container)
kode css selanjutnya silahkan diperlajari sendiri (kata guru tidak boleh semua diberikan, jadi harus ada PR-nya. Hehehehe...)

.container {
width: 500px;
margin: 0 auto;
padding: 10px;
}
h2.acc_trigger {
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
color: #fff;
display: block;
padding: 0 0 0 50px;
text-shadow: 1px 1px 0 #000;
}
h2.acc_trigger:hover {
color: #ccc;
}
h2.acc_trigger.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 498px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.acc_container .block {
padding: 15px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
text-align:justify;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}

Jangan dulu dilanjutkan membaca jika skenario CSS diatas belum dipahami!!! (tarik nafas dari hidung keluarkan dari mana sajalah)

Skenario jQuery

Sekarang menginjak ke kode jQuery-nya. Makanya disimpan terakhir karena ternyata kode jQuery-nya tidak terlalu rumit. Perhatikan kode dibawah ini dan keterangan yang menyertainya.

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

$('.acc_container').hide(); //sembunyikan atau tutup semua keranjang
$('.acc_trigger').css('cursor', 'pointer'); //ubah pointer mouse saat berada pada judul
$('.acc_trigger:first').addClass('active').next().show(); //Tambahkan class "active" untuk judul pertama, maka keranjang akan terbuka/aktif

$('.acc_trigger').click(function(){ //saat judul di klik
if( $(this).next().is(':hidden') ) { //keranjang berikutnya ditutup
$('.acc_trigger').removeClass('active').next().slideUp(); //Buang semua class "active" pada ".acc_trigger" dan berikan efek slide up untuk keranjang berikutnya
$(this).toggleClass('active').next().slideDown(); //Tambahkan class "active" pada ".acc_trigger" untuk judul (trigger) yang diklik dan tambahkan efek slide down pada keranjang berikutnya
}
return false; //kembali ke awal jika ada kesalahan
});

});
</script>

Jangan lupa untuk memasukan framework jQuery^[3] diatas kode jQuery yang ada pada skenario jQuery

Source Code jQuery AccordionKlik disini untuk mengunduh source code jQuery Accordion

Selamat mencoba dan semoga berhasil. Jika pusing makan parasetamol ya... Happy Blogging :)

Catatan kaki:
[1] Memahami Efek jQuery Accordion
[2] Special thanks to Soh Tanaka with Simple Accordion with CSS & jQuery article
[3] Memahami dan Mengatasi Konflik Script jQuery

Lindungi Gambar (Image Protector) dengan jQuery

2010-12-18T02:07:00.006+07:00

Bismillah. Kata "melindungi" menunjukan adanya kelemahan, dan seandainya dijabarkan lebih jauh maka sesuatu hal yang dilindungi tetap memiliki celah keamanan yang bisa saja digunakan untuk mengeksploitasi. Kata seorang pakar jaringan melindungi itu memiliki tingkat kekuatan sekitar 99% terhadap exploitasi dari luar. Begitu pula dengan tips trik jQuery kali ini, tujuannya untuk melindungi gambar yang kita upload pada halaman blog agar tidak mudah untuk diambil dan disebarkan lagi oleh orang lain. Tetapi bukan berarti gambar benar-benar aman dari pencurian karena masih banyak cara untuk bisa mengambil gambar dari suatu situs walau gambarnya dilindungi. Plugin jQuery Image Protector ini buat oleh David Walsh^[1].

Kenapa gambar perlu di lindungi?

Menjaga keaslian sumber, seandainya kita adalah pemilik atau pembuat gambar
Menjaga gambar dari olahan citra digital tangan-tangan jahil, jika gambar tersebut merupakan hasil photo shoot sendiri atau keluarga
Menghindari hotlinking^[2] yang bisa mengakibatkan hosting pribadi kita kehilangan banyak bandwidth. Hotlinking sangat merugikan bagi blogger yang menggunakan hosting sendiri, bagi pengguna blogspot jangan takut dengan hotlinking.

Apa hotlinking?

Hotlinking atau sering disebut juga inline linking, leeching, piggy-backing, direct linking, offsite image grabs, bandwidth theft adalah suatu cara pengambilan gambar dari suatu situs untuk kemudian ditampilkan kembali pada situs lainnya dengan menggunakan link dan file gambar yang sama. Sederhananya; orang lain mengambil gambar dari situs kita secara langsung menggunakan link dari hosting yang sama tanpa menguploadnya lagi. Lebih sederhananya; "SALIME" artinya SAtu LInk gaMbar rame-ramE. Hal ini merugikan bagi penyewa hosting karena mereka akan kehilangan banyak bandwidth bahkan bisa over quota sedangkan yang membayar adalah penyewa hosting. Sedangkan penyedia layanan hosting tidak bisa melakukan apapun pada mereka para hotlingking. Lebih lengkapnya tentang Hot-Linking silahkah baca disini^[3] tapi anda harus banyak makan roti dulu biar lancar bahasa Inggris (hahaha...)

Integrasi jQuery Image Protector pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'http://lh3.ggpht.com/_xcD4JK_dIjU/TQukGToihnI/AAAAAAAAEqo/58_UsBfwHdo/s800/blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('body')
});
};
$(window).bind('load', function() {
$('img.protect').protectImage().parents('a').removeAttr('href');
});
</script>

Langkah 5
Simpan template dan baca langkah selanjutnya...

Memasukan kode jQuery Image Protector pada gambar

Setelah plugin jQuery Image Protector di integrasikan dengan template, maka langkah selanjutnya memasang kode protector pada gambar yang akan dilindungi.

Langkah 6
Upload suatu gambar pada artikel atau pada blog anda dan pindahkah mode editor ke mode "Edit HTML"
Langkah 7
Sisipkan kode dibawah ini:

class="protect"

Pada kode gambar seperti dibawah ini:

<img src="1.jpg"/>

Sehingga menjadi:

<img class="protect" src="1.jpg"/>

Misal:
Sebelum disisipkan kode:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>

Setelah disisipkan kode:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img class="protect" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>

Langkah 8
Terbitkan artikel anda dan silahkan cek dengan klik kanan "View Image", klik kanan "Save Image as..." atau klik gambar lalu drag pada tab baru...

Demo dan Source CodeKlik disini untuk download demo dan source code jQuery Image Protector

Keterangan:

Jika anda pernah memasang perpustakan jQuery maka kode pada langkah 4 baris 1 tidak perlu diikut sertakan, baca disini

Referensi:
[1] David Walsh
[2] Simple Wikipedia : Hot-Lingking
[3] Wikipedia : Inline Linking

Membuang Link Gambar Yang Rusak Dengan jQuery

2010-12-17T00:35:00.005+07:00

Bismillah. Gambar merupakan salah satu perlengkapan pada blog yang berfungsi sebagai penegas, pemanis, iklan, atau bahkan sebagai pengampai suatu kalimat singkat yang terkadang sulit untuk disampaikan dengan tulisan. Gambar mampu mewakili kalimat panjang yang digunakan untuk menuangkan ekspresi seseorang dan banyak lagi fungsi dari gambar. Bagi blogger yang suka mengupload gambar sebagai pelengkap suatu artikel harus lebih berhati-hati dengan hosting yang digunakan, karena bisa saja gambar-gambar yang sudah kita upload dikemudian hari akan dihapus oleh pemilik hosting. Hal ini akan merusak tampilan artikel yang sudah ditulis. Jika jumlah gambar sedikit kita bisa saja dengan mudah untuk menggantinya, bagaimana jika gambar yang sudah kita sertakan berjumlah ratusan? Pusiiiiing...

Link gambar yang rusak atau hilang (broken image) sangat menggangu tampilan dari blog, dari pada kita harus mengecek satu-persatu gambar pada blog kita dan kemudian membuangnya, lebih baik kita menambahkan sedikit script jQuery untuk membuangnya secara otomatis link gambar yang rusak (broken image).

Kode jQuery Untuk Membuang Link Gambar Yang Rusak

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script type='text/javascript'>
$('img').error(function() {
$(this).remove();
});
</script>

Langkah 5
Simpan template dan preview blog anda...

Happy Blogging... :)

Membedakan Komentar Penulis Dan Pengunjung Dengan jQuery

2010-12-16T16:14:00.008+07:00

Bismillah. Telah banyak yang membahas tentang cara membedakan komentar penulis dengan komentar pengunjung, bahkan jika kita mencari di mesin pencari dengan kata kunci tersebut maka kita akan menemukan ribuan blogger membahas hal tersebut, dari master sampai newbie. Tips trik blogger hack kali ini tidak akan menggunakan teknik yang sama (yang pernah dibahas kebanyakan blogger dengan menggunakan XHTML) tetapi kali ini akan melibatkan jQuery sebagai styler-nya (baca; pemberi sentuhan). Dengan beberapa keunggulan tentunya, diantaranya; lebih sederhana kode yang digunakan; lebih mudah di modifikasi; dan silahkan temukan sendiri kelebihan lainnya.

Persyaratan Untuk Memodifikasi Komentar

Dibawah ini beberapa hal yang harus diterapkan sebelum memodifikasi komentar, diantaranya:

Blogger anda harus memiliki widget profile/tentang/about bawaan blogger (wajib hukumnya)
Template anda harus sudah terpasang perpustakaan jQuery^[1] (wajib hukumnya)

Kode jQuery Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</head>

Langkah 5
Masukan perpustakaan jQuery dibawah ini diatas kode pada langkah 4:

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

Langkah 6
Cari kode dibawah ini (kode dibawah ini tersedia jika blogger anda memiliki widget profile):

<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>

Masukan (copy paste) kode pada langkah 7 disini (yang di blok "xxx" sesuai penamaan yang anda berikan)

<b:else/> <!-- normal blog profile -->

Langkah 7
Masukan (copy paste) kode jQuery dibawah ini diantara kode pada langkah 6:

<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>

Langkah 8
Simpan Template dan lanjutkan ke langkah berikutnya...

Kode CSS Komentar

Langkah 9
Cari kode dibawah ini:

]]></b:skin>

Langkah 10
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 9:

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 {
background-color: #CBC39C;
padding: 3px;
margin-top: 0px;
border: 1px solid #ccc;
border-top: none;
}

Langkah 11
Simpan Template dan preview blog anda...

Keterangan:

Jika setelah dilakukan modifikasi ini komentar tidak mengalami perubahan ada kemungkinan kode CSS standar blogger sudah di rubah oleh pembuat template
Dan atau terjadi konflik (tambrakan) kode jQuery yang digunakan dengan kode jQuery lainnya
Lihat Demonya disini

Penjelasan tentang kode jQuery dan kode CSS akan dibahas dalam kesempatan mendatang dan itu juga jika sedang semangat untuk menulis... Happy blogging... :)

STP For Blogger - Memelihara Sebuah Blog

2010-12-04T12:38:00.003+07:00

Bismillah. Apa sih maksudnya? jQuery apa lagi? Mungkin itu yang terlintas dibenak sahabat blogger dengan judul artikel kali ini. Judul artikelnya menggunakan bahasa Inggris bukan karena ingin di sebut "Nginggris" tapi memang agak sulit untuk kemudian menterjemahkannya kedalam bahasa Indonesia. Ide-nya muncul dari selembar kertas bungkus jajanan gorengan dikantin hari ini. Saat perut lapar kemudian masuk kekantin untuk membeli beberapa lembar goreng-gorengan dengan harga kurang dari Rp. 5000,- kemudian di bungkus dengan secarik kertas yang sudah digunting rapih hingga sebagian artikel hilang. Sambil makan gorengan aku baca-baca artikel bungkus gorengan tersebut dengan judul cukup membuat penasaran "Memelihara Sebuah Merk". Dengan santainya aku baca artikel tersebut tanpa keseriusan, bahkan sambil berkelakar dengan teman. Hingga akhirnya bacaan dalam hati ini terhenti pada satu singkatan pendek "STP" dalam kurungnya (segmentation, targeting dan positioning). Terpancinglah otak blogger-ku untuk mengimplementasikan STP pada blog.

Segmentation

Jika anda adalah blogger dan kemudian berencana ingin menciptakan agar blog kita menjadi terkenal dengan jumlah pengunjung jutaan sehari maka hal yang terpenting adalah menentukan tema artikel utama blog kita untuk para pengunjung. Tema disini dimaksudkan agar pengunjung blog kita menjadi fanatik dengan artikel-artikel yang kita buat karena mereka yang berkunjung adalah orang-orang tertentu/khusus. Misal tema tentang JavaScript, jQuery, Mootools, XHTML, CSS, Elektronik, Otomotif, atau yang sesuai dengan keahlian anda didunia maya atau dunia nyata. Hindari membuat tema yang berisi informasi tak karuan, acak-acakan dan tak jelas target pembacanya. Segmentation adalah menentukan tema utama blog dengan segmen (cakupan target pembaca) pada jenis atau kategori tertentu.

Salah satu kesalahan blogger Indonesia adalah masalah tema blog yang topiknya tidak menentu dan tidak jelas cakupan target pembacanya, sehingga menggunakan trik yang cukup "jorok" untuk memancing (baca: memaksa) pembaca agar berkunjung ke blog miliknya. Blogwalking adalah salah satu cara yang paling banyak digunakan oleh para Blogger Indonesia untuk mengajak blogger lain berkunjung. Pada mulanya blogwalking dilakukan untuk mencari dan menemukan informasi menarik yang digunakan untuk memicu ide-ide segar dalam otak kita. Atau ada juga yang menyebutkan bahwa blogwalking dilakukan untuk memberikan apresiasi terhadap artikel sahabat blogger lain. Tapi kemudian kegiatan blogwalking dilakukan hanya untuk memancing (baca; memaksa) blogger lain agar berkunjung ke blog kita, sehingga komentar-komentar yang ditinggalkan pada blog kita hanya sebagai suatu balasan tanpa maksud dan tidak terencana setelah melihat dan membaca artikel-artikel yang dibuat kurang begitu bermutu dan tanpa arah.

Targeting

Targeting adalah menentukan jumlah pengunjung untuk blog kita pada periode tertentu. Hal ini penting agar kita dapat mengetahui seberapa populer dan penting blog kita dimata para pengunjung. Buatlah target jumlah pengunjung para periode tertentu, hal ini digunakan sebagai salah satu instrumen bahan evaluasi pada blog kita, sehingga pada periode tertentu kita dapat menemukan kekurang-kekurangan yang harus diperbaiki pada blog kita, baik itu dari sisi mutu artikel maupun dari sisi layout. Perhatikan para pengunjung blog kita apakah berasal dari satu alamat ataukah dari berbagai alamat yang silih berganti dan berubah-ubah dalam periode tertentu. Jika para pengunjung yang datang kebanyakan berasal dari satu alamat tertentu dan tidak berubah-ubah pada periode tertentu maka ini salah satu instrumen bahwa blog kita bermanfaat dan penting bagi mereka. Tapi jika para pengunjung berasal dari berbagai alamat yang berubah-ubah pada periode tertentu maka hati-hatilah karena ini merupakan indikasi bahwa blog kita kurang bermanfaat dan tidak penting bagi para pengunjung walaupun bisa saja jumlah pengunjung dalam jumlah banyak setiap harinya. Segera lakukan evaluasi pada blog kita dengan berbagai pertanyaan "mengapa", jika kita mau terus berusaha mengevaluasi maka suatu hari blog anda akan masuk dalam kategori profesional saat kita sendiri sebagai pemilik tidak/belum menyadarinya.

Positioning

Positioning adalah memperhatikan posisi blog kita saat ini baik dimata pengunjung ataupun dimata mesin pencari. Hal ini juga penting secara internal maupun eksternal agar kita dapat dengan mudah mengevaluasi kekurangan blog kita. Jika posisi blog kita saat ini bagus dari sisi jumlah kunjungan maupun dari sisi mesin pencari maka itu menandakan bahwa blog kita cukup unik dan khusus. Secara internal positioning sangat berpengaruh terhadap semangat pemilik blog untuk terus menulis artikel dan memperbaiki kualitas artikelnya. Secara eksternal positioning juga berpengaruh terhadap jumlah kunjungan karena para pengunjung akan merasa menemukan suatu blog yang unik dan khusus yang sangat cocok bagi mereka.

Terus pantau posisi blog kita agar kita dapat terus meningkatkan kualitas blog kita serta bandingkan (compare) posisi blog kita dengan blog-blog yang sejenis agar kita dapat menemukan keunikan yang harus di tonjolkan pada blog kita. Untuk melakukan perbandingan antara blog kita dengan blog kompetitor bisa menggunakan situs-situs penyedia layanan compare seperti Google dan Alexa.

Jika kita mampu merumuskan STP dengan baik bukan tidak mungkin blog kita akan menjadi blog yang profesional dan berujung dengan penghasilan yang bukan saja lumayan tapi muantaaap! Karena STP adalah salah satu faktor marketing yang bertujuan untuk mempopulerkan blog kita dan memposisikan blog kita sebagai blog yang profesional. Mari terus belajar untuk menggunakan tips dan trik yang bersih. Blog kita adalah rumah kita dan produk kita, memperhatikan dan merawatnya berarti juga memperbaiki kehidupan kita. Insya Allah...

Happy Blogging :)

Membuat jQuery Ads Popout

2010-11-25T22:53:00.007+07:00

Bismillah. Iklan pada blog bagi sebagian blogger adalah hal penting walau sebagian lagi tidak menyukainya. Terlepas dari suka dan tidak suka, kali ini Blogger Tune-Up akan memberikan artikel yang berkaitan dengan iklan. Sebenarnya telah beberapa kali Blogger Tune-Up menyuguhkan teknik menampilkan iklan, mulai dari Ads Popup^[1], Banner Rotator^[2] dan lain sebagainya. Semua artikel tersebut disuguhkan sebagai alternatif bagi para blogger untuk memilih mana tampilan yang terbaik untuk menampilkan iklan pada blognya.

Ads Popout yang akan disuguhkan sekarang sebenarnya hampir mirip dengan Ads Popup yang pernah dibahas sebelumnya hingga Ads Popup versi update^[3] yang menggunakan CSS3. Tetapi pada jenis Ads Popout akan dilibatkan jQuery dan Plugin jQuery yaitu jQuery Cookie^[4] yang digunakan untuk mengingat bahwa iklan pernah dibuka atau ditutup. Ads Popout lebih enak dilihat dan diakses karena menggunakan ruangan yang sangat sedikit dengan efek buka-tutup (slide-in-slide-out). Selain itu lebih mudah diterapkan pada blogger karena hanya melibatkan beberapa baris kode XHTML, CSS dan JavaScript. (Download terlebih dahulu file pendukung dan upload pada webhosting anda)

Demo jQuery Ads PopoutKlik disini untuk melihat demo jQuery Ads Popout/span>

Integrasi Kode CSS Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#infout{margin:0;padding:0;position:absolute;top:250px;left:0;width:320px;height:350px;z-index:100;overflow:hidden;}
#infout a,#infout a img{text-decoration:none;border:0;outline:0}
#infout a span{display:none}
#infout #judul{width:20px;height:350px;position:relative;left:0;z-index:102}
#infout a#tutup{position:absolute;background:transparent url(http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BMNhIrXI/AAAAAAAAABQ/r4s_MBsv5GM/s800/trans_pixel.gif);top:0;left:230px;height:25px;width:65px;cursor:pointer}
#infout a#buka{cursor:pointer}
#infout #wadah{position:absolute;top:10px;left:20px;margin-left:-300px;z-index:101}

Integrasi Kode jQuery Pada Template

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script language='javascript' src='http://plugins.jquery.com/files/jquery.cookie.js.txt'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
 var infoOut = "#infout";
 var infoBox = "#wadah";
 var infoLebar = $(infoBox).width() + $("#judul").width();
 var infoCookie = "infokuki";
 function bukaInfo() {
  $(infoOut).width(infoLebar+"px");
  $(infoBox).animate({marginLeft: "0"},1200)
  $.cookie(infoCookie, null);
 }
 function tutupInfo() {
  $(infoBox).animate({marginLeft: "-"+infoLebar+"px"},1200,"linear",
   function(){ $(infoOut).width($("#judul").width() + "px"); }
  );
  $.cookie(infoCookie,'closed',{expires: 28});
 }
 $("#buka").click(function() {
  if(!$.cookie(infoCookie)) {
   tutupInfo();
  } else {      
   bukaInfo();
  }
  return false;
 });
 $("#tutup").click(function() {
  tutupInfo();
  return false;
 }); 
 if(!$.cookie(infoCookie)) {
  $(infoOut).animate({opacity: 1.0}, 1500, "linear", bukaInfo);
 }
});
//]]></script>

Integrasi Kode XHTML Pada Template

Langkah 7
Cari kode dibawah ini

</body>

Langkah 8
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<div id='infout'>
 <div id='judul'>
  <a id='buka'><img src='URL/popout-cap.gif' width='20' height='350' alt='Buka Informasi'/></a>
 </div>
 <div id='wadah'>
  <a id='tutup' title='Tutup Informasi'><span>Tutup</span></a>
  <a href='http://modification-blog.blogspot.com' title='Informasi Menarik dari Sponsor' target='_blank'><img src='URL/popout-ad.png' width='300' height='330' alt=''/></a>
 </div>
</div>

Langkah 9
Simpan template dan preview blog anda...

Keterangan:

Ubahlah URL sesuai dengan alamat URL yang anda persiapkan (sesuai file yang anda upload pada webhosting)
Ubahlah http://modification-blog.blogspot.com sesuai dengan URL iklan (alamat URL yang dituju)
Agar tampilan jQuery Ads Popout tidak ikut bergeser saat halam digeser (tetap pada posisinya) ubah kode position:absolute; menjadi position:fixed; pada langkah 4 baris ke 1

Download Source CodeKlik disini untuk mengunduh sourcecode jQuery Ads Popout

Catatan Kaki:
[1] Ads Popup
[2] Banner Rotator
[3] Ads Popup Update
[4] Klaus Hartl - jQuery Cookie
[5] Credit and Special Thanks to CSSNewbie for great tutorial

Source Code jQuery News Ticker Recent Posts

2010-11-18T00:36:00.004+07:00

Bismillah. Kali ini Blogger Tune-Up mulai membuka kode-kode yang selama ini tidak ditampilkan ke umum. Bagi anda para penyuka coding mudah-mudahan source code kali ini dapat dikembangkan lebih bagus lagi. Dan jangan lupa untuk menyertakan sumber source code ini agar menjadi jelas asal-usulnya dan ini pula sebagai bentuk terima kasih kepada pengembangnya. Hanya ini yang bisa kami berikan kepada para pembaca setia Blogger Tune-Up.

Silahkan anda otak-atik kode jQuery News Ticker Recent Posts ini sesuai dengan keinginan dan kebutuhan anda dan jangan lupa berikan informasi kepada Blogger Tune-Up agar kami bisa mereview dan menampilkan hasil olahan anda. Selamat memodifikasi....


/******************************************************************************
Original Code jQuery News Ticker Recent Post with Thumbnail v1.0
(c) 2010 Hendriono from http://modification-blog.blogspot.com/
******************************************************************************/
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://modification-blog.blogspot.com/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}

Menulis dan Menerbitkan Artikel Blog via Facebook

2010-10-25T17:59:00.006+07:00

Bismillah. Satu bulan penuh Blogger Tune-Up tidak di update. Selain karena kekesalan masalah Account Google Code yang di suspend kemudian dilanjutkan Account Twitter yang juga ikut-ikutan di suspend, membuat saya secara pribadi menjadi malas untuk menulis. Sekarang Blogger Tune-Up kembali sibuk dengan dunia nyata, berbagai inovasi dicurahkan didunia nyata, mulai dari Microcontroller, CNC Machine dan hal-hal lain yang berbau elektronik. Tapi setelah ditelaah baik-baik sangatlah tidak adil jika Blogger Tune-Up kemudian "diam", toh Google tidak akan peduli dengan aksi diam.

Mulai hari ini saya mencoba untuk membangkitkan kembali semangat yang hilang maka terbitlah artikel ini yang mudah-mudahan bermanfaat bagi teman-teman blogger. Tidak lupa ucapan terima kasih atas dukungan teman-teman blogger yang terus memberikan semangat kepada saya hingga mampu kembali ke dunia maya.

Semakin hari teknologi web 2.0 semakin berkembang hingga kemudahan demi kemudahan dapat kita rasakan. Salah satunya adalah hubungan antar website yang semakin mudah, dan sekarang kita akan mencoba menggabungkan dua buah website yang bisa saling mendukung satu sama lain. Facebook sebagai salah satu website jejaring sosial dapat kita manfaatkan sebagai salah satu media menulis artikel untuk diterbitkan pada blog kita. Sekarang hal ini menjadi mungkin ketika Indonesia sebagai salah satu negara yang menduduki peringkat 3 dunia dalam hal jumlah pengguna aktif maka dapat dipastikan seorang blogger minimal memiliki satu akun Facebook. Sambil update status dan memberi komentar tidak ada salahnya kita menuliskan artikel untuk blog kita.

Pihak ketiga yaitu TypePad membuat kemudahan bagi para pengguna Facebook untuk menulis dan menerbitkan artikel blog langsung dari Facebook yang kemudian aplikasi ini diberi nama Blog It TypePad. Dan dibawah ini adalah Platform yang didukung oleh Aplikasi Blog It TypePad:

Integrasi Blogger dengan Facebook

Langkah 1
Pastikan anda dalam keadaan login ke Facebook dan ke Blog anda
Langkah 2
Klik link Blog It TypePad
Langkah 3

Halaman permintaan mengikuti "BLOG IT by TypePad" akan terbuka kemudian klik tombol "Izinkan" atau "Allow"

Langkah 4

Halaman "Add Account" akan terbuka, pilih platform blog anda kemudian klik tombol "Add Account"

Langkah 5
Halaman otorisasi akan terbuka kemudian klik tombol "Authorize Blogger Account"
Langkah 6
Kita akan dibawa ke halaman Google Accounts untuk melakukan permintaan otorisasi, jika anda dalam keadaan login ke Google Accounts kemudian klik "Berikan akses" atau "Grant Access"
Langkah 7
Setelah itu kita akan dibawa kembali ke halaman "Edit Blogger account", kemudian pilihlah salah satu blog kita (ini jika memiliki blog lebih dari satu blog pada satu akun) dan klik tombol "Save Changes"
Langkah 8
Anda berhasil mengintegrasikan Blog anda dengan Facebook Blog It TypePad

Membuat dan Menerbitkan Artikel Blog dari Facebook

Setelah kita berhasil menggabungkan antara Blogger dengan Facebook mari kita buat dan terbitkan artikel pada blog kita melalui Facebook.

Langkah 1
Klik Tab "Post to blog"
Langkah 2

Pilih blog yang kita tuju, isilah kotak "Title" dengan judul artikel dan isilah kotak "Entry" dengan isi dari artikel kita

Langkah 3
Klik tombol "Post" untuk menerbitkannya pada Blog kita
Langkah 4

Tunggu status hingga tanda "cheklist" keluar pada blog yang kita tuju kemudian check blog kita. Artikel baru telah ditulis dan diterbitkan...

Keterangan:

Simpanlah pada Bookmark halaman Blog It TypePad agar mudah untuk mengaksesnya

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Account Google Code Blogger Tune-Up Di Non Aktifkan

2010-09-28T01:31:00.002+07:00

Kaget campur heran Blogger Tune-Up dibuatnya, karena beberapa hari ini tidak buka internet. Hari ini Senin, 27 September 2010 Blogger Tune-Up membuka blog dan ternyata seluruh script Blogger Tune-Up yang ada di Hosting Project Google Code tidak dapat di akses. Setelah di cek ke link http://hensblog.googlecode.com/ link tersebut tidak dapat di akses. Entah kenapa hal ini terjadi...

Access Not Allowed
What happened?
You are not allowed to access this service.
Please contact us if you believe that you should be able to access this service.
Your options:

Participate in the open source community through other websites.
Sign out and access this site as an anonymous user.
Contact us for further assistance.

Pihak Google tidak memberitahukan sebelumnya dan tidak pula menjelaskan secara rinci mengenai penutup Account Blogger Tune-Up pada Google Code. Mungkin ada diantara para teman Blogger yang pernah punya pengalaman seperti ini mohon di bantu. Dan bagi sahabat Blogger Tune-Up yang menggunakan script dari blog ini, saya Hendriono secara pribadi mohon ma'af yang sebesar-besarnya karena hal ini diluar kemampuan saya. Saya berharap bantuan teman-teman untuk mengembalikan account Blogger Tune-Up di Google Code dengan mengirimkan email ke admin Google Code:

google-code-hosting@googlegroups.com

Akhir kata, seandainya account Google Code dapat diaktifkan kembali maka sebagai ucapan terima kasih Blogger Tune-Up akan membuka semua script code yang Blogger Tune-Up tulis untuk seluruh teman-teman blogger yang sudah membantu. Terima kasih sebelumnya untuk seluruh sahabat blogger yang sudah ikut berpartisipasi untuk mengembalikan account Blogger Tune-Up pada Hosting Project Google Code.

Banjarsari, 28 September 2010
Admin Blogger Tune-Up,

Hendriono

Menambahkan Tombol Berbagi Jejaring Sosial

2010-09-24T16:08:00.008+07:00

Jejaring sosial merupakan media yang paling banyak dikunjungi dan Facebook merupakan jejaring sosial yang menempati peringkat pertama paling banyak dikunjungi di seluruh dunia^[1]. Banyaknya pengunjung yang menggunakan jejaring sosial merupakan kesempatan baik bagi para blogger untuk membagikan setiap artikelnya kedalam situs jejaring sosial dengan harapan semakin banyak pengunjung yang datang untuk membaca-baca blog kita, tentunya hal ini sangat berpengaruh terhadap posisi blog kita di mata mesin pencari. Namun jika kita sendiri yang membagikan artikel demi artikel dari blog kita ke situs jejaring sosial, maka para pengunjung yang akan datang ke blog kita hanya sejumlah teman-teman yang ada pada jejaring kita saja. Untuk itu menambahkan tombol atau link yang berfungsi untuk membagikan artikel kita ke situs jejaring sosial sangat bermanfaat agar para pengunjung blog kita dapat membagikan link artikel kita ke jejaring mereka.

Demo Tombol BerbagiKlik disini untuk melihat demo Tombol Berbagi Jejaring Sosial

Dua Cara Integrasi Tombol Berbagi Jejaring Sosial Pada Blog

1). Tombol Berbagi Terintegrasi pada Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" dan klik "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

.sharesoc {
display:inline-block;
float:right;
height:125px;
margin:5px 0;
width:60px;
}

Langkah 5
Cari kode dibawah ini:

<data:post.body/>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>

Langkah 7
Simpan template dan preview blog anda...

2). Tombol Berbagi Terapung pada Pinggir Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#sharehal {position:fixed; bottom:20%; margin-left:185px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharehal .tblshare {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}

Langkah 5
Cari kode dibawah ini:

</body>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>

Langkah 7
Simpan template dan preview blog anda...

3). Pekerjaan Rumah

Kedua cara di atas akan menampilkan tombol berbagi jejaring sosial pada berbagai halaman (baik halaman utama ataupun halaman artikel). Nah tugas anda adalah mengintegrasikan kedua cara menambahkan tombol jejaring sosial di atas kemudian mengatur tampilannya, jika kita buka halaman utama maka tombol jejaring sosial yang tampil adalah dari cara pertama (Tombol Berbagi Terintegrasi pada Artikel) dan jika kita buka halaman artikel maka tombol jejaring sosial yang tampil adalah dari cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel). Cara mengatur tampilan tombol berbagi adalah artikel sebelumnya yang membahas Conditonal Tag.

Jawaban: (Mohon tidak dibuka dulu sebelum mencoba...)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
</b:if>

Keterangan :

Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :

bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
margin-left:185px = ubah nilai 185 untuk mengatur jarak antara bagian pinggir browser dengan tombol
float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel
background-color:#fff = ubah nilai fff untuh mengatur warna latar belakang dan sesuaikan dengan warna latar belakang artikel blog anda

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan kaki:
[1] Top 1000 Sites - August 2010, Google AdPlanner. Diakses 20 September 2010

Memahami Conditional Tag

2010-09-20T15:18:00.003+07:00

Terinspirasi dari sahabat Blogger yang mengingatkan Blogger TuneUp tentang conditional tag tidak ada salahnya sekalian dibuat artikelnya supaya semua teman-teman bisa memahami berbagai conditional tag dalam template Blogger. Sebelum mempelajari conditional tag mari kita sepakati dulu bahwa semua bagian dalam sebuah halaman blog terdiri dari kumpulan gadget/widget termasuk halaman artikel, sidebar, header, footer dan lain sebagainya. Conditional Tag atau tag kondisional adalah tag yang digunakan untuk mengatur suatu gadget/widget atau suatu elemen tertentu untuk ditampilkan atau tidak ditampilkan dalam halaman spesifik. Misal; pada halaman utama kita ingin menampilkan sidebar tetapi ketika pengunjung membuka halaman demi halaman artikel maka sidebar tersebut tidak ditampilkan. Nah, untuk mengatur sidebar tersebut tampil dan tidak tampil maka digunakanlah Conditional Tag.

Syntax Conditional Tag

Secara umum conditional tag dituliskan seperti dibawah ini:

<b:if cond='[KONDISI]'>
...
</b:if>

Conditional tag selalu diawali dengan tag <b:if> dan di tutup dengan tag </b:if>. Kemudian tag <b:if diikuti dengan atribut cond. Atribut cond diartikan sebagai condition atau kondisi yang digunakan sebagai subjek suatu kondisi, dan [KONDISI] adalah atribut objek atau yang menjelaskan maksud dari kondisi/condition.

Kumpulan Conditional Tag

Dibawah ini kumpulan kondisional tag yang umum digunakan untuk menyesuaikan halaman spesifik.

1. Halaman Index

<b:if cond='data:blog.pageType == &quot;index&quot;'>
...
</b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman index. Halaman index (index page) didalamnya termasuk halaman depan (homepage), halaman label/kategori dan halaman arsip. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan index' maka kode yang ada diantara conditional tag akan ditampilkan".

2. Halaman Artikel (item)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
...
</b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman item. Halaman item (item page)adalah halaman artikel per artikel dan bukan keseluruhan kumpulan artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman artikel (item)' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman artikel (item) menggunakan URL yang terkandung hurup bulan, tahun, dan judul artikel diantaranya, misal; http://namablog.blogspot.com/2010/09/judul_artikel.html.

3. Halaman Statis (static)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
...
</b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman statis. Halaman statis (static page) adalah halaman lain artikel atau halaman yang berdiri sendiri dan isinya tidak mengambil dari database artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman statis' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman statis menggunakan URL yang terkandung hurup "p" diantaranya, misal; http://namablog.blogspot.com/p/halaman_statis.html.

4. Halaman Arsip (archive)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
...
</b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman arsip. Halaman arsip (archive page) adalah halaman yang menampilkan sekumpulan artikel yang diambil database blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman arsip' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman arsip menggunakan URL yang terkandung bulan dan tahun diantaranya, misal; http://namablog.blogspot.com/2010_01_01_archive.html.

5. Halaman Depan (Homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>

atau :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
...
</b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan URL halaman depan. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan URL halaman depan' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman depan merupakan halaman utama dari blog kita dan URL yang digunakan adalah URL utama blog kita, misal; http://namablog.blogspot.com/.

6. Halaman URL Tertentu

<b:if cond='data:blog.url == "[URL]"'>
...
</b:if>

Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog sama dengan URL halaman blog (yang kita maksud atau kita masukan dalam [URL]' maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini digunakan jika kita ingin mengatur suatu gadget/widget atau elemen yang hanya akan ditampilkan atau tidak ditampilkan pada halaman yang lebih spesifik (artikel tertentu). misal; kita akan menampilkan banner iklan di-sidebar hanya pada halaman blogroll (kumpulan link teman). Maka penggunaan conditional tag-nya seperti dibawah ini:

<b:if cond='data:blog.url == "http://namablog.blogspot.com/2010/09/blogroll.html"'>
[disini kode gadget atau elemen yang akan ditampilkan]
</b:if>

Penggunaan Conditional Tag

Dibawah ini adalah penjelasan sederhana untuk menggunakan conditional tag didalam template blogger dan penempatan kode gadget atau elemen, lebih lanjutnya silahkan implementasikan sendiri. sederhananya untuk menempatkan kode gadget atau elemen dalam conditional tag seperti contoh dibawah ini:

1). Penggunaan Conditional Tag Satu Gadget atau Elemen

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
</b:if>

Gadget atau Elemen yang terletak diantara conditional tag akan ditampilkan jika hasil pengecekan/perbandingan dalam atribut cond (yaitu 'data:blog.pageType == "item"') adalah benar (true). Atau lebih spesifiknya; jika halaman blog yang sedang kita lihat/tampil pada alamat browser merupakan URL suatu item (misal; http://namablog.blogspot.com/2010/09/artikelku.html) maka Gadget atau Elemen yang ada diantara tag kondisional akan ditampilkan jika tidak maka Gadget atau Elemen tidak akan ditampilkan.

2). Penggunaan Conditional Tag Dua Gadget atau Elemen

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>

Ini lebih rumit lagi... Hmmmm tarik napas dulu sambil putar kepala eh... otak...

Misal; saya memiliki dua buah "laptop" yang terdiri dari 2 merk, "merk A" dan "merk B", suatu hari saya diberi pesanan editing gambar yang mengharuskan saya menggunakan software "digital imaging" yang hanya terdapat pada laptop merk B, maka saya pun menggunakan laptop merk B dalam mengerjakan pesanan editing gambar tersebut. Jika saya tuliskan maka kodenya menjadi seperti dibawah ini:

<b:if cond='Laptop == &quot;Digital Imaging&quot;'>
Merk A
<b:else/>
Merk B
</b:if>

Laptop merk A tidak digunakan karena ternyata hasil perbandingan cond tidak memungkinkan menggunakan laptop merk A (tidak ada software digital imaging) atau hasil pengecekan/perbandingan nilainya salah (false). Laptop merk B digunakan karena hasil perbandingan/pengecekan cond bernilai salah (false). (Sebenarnya contoh ini tidak begitu mengenai sasaran tapi bingung memberikan contoh, ada ide?)

Peranan tag <b:else/> digunakan sebagai alternatif jika ternyata hasil perbandingan/pengecekan bernilai salah (false) dan kita ingin menampilkan suatu gadget atau elemen jika hasilnya bernilai salah (false). Tetapi jika ternyata hasil perbandingan bernilai benar (true) maka gadget atau elemen setelah tag <b:else> tidak akan ditampikan.

3). Penggunaan Conditional Tag Lebih dari Satu Kondisi dan Lebih dari Satu Gadget atau Elemen

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>
</b:if>

Waduh makin rumit saja... Ini sih bukan hanya putar otak tapi sampai tekan tombol power... hehehe... Mau mencoba menjelaskan? Silahkan tinggalkan pada kotak komentar....

Operator Conditional Tag

Operator conditional tag merupakan alat khusus untuk membandingkan dua buah nilai. Operator conditional tag terdiri dari 2 jenis yaitu:

1. Operator "sama dengan"

==

atau dalam bahasa script-nya dibaca "is equal to"

Contoh Kasus 1

Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah saya tidak diberi uang. Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 10 telur. Maka conditional tag ditulis sebagai berikut:

<b:if cond='10 telur == 10 telur'>
Saya diberi uang Rp. 10.000,-
</b:if>

Jawabannya : maka saya diberi uang Rp. 10.000,-

Contoh Kasus 2

Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah maka saya harus membayar Rp. 10.000,- . Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 5 telur. Maka conditional tag ditulis sebagai berikut:

<b:if cond='10 telur == 10 telur'>
Saya diberi uang Rp. 10.000,-
<b:else/>
Saya membayar Rp. 10.000,-
</b:if>

Jawabannya : maka saya membayar Rp. 10.000,-

2. Operator "tidak sama dengan"

!=

atau dalam bahasa script-nya dibaca "is not equal to"

Ini adalah operator kebalikan dari "sama dengan" dan sepertinya tidak harus dijelaskan lagi. (Atau mau ikut menjelaskan? Silahkan tinggalkan pada kotak komentar)

Akhirnya selesai... Selamat berekspresi dan berpusing-pusing ria, jangan lupa siapkan peralatan untuk berfikir (makanan ringan, rokok [bagi yang suka rokok], kopi dan obat sakit kepala). Happy Blogging :)

Blogger Tune-Up

jQuery Menu Malu

Deskripsi jQuery Menu Malu

Skenario HTML jQuery Menu Malu

Skenario CSS jQuery Menu Malu

Skenario jQuery jQuery Menu Malu

Autolink Mini MP3 Player for Blogger Version 2.0

Update 15-12-2011 Autolink Mini MP3 Player Versi 2.0

Kekurangan Autolink Mini MP3 Player Versi 2.0

Integrasi Autolink Mini MP3 Player Versi 2.0

Setting Keterangan Autolink Mini MP3 Player Versi 2.0

Memasukan File MP3 pada Artikel/Widget

Link Kredit Efek jQuery Ease Out Bounce

Skenario Efek

Skenario HTML

Skenario CSS

Skenario jQuery

Blogger Error bX-l4u1mh

Solusi Sementara Untuk Mengatasi Blogger Error bX-l4u1mh

Percantik Huruf Artikel Blog dengan Plugin Cufón

Apa itu Cufón?

Bagaimana cara kerja Cufón?

Bagaimana penyajian (rendering) Cufón?

Browser apa yang didukung Cufón?

Bagaimana membuat file font (huruf) Cufón?

Bagaimana menggunakan Cufón pada Blogger?

Menyisipkan Kode atau Script pada Artikel Blog

Kenapa memilih Pastebin?

Membuat kode pada Pastebin

Menyisipkan Kode/Script pada Artikel Blog

Contoh kode dari Pastebin

Aktikan dan Non Aktifkan Fitur Lightbox Blogger

Bagaimana mengaktifkan dan menonaktifkan fitur lighbox bawaan Blogger?

Menambahkan Widget Page Loading Time

Memasang Script Page Loading Time

Membuat Gadget Status Twitter (Plugin Twitter JS)

Gadget Status Twitter dengan Twitter JS

Memahami jQuery Show Hide dan Cookie

Skenario HTML

Skenario jQuery

Tampilkan Sembunyikan Isi dan Form Komentar

Menambahkan Tombol Tampilkan Sembunyikan Isi dan Form Komentar

Simple jQuery Twitter Count Follower

Integrasi Simple jQuery Twitter Count Follower pada Template

Integrasi Simple jQuery Twitter Count Follower pada Widget/Gadget

jQuery Anti Adblock Versi 2.00

Update jQuery Anti Adblock Versi 2.00 (04 September 2011)

Integrasi jQuery Anti Adblock pada Blogger

Integrasi jQuery Anti Adblock pada Iklan

jQuery Auto Resize & Image Frame

Fasilitas jQuery Auto Resize & Image Frame

Kekurangan jQuery Auto Resize & Image Frame

Integrasi jQuery Auto Resize & Image Frame pada Template Blogger

Menyisipkan jQuery Auto Resize & Image Frame pada Gambar Artikel

10 Website Pengguna JavaScript Mengagumkan

jQuery Draggable Popup Window

Fasilitas Draggable Popup Window

Kelebihan Draggable Popup Window

Kekurangan Draggable Popup Window

Kode CSS Draggable Popup Window

Kode HTML Draggable Popup Window

Kode JavaScript Draggable Popup Window

Maksimalkan Kerja jQuery dengan Google API Loader

Apa itu API?

Apa Google Libraries API?

Google API Loader

Maksimalkan Kerja jQuery

Skenario I

Skenario II

Skenario III

jQuery Easy Organic Blogger Tabs

Kelebihan jQuery Easy Organic Blogger Tabs

Kekurangan jQuery Easy Organic Blogger Tabs

Membuat jQuery Easy Organic Blogger Tabs pada Blogger

Autolink Mini MP3 Player for Blogger

Kelebihan Autolink Mini MP3 Player

Kelemahan Autolink Mini MP3 Player

Integrasi Autolink Mini MP3 Player

Menambahkan File MP3 pada Artikel Blog

Recent Posts with Simple Spy Effect

Rencana Besar Blogger di Tahun 2011^[6]