Membuat Kwicks Menu dengan jQuery - Bagian 1

Bismillah. Alhamdulillah... Lama artikel ini diolah untuk diterbitkan, sebaik mungkin Blogger Tune-Up menulis artikel "Membuat Kwick Menu dengan jQuery" dengan harapan mudah untuk dipahami. Tetapi mohon ma'af karena artikel ini tidak bisa dibuat dalam satu halaman artikel, hal ini dimaksudkan untuk memudahkan bagian perbagian agar mudah untuk dipahami. Kwick Menu di kembangkan oleh Jeremy Martin yang sampai artikel ini dibuat telah mencapai versi 1.5.1 dan kemudian jenis menu inilah yang Blogger Tune-Up gunakan selain terinspirasi dari template Wordpress Kriesi.at. Menu Kwick sebenarnya merupakan kategori sederhana jika dilihat dari script yang harus kita tuliskan, tetapi cukup rumit dalam pembuatan gambar menunya, karena kita dituntut mampu menggunakan software pengolah citra gambar baik vektor atau bitmap.

Menu Kwick bekerja berdasarkan framework jQuery yang memilik efek lembut, jika kita mengarahkan mouse (hover) pada menu maka menu akan bergeser melebar dan menampilkan suatu icon yang tersembunyi. Jika mouse kita geser keluar dari menu maka menu akan bergeser memendek lagi dan icon akan disembunyikan. Mari kita mulai untuk membuat gambar utama menu kwick...

Demo Kwicks Menu dengan jQuery

Menghitung dan Membuat Gambar Utama Menu Kwick

Beberapa hal yang harus disiapkan dalam membuat gambar utama menu kwick, seperti dibawah ini:

• Siapkan icon-icon yang kita butuhkan, Blogger Tune-Up mengambil Icons dari website DryIcons.com
• Siapkan software pengolah citra gambar, misal; Adobe Photoshop, Adobe Illustrator, Gimp atau Corel Draw.
• Persiapkan berapa jumlah menu yang akan kita tampilkan, misal Blogger Tune-Up menyiapkan menu; Beranda, Arsip, Download, Kontak, dan Tentang.
• Siapkan alat tulis untuk menghitung-hitung lebar dan tinggi gambar utama menu kwick jika perlu kalkulator.

Jika peralatan sudah siap mari kita mulai...
Langkah 1

Buka software pengolah citra gambar dan set satuan ukurannya menggunakan pixel (px) hal ini dibahas detail pada blog "Design Graphics"

Langkah 2
Setelah kita menentukan berapa jumlah menu yang akan dibuat maka kita dapat menghitungnya, perhatikan illustrasi gambar dan cara menghitungnya dibawah ini:

Halaman blog kita memiliki lebar 500 pixel dan kita akan membuat 5 menu yang sudah kita persiapkan. Maka rumusnya seperti dibawah ini:

(500:5)+70 = 170 pixel
Keterangan:

• 500 diambil dari lebar halaman blog
• 5 diambil dari jumlah menu yang akan kita buat
• 70 diambil dari lebar icon sebelah kanan menu yang akan ditampilkan jika mouse diarahkan ke menu (hovering)
• 170 merupakan lebar maksimal masing-masing menu.

Langkah 3

Dari hasil perhitungan diatas maka lebar masing-masing menu yang akan kita buat maksimal 170 pixel. Setelah ditemukan lebar maksimal dari masing-masing gambar utama menu kwick, maka hitunglah lebar total menu yang akan kita buat dengan menggunakan software pengolah citra gambar sebagai berikut:

170 x 5 = 850 pixel
Dengan rincian penetapan urutan posisi menu sebagai berikut:

• Menu 1 (Beranda) dimulai dari 0 pixel sampai dengan 170 pixel
• Menu 2 (Arsip) dimulai dari 170 pixel sampai dengan 340 pixel
• Menu 3 (Download) dimulai dari 340 pixel sampai dengan 510 pixel
• Menu 4 (Kontak) dimulai dari 510 pixel sampai dengan 680 pixel
• Menu 5 (Tentang) dimulai dari 680 pixel sampai dengan 850 pixel
• Maka lebar total gambar utama menu kwick adalah 850 pixel

Langkah 4
Bagaimana dengan tinggi menu? Terserah anda, misalkan kita set 40 pixel.

Perhitungan gambar utama menu kwick sudah selesai, untuk membuat gambar menu kwicks menggunakan Adobe Photoshop silahkan baca artikel membuat gambar menu kwicks...

Bersambung ke Membuat Kwicks Menu dengan jQuery - Bagian 2...

Read More

Manajemen Script jQuery

Bismillah. Bagi para modifikator script jQuery melakukan copy, paste, delete, move dan lain sebagainya merupakan kegiatan yang paling sering dilakukan pada script-script yang telah dan akan dituliskan. Script-script yang telah kita tuliskan terkadang membuat kita bingung jika salah satu atau beberapa script yang telah kita buat ingin kita buang, tambahkan, atau dipindahkan, hal ini karena begitu banyaknya script yang sudah kita tuliskan. Jalan paling cepat adalah dengan mem-bakcup template blog kita sebelum kita lakukan perbaikan, penambahan atau sekedar modifikasi pada script-script jQuery yang sudah kita tuliskan. Backup template merupakan tindakan preventif sebelum kita melakukan modifikasi pada script yang sudah kita tuliskan, hal ini bermanfaat jika terjadi error pada template setelah dilakukan modifikasi maka kita bisa mengembalikan template ke posisi semula pada saat sebelum dilakukan modifikasi.

Untuk memudahkan dan mempercepat proses modifikasi pada script-script jQuery kita bisa memanajemen script-script tersebut dengan deklarasi nama-nama fungsi yang mudah diingat. Deklarasi nama-nama fungsi tersebut sangat bermanfaat karena kita bisa dengan mudah menemukan fungsi-fungsi script yang sudah kita tuliskan tanpa takut salah sasaran. Bagaimana cara memanajemen fungsi-fungsi pada script jQuery tersebut?

Ketentuan Umum Penulisan Script jQuery

Pada umumnya fungsi script jQuery dituliskan dengan ketentuan seperti dibawah ini:

$(document).ready(function(){
Script Fungsi 1
});
$(document).ready(function(){
Script Fungsi 2
});
$(document).ready(function(){
Script Fungsi 3
});

Dan atau ada juga yang menyederhakannya seperti dibawah ini:

$(document).ready(function(){
Script Fungsi 1

Script Fungsi 2

Script Fungsi 3
});

Dapat kita bayangkan jika masing-masing fungsi script diatas terdiri lebih dari 10 baris. (Hmmm bayangkan sendiri...)

Deklarasi Nama Fungsi Script jQuery

Agar fungsi-fungsi yang kita tuliskan mudah untuk ditemukan kembali disuatu hari, maka kita perlu membagi-bagi fungsi tersebut kedalam suatu frame (nama fungsi). Prinsip ini sama dengan prinsip folder file pada komputer kita. Jika kita memiliki folder dengan nama misalnya "gambar" maka dapat dipastikan isinya berupa file gambar. Demikian juga pada fungsi script jQuery, kita hanya perlu mengkategorikan atau memberi label fungsi tersebut dengan nama yang unik dan menggambarkan fungsi dari script-nya.

Misal, saya memiliki 3 kumpulan fungsi script jQuery yaitu; kumpulan script 1 adalah fungsi "Kwicks Menu", kumpulan script 2 adalah fungsi "Font Resizer", dan kumpulan script 3 adalah fungsi "Image Facebox". Awalnya saya menulis script tersebut seperti dibawah ini:

$(document).ready(function(){
Script Fungsi Kwicks Menu
});

$(document).ready(function(){
Script Fungsi Font Resizer
});

$(document).ready(function(){
Script Fungsi Image Facebox
});

Kemudian fungsi script diatas dikategorikan agar mudah diingat menjadi seperti dibawah ini:

function kwicks_menu(){
Script Fungsi Kwicks Menu
}

function font_resizer(){
Script Fungsi Font Resizer
}

function image_facebox(){
Script Fungsi Image Facebox
}

Dengan cara diatas kita dapat dengan mudah menemukan fungsi script yang ingin kita modifikasi. Tetapi fungsi diatas jelas tidak dapat bekerja, karena fungsi-fungsi itu tidaklah dideklarasikan sebagai fungsi jQuery, tetapi dideklarasi sebagai fungsi JavaScript biasa. Perhatikan script peng-kategorian diatas telah menghilangkan script dibawah ini:

$(document).ready(function(){ 

Sedangkan script ini digunakan untuk mendeklarasikan bahwa semua script yang ada diantaranya merupakan fungsi-fungsi jQuery yang akan melakukan sinkronisasi dengan framework jQuery-nya. Bagaimana agar script yang sudah kita kategorikan dapat di-load (panggil) lagi sebagai fungsi-fungsi jQuery? Maka kita hanya perlu menuliskan script yang hilang dan memasukan deklarasi nama fungsi yang sudah kita tuliskan diatas seperti dibawah ini:

$(document).ready(function(){
kwicks_menu();
font_resizer();
image_facebox();
});

Dengan script diatas maka script yang sudah dideklarasi nama fungsinya (dikategorikan) akan diload sebagai fungsi jQuery.

Sederhananya seperti dibawah ini:
Sebelum dideklarasikan nama fungsinya (dikategorikan):

$(document).ready(function(){
Script Fungsi Kwicks Menu
});
$(document).ready(function(){
Script Fungsi Font Resizer
});
$(document).ready(function(){
Script Fungsi Image Facebox
});

Setelah dideklarasikan nama fungsinya dan diload sebagai fungsi jQuery:

// Awal deklarasi nama fungsi (pengkategorian)
function kwicks_menu(){
Script Fungsi Kwicks Menu
}
function font_resizer(){
Script Fungsi Font Resizer
}
function image_facebox(){
Script Fungsi Image Facebox
}
// Akhir deklarasi nama fungsi (pengkategorian)

// Awal pemanggilan script sebagai fungsi jQuery
$(document).ready(function(){
kwicks_menu();
font_resizer();
image_facebox();
});
// Akhir pemanggilan script sebagai fungsi jQuery

Keterangan:

Fungsi-fungsi yang sudah dideklarasikan dengan nama sesuai fungsinya (pengkategorian) dapat disimpan sebagai file JavaScript (.js) terpisah tanpa perlu diintergrasikan pada template, sedangkan pada template kita hanya perlu memanggil (load) nama fungsinya saja.

Source Code Manajemen Script jQuery

Alhamdulillah... Demikianlah cara memanajemen script-script jQuery. Mudah-mudahan bermanfaat...

Read More

Membuat Menu Dropdown CSS Bertingkat dengan Efek jQuery

Bismillah. Kali ini Blogger Tune-Up akan membuat menu dropdown bertingkat dengan CSS yang kemudian diberikan sentuhan efek jQuery agar lebih indah. Menu ini sebenarnya merupakan salah satu pesanan teman yang pernah diterapkan disalah satu template website umum berbasis php. Sempat dibuat pusing juga dengan menu jenis ini, berkali-kali melakukan percobaan yang cukup melelahkan dengan beberapa kali error, sekalinya tidak error malah menunya entah berada dimana. Maklum Blogger Tune-Up sangat awam dengan yang namanya koding CSS dan jQuery.

Membuat Menu Dropdown Bertingkat (Multilevel Dropdown Menu)

Langkah 1
Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur XHTML misalnya seperti dibawah ini:

<ul id="nav">
<li><a href="#">Beranda</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Arsip</a>
<ul>
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</li>
<li><a href="#">Bloghack</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>

Lihat hasil langkah 1 disini.

Langkah 2
Setelah itu kita menggunakan kode CSS untuk memperbaiki penampilannya:

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}

Kode CSS diatas akan menghilangkan identasi pada browser dan membuang semua tanda bullet pada #nav dan semua elemen yang ada didalamnya. Kode "position:relative;" digunakan untuk menyusun ulang posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini nantinya digunakan untuk menata menu-menu berikutnya yang akan disusun sesuai dengan isi blok serta atribut-atribut lainnya. Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita inginkan, tetapi link teks akan berada pada posisi center secara vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan padding pada kode CSS ini.

Langkah 3
Percantik menu dengan setting CSS lebih lanjut:

/* keadaan menu normal, aktif dan pernah diakses */
#nav a:link, #nav a:active, #nav a:visited {
display:block; /* link menu di blok */
padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */
border:1px solid #333; /* ketebalan garis pinggir dan warna garis */
color:#fff; /* warna teks */
text-decoration:none; /* menghilangkan garis bawah pada link menu */
background-color:#333; /* warna latar belakang menu */
}
/*  keadaan menu saat dipilih */
#nav a:hover {
background-color:#fff; /* warna latar belakang menu */
color:#333; /* warna huruf */
}

Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses maka menu memiliki tampilan yang sama.

Lihat hasil langkah 2 dan 3 disini.

Langkah 4
Menyempurnakan tampilan dengan kode CSS berikutnya:

#nav li {
float:left; /* menu ditempatkan pada sebelah kiri */
position:relative; /* posisi relatif */
}

Kode CSS diatas akan membuat menu tersusun secara horisontal

#nav ul {
position:absolute; /* posisi absolute */
width:12em; /* lebar menu */
top:1.5em; /* jarak menu bagian atas */
display:none; /* menu disembunyikan */
}

Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu utama tetap tampil). Lebar masing-masing menu ditetapkan 12em (width:12em;) hal ini agar menu memiliki ukuran tetap, jika kurang anda bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;" pada #nav (lihat langkah 2)

#nav li ul a {
width:12em;
float:left;
}

Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.

#nav ul ul{
top:auto;
} 
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

#nav ul ul dan #nav li ul ul digunakan untuk memperbaiki penempatan menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih (hover) dan susunan tingkatnya.

Sampai disini sebenarnya menu sudah bagus, silahkan lihat hasil langkah 4 disini. Tetapi menu belum memiliki efek yang lembut saat menu-menu ditampilkan.

Langkah 5

Sekarang mari kita kombinasikan menu-menu dropdown yang sudah kita buat dengan sentuhan efek jQuery, tambahkan kode dibawah ini:

$(document).ready(function(){
$("#nav ul").css({display: "none"});
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
});

Fungsi dari masing-masing script jQuery:

$(" #nav ul ").css({display: "none"}); // Perbaikan di Opera

Kode diatas merupakan perbaikan untuk Opera yang tidak mampu menyembunyikan menu dengan cepat. Pada saat kita menggeser mouse (hover) pada sub menu, maka menu akan memiliki efek berkedip (flicker). $(" #nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak berurutan (unordered lists - ul) didalam #nav dan kemudian mengesetnya menjadi tidak ditampilkan (display:none).

$("#nav li").hover(function(){ //memberikan efek saat menu dipilih (hover)
},function(){ //memberikan efek saat pointer mouse meninggalkan menu
});

Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer mouse (hovering). Sederhananya memberikan efek pada saat menu dipilih dan tidak dipilih.

$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi dari menu yang sedang dipilih. Sedangkan script .show digunakan untuk menampilkan menu dengan durasi waktu yang ditentukan didalam kurung (400). Hal ini akan memberikan efek menampilkan menu yang sangat lembut.

$(this).find('ul:first').css({visibility: "hidden"});

Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui blok mode pada akhir animasinya. Menggunakan kode visibility untuk mencegah berkedip (flicker) pada animasi menu.

Alhamdulillah langkah demi langkah telah selesai, silahkan lihat demo dibawah ini.

Demo Menu Dropdown CSS Bertingkat

Dan kembangkanlah menu ini semenarik dan seindah mungkin menurut keinginan anda.

jQuery Multilevel Dropdown Menu CSS

Selamat mencoba dan semoga berhasil....

Read More

Membuat Link Bookmark Untuk Browser

Seperti pernah dijelaskan pada artikel "Social Bookmarking - jQuery PrettySociable" mengenai pengertian bookmark. Sedangkan sekarang kita bukan akan membuat social bookmark, tapi hanya sebuah link bookmark yang digunakan untuk memberikan penanda pada browser. Pada browser-browser baru telah terdapat menu bookmark, bagi para pengguna internet pribadi mungkin fasilitas bookmark ini sudah biasa digunakan, kita bisa saja mem-bookmark secara manual oleh pengunjung sendiri jika di rasa situs yang dikunjunginya itu penting. Sedangkan bagi kita para blogger tidak ada salahnya untuk menempelkan link bookmark pada blog kita, sehingga proses bookmark hanya membutuhkan beberapa klik. Hal ini akan membantu para pengunjung untuk lebih cepat mem-bookmark blog kita pada browser-nya. Demo diambil dari blog Bonprog.

Membuat Link Bookmark Untuk Browser pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Cari kode dibawah ini:

</head>

Langkah 3
Masukan kode dibawah ini diatas kode pada langkah 2:

<script type='text/javascript'>
//<![CDATA[
function book(){
if(document.all)window.external.AddFavorite("http://bonprog.blogspot.com/","Bonus Program");
else if(window.sidebar)window.sidebar.addPanel("Bonus Program","http://bonprog.blogspot.com/","");
}
//]]>
</script>

Langkah 4
Tempatkan kode dibawah ini dimana saja sesuai keinginan anda:

<a href='javascript:book();' id='star' target='_self' title='Add to Favorites'>Bookmark</a>

Langkah 5
Simpan template... dan preview lalu klik link bookmark tersebut...

Keterangan:

• Ubahlah kedua link "http://bonprog.blogspot.com/" sesuai dengan alamat blog anda.
• Ubahlah kedua kalimat "Bonus Program" sesuai dengan nama blog anda atau sesuai keinginan anda.
• Script ini baru bisa berjalan pada Firefox dan IE, selain itu belum pernah dicoba....

Read More

Animasi Goyang Link Sidebar (jQuery Nudging Link)

Beberapa hari ini Blogger Tune-Up disibukan dengan masalah didarat, sehingga artikel yang masih dalam proses menjadi tertunda untuk di terbitkan. Trial and error Blogger Tune-Up beberapa hari ini adalah memecahkan "ke-egoan" Mac OS X agar dapat dipaksa untuk ditanamkan pada komputer berotak Intel. Hal ini justru menjadi bumerang bagi komputer sendiri, dan harus rela kehilangan beberapa data jQuery yang cukup penting. Sambil menunggu komputerku kembali normal setelah mengalami beberapa masalah sehingga beberapa file jQuery menghilang entah kemana, sekarang kita akan membuat link pada sidebar bergoyang-goyang apabila mouse kita arahkan (hover). Ya lumayanlah untuk refresh sambil meredakan ketegangan dan kebingungan akibat kehilangan data. Let's begin...!!!

Animasi Goyang Link Sidebar

Animasi Goyang Link Sidebar dengan jQuery

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

</head>

Langkah 4
Masukan kode dibawah ini tepat diatas kode pada langkah 3:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
var Duration = 250;
$jnoc('.widget-content ul li a').hover(function() {
$jnoc(this).animate({ paddingLeft: '20px' }, Duration);
}, function() {
$jnoc(this).animate({ paddingLeft: '0px' }, Duration);         
});
});

Langkah 5
Simpan Template dan Preview... (Yuhuy.... mari bergoyang...)

Download jQuery Nudging Link Animation

Keterangan:

1. Ubah nilai 250 (satuan milidetik) untuk mengatur kecepatan gerakan animasi (Baris 4)
2. Ubah nilai 20 untuk menentukan jarak gerakan animasi (Baris 6)
3. Script jQuery ini sudah ditambahkan "jQuery No Conflict"
4. Jika gagal ubah .widget-content dengan .sidebar (Baris 5)

Read More

Memahami dan Mengatasi Konflik Script jQuery

Bismillah. Sebenarnya artikel ini pernah dibahas sebelumnya dengan judul artikel "Peperangan Framework JavaScript - Prototype v.s. jQuery" tapi mungkin karena sangat sulit dijabarkan maka Blogger Tune-Up menyederhanakan artikel tersebut agar mudah untuk dipahami. Script-script yang dibuat menggunakan perintah dasar JavaScript memang rentan terjadi bentrok antar script baik karena kesamaan script, kesamaan fungsi ataupun kesamaan perintah sehingga script-script yang dibuat saling mengalahkan atau bahkan saling meniadakan satu sama lain dan itu juga terjadi pada turunan-turunan JavaScript seperti halnya jQuery. Hal ini bisa saja berakibat fatal, beberapa kasus yang Blogger Tune-Up pernah temukan bahkan membuat error halaman "Tata Letak - Elemen Laman" dengan keterangan "Error Page 404 Not Found" (dibahas menyusul).

jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga rentan terhadap bentrok antar script baik script dengan script pada framework yang sama atau dengan script dengan framework berbeda. Sebenarnya website resmi jQuery sudah memberikan solusi yang sangat mudah untuk mengatasi bentrok antar script ini tetapi tidak ada salahnya Blogger Tune-Up kembali membantu membahasnya, terutama bagi mereka yang menemukan fungsi-fungsi jQuery yang tidak bekerja dengan baik.

Perintah dasar jQuery selalu diawali dengan simbol "$" (tanpa tanda kutip) atau kita mengenal simbol ini dengan nama "Dollar". Ini sebagai identitas perintah-perintah jQuery, jadi jika teman-teman blogger menemukan script yang selalu diawali dengan tanda "$" maka ini adalah script jQuery. Dan sudah menjadi kewajiban bahwa script jQuery ini harus didampingi framework jQuery-nya sebagai sistem dasar. Framework jQuery haruslah terlebih dahulu dipanggil (load) agar deklarasi-deklarasi script yang kita buat mampu berjalan normal. Ibaratnya jQuery itu adalah rumah dan script-script yang kita buat adalah isi dari rumah itu.

Pemasangan Framework jQuery pada Blogger

Beruntunglah para webdesigner yang suka dengan framework jQuery karena framework ini didukung penuh oleh raksasa IT yaitu Google. Google menyediakan resource jQuery baik untuk digunakan maupun untuk dikembangkan, sehingga kita sebagai blogger yang lebih suka menggunakan tidaklah mengalami kesulitan untuk memasang framework jQuery pada blog kita. Untuk memasang framework jQuery pada blog kita, Google telah menyediakan beberapa cara yang mudah, diantaranya:

1. jQuery Google API

Cara kesatu ini adalah cara yang paling mudah dan paling aman dengan tingkat resiko error handle script paling kecil

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

2. jQuery Google API Load

Cara kedua ini adalah cara yang Google jelaskan sebagai teknik yang paling aman, cepat dan ringan untuk memanggil framework jQuery

<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>

3. jQuery Google API Autoload

Cara ketiga ini memiliki tingkat error handle script sangat tinggi tetapi merupakan teknik yang paling cepat dalam memanggil framework jQuery

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

Cara kedua dan ketiga pernah dibahas pada artikel "Mempercepat Pemuatan Perpustakaan JavaScript". Pilihlah salah satu dari ketiga cara diatas dan harus diperhatikan bahwa pemanggilan Framework jQuery hanya perlu satu kali, karena jika di panggil (load) berulang maka ini akan memberatkan proses Pageload (pemanggilan halaman). Periksalah template dan widget blog anda dari kemungkinan pemasangan script framework jQuery yang berulang, jika ditemukan maka hapuslah dan sisakan satu saja serta prioritaskan pemanggilan framework jQuery pada template saja.

Mengatasi Konflik Script jQuery

Seperti sudah dijelaskan diatas bahwa script jQuery selalu diawali dengan simbol "$", simbol inilah yang harus diperhatikan karena simbol ini merupakan sebuah deklarasi fungsi-fungsi jQuery. Maka ini pula yang menjadi solusi untuk mengatasi konflik script-script jQuery. Bagaimana mengatasi konfliknya? Contoh dibawah ini merupakan cara yang sering Blogger Tune-Up gunakan untuk mengatasi konflik jQuery.

Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

$(document).ready(function(){
$("a.slick").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});

Script diatas sebenarnya sudah berjalan dengan baik akan tetapi kemungkinan bentrok sangat mudah terjadi.

Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
$jnoc("a.slick").click(function () {
$jnoc(".active").removeClass("active");
$jnoc(this).addClass("active");
$jnoc(".content-slick").slideUp();
var content_show = $jnoc(this).attr("title");
$jnoc("#"+content_show).slideDown();
});
});

Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.

Penjelasan:

1. var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript
2. $jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$" sehingga jika kita perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.
3. $jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan anda, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.

Alhamdulillah. Mudah-mudahan artikel kali ini bisa dimengerti, jika masih bingung silahkan tinggalkan pada kotak komentar....

Read More

Perbesar Perkecil Ukuran Huruf dengan jQuery Versi 2.0

Pada artikel sebelumnya Blogger Tune-Up telah membahas Perbesar Perkecil Ukuran Huruf dengan jQuery Versi 1.0. Pada Versi 2.0 sebenarnya hanya terdapat perbedaan script jQuery yang digunakan, mengenai fungsinya kedua versi ini sama saja. Hal ini sebagai alternatif jika salah satunya tidak dapat bekerja dengan baik, para blogger bisa memilih salah satu diantaranya untuk diterapkan pada blognya. Perbedaan mendasar ada pada perintahnya, jika Versi 1.0 hanya menggunakan fungsi "function click" sedang Versi 2.0 lebih kompleks lagi dengan diperkuat fungsi "switch case". Dari analisis sederhana Versi 2.0 lebih kecil dari "error handle" script dan perubahan ukuran huruf lebih halus dari Versi 1.0.

Perbesar Perkecil Ukuran Huruf

jQuery Font Resizer 2.0

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "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:

.post-body {font-size:13px;font-family :"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;}
.changefont{padding:0; margin:0;}
.changefont img {border:1px solid #fff;padding:0;height:15px;width:15px;}
.changefont a {text-decoration:none;}

Langkah 6
Cari kode dibawah ini:

</head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
$jnoc(".changefont a").click(function(){
size = $jnoc(this).attr('rel');
switch(size) {
case 'reset' :
$jnoc(".post-body").css("font-size", "13px");
break;
case 'small' :
px = parseInt($jnoc(".post-body").css("font-size") != null ? $jnoc(".post-body").css("font-size") : "13");
if(px > 8) px--;
$jnoc(".post-body").css("font-size", px+"px");
break;
case 'large' :
px = parseInt($jnoc(".post-body").css("font-size") != null ? $jnoc(".post-body").css("font-size") : "13");
if(px < 24) px++;
$jnoc(".post-body").css("font-size", px+"px");
break;
}
return false;
});
});
//]]>
</script>

Langkah 8
Cari kode dibawah ini:

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='right' class='changefont'>
<a rel='small' href='#'><img alt='Perkecil' src='http://lh6.ggpht.com/_xcD4JK_dIjU/S-WMoStLo0I/AAAAAAAAEDI/5UWDZLN92sQ/d/tekskec.jpg' title='Smaller'/></a>&#160;
<a rel='reset' href='#'><img alt='Reset' src='http://lh5.ggpht.com/_xcD4JK_dIjU/S-WMohydu6I/AAAAAAAAEDM/roODP05nadQ/d/teksres.jpg' title='Reset'/></a>&#160;
<a rel='large' href='#'><img alt='Perbesar' src='http://lh3.ggpht.com/_xcD4JK_dIjU/S-WMo8AmY2I/AAAAAAAAEDQ/H8Bz6PrwYvc/d/textbes.jpg' title='Larger'/></a>&#160;
<a href='http://modification-blog.blogspot.com/' target='_blank' title="Blogger Tune-Up"><img src='http://lh4.ggpht.com/_xcD4JK_dIjU/S-WMoY89-yI/AAAAAAAAEDE/jfFuTdoOa3s/d/teksicon.gif'/></a>
</div>
</b:if>

Langkah 10
Simpan Template dan preview...

Download Font Resizer 2.0

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Perbesar Perkecil Ukuran Huruf dengan jQuery Versi 1.0

Tidak semua pengunjung blog kita memiliki kemampuan membaca yang sama dengan ukuran huruf yang kita tetapkan. Ukuran huruf tertentu bisa saja cocok untuk sebagian pengunjung tetapi ada juga yang merasa ukuran huruf yang dibacanya kurang cocok, terlalu besar atau terlalu kecil. Bagaimana supaya pengunjung blog kita merasa nyaman dengan ukuran huruf pada artikel kita? Mungkin dengan memberikan keleluasaan kepada pengunjung untuk menentukan ukuran huruf yang sesuai akan memudahkan dan membuat nyaman pengunjung untuk berlama-lama membaca artikel-artikel yang kita buat pada blog. Tutorial kali ini kita akan membuat widget/gadget perbesar perkecil huruf dengan jQuery. Tak ada salahnya fasilitas ini menjadi fasilitas wajib untuk blog anda.

Demo Perbesar Perkecil Ukuran Huruf

Perbesar Perkecil Ukuran Huruf dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "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:

.post-body {font-size:12px; font-family : Verdana, Arial, Helvetica, sans-serif;}
.ubahfont img{border:1px solid #fff;padding:0;}

Langkah 6
Cari kode dibawah ini:

</head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var $jno = jQuery.noConflict();
$jno(document).ready(function() {
var d=$jno('.post-body').css('font-size');
$jno(".resetFont").click(function(){
$jno('.post-body').css('font-size',d)
});
$jno(".perbesarFont").click(function(){
var a=$jno('.post-body').css('font-size');
var b=parseFloat(a,10);
var c=b*1.2;
$jno('.post-body').css('font-size',c);
return false
});
$jno(".perkecilFont").click(function(){
var a=$jno('.post-body').css('font-size');
var b=parseFloat(a,10);
var c=b*0.8;
$jno('.post-body').css('font-size',c);
return false
})});
//]]>
</script>

Langkah 8
Cari kode dibawah ini:

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='right' class='ubahfont'>
<a class='perkecilFont' href='#'><img alt='Perkecil' height='15' src='http://lh6.ggpht.com/_xcD4JK_dIjU/S-WMoStLo0I/AAAAAAAAEDI/5UWDZLN92sQ/d/tekskec.jpg' title='Smaller' width='15'/></a>&#160;
<a class='resetFont' href='#'><img alt='Reset' height='15' src='http://lh5.ggpht.com/_xcD4JK_dIjU/S-WMohydu6I/AAAAAAAAEDM/roODP05nadQ/d/teksres.jpg' title='Reset' width='15'/></a>&#160;
<a class='perbesarFont' href='#'><img alt='Perbesar' height='15' src='http://lh3.ggpht.com/_xcD4JK_dIjU/S-WMo8AmY2I/AAAAAAAAEDQ/H8Bz6PrwYvc/d/textbes.jpg' width='15'/></a>&#160;
<a href='http://modification-blog.blogspot.com/' target='_blank'><img height='15' src='http://lh4.ggpht.com/_xcD4JK_dIjU/S-WMoY89-yI/AAAAAAAAEDE/jfFuTdoOa3s/d/teksicon.gif' width='15'/></a>
</div>
</b:if>

Langkah 10
Simpan Template dan preview...

Download jQuery Font Resizer 1.0

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Mengenal JSON (JavaScript Object Notation) Untuk Blogger

Blogger Tune-Up rehat sebentar untuk mengutak-atik script, dalam bahasa sederhananya sedang kehilangan semangat dan ide baru (mode : malas). Mungkin diantara teman blogger ada yang sedang mengutak-atik script untuk membuat "Artikel Terkait Plus Gambar Mini^[1]" yang ada rangkuman artikelnya? Atau ada yang sedang mengutak-atik script "jQuery Tipsy^[2]" dengan keterangan yang diambil dari rangkuman artikel? Kalau ada mari kita berdiskusi untuk membuat script-nya. Kedua script itu Blogger Tune-Up rencanakan akan menggunakan JSON^[3] sebagai bahasa pemrogramannya. Tapi apa sebenarnya JSON? Mari kita belajar bersama.

Douglas Crockford master JavaScript dibelakang JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript^[4], Standar ECMA-262 Edisi ke-3 - Desember 1999^[5]. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dan lain-lain. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.

JSON terbuat dari dua struktur:

1. Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array.
2. Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.

Demikian situs resmi JSON menjelaskan. Jika belum mengerti silahkan ubek-ubek internet untuk memahami apa dan bagaimana bahasa pemrograman JSON.
Dari sekian banyak bahasa pemrograman JSON, Blogger Tune-Up akan sedikit menampilkan script JSON yang paling banyak di gunakan. Tabel di bawah ini merupakan unsur yang paling penting dari struktur objek JSON untuk Blogger.

Objek	Keterangan	Contoh Hasil
json	Objek JSON	-
json.feed	Feed	-
json.feed.title.$t	Nama Blog	Blogger Tune-Up
json.feed.updated.$t	Tanggal dan waktu terakhir update	2007-03-18, 20:43
json.feed.author[]	Susunan dari Nama Author Blog	-
json.feed.author[0].name.$t	Nama Pemilik Blog	Hendriono
json.feed.openSearch$totalResults	Jumlah Artikel pada Blog	165
json.feed.entry[]	Susunan entri Blog	-
json.feed.entry[i].title.$t	Judul dari i artikel	Mengenal JSON
json.feed.entry[i].category[]	Susunan dari label i artikel	-
json.feed.entry[i].category[j].term	j label dari i artikel	jQuery
json.feed.entry[i].published.$t	Tanggal dan waktu artikel i diterbitkan	2007-03-18, 12:27
json.feed.entry[i].updated.$t	Tanggal dan waktu artikel i diupdate	2007-03-18, 12:35
json.feed.entry[i].author[]	Susunan i nama author/penulis artikel	-
json.feed.entry[i].author[0].name.$t	Nama penulis i artikel	Hendriono
json.feed.entry[i].content.$t	Isi dari i artikel, sebagai HTML	Blogger Tune-Up rehat sebentar….
json.feed.entry[i].summary.$t	Rangkuman dari i artikel	-
json.feed.entry[i].link[]	Susunan link dari i artikel	-

Dibawah ini contoh script penggunaan JSON pada Blog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Blogger Tune-Up | Contoh Penggunaan JSON</title>
<script style="text/javascript">
function showrecentposts(json) {
// sebuah pengulangan dimulai
// dalam pengulangan ini kita mengambil entri dari feed dan paseing
for (var i = 0; i < jumposts; i++) {
// mengambil entri i dari feed
var entry = json.feed.entry[i];
// mengambil judul artikel
var posttitle = entry.title.$t;
// mengambil alamat artikel
// memeriksa semua alamat untuk link dengan rel = alternate
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;
}
}
// mengambil tanggal terbit, pengambilan hanya 10 karakter pertama
var postdate = entry.published.$t.substring(0, 10);
// mengambil nama author
var postauthor = entry.author[0].name.$t;
// mengambil isi artikel
// Jika feed Blogger di  set pada FULL, maka isi merupakan daftar utuh
// Jika feed Blogger di  set pada SHORT, maka isi merupakan daftar penggalan/rangkuman
if ("content" in entry) {
var postcontent = entry.content.$t;
}
else if ("summary" in entry) {
var postcontent = entry.summary.$t;
}
else var postcontent = "";
// menonaktifkan semua tag HTML
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// mereduksikan isi artikel sesuai dengan setting jumlah karakter
if (postcontent.length > numchars) postcontent = postcontent.substring(0, numchars);
// menampilkan hasil
document.write('<br>');
document.write('Entry #' + i + '<br>');
document.write('Post title    : ' + posttitle + '<br>');
document.write('Post url      : ' + posturl + '<br>');
document.write('Post author   : ' + postauthor + '<br>');
document.write('Postdate      : ' + postdate + '<br>');
document.write('Postcontent   : ' + postcontent + '...<br>');
document.write('<br>');
}
}
</script>
</head>
<body>
<h2>Artikel Terbaru Blogger Tune-Up</h2>
<script style="text/javascript">
var jumposts=5;
var numchars=200;
</script>
<script src="http://modification-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showrecentposts"></script>
</body>
</html>

Catatan Kaki dan Link JSON:
[1] Artikel Terkait Plus Gambar Mini
[2] jQuery Tipsy
[3] Bahasa Pemprograman JavaScript
[4] Standar ECMA-262 Edisi ke-3 - Desember 1999
[5] Using JSON (JavaScript Object Notation) with Yahoo! Web Services
[6] Using JSON in the Google Data Protocol

Read More