jQuery Menu Malu

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

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Autolink Mini MP3 Player for Blogger Version 2.0

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 for Blogger 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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
var unduhan ="Download";
var mos = "Right click - Save Target As for download";
//]]>
</script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/minimusicplayer.min.js"></script>
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.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Link Kredit Efek jQuery Ease Out Bounce

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

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

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

Blogger Error bX-l4u1mh

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.
Blogger Profile

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:
Blogger Error bX-l4u1mh
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:
Fix Blogger Error bX-l4u1mh
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

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.
Percantik Huruf Artikel Blog dengan Plugin 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
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)

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...
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Menyisipkan Kode atau Script pada Artikel Blog

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

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"
Disable Lightbox Blogger
Untuk antar muka baru:
Masuk ke "Buka daftar Entri - Setelan"
Mematikan Fungsi Lightbox
Langkah 3
Untuk antar muka lama:
Scroll ke bawah dan cari menu "Tampilkan gambar dengan Lightbox" seperti gambar dibawah ini:
Turn Off Lightbox Blogger
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:
Non Aktifkan Lightbox
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

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.
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 :)