Wednesday, June 30, 2010

Memahami dan Membuat jQuery Slick Tab

Posted by dav On 9:21 AM
Setelah berkutat dalam beberapa artikel tentang pembuatan menu dan beberapa efek jQuery, sekarang kita sedikit bergeser ke pembuatan slick tab atau ada juga yang menyebutnya organic tab tetapi masih tetap menggunakan framework jQuery sebagai sumber kendalinya. Kita sepakat saja dulu dengan penamaan slick tab agar mudah dalam memahaminya. Slick tab berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya kita cukup klik salah satu judul konten tersebut.
Memahami dan Membuat jQuery Slick Tab
Ketika kita klik salah satu judul konten maka konten yang dimaksud akan ditampilkan dan konten yang lainnya akan disembunyikan, selain itu ditambah efek slide down dan slide up agar perpindahan konten lebih menarik. Slick tab sangat bermanfaat untuk mengirit tempat pada blog kita agar terlihat rapi dan profesional. Memang ada salah seorang master blogger Indonesia yang sangat ahli dalam hal ini, sehingga script slick tab yang beliau buat menjadi sangat mudah untuk diterapkan pada blogger. Efeknya kita sebagai blogger menjadi tidak tahu bagaimana efek jQuery slick tab tersebut disusun/ditulis untuk menghasilkan tampilan yang sangat bagus.

Skenario jQuery Slick Tab

1. Kode HTML
Ini merupakan skenario dasar dalam pembuatan jQuery Slick Tab, semisal kita akan memasukan 3 buah konten kedalam slick tab, maka kode HTML ditulis sebagai berikut:

Judul Konten
<ul class="slick">
<li title="terbaru" class="slick active">Terbaru</li>
<li title="komentar" class="slick">Komentar</li>
<li title="terkait" class="slick">Terkait</li>
</ul>
Isi Konten
<div id="terbaru" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

<div id="komentar" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

<div id="terkait" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

2. Kode CSS (Cascading Style Sheet)
Setelah skenario kode HTML kita buat maka berikutnya kita harus tuliskan kode CSS untuk menyusun tampilan Slick Tab menjadi lebih tersusun rapi dan indah, kode CSS ditulis sebagai berikut:
#slick_area {
border:1px solid #585858;
background-color:#141414;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#FFF;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#000;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:1px solid #585858;
}
ul.slick li:hover {
color:#FFFF00;
}
ul.slick li.active {
background-color:#2F2F2F;
border:1px solid #585858;

}
.content-slick {
background-color:#2F2F2F;
border:1px solid #585858;
color:#dedede;
min-height:40px;
padding:7px 13px 5px;
text-align:justify;
}
.content-slick ul {
margin:2px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #585858;
padding:4px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#141414;
}
.content-slick ul li a {
text-decoration:none;
color:#FFF;
display:block;
}
Sampai dengan kode CSS ini seharusnya Slick Tab sudah mulai terlihat rapi walaupun konten belum bisa ditampilkan semua, hanya konten yang kesatu saja yang tampil. Blogger Tune-Up tidak akan menjelaskan satu persatu fungsi kode CSS diatas (CSS akan dibahas terpisah)

3. Kode jQuery
Sekarang saatnya kita menuliskan script jQuery untuk mengatur Slick Tab dan memberikan efek animasi slide up dan slide down. Kode jQuery ditulis sebagai berikut:
$(document).ready(function(){
$('#komentar, #terkait').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
Berikut merupakan penjabaran dari script jQuery diatas:
$(document).ready(function(){
Script diatas untuk mendeklarasikan bahwa semua kode didalamnya merupakan fungsi jQuery
$('#komentar, #terkait').hide(); 
Script diatas untuk menyembunyikan konten yang kita beri identitas komentar (id="komentar") dan konten dengan identitas terkait (id="terkait") [Lihat kode HTML]
$("ul.slick li").click(function () {
Script diatas untuk mendeklarasikan bahwa pada saat ul.slick li (judul konten) di klik maka fungsi akan dimulai
$(".active").removeClass("active");
Script diatas untuk membuang semua konten yang dipengaruhi oleh kode CSS .active [lihat di kode CSS]
$(this).addClass("active");
Script diatas untuk menambahkan konten sesuai dengan judul yang di klik untuk dipengaruhi oleh kode CSS .active [lihat di kode CSS]
$(".content-slick").slideUp();
Script diatas untuk memberikan efek slide up pada konten dengan class="content-slick"
var content_show = $(this).attr("title");
Script diatas untuk mendeklarasikan content_show sebagai pengganti fungsi $(this).attr("title");. Sedangkan fungsi $(this).attr("title"); digunakan untuk mengambil informasi dari isi title. Hal ini dilakukan karena fungsi jQuery tidak bisa menyatukan dua attribut dalam satu script.
$("#"+content_show).slideDown();
Script diatas untuk memberikan efek slide down pada konten tertentu yang memiliki identitas (makanya ada simbol #, #=id) sesuai dengan title (content_show). Perhatikan kode HTML dituliskan sama antara title pada judul konten dengan id pada konten (title="terbaru" - id="terbaru" | title="komentar" - id="komentar" | title="terkait" - id="terkait"). jQuery akan membandingkan antara title dengan id, jika sama maka konten akan di berikan efek slide down.
});
});
Penutup fungsi jQuery.
Keterangan:
  • Jika anda ingin menggunakannya pada blogger (misal sebagai sidebar) maka jangan lupa integrasikan dulu framework jQuery (Baca disini)
  • Untuk memdapatkan perpaduan warna sesuai dengan template blog anda, silahkan berekperimen pada kode CSS.
Selamat mencoba untuk dan semoga berhasil. Happy Blogging :)

Saturday, June 26, 2010

jQuery Animasi Gambar Latar

Posted by dav On 7:15 AM
Walaupun sedang menghadapi penelitian tentang "Virtual Desktop[1]" tetapi Blogger Tune-Up tidak ingin begitu terlalu terlarut dalam penelitian tersebut. Masalahnya sederhana, karena kekurangan dana dan "spare part" yang sangat sulit didapat, maklumlah Blogger Cekak (hehehe...). Artikel kali ini masih berhubungan dengan jQuery, yang akan kita implementasikan pada menu dengan sentuhan efek animasi gambar latar (jQuery Background Image Animation)[2] menggunakan plugin Background-Position versi 1.02[3].
jQuery Animasi Gambar Latar
Bagaimana jQuery Animasi Gambar Latar bekerja? Pada saat default (tidak diakses) maka menu akan menggunakan gambar latar dalam posisi tertentu, dan pada saat mouse diarahkan pada menu (hover) maka background akan diubah dalam posisi berbeda. Keindahan menu ini terdapat pada perubahan background yang bergeser dengan lembut layaknya efek slide. Penasaran? Lihat demonya...

Skenario Implementasi jQuery Background Image Animation


1. Kode HTML
Ini merupakan kode dasar untuk membuat suatu elemen HTML, semisal kita akan membuat suatu menu dengan struktur seperti dibawah ini:
<div id="nav">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>

2. Kode CSS
Untuk memberikan sentuhan menu yang lebih indah, maka kita memerlukan kode CSS. Kode CSS ini dibuat dengan posisi menu default (sebelah kiri), di blok dan dengan sedikit jarak. Seperti dibawah ini:
#nav {
margin:2px 0;
padding:0;
}
#nav ul {
list-style:none;
margin:0;
padding:0;
}
#nav ul li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
#nav ul li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
#nav ul li a {
background:url(bg.jpg) repeat 0 0;
}
#nav ul li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
Perhatikan kode diatas bahwa hover (jika pointer mouse diatas menu) telah dideklarasikan. Hal ini dilakukan jika ada para pengunjung yang menonaktifkan JavaScript pada browser-nya maka menu tetap bekerja dengan perubahan background tanpa animasi. Background dideklarasikan pada #nav ul li a secara terpisah, hal ini agar dapat berdiri sendiri tetapi posisi background harus di set ulang sesuai dengan background yang akan digunakan sebagai efek.

3. Gambar Latar (Background)
Gambar latar (background) dapat kita buat sesuai dengan keinginan tentunya dengan efek yang lebih beragam, dibawah ini hanyalah contoh.

Gambar 1 (Swipel)
Gambar diatas digunakan untuk membuat efek swipel (menggeser kesamping). Dimensi gambar diatas berukuran 300 pixel (lebar) x 50 pixel (tinggi) sehingga kode CSS dituliskan seperti dibawah ini:
Posisi default:
#nav ul li a {
background:url(bg.jpg) repeat 0 0;
}
Posisi mouseover (hover):
#nav ul li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
Nilai -150px berarti background digeser kesebelah kiri sebanyak 150 pixel. Nilai 0 0 artinya background pada posisi sebelah kiri atas (0=kiri 0=atas)

Gambar 2 (Slidedown)
Gambar diatas digunakan untuk membuat efek slidedown (menggeser kebawah).
Dimensi gambar diatas berukuran 200 pixel (lebar) x 100 pixel (tinggi) sehingga kode CSS dituliskan seperti dibawah ini:
Posisi default:
#nav ul li a {
background:url(bg.jpg) repeat 0 -50px;
}
Posisi mouseover (hover):
#nav ul li a:hover, li a:focus, li a:active {
background-position: 0 0;
}
Nilai -50px berarti background diambil posisi paling bawah sebanyak 50 pixel dan pada saat mouseover (hover) maka background akan digeser kebawah pada posisi 0 pixel.

Gambar 3 (Fade)
Gambar diatas digunakan untuk membuat efek slidedown (menggeser kebawah).
Dimensi gambar diatas berukuran 200 pixel (lebar) x 300 pixel (tinggi) sehingga kode CSS dituliskan seperti dibawah ini:
Posisi default:
#nav ul li a {
background:url(bg.jpg) repeat 0 0;
}
Posisi mouseover (hover):
#nav ul li a:hover, li a:focus, li a:active {
background-position: 0 -250px;
}
Nilai -250px berarti background digeser kebawah sebanyak 250 pixel.

4. Kode jQuery
Inilah kode jQuery yang akan memberikan efek animasi tertentu ketika mouse over (pointer mouse digeser ke menu) dan mouse out (pointer mouse digeser meninggalkan menu).
$(function () {
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
});
Mari kita jabarkan script diatas:
$(function () {
Script diatas untuk mendeklarasikan bahwa semua kode didalamnya merupakan fungsi jQuery
$('#nav a')
Script diatas untuk mengenalkan pada jQuery bahwa efek akan dikenakan pada kode didalam kurung ('#nav a')
.css( {backgroundPosition: "0 0"} )
Script diatas untuk mengeset ulang kode CSS agar background pada posisi 0 0 (kiri atas)
.mouseover(function(){
Script diatas untuk memulai efek ketika mouse over (pointer mouse berada pada posisi menu)
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
Script diatas untuk memulai animasi (menggeser background) hingga background berhenti pada posisi 0 -250px (efek slidedup) dengan durasi (lama waktu) pergeseran 500 mili detik
.mouseout(function(){
Script diatas untuk memulai efek ketika mouse out (pointer mouse meninggalkan/keluar menu)
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
Script diatas untuk memulai animasi (menggeser background) hingga background berhenti pada posisi 0 0 (efek slidedown) dengan durasi (lama waktu) pergeseran 500 mili detik
});
Script penutup fungsi jQuery

Hal yang harus diperhatikan adalah kemampuan anda dalam mengolah kode CSS dan ukuran gambar karena fungsi script jQuery diatas digunakan untuk mengeset ulang kode CSS yang mempengaruhi posisi gambar latar (background).
Keterangan:
Efek ini bekerja dengan framework jQuery dan plugin Background-Position, maka jangan lupa menyertakan didalam kode HTML atau diantara tag head bagi para blogger, seperti dibawah ini:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript' src='http://hensblog.googlecode.com/files/imgposition.js'/>
Kemudian ikut sertakan kode selanjutnya, seperti dibawah ini:
<script type='text/javascript'>
//<![CDATA[
$(function () {
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
});
//]]>
</script>
Selamat mencoba dan semoga berhasil. Happy blogging to write less, do more...

Special Thanks to:
1. Interactive Virtual Desktop by Hendriono Online
2. Using jQuery for Background Image Animations by Jonathan Snook
3. Background-Position Plugin by Alexander Farkas

Tuesday, June 22, 2010

Memahami Efek jQuery Accordion

Posted by dav On 2:02 PM
Blogger Tune-Up telah menerapkan efek accordion pada beberapa artikel yang telah dibuat, diantaranya; Daftar Isi Efek jQuery Accordion dan jQuery Accordion Recent Post with Thumbnail. Bagaimana efek jQuery Accordion ini bekerja? Mari sama-sama diskusikan agar kita bisa lebih memahami dan berkreasi lebih banyak terhadap blog kita. Mudah-mudahan ini merupakan salah satu pancingan untuk para Blogger Indonesia agar mampu berkarya lebih baik dari pada menjadi seorang blogger pengikut atau blogger pengguna fasilitas yang disediakan secara instan tanpa memahami kinerja dari script-script yang dituliskan (copy paste).
Memahami Efek jQuery Accordion
Sulit, rumit dan menyita banyak waktu disaat kita belajar tapi seiring waktu semua ini akan bertahap menjadi lebih mudah tanpa terasa. Yang penting kita jangan pernah berfikir bahwa "semua ini sia-sia" karena tingkat profesionalisme blogger kita sebenarnya diuji oleh waktu dan sejauh mana kita mau terus untuk belajar. Mungkin diantara teman blogger ada yang merasa sudah jenuh dengan kegiatan nge-blog atau bahkan ada yang merasa bosan dengan tingkah laku blogger pujaannya yang ternyata sangat sulit membagi ilmunya. Inilah satu diantara fenomena dunia blogging Indonesia yang terjadi disekitar kita, tidak sedikit seorang blogger memuja blogger lainnya yang dianggap sudah profesional tetapi perlahan-lahan apa yang ditulis oleh blogger pujaan kita menjadi tidak informatif dan tidak mendidik bahkan cenderung menyebalkan. Artikel yang hanya membahas tentang program-program affiliasi misalnya atau ada yang lebih kreatif menjadi seorang blogger template converter karena sudah merasa profesional dengan traffic blog yang tinggi dan kemudian memproteksi diri tanpa berbagi ilmunya. Memang itu hak mereka (para blogger profesional), tapi kita sebagai para newbie blogger mau belajar kepada siapa lagi jika mereka menjadi over protective? (Eh kok jadi curhat... Ma'af...)
Mari kembali ke materi efek jQuery Accordion, tetapi disini Blogger Tune-Up tidak akan membahas sampai ke kode CSS-nya, karena materi CSS akan dibahas terpisah.

Skenario Menu HTML

Kita akan membuat suatu sidebar yang berisi link-link menuju suatu alamat, maka kode HTML yang akan kita tulis misalnya seperti dibawah ini:
<div id="menu">
<div class="judul">Judul 1</div>
<div class="isimenu">
<ul>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
</ul>
</div>
<div class="judul">Judul 2</div>
<div class="isimenu">
<ul>
<li><a href="http://facebook.com/hendriono">Facebook</a></li>
<li><a href="http://twitter.com/hendriono">Twitter</a></li>
<li><a href="http://aiotemplate.blogspot.com/">AIO Template</a></li>
<li><a href="http://programgratisan.blogspot.com/">Freeware</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
<li><a href="http://tutsadobe.blogspot.com/">Design Graphics</a></li>
</ul>
</div>
<div class="judul">Judul 3</div>
<div class="isimenu">
<ul>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</div>
<div class="judul">Judul 4</div>
<div class="isimenu">
<ul>
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</div>
</div>

Skenarionya begini :
  • Pada saat pertama load halaman website maka kumpulan menu pada Judul 1 terbuka dan menu-menu yang ada pada judul berikutnya tertutup.
  • Jika kita klik pada Judul 2 maka kumpulan menunya akan terbuka sedangkan menu-menu pada Judul 1 akan tertutup dengan efek slideup/slidedown, dan jika kita klik Judul 3 maka kumpulan menunya akan terbuka sedangkan menu-menu pada Judul 2 akan tertutup sedangkan menu-menu pada Judul 1 dan Judul 4 masih tertutup dan demikian seterusnya.

Memahami Script jQuery Accordion

Setelah memahami skenario bahan menu untuk accordion, mari kita mulai menulis script-nya, seperti dijelaskan dibawah ini:
$('.isimenu').hide();
Script diatas digunakan untuk menyembunyikan seluruh menu yang terdapat diantara tag <div class="isimenu"> dan </div>
$('.isimenu:first').show();
Script diatas digunakan untuk menampilkan menu yang pertama saja, yaitu menu-menu pada Judul 1
$('.judul').css('cursor', 'pointer');
Script diatas digunakan agar pointer mouse berubah menjadi cursor tangan apabila berada pada Judul menu atau yang diapit tag <div class="judul">Judul</div>
$('.judul').click(
Script diatas berfungsi untuk memberikan perintah pada script berikutnya bahwa jika Judul menu diklik maka...
function() {
Script diatas diatas untuk mengaktifkan fungsi klik
if(($(this).next().is('.isimenu')) && ($(this).next().is(':visible')))
Script diatas berfungsi untuk memeriksa bahwa menu-menu (.isimenu) pada Judul tertentu tampak/terbuka
{ return false; }
Script diatas berfungsi untuk mengulang perintah jika bernilai false/salah
if(($(this).next().is('.isimenu')) && (!$(this).next().is(':visible'))) {
Script diatas berfungsi untuk memeriksa bahwa menu-menu (.isimenu) pada Judul tertentu belum tersedia/terbuka jika belum terbuka maka...
$('.isimenu:visible').slideUp('normal');
Script diatas berfungsi untuk membuka menu-menu tertentu dengan efek slideup (bergeser terbuka keatas) dan menutup menu diatasnya
$(this).next().slideDown('normal');
Script diatas berfungsi untuk menggeser/menutup menu lainnya/berikutnya dengan efek slidedown (bergeser menutup kebawah)
return false;
Script diatas berfungsi untuk mengulang perintah jika bernilai false/salah
}
}
);
}
$(document).ready(function() {initMenu();});
Script diatas berfungsi untuk menjalankan fungsi initMenu sebagai perintah-perintah jQuery

Sehingga secara keseluruhan (jika disatukan) efek jQuery Accordion menjadi seperti dibawah ini:
function initMenu() {
$('.isimenu').hide();
$('.isimenu:first').show();
$('.judul').css('cursor', 'pointer');
$('.judul').click(
function() {
if(($(this).next().is('.isimenu')) && ($(this).next().is(':visible'))) {
return false;
}
if(($(this).next().is('.isimenu')) && (!$(this).next().is(':visible'))) {
$('.isimenu:visible').slideUp('normal');
$(this).next().slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});

Jangan lupa efek jQuery Accordion ini bekerja diatas framework jQuery (Baca disini)
Mudah-mudahan sekarang bisa dimengerti bagaimana efek jQuery Accordion bekerja... Selamat mencoba dan semoga mengerti dan berhasil... Happy Blogging :)

Preload Gambar dengan jQuery (Update)

Posted by dav On 3:59 AM
Beberapa saat yang lalu Blogger Tune-Up membuat artikel tentang Preload Gambar dengan jQuery yang di sadur dari web aslinya, tetapi sekarang Blogger Tune-Up membuat sendiri script Preload Image with jQuery dengan tetap menggunakan plugin Lazyload Mika Tuupola. Hal ini karena beberapa teman blogger merasa sangat rumit sampai pusing-pusing dengan teknik tersebut, maka sekarang semua dibuat serba otomatis tanpa harus mengubah atau menghapus kode gambar yang kita upload. Kita hanya perlu menyisipkan kode pemanggilnya saja. Pasti penasaran? (Let's go for less write do more...)
Preload Gambar dengan jQuery (Update)

Memasang Plugin Lazyload dan Preload Image

Untuk Langkah 1 sampai dengan Langkah 5 silahkan ikuti petunjuk pada artikel sebelumnya disini.

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada Langkah 5:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.appelsiini.net/download/jquery.lazyload.mini.js' type='text/javascript'/>
<script src='URL/preloadimg_pack.js' type='text/javascript'/>
Langkah 7
Simpan template dan lanjutkan tutorial...

Modifikasi Kode Gambar pada Artikel Blogger

Langkah A
Buatlah artikel dan upload sebuah gambar
Langkah B
Pindahkah mode editor "Tulis" ke mode "Edit HTML"
Langkah C
Carilah kode gambar dari gambar yang baru saja kita upload, misal seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/s400/preload-image-jquery.png">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/s400/preload-image-jquery.png" border="0" alt="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>
Langkah D
Sisipkan kode dibawah ini pada (contoh) kode gambar diatas:
class="loadgambar"
Sehingga kode menjadi seperti dibawah ini (kode sisipan yang di blok):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/s400/preload-image-jquery.png">
<img class="loadgambar" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tCl5_NtV-JqLwRcbktGqHHuxuqcMRh0BJzNh4d0PEAKh0YLLh3tHNHrcj0mIBY5yISbahgnhF5YL0ihwCFR3wssjAIknB11bn3WTKGnAJBVPmuAhcL_Ka6Aw8M16nO98NUAYMr90pm3Y/s400/preload-image-jquery.png" border="0" alt="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>
Langkah E
Terbitkan dan preview artikel tersebut...
Keterangan:
  • Tapi tetap lebih efektif teknik sebelumnya, makanya bagi anda yang terbiasa dengan kode silahkan gunakan teknik sebelumnya.
Selamat mencoba dan semoga berhasil... Happy Blogging :)

Saturday, June 19, 2010

jQuery Auto Image Caption

Posted by dav On 10:02 AM
Bismillah... Artikel ini lebih bersifat update/penyempurnaan dari artikel sebelumnya dengan tampilan yang lebih bagus tentunya. Caption atau keterangan diambil dari attribute alt pada gambar itu sendiri yang menurut para pakar SEO attribute alt merupakan salah satu cara untuk meningkatkan SERP, sedangkan secara default Blogger hanya memberikan attribute-nya saja dengan nilai/value kosong. Selain itu Script jQuery Auto Image Caption akan memanipulasi attribute href dan style untuk dibuang dari attribute default-nya sehingga gambar tidak memiliki link dan tidak dipengaruhi oleh elemen standar bawaan Blogger. Hasil yang ditampilkan hanya sebuah gambar tanpa link dengan penambahan frame dan caption (keterangan) gambar sehingga tampilan menjadi lebih indah. (Hmm... cukuplah sebagai pembuka... Let's begin for play until lieur...!!!!)
jQuery Auto Image Caption

Integrasi jQuery Auto Image Caption 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 dibawah ini diatas kode pada langkah 3:
div.gambar {
margin:2px 1px 10px;
padding:5px;
text-align:center;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggl7Dfa_rMQbHvw5CivRY6O4SPdHEW7UjtdY8sY-cgoy_TOngQw_EZoge85y9n6TM-F5ZnlgpCMUTCUlVPach-mFr61o7GYviko3qdcIhdrr8MbBmXuZP2QeD6OF69TPktNoBdJCCLqSE/d/bg5.gif) repeat-y scroll left center #E7F7FB;
border:1px solid #7BC4DF;
display:inline-block;
}
div.gambar img {
display:block;
}
div.gambar span{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFSekNzzCdnuXbaykU6KU5dzZYOKhpszqjcHuWN7HB_SaiocDjQ5RwR6Ak7oDmRuBycDm5ixSbv_eVblaH7MtThyphenhyphenYR2TAKXcNLqoT0sl7_nSwZQY5uD1ptANgtsQA2tWBUA4nGwjrXd0/d/bg4.gif) repeat-x scroll 0 0 #56b0d2;
color:#fff;
margin:5px 0 0;
display:block;
padding:2px;
border:1px solid #2F94BA;
}
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='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script style='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".gambar").each(
function() {
$(this).wrap("<div></div>");
$(this).parent().attr("class", "gambar");
$(this).attr("class", "");
$(this).parent().append("<span>" + $(this).attr("alt") + "</span>");
$(this).removeAttr("style");
$(this).parents("a").removeAttr("href");
}
);
});
//]]>
</script>
Langkah 7
Simpan template dan lanjutkan tutorial...

Menyisipkan Kode jQuery Auto Image Caption pada Artikel

Langkah A
Buatlah sebuah artikel dan upload sebuah gambar pada artikel anda
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Cari kode gambar hasil upload kita, sebagai contoh kode gambar seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s1600/jQuery-Auto-Image-Caption.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s400/jQuery-Auto-Image-Caption.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5484533350455173970" /></a>
Langkah D
Sisipkan kode dibawah ini pada kode gambar:
class="gambar"
Isi attribut alt sesuai dengan keterangan dari gambar yang kita upload, seperti contoh dibawah ini:
alt="Keterangan Gambar"
Sehingga kode secara keseluruhan menjadi seperti dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s1600/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s400/jQuery-Auto-Image-Caption.jpg" border="0" alt="Keterangan Gambar"id="BLOGGER_PHOTO_ID_5484533350455173970" /></a>
Langkah E
Terbitkan artikel dan preview artikel yang baru saja kita buat...

Keterangan:
  • Jika anda pernah memasang loader framework jQuery maka kode pada langkah 6 baris 1 tidak perlu diikutsertakan. (Baca disini)
  • Ubahlah komposisi warna dari kode CSS sesuai dengan yang anda ingin atau disesuaikan dengan template. (Artikel CSS menyusul)
Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)

Friday, June 18, 2010

jQuery Accordion Recent Post with Thumbnail

Posted by dav On 9:10 AM
Bismillah... Teman blogger masih ingat dengan artikel "jQuery News Ticker Recent Post Plus Thumbnails" atau "Daftar Isi Efek jQuery Accordion"? Keduanya kemudian di ramu lagi menjadi jQuery Accordion Recent Post with Thumbnail atau kurang lebih berarti fasilitas yang digunakan untuk menampilkan artikel terbaru dengan gambar mini yang menggunakan efek accordion. Ini hanya sebuah alternatif pilihan untuk menampilkan artikel terbaru selain menggunakan jQuery News Ticker Recent Post Plus Thumbnails, selain itu bisa juga digunakan untuk menampilkan daftar artikel terbaru dari blog lain pada blog kita. Script yang digunakan masih berbasis JSON feed, framework jQuery dan efek Simple Accordion buatan Marco van Hylckama Vlieg. Mau mencoba?
jQuery Accordion Recent Post with Thumbnail

Memasang jQuery Accordion Recent Post with Thumbnail

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambahkan sebuah gadget baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian konten:
<style type="text/css">
#acrec-post{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggl7Dfa_rMQbHvw5CivRY6O4SPdHEW7UjtdY8sY-cgoy_TOngQw_EZoge85y9n6TM-F5ZnlgpCMUTCUlVPach-mFr61o7GYviko3qdcIhdrr8MbBmXuZP2QeD6OF69TPktNoBdJCCLqSE/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.acrecpost-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFSekNzzCdnuXbaykU6KU5dzZYOKhpszqjcHuWN7HB_SaiocDjQ5RwR6Ak7oDmRuBycDm5ixSbv_eVblaH7MtThyphenhyphenYR2TAKXcNLqoT0sl7_nSwZQY5uD1ptANgtsQA2tWBUA4nGwjrXd0/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em !important;
overflow:hidden;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #FFF;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.acrecpost-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2MzHv9qundsHW6DMs2kVB2k0cLH3kVrMbLi9SFjLE2TP_S-zngrFHDNuNEaTYRBU0CfGzmp5R8G8uXiMYNlq60XFGOZrgB9N4uF1zJCOoSGhBGiiO5X1V_bmIqocBIjLUqljICfJ7Sg/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
#acrecpost{
overflow:hidden;
line-height:1.3em;
margin:1px 3px !important;
padding:2px !important;
border:1px solid #339DC6;
background-color:#FFF;
}
#acrecpost li{
height:65px;
padding:5px;
list-style:none;
}
#acrecpost .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#acrecpost .news-text{
display:block;
text-align:justify;
padding:0 5px 0 70px;
}
#acrecpost a{
text-decoration:none !important;
color:#FF0000;
}
#acrecpost img{
float:left !important;
margin-right:5px !important;
padding:4px !important;
border:solid 1px #339DC6;
width:55px !important;
height:55px !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/accrecpost-pack.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>
<script src="http://modification-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>
Langkah 5
Simpan gagdet tanpa judul dan preview blog anda...
Keterangan:
  • Untuk kode CSS silahkan berekspresi sendiri, bagi yang belum paham dengan kode CSS (Cascading Style Sheet) Insya Allah dalam waktu dekat artikel bisa diterbitkan.
  • Hati-hati dengan script loader framework jQuery, jika kita sudah pernah memasangnya pada template maka kode dibawah ini tidak perlu disertakan (Langkah 4):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  • Ubah nilai 10 pada kode var numposts = 10; untuk mengatur jumlah artikel yang akan ditampilkan
  • Ubah nilai 200 pada kode var numchars = 200; untuk mengatur jumlah karakter yang akan ditampilkan pada penggalan artikel
  • Ubah URL blog sesuai dengan blog yang anda kehendaki (lihat yang diblok) dan jika kita ingin menampilkan artikel dari blog kita maka URL tersebut bisa saja dibuang, sehingga kode menjadi seperti dibawah ini:
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>
  • Jika kita ingin menampilkan artikel terbaru hanya dalam kategori/label tertentu tambahkan kode dibawah ini:
/-/label
  • sehingga kode menjadi seperti dibawah ini:
<script src="/feeds/posts/default/-/label?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>
Alhamdulillah... Selamat mencoba dan semoga berhasil... Happy blogging :)

Monday, June 14, 2010

Membuat jQuery Banner Rotator - Slideshow

Posted by dav On 4:21 AM
Bismillah. Masih ingat beberapa waktu yang lalu Blogger Tune-Up pernah membuat artikel yang sejenis, namun masih menggunakan kode JavaScript biasa belum melibatkan framework jQuery. Artikel tips-n-trik banner rotator sekarang ini lebih sederhana tetapi sangat bermanfaat untuk mengakali ruang kosong (space) yang sempit pada blog kita. Cocok sekali bagi anda yang mengikuti program-program affiliasi dari pihak ketiga atau hanya sekedar variasi untuk memperindah blog kita. Sebenarnya script kali ini bisa digunakan untuk menampilkan apapun didalam suatu wadah/container, bisa berupa gambar, iklan dan lain sebagainya. Plugin yang di gunakan adalah jQuery Innerfade buatan Torsten Baldes. Silahkan berekspresi sesuai keinginan anda... Let's begin for play...
Membuat jQuery Banner Rotator - Slideshow

Integrasi jQuery Banner Rotator - Slideshow

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:
#bannerrot {margin: 0; padding:0;}
#bannerrot ul, #bannerrot ol{list-style:none !important; margin:0 !important; padding:0 !important;}
ul#bannerimg li img{border: 1px solid #ccc;padding: 4px !important;margin: 0 !important;}
ul#bannerimg li a{text-decoration: none !important;}
#banner_2, #banner_3, #banner_4 {display:none;}
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 type='text/javascript' src='http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js'/>
<script type='text/javascript'>
$(document).ready(
function(){
$('ul#bannerimg').hide();
$('ul#bannerimg:first').show();
$('ul#bannerimg').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
}
);
</script>
Langkah 7
Simpan template (Baca keterangan)
Langkah 8
Masuk ke "Rancangan - Elemen Laman"
Langkah 9
Tambahkan sebuah gadget dengan type "HTML/JavaScript"
Langkah 10
Masukan kode HTML dibawah ini didalam "konten":
<div id="bannerrot">
<ul id="bannerimg">
<li id="banner_1"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
<li id="banner_2"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
<li id="banner_3"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
<li id="banner_4"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
</ul>
</div>
Langkah 11
Klik tombol "Simpan" (Baca keterangan)
Keterangan:
  • Jika template blogger anda sudah ada framework jQuery maka link pada langkah 6 baris 1 tidak perlu ditambahkan (dibuang).
  • Efek yang digunakan secara default menggunakan jenis fade, jika ingin menggunakan jenis efek slide maka tambahkan code "animationtype: 'slide'," (tanpa tanda kutip) diata kode "speed: 1000," (Langkah 6 baris 7).
  • Secara default lebar wadah/container sudah diset otomatis, kita hanya perlu mengeset tinggi wadah/container (Lihat langkah 6 baris 10) pada kode "containerheight: '220px'" (tanpa tanda kutip). Ubah nilai 220px sesuai dengan ukuran tinggi gambar yang akan kita gunakan.
  • Jumlah slide/banner yang akan kita gunakan sebenarnya tidak terbatas, tapi disini hanya menggunakan 4. Jika anda ingin menambahkan jumlah slide/banner silahkan tambahkan kode dibawah ini sejumlah yang kita perlukan (Lihat langkah 10):
<li><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
  • Ubah URL sesuai dengan link yang akan kita arahkan pada saat pengunjung mengklik gambar.
  • Ubah URL Gambar sesuai dengan tempat (file hosting) dimana kita menyimpan gambar tersebut.
  • Ubah Keterangan Gambar sesuai dengan judul atau maksud gambar tersebut.
Selamat mencoba dan semoga berhasil... Happy Blogging :)

Saturday, June 12, 2010

Daftar Isi Efek jQuery Accordion

Posted by dav On 11:07 AM
Bismillah. Alhamdulillah... Beberapa hari ini Blogger Tune-Up tidak membuat artikel atau pun tips-n-trik karena terkonsentrasi untuk membuat daftar isi dengan efek jQuery accordion (tapi bukan sedang berburu dan menikmati video porno mirip Abah Ariel Peterporn versus Mpo Luna atau versus Mpo Tari lho...). Bahan dasar dari pembuatan daftar isi ini masih menggunakan JSON Feed dengan diberikan sentuhan efek animasi accordion (slideup slidedown) dan efek animasi bergoyang dengan framework jQuery, sehingga menjadikan daftar isi versi ini layak untuk dicoba. Dipilihnya efek animasi accordion supaya daftar isi ini lebih ringkas dan tidak terlalu panjang serta artikel yang di susun berdasarkan Label/Kategori. Daftar isi yang ringkas, mudah dan rapi untuk blog anda yang ingin tampil lebih profesional.

Integrasi Daftar Isi dengan Efek jQuery Accordion 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:
#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggl7Dfa_rMQbHvw5CivRY6O4SPdHEW7UjtdY8sY-cgoy_TOngQw_EZoge85y9n6TM-F5ZnlgpCMUTCUlVPach-mFr61o7GYviko3qdcIhdrr8MbBmXuZP2QeD6OF69TPktNoBdJCCLqSE/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFSekNzzCdnuXbaykU6KU5dzZYOKhpszqjcHuWN7HB_SaiocDjQ5RwR6Ak7oDmRuBycDm5ixSbv_eVblaH7MtThyphenhyphenYR2TAKXcNLqoT0sl7_nSwZQY5uD1ptANgtsQA2tWBUA4nGwjrXd0/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2MzHv9qundsHW6DMs2kVB2k0cLH3kVrMbLi9SFjLE2TP_S-zngrFHDNuNEaTYRBU0CfGzmp5R8G8uXiMYNlq60XFGOZrgB9N4uF1zJCOoSGhBGiiO5X1V_bmIqocBIjLUqljICfJ7Sg/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
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='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini (Baca disini)
Langkah 7
Simpan template blogger...

Integrasi Daftar Isi dengan Efek jQuery Accordion pada Artikel

Langkah A
Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content)
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Masukan (copy paste) kode dibawah ini ke dalam artikel :
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/jquery.toc.acc.min.js"></script>
<script src="http://modification-blog.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Langkah D
Ubah URL blog pada langkah C (yang di blok) sesuai dengan URL Blog anda
Langkah E
Terbitkan artikel dan preview artikel tersebut...

Keterangan:
Untuk file dafis_accv1.js silahkan anda upload sendiri dari file source code yang disertakan kemudian ubah URL sesuai dengan URL file tersebut...

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

Sunday, June 6, 2010

Preload Gambar dengan jQuery

Posted by dav On 9:08 PM
Bismillah. Apakah blog anda termasuk boros gambar? Jika ya mungkin tips-n-trik kali ini bisa menjadi solusi untuk mempercepat load artikel yang dipenuhi gambar. Biasanya blog-blog tutorial desain grafis berisi screenshoot gambar suatu software yang banyak untuk memperjelas artikel. Banyaknya gambar pada suatu artikel akan membuat load halaman yang dimaksud menjadi berat. Preload gambar dengan jQuery digunakan untuk mempercepat load gambar-gambar tersebut dengan cara diwakili oleh suatu icon. Pada saat awal pembukaan halaman artikel maka gambar-gambar tersebut belum diload dari server dan ketika kita klik atau mouse melewati icon yang mewakilinya maka gambar akan diload dari server. Plugin yang akan digunakan untuk membuat preload gambar kali ini menggunakan Lazyload buatan Mika Tuupola.

Memasang Plugin Lazyload pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
#viewimg {
background-color:#EEE;
border: 1px solid #999;
padding: 5px;
margin: 5px 0;
text-align:center;
}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan kode JavaScript dibawah ini diatas kode pada langkah 5:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.appelsiini.net/download/jquery.lazyload.mini.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#viewimg img").lazyload({
placeholder : "http://lh5.ggpht.com/_xcD4JK_dIjU/TAql2pBIGqI/AAAAAAAAEJ8/_pK2fhsr5m0/d/viewimg.png",
event : "mouseover",
effect : "fadeIn",
container: $("#viewimg")
});
});
//]]>
</script>
Langkah 7
Simpan template anda dan lanjutkan ke tutorial berikutnya...

Modifikasi Kode Gambar pada Artikel Blogger

Langkah A
Silahkan buat suatu artikel dan masukan (upload) suatu gambar pada artikel anda
Langkah B
Pastikan editor artikel berada pada mode Edit HTML
Langkah C
Akan terlihat link gambar yang sudah kita upload seperti contoh dibawah ini:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEjl-EwKQtfGeixpIsRUcSI-12KN4uIAHFaaK5mca-BMzqLeSVQGhYehNbKfSqqDsY1xaqr67GMHtBg-B6PYz1E0J2WcE_OSoi_kmh1Vze7R1WGjeH2BSvriSr7_N2jdni1Zy09h_PTs/s1600/gambar.png">
<img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 184px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEjl-EwKQtfGeixpIsRUcSI-12KN4uIAHFaaK5mca-BMzqLeSVQGhYehNbKfSqqDsY1xaqr67GMHtBg-B6PYz1E0J2WcE_OSoi_kmh1Vze7R1WGjeH2BSvriSr7_N2jdni1Zy09h_PTs/s400/gambar.png" alt="" id="BLOGGER_PHOTO_ID_5477295327775305842" border="0" />
</a>
Perhatikan link yang diblok diatas itu adalah link sumber dari gambar tersebut, terserah kita akan menggunakan sumber gambar yang mana.
Link dibawah ini adalah link sumber gambar dengan ukuran sama dengan aslinya:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEjl-EwKQtfGeixpIsRUcSI-12KN4uIAHFaaK5mca-BMzqLeSVQGhYehNbKfSqqDsY1xaqr67GMHtBg-B6PYz1E0J2WcE_OSoi_kmh1Vze7R1WGjeH2BSvriSr7_N2jdni1Zy09h_PTs/s1600/gambar.png
Link dibawah ini adalah link sumber gambar dengan ukuran yang sudah diperkecil:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEjl-EwKQtfGeixpIsRUcSI-12KN4uIAHFaaK5mca-BMzqLeSVQGhYehNbKfSqqDsY1xaqr67GMHtBg-B6PYz1E0J2WcE_OSoi_kmh1Vze7R1WGjeH2BSvriSr7_N2jdni1Zy09h_PTs/s400/gambar.png
Jika diperhatikan maka kedua link sumber gambar tersebut sama saja hanya berbeda pada s1600 dan s400.
Langkah D
Link sumber gambar sudah kita peroleh, masukan kode preload gambar seperti dibawah ini:
<div id="viewimg"><img src="#" original="link sumber gambar"/></div>
Masukan link sumber gambar yang sudah kita peroleh (lihat langkah C) sehingga kode preload gambar menjadi seperti dibawah ini:
<div id="viewimg"><img src="#" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEjl-EwKQtfGeixpIsRUcSI-12KN4uIAHFaaK5mca-BMzqLeSVQGhYehNbKfSqqDsY1xaqr67GMHtBg-B6PYz1E0J2WcE_OSoi_kmh1Vze7R1WGjeH2BSvriSr7_N2jdni1Zy09h_PTs/s1600/gambar.png"/></div>
Langkah E
Terbitkan artikel dan preview artikel tersebut, kemudian arahkan mouse pada icon gambar yang mewakilinya...
Keterangan :
Perhatikan langkah 4!
  • Jika ternyata gambar terlalu besar dan tidak ditampilkan sempurna pada halaman artikel kita bisa menambahkan/menyisipkan kode srollbar "overflow:auto;" (tanpa tanda kutip) pada kode CSS tersebut.
  • Ubah warna background #EEE sesuai dengan keinginan anda
  • Ubah warna garis tepi #999 sesuai dengan keinginan anda (jika bingung gunakan HTML Color Code)

Perhatikan langkah 6!
Ubahlah link icon yang mewakili gambar sesuai dengan yang anda inginkan pada kode dibawah ini:
placeholder : "http://lh5.ggpht.com/_xcD4JK_dIjU/TAql2pBIGqI/AAAAAAAAEJ8/_pK2fhsr5m0/d/viewimg.png"
Gambar akan terbuka jika kita geser mouse melalui icon yang mewakilinya, jika ingin dengan metode klik untuk membuka gambar ubah kode dibawah ini:
event : "mouseover"
menjadi seperti dibawah ini:
event : "click"
Alhamdulillah. Selamat mencoba dan semoga berhasil... Happy Blogging :)

Wednesday, June 2, 2010

Menyisipkan Animasi Flash pada Blogger

Posted by dav On 1:50 PM
Bismillah. Banyak cara untuk menyisipkan animasi flash (.swf) pada artikel di blogger. Sebenarnya tips-n-trik ini pernah dibahas pada artikel sebelumnya yaitu "Tampilkan Animasi Flash Pada Posting di Blogger" tetapi pada artikel tersebut proses embedded (menyisipkan) masih menggunakan teknik manual yang membutuhkan banyak script untuk dituliskan. Sedangkan sekarang kita akan menggunakan plugin swf object yang dibuat oleh deconcept agar proses penyisipan file animasi flash (.swf) tidak serumit yang pernah dibahas.
Menyisipkan Animasi Flash pada Blogger

Langkah-langkah Menyisipkan Animasi Flash pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
#animasiflash {
border: solid 1px #000;
width: 500px;
height: 300px;
margin: 10px;
}
#versiflash {
border: solid 1px #000;
width: 490px;
margin: 5px 10px;
padding: 2px 5px;
background-color:#7bc4df;
color : #000;
}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan kode dibawah ini diatas kode pada langkah 5:
<script type='text/javascript' src='https://github.com/RonnyO/swfobject-compat/raw/master/swfobject1-5/swfobject.js'/>
<script type='text/javascript'>
// <![CDATA[
so.write("animasiflash");
var version = deconcept.SWFObjectUtil.getPlayerVersion();
if (document.getElementById && version["major"] > 0) {
document.getElementById('versiflash').innerHTML = "Flash Player versi "+ version['major'] +"."+ version['minor'] +"."+ version['rev'] +" terpasang.";
}
// ]]>
</script>
Langkah 7
Simpan template dan lanjutkan membaca ke langkah berikutnya...

Langkah-langkah Menyisipkan Animasi Flash (File .swf) pada Artikel Blog

Langkah A
Buatlah artikel pada kotak editor dan pada saat akan menyisipkan file animasi flash, pindahkanlah mode editor blog pada mode "Edit HTML"
Langkah B
Upload file animasi flash (.swf) anda pada hosting web anda dan copy link file tersebut, misal seperti dibawah ini:
http://hendriono.com/flash/engine-ignition.swf
Langkah C
Masukan kode dibawah ini pada editor artikel blog:
<div id="animasiflash">Upgrade Flash Player anda!!!</div>
<div id="versiflash">Anda belum memasang plugin Flash, atau browser anda tidak mendukung JavaScript (anda harus mengaktifkannya, mungkin?)</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("http://hendriono.com/flash/engine-ignition.swf", "Ignition System", "500", "300", "9", "#FFFFFF");
so.addVariable("flashVarText", "Ignition System pada mesin bensin untuk motor 4 langkah 4 silinder");
// ]]>
</script>
Langkah D
Terbitkan artikel anda dan preview artikel pada blog anda...
Keterangan:
Perhatikan Langkah C yang diblok !
  • Ubah link URL "http://hendriono.com/flash/engine-ignition.swf" sesuai link file yang anda upload pada hosting anda.
  • Ubah "Ignition System" sesuai dengan judull animasi anda (ini bebas saja karena berfungsi sebagai "title" atau judul animasi).
  • Ubah nilai "500" untuk menentukan lebar animasi flash yang akan ditampilkan dan nilai ini harus sama dengan nilai "500px" pada kode CSS (Lihat langkah 4).
  • Ubah nilai "300" untuk menentukan tinggi animasi flash yang akan ditampilkan dan nilai ini harus sama dengan nilai "300px" pada kode CSS (Lihat langkah 4).
  • Nilai "9" ini disesuaikan dengan kebutuhan versi Flash Player, jika anda animasi yang dibuat menggunakan Flash Player lebih tinggi dari 9 ubahlah sesuai kebutuhan, tapi jika file animasi flash yang digunakan dapat dimainkan dengan versi 9 biarkanlah kode ini tetap bernilai 9.
  • Ubah kode #FFFFFF untuk menentukan warna latar pada animasi flash (gunakan "HTML Color Code" jika anda masih bingung dengan kode warna).
  • Ubahlah "Ignition System pada mesin bensin untuk motor 4 langkah 4 silinder" sesuai dengan keterangan untuk animasi flash yang kita sisipkan pada artikel.
Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)

Tuesday, June 1, 2010

Bismillah. Bagaimana dengan artikel Membuat Kwicks Menu dengan jQuery - Bagian 1? Mudah-mudahan proses pembuatan gambar utama menu kwicks berjalan lancar. Sekarang mari kita lanjutkan ke penulisan kode CSS dan kode jQuery untuk memberikan efek lembut kwicks yang akan bergeser melebar jika mouse kita arahkan pada salah satu menu dan akan kembali memendek jika mouse kita keluarkan dari menu (hovering).
Membuat Kwicks Menu dengan jQuery

Membuat Kwicks Menu dengan jQuery pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S_mFiyi3n9I/AAAAAAAAEFw/H41i0UyLFXk/d/no_flicker.png);
}
Kode CSS diatas digunakan untuk membuang identasi pada menu dan menghilangkan kedip (flicker) pada menu.
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 100px;
height: 40px;
margin-right: 0px;
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S_mFikTPmmI/AAAAAAAAEFs/4qYurWp08Vs/d/main_menu_kwick.png);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}
Kode CSS diatas digunakan untuk menata ulang menu agar tersusun secara horizontal (float: left;), menentukan lebar masing-masing menu (width: 100px;), menentukan tinggi menu (height: 40px;) dan memanggil gambar menu kwicks (background-image) yang telah kita buat. Menu-menu didalam ".kwicks" diaktifkan dengan mode block.
#kwick1 {background-position:0px 0px;}
#kwick2 {background-position:-170px 0px;}
#kwick3 {background-position:-340px 0px;}
#kwick4 {background-position:-510px 0px;}
#kwick5 {background-position:-680px 0px;}
Kode CSS diatas digunakan untuk menata gambar menu kwicks yang telah kita buat, baca pada artikel sebelumnya untuk mengetahui hasil perhitungannya. Tanda minus (-) digunakan untuk menyembunyikan gambar menu kwicks sebesar yang kita tuliskan sesuai hasil perhitungan pada artikel sebelumnya. Misal "-170px 0px" jika dibaca maka menu yang ditampilkan dimulai dari pixel ke 170. Sedangkan 0px posisi gambar menu kwicks berada pada bagian atas, sedangkan bagian bawah gambar menu kwicks sebesar 40 pixel disembunyikan.
#kwick1 a{
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S_mFiYxnwwI/AAAAAAAAEFo/31_hgdRAoKs/d/end.png);
background-repeat:no-repeat;
background-position: left 0px;
}
Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwick sebelah kiri dengan posisi di sebelah kiri atas saat menu keadaan normal.
#kwick1 a:hover{background-position: left -80px;}
Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwick sebelah kiri dengan posisi di sebelah kiri dan pada pixel 80 saat menu keadaan dipilih (hover).
#kwick1.active, #kwick1:hover { background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{background-position: -170px bottom;}
#kwick3.active, #kwick3:hover {background-position: -340px bottom;}
#kwick4.active, #kwick4:hover {background-position: -510px bottom;}
#kwick5.active, #kwick5:hover {background-position: -680px bottom;}
Kode CSS diatas digunakan untuk menata gambar menu kwicks yang telah kita buat, baca pada artikel sebelumnya untuk mengetahui hasil perhitungannya. Tanda minus (-) digunakan untuk menyembunyikan gambar menu kwicks sebesar yang kita tuliskan sesuai hasil perhitungan pada artikel sebelumnya. Misal "-170px bottom" jika dibaca maka menu yang ditampilkan dimulai dari pixel ke 170. Sedangkan "bottom" posisi gambar menu kwicks berada pada bagian bawah, sedangkan bagian atas gambar menu kwicks sebesar 40 pixel disembunyikan.
#kwick5 a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S_mFiYxnwwI/AAAAAAAAEFo/31_hgdRAoKs/d/end.png);
background-repeat:no-repeat;
background-position: right -40px;
}
Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwicks sebelah kanan dengan posisi di sebelah kanan dan pada pixel 120 saat menu keadaan normal.
#kwick5 a:hover{background-position: right -120px;}
Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwicks sebelah kanan dengan posisi di sebelah kanan dan pada pixel 120 saat menu keadaan dipilih (hover).
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan 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 type='text/javascript' src='https://github.com/hendriono/Kwicks/raw/master/js/jquery.kwicks.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){
$('.kwicks').kwicks({
duration: 300,
max: 170,
spacing: 0
});
});
</script>
Langkah 7
Masukan kode dibawah ini pada bagian menu di template anda:
<ul class="kwicks">
<li id="kwick1"><a href="URL">Menu 1</a></li>
<li id="kwick2"><a href="URL">Menu 2</a></li>
<li id="kwick3"><a href="URL">Menu 3</a></li>
<li id="kwick4"><a href="URL">Menu 4</a></li>
<li id="kwick5"><a href="URL">Menu 5</a></li>
</ul>
Kode diatas digunakan untuk menampilkan menu kwikcs
Langkah 8
Simpan template dan preview... dan selamat membuat menu kwicks sesuai dengan keinginan anda...
Keterangan:
Kwicks menu ini sebenarnya bisa sesuaikan jumlahnya tergantung keinginan kita. Tetapi harus diperhatikan beberapa hal dibawah ini:
  • Atur ulang kode CSS (Langkah 4) sesuai dengan gambar menu kwicks yang sudah kita siapkan.
  • Atur ulang lebar masing-masing menu pada script jQuery "max: 170" (Langkah 6) ini harus sesuai dengan gambar menu kwicks dan kode CSS.
  • Atur ulang struktur kode XHTML (Langkah 7) sesuai dengan kebutuhan kita dan sesuai dengan gambar menu kwicks yang sudah kita siapkan.
  • Atur ulang pembuatan gambar menu kwicks (Tutorialnya pada Blog Design Graphics) dan ubahlah link-link image pada kode CSS diatas.
Dibawah ini kode link CSS yang perlu anda rubah sesuai dengan hosting file dan nama file yang telah anda buat:
  • http://lh6.ggpht.com/_xcD4JK_dIjU/S_mFiYxnwwI/AAAAAAAAEFo/31_hgdRAoKs/d/end.png
  • http://lh3.ggpht.com/_xcD4JK_dIjU/S_mFikTPmmI/AAAAAAAAEFs/4qYurWp08Vs/d/main_menu_kwick.png
  • http://lh4.ggpht.com/_xcD4JK_dIjU/S_mFiyi3n9I/AAAAAAAAEFw/H41i0UyLFXk/d/no_flicker.png
Alhamdulillah. Selamat mencoba dan semoga berhasil... Happy blogging :)