Memahami data:post.body dan JumpLink

Kali ini tidak membahas jQuery, tapi membahas beberapa pertanyaan tentang kode template blogger. Hal ini karena beberapa permintaan pembahasan yang dilayangkan melalui email oleh para teman-teman blogger. Pembahasan akan dimulai dari tengah supaya lebih mudah dipahami daripada dimulai dari kode awal atau kode akhir. Beberapa pertanyaan diantaranya; kenapa ya aku tidak menemukan kode tersebut? Sebenarnya bagaimana kode-kode blogger itu bekerja? Dimanakah kode untuk memanggil database artikel? dan lain sebagainya. 3 pertanyaan tadi mewakili beberapa pertanyaan yang paling banyak dipertanyakan. Mari kita bahas... Let's begin for play with (X)HTML Blogger Template Code...

Kode (X)HTML untuk Me-Load/Memanggil Database Artikel Blogger

Dibawah ini adalah kode (X)HTML Blogger yang digunakan untuk memanggil/me-load kumpulan artikel kita dari server database Blogger:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Kode diatas jika kita baca perbaris kurang lebih seperti dibawah ini:

<div class='post-body entry-content'>

Kode diatas digunakan untuk memanggil kode CSS yang digunakan untuk mengatur berbagai hal yang berhubungan dengan artikel, misal; warna dasar, warna huruf, lebar artikel, dan hal lain.

Karena pemanggilan menggunakan class, maka biasanya kode CSS yang dipanggil ditulis seperti dibawah ini:

.post-body { property:attribute; }
.entry-content { property:attribute; }

<data:post.body/>

Kode diatas digunakan untuk memanggil/me-load seluruh database artikel dari server blogger, jika kode ini hilang maka seluruh artikel tidak akan ditampilkan pada blog tapi tidak hilang dari server blogger, hanya tidak ada yang memanggilnya.

<div style='clear: both;'/> <!-- clear for photos floats -->

Kode diatas digunakan untuk mereset/mengembalikan seting tampilan yang telah dipengaruhi oleh kode lain.

</div>

Tag penutup

Kode (X)HTML untuk Memenggal Artikel (Read More)

Dibawah ini adalah kode (X)HTML Blogger yang digunakan untuk memenggal artikel jika kita membuka halaman muka:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Kode diatas jika kita baca perbaris kurang lebih seperti dibawah ini:

<b:if cond='data:post.hasJumpLink'>

Kode logika diatas digunakan untuk memeriksa kode jump break pada artikel. Jika dibaca kurang lebih menjadi, jika kondisinya bahwa artikel mengandung Jump Break maka...

<div class='jump-link'>

Kode diatas digunakan untuk memanggil kode CSS yang digunakan untuk mengatur tampilah Jump Link pada artikel.
Karena pemanggilan menggunakan class, maka biasanya kode CSS yang dipanggil ditulis seperti dibawah ini:

.jump-link { property:attribute; }

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>

Kode diatas digunakan untuk mengambil alamat url (link) dari setiap artikel blog

<data:post.jumpText/>

Memanggil nama tampilan pemenggalan artikel (misal; Read More)

</a>

Tag penutup anchor link

</div>

Tag penutup

</b:if>

Penutup logika

Selamat Belajar... happy Blogging :)

Read More

Percepat Script jQuery

jQuery merupakan framework JavaScript yang banyak digunakan dan sangat mengesankan, tetapi ada beberapa hal yang harus kita perhatikan dalam membuat kode-kodenya karena hal ini sangat mempengaruhi kecepatan pemanggilan/load jQuery. Kadang kita berharap dengan menggunakan framework jQuery membuat tampilan blog kita lebih indah dan profesional tapi justru membuat kecepatan loading halaman-halaman blog kita menjadi berat. Memang banyak faktor yang mempengaruhi kecepatan loading halaman blog kita, salah satunya adalah penulisan kode jQuery yang kurang tepat. Beberapa saat yang lalu Blogger Tune-Up pernah membahas tentang "Manajemen Script jQuery" dan "Memahami dan Mengatasi Konflik Script jQuery" dan berharap teman-teman blogger sudah memahaminya karena bahasan sekarang lebih mengarah ke penulisan script yang lebih spesifik.

1. Gunakan selector yang lebih spesifik

Jika kita menulisakan kode jQuery untuk mencari elemen tertentu, maka semakin banyak informasi yang diberikan akan semakin cepat proses penemuan elemen yang dimaksud. Disarankan menggunakan ID untuk mempercepat pencarian elemen dan hindari menggunakan class.

Teknik ini sama dengan proses pencarian alamat rumah, semakin lengkap alamat semakin cepat proses penemuan. Tetapi jika kita hanya memberikan sedikit informasi maka pencarian elemen akan dilakukan pada seluruh struktur DOM hingga ditemukan dan ini memperlambat proses load script, perhatikan contoh:

$(".item")

Penulisan kode dibawah ini akan lebih cepat dari kode diatas:

$("#item") // menggunakan ID bukan class
$("p.satu .item") // tentukan lokasi yang spesifik

2. Sederhanakan Beberapa Selektor (Multiple Selectors)

Jika kita akan menggunakan fungsi yang sama dengan elemen yang berbeda, maka dimungkinkan untuk menggabungkan beberapa selektor untuk mempercepatnya dan menghindari terulangnya pembacaan DOM yang sama atau tidak diperlukan.

// jelek
$("p#satu").hide();
$("p#dua").hide();
$("p#tiga").hide();

// baik
$("p#satu, p#dua, p#tiga").hide();

3. Gunakan Beberapa Properti (Properties) dan Nilai (Values)

Beberapa metode jQuery mampu menerima beberapa properti dan nilai bukan hanya sepasang properti dan nilai. Menuliskan beberapa properti sekaligus akan dapat membantu mempercepat performa jQuery dan mengurangi jumlah objek-objek jQuery yang kita tuliskan.

// jelek
$("img#artikel").attr('src', 'http://blogku.com/image.jpg');
$("img#artikel").attr('alt', 'Gambar Artikel');
$("img#artikel").attr('title', 'Tentang Blog');

// baik
$("img#artikel").attr({
'src': 'http://blogku.com/image.jpg',
'alt': 'Gambar Artikel',
'title': 'Tentang Blog'
});

4. Selalu Gunakan $(this)

Jika kita menggunakan selektor yang melintasi DOM dalam mencari elemen untuk melakukan fungsi tertentu dan elemen tersebut sudah tertuliskan sebelumnya maka kita dapat menuliskan fungsi tersebut dengan menggunakan $(this).

Kode dibawah ini akan melintasi DOM sebanyak dua kali hanya untuk mengambil elemen yang sama:

$("#item").each(function() {
$("#item").removeAttr('style');
});

Kode dibawah ini lebih efisien karena informasi elemen sudah tertuliskan sebelumnya dan kita hanya perlu memanggilnya dengan $(this):

$("#item").each(function() {
$(this).removeAttr('style');
});

5. Tambahkan Style dengan Class atau ID

Jika kita ingin menambahkan beberapa style untuk suatu elemen, lebih baik kita menggunakan CSS dalam menetapkan suatu style melalui class atau ID, dan kemudian kita cukup menambahkan class atau ID pada elemen tersebut.

Buatlah sebuah style:

<style type="text/css">
.sidebar {
background: #141414;
color: #fff;
padding: 5px 0px;
}
</style>

Hindari menggunakan metode dibawah ini:

$("p").css({
'background': '#141414',
'color': '#fff',
'padding': '5px 0px'
});

Lebih baik menggunakan metode dibawah ini:

$("p").addClass("sidebar");

6. Gunakan Pengikatan (Chaining)

Jika kita telah memilih suatu elemen, kita dapat mengikat perintah-perintah menggunakan .end() bukan melintaskan berkali-kali berbagai DOM untuk menemukan elemen yang sama. Untuk memahami pengikatan (chaining) mungkin diperlukan kesabaran dalam melakukan trial and error agar kita dapat menguasainya. Perintah-perintah tertentu mengharuskan kita menggunakan .end() dalam mengikat suatu elemen dan ada juga yang tidak mengharuskan. Untuk memahami pengikatan (chaining) Blogger Tune-Up akan membahas dalam artikel terpisah.

//jelek
$("div").fadeOut();
$("div p.satu").slideUp();
$("div p.dua").addClass('style');

//baik
$("div")
.fadeOut()
.find('p.satu')
.slideUp()
.end()
.find('p.dua')
.addClass('style');

Itulah beberapa hal yang bisa kita gunakan untuk menuliskan kode jQuery agar lebih efisien. Banyak sekali sumber yang bisa kita pelajari untuk dapat membantu kita dalam membuat script jQuery yang efektif dan efisien. Happy blogging... :)

Read More

Memasang Efek jQuery Image Zoom Versi 2.0

Bismillah... Lama Blogger Tune-Up berdiam dalam hiruk pikuk nge-blog. Mohon ma'af yang sebesar-besarnya pada teman-teman blogger, tidak bermaksud untuk tidak menghormati tapi karena ada satu dan lain hal, maka Blogger Tune-Up harus rehat dulu beberapa hari untuk tidak menulis artikel. Tapi Insya Allah mulai hari ini Blogger Tune-Up akan aktif kembali menulis artikel.

Artikel kali ini masih berkutat dengan framework jQuery, sekarang kita akan memanfaatkan plugin jQuery yang dibuat oleh Andreas Lagerkvist^[1]. Plugin ini berfungsi untuk memberikan efek pada gambar dalam artikel blog kita. Hasilnya memang hampir sama dengan beberapa efek gambar yang pernah dibahas sebelumnya, misal efek facebox. Ketika pembaca blog melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.

Demo jQuery Image Zoom

Integrasi Plugin jQuery Image Zoom 2.0

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

]]></b:skin>

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

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode JavaScript 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://andreaslagerkvist.com/aFramework/Modules/Base/jquery.imageZoom.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

Langkah 7
Simpan template, preview blog anda dan klik salah satu gambar pada artikel blog anda...

Source Code jQuery Image Zoom

Catatan Kaki :

• Special thanks to Andreas Lagerkvist for jQuery Image Zoom Plugin
• Jika template blog anda pernah dipasang framework jQuery maka langkah 6 baris ke 1 tidak perlu diikutsertakan

Read More

Menciptakan Bayangan Gambar (Image Reflexion)

Bismillah. Ketika suatu objek benda ditempatkan diatas sebuah permukaan yang rata dan mengkilap (misal kaca) maka akan terbentuk bayangan yang hampir sama dengan objek tersebut di atas kaca. Bayangan yang terbentuk diatas kaca semakin jauh jaraknya dengan objek maka akan semakin kabur (tidak jelas). Sekarang kita akan menggunakan plugin reflex untuk menciptakan efek bayangan pada gambar-gambar artikel blog kita, sehingga tampilannya semakin menarik. Menurut sang pembuat efek plugin reflex^[1] ini, beliau terinspirasi dari tampilan desktop Mac OS. Efek bayangan ini mengingatkan pada salah satu kemampuan software Adobe Photoshop (perspective) dan kemampuan software 3D Studio MAX (raytrace). Mari kita coba menerapkan efek reflex ini pada blogger.

Demo Image Reflexion

Integrasi Plugin Reflex pada template Blogger

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

</head>

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

<script src='http://hensblog.googlecode.com/files/reflex.pack.js' type='text/javascript'/>

Langkah 5
Simpan template dan lanjutkan ke langkah berikutnya

Menyisipkan kode reflex pada gambar artikel

Langkah A
Buatlah sebuah artikel dan upload suatu gambar
Langkah B

Pindahkan mode editor artikel ke mode Edit HTML. Cari kode gambar, seperti contoh 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="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

Langkah C
Sisipkan kode dibawah ini untuk memberikan efek reflex:

class="reflex"

Sehingga kode menjadi seperti contoh 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="reflex" 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="jQuery Auto Image Caption"id="BLOGGER_PHOTO_ID_5484533350455173970" />
</a>

(Settingan lebih lengkap baca keterangan)
Langkah D
Terbitkan artikel

Keterangan:
Perhatikan langkah C! Setting-an lebih lengkap selain kode tersebut adalah seperti contoh dibawah ini:

class="reflex iheight50 idistance5 itiltleft iopacity50 iborder3 icolorFFF000"

Fungsi masing-masing kode sebagai berikut:

• reflex : class adalah fungsi dasar untuk membuat efek bayangan, tanpa setting-an lebih lanjut pun efek bayangan sudah terbentuk.
• idistance : class ini digunakan untuk membentuk jarak (celah) antara objek dengan bayangan, secara default=0 minimal=0 maksimal=100 dalam satuan pixel.
• iheight : class ini digunakan untuk mengatur tinggi objek pada sisi yang mengecil, secara default=33 minimal-10 maksimal=100 dalam satuan persen.
• iopacity : class ini digunakan untuk mengatur tingkat transparansi bayangan, secara default=33 minimal=0 maksimal=100 dalam satuan persen. Semakin besar nilainya maka bayangan semakin jelas.
• iborder : class ini digunakan untuk memberikan garis pinggir pada gambar, secara default=0 minimal=0 maksimal=100 dalam satuan pixel.
• icolor : class ini digunakan untuk mengatur warna garis pinggir, secara default=f0f4ff minimal=000000 maksimal=ffffff. Gunakan color picker untuk menemukan warna yang cocok.
• itilt : class ini digunakan untuk menciptakan efek 3 dimensi (Z-Tilt), secara default=right-none-left (jika ada 3 buah objek maka objek akan disusun dari kanan tengah kiri). Kita bisa menentukan jenis 3D-Tilt; "itiltright" atau "itiltnone" atau "itiltleft".

Unduh Source Code Image Reflexion

Special thanks to:
1. Christian Effenberger for Plugin Reflex
2. Image Reflexion = Image Reflection
Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More