Blogger Tune-Up

Blok Ads Block dengan jQuery

noreply@blogger.com (Hendriono Dede) — Thu, 23 May 2013 00:10:00 +0000

Bismillah. Alhamdulillah. Lama sudah blog ini tidak diisi dengan artikel baru, dan hari ini mudah-mudahan bisa konsisten untuk menulis artikel tip trik baru seputar dunia blog dan jQuery. Tanpa basa basi dan panjang lebar mengenai kevakuman penulis dalam menulis artikel diblog ini, kita langsung saja ke materi sesuai dengan judul artikel diatas. Sebenarnya, artikel ini merupakan versi lain dari jQuery Anti Ads Block yang pernah ditulis sebelumnya. Script yang digunakan pada artikel kali ini merupakan asli buatan Martin Angelov, dan penulis hanya melakukan perubahan kecil sebagai adaptasi dan sebagai penyempurnaan saja pada beberapa baris script yang ada dialamnya. jQuery Block Ads Block kali ini sangat sederhana dalam penggunaannya pada blog, berbeda dengan versi sebelumnya yang termasuk agak sulit untuk diterapkan, bahkan beberapa pengelola blog yang tidak hati-hati justru mengalami kegagalan 100% tanpa discount.

Blok Ads Block dengan jQuery

Deskripsi

jQuery Block Ads Block Plugin sebenarnya bernama jQuery blockBlock Plugin, dengan menggunakan script utama dari jQuery Confirm Plugin yang pernah dibahas diartikel pendahulunya. Hanya kemudian ditambahkan beberapa script untuk memancing tingkat laku perangkat lunak pemblok iklan yang biasanya lebih mengandalkan kata kunci tertentu untuk memblok atau menonaktifkan iklan pada suatu halaman situs. Kita tahu bahwa iklan yang ada dihalam situs merupakan pembiayaan tidak langsung atas keberadaan suatu situs walau kadang ada pengelola yang terlalu overdosis dalam menempatkan iklan. Iklan dapat digunakan sebagai pendapatan atau income bagi sang pengelola blog, namun sayang banyak sekali pengunjung yang justru tidak menginginkan tampilan dari iklan tersebut, entah itu karena terasa tergantung atau memang tidak suka jika ada blog yang mampu meraih untung cukup besar dari pendapatan iklan. Terlepas dari tingkah laku pengunjung yang suka menonaktifkan iklan, pengelola blog pun punya cara untuk memaksa pengunjung agar menonaktifkan perangkat lunak pemblok iklan dan atau memasukan situs kita kedalam daftar putih di perangkat ads block yang dimiliki pengunjung. Nah, disini jQuery blockBlock memanfaatkan kekuatan yang sekaligus sebagai titik kelemahan perangkat lunak Ads Block menjadi jalan untuk memaksa pengunjung mematikan fungsi ads block, yaitu dengan memancingnya menggunakan fake advertisement. Fake Advertisement atau iklan palsu ini sebenarnya tidak berisi iklan tapi justru berisi pemicu agar halaman yang sedang dilihat atau dibaca oleh pengunjung yang mengaktifkan Ads Block ditutup dengan sebuah layar yang berisi peringatan atau informasi bagi pengunjung, sehingga mau tidak mau pengunjung dipaksa untuk mematikan fungsi Ads Block-nya.

Skenario Penggunaan

Dalam penerapannya kedalam blog, tidaklah terlalu rumit. Silahkan unduh dulu file yang tersedia pada link unduhan diatas dan perhatikan langkah penerapan pada template blog seperti dibawah ini:

Sisipkan framework jQuery dibawah ini:

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

Jika sebelumnya blog anda pernah disisipkan framework jQuery maka script diatas tidak perlu lagi dimasukkan.
Sisipkan script utama jQuery Block Ads Block seperti dibawah ini:

<link rel='stylesheet' type='text/css' href='URL_ANDA/jquery.adsBlock.css' />
<script src='URL_ANDA/jquery.adsBlock.js'></script>
<script src='URL_ANDA/advertisement.js'></script>

Keterangan:

Silahkan ganti URL_ANDA sesuai dengan alamat hosting file tempat anda menyimpan file tersebut. File-file diatas bisa anda dapatkan pada unduhan yang terdapat pada link unduhan diatas atau dibawah.
Jika diperhatikan script diatas, ada satu script yang disebut dengan Fake Advertisement atau Iklan Palsu yaitu advertisement.js. Script ini akan dideteksi oleh perangkat lunak pemblok iklan (Misal; Ads Block Plus), ketika perangkat lunak ads block memblok advertisement.js maka script tidak mampu diload atau dipanggil, dan jika advertisement.js tidak bisa diload maka jQuery akan terpicu untuk mengaktifkan layar penutup halaman yang berisi himbauan atau peringatan.
Untuk kode CSS (jquery.adsBlock.css), anda bisa menyisipkannya secara langsung didalam template, dan atau silahkan modifikasi untuk membuat tampilan yang sesuai dengan keinginan anda.

Script Loader - Modifikasi Isi Himbauan/Peringatan

Script dibawah ini harus diletakan pada template blog anda, dan silahkan modifikasi kalimat himbauan/peringatannya sesuai dengan keinginan anda.

$(function () {
  if ($.adblock) {
    $.confirm({
      'title': 'You Are Using AdBlock or some other advert blocking software!',
      'message': 'modification-blog.blogspot.com relies on advertising for revenue. Any small support from you would help us a lot to making this site lives longer and works better.
         Please add modification-blog.blogspot.com to your ad blocking whitelist or disable ad blocking or use another browser without any adblocker when you visit modification-blog.blogspot.com
         Thanks & Enjoy',
      'buttons': {
        'Yes, I Agree': {
          'class': 'flat',
          'action': function () {
            // window.location = 'http://google.com/';
            // window.open('http://google.com/','_blank');
            window.location.reload(true);
          }
        }
      }
    });
  }
});

Keterangan:
Perhatikan penjelasan dibawah ini jika anda ingin memodifikasi kalimat yang akan ditampilkan pada layar peringatan atau himbauan

'title': 'You Are Using AdBlock or some other advert blocking software!',

title merupakan judul dari himbauan atau peringatan. Silahkan sesuaikan dengan kebutuhan.

'message': 'modification-blog.blogspot.com relies on advertising... dst

message adalan isi pesan sebagai himbauan atau peringatan kepada pengunjung. Silahkan sesuaikan dengan kebutuhan.

'Yes, I Agree': {

Merupakan nama atau keterangan tombol. Silahkan sesuaikan dengan kebutuhan.
Pilih salah satu fungsi dibawah ini:

window.location = 'http://google.com/';

Ketika pengunjung mengklik tombbol maka akan diarahkan kehalam yang ditentukan, namun halaman blog akan digantikan dengan halaman yang dituju

window.open('http://google.com/','_blank');

Sama dengan yang diatas hanya saja halaman blog tetap ditampilkan dengan keadaan terbuka tanpa layar penutup, dan halaman yang dituju akan dibuka pada jendela baru

window.location.reload(true);

Halaman yang sedang dibuka akan direload, dan layar penutup akan hilang jika perengkat lunak pemblok iklan dimatikan, namun jika masih diaktifkan maka layar penutup akan tetap menutupi halaman.

Blok Ads Block dengan jQuery

Kesimpulan

Plugin jQuery ini tetap tidak akan mampu bekerja secara sempurna, karena masih banyak celah untuk mematikan fungsi ini, namun pengunjung akan menghabiskan cukup banyak waktu (bagi pemula) jika ingin mematikan fungsi layar penutup halaman ini. Semua kembali kepada pengelola blog, apakah akan menggunakan jQuery Block Ads Block atau halaman terbuka tanpa ada peringatan atau himbauan. Selamat mencoba, semoga berhasil, dan happy blogging :)

Verifikasi Blog ke Akun Pinterest

noreply@blogger.com (Hendriono Dede) — Fri, 16 Nov 2012 21:51:00 +0000

Bismillah. Alhamdulillah. Pada tanggal 24 Oktober 2012, pihak Pinterest mengumumkan penambahan fasilitas terbarunya yaitu verifikasi website yang ditulis pada halaman support.pinterest.com. Jika diterjemahkan secara bebas pengumuman itu berbunyi "Akun dengan situs terverifikasi berarti telah mengkonfirmasi kepemilikan situs web mereka menggunakan proses verifikasi otomatis yang kami sediakan. Situs terverifikasi menetapkan hubungan antara situs web dengan akun di Pinterest. Akun dengan situs terverifikasi ditandai dengan tanda centang yang ditampilkan disamping alamat situs web di halaman profil mereka dan di bawah nama mereka dalam hasil pencarian."

Kesulitan Verfikasi Pengguna Blogger

Bagi para pengguna hosting berbayar, proses verifikasi blog atau situs ke akun Pinterest tidaklah terlalu sulit. Namun bagi para pengguna blog gratisan terutama pengguna Blogger (a.k.a Blog*spot) hal ini cukuplah rumit. Karena ada beberapa kesulitan dan persyaratan untuk melakukan verifikasi blog ke akun Pinterest, diantaranya:

Pinterest tidak menyediakan teknik verifikasi melalui meta tag tetapi menggunakan file tersendiri yang disediakan pihak Pinterest.
File verfikasi harus diupload pada root dan bukan pada subfolder (subdirectory) di halaman blog atau situs yang anda kelola.
Link atau URL halaman verifikasi dari pihak Pinterest yang telah diupload pada blog harus dapat diakses dengan lokasi seperti ini "http://www.contoh.com/pinterest-45776.html" dan tidak boleh dalam lokasi lain, misal "http://www.contoh.com/p/pinterest-45776.html" atau "http://www.contoh.com/blog/pinterest-45776.html"

Namun bukan berarti tidak ada jalan untuk melakukan proses verifikasi blog ke akun Pinterest, seperti pepatah "Banyak jalan menuju ke Roma". Sedankan bagi para pengguna hosting berbayar, silahkan mengikuti petunjuk yang telah disediakan pihak Pinterest pada artikel mereka berjudul "How do I verify my website?".

Verifikasi Pinterest untuk Pengguna Blogger

Kenapa pihak Pinterest menggunakan satu metode saja dalam melakukan verifikasi blog? Dan kenapa tidak menggunakan metode sisipan Meta Tag seperti halnya pihak-pihak lain? Entahlah, itu semua kebijakan mereka. Kita hanya pengguna yang cukup senang dengan layanan gratis Pinterest. Bagi para pengguna blog gratisan terutama pengguna Blogger, silahkan ikuti langkah dibawah ini dalam melakukan proses verifikasi blog ke akun Pinterest.

Langkah 1
Login ke Pinterest
Langkah 2
Masuk ke menu Setting Profile

Langkah 3

Scroll halaman sampai ditemukan lokasi Website. Isi dengan alamat blog anda, kemudian klik tombol "Verify Website"

Langkah 4

Sebuah halaman proses verifikasi terbuka, kemudian cari link pada bagian "Can I verify?" kemudian klik link pada kalimat "click here for instructions"

Langkah 5

Sebuah informasi langkah verfikasi terbuka, yang terdiri dari 3 langkah. Klik link "Download the HTML verification file" kemudian simpan file tersebut pada komputer anda

Langkah 6
Buka file hasil unduhan (misal; pinterest-45776.html) menggunakan native text editor (misal; notepad)
Langkah 7
Login ke Blogger
Langkah 8
Masuk ke dasbor blog dan pilih menu "Laman"
Langkah 9
Klik menu "Laman Baru" dan klik "Laman kosong" untuk membuat sebuah halaman baru pada blog

Langkah 10

Teks Editor Blogger terbuka. Isi judul halaman sesuai dengan nama file hasil unduhan dari Pinterest (misal; pinterest-45776). Hati-hati! Jangan disertakan ekstensi file-nya, misal; jangan diberi judul "pinterest-45776.html", cukup "pinterest-45776". (Nama file berbeda-beda sesuai dengan pemberian dari pihak Pinterest)

Langkah 11

Pindahkah mode teks editor blog ke mode HTML, jangan di mode Compose. Copy file unduhan yang telah dibuka menggunakan notepad tadi, dan paste pada isi halaman di teks editor blog.

Langkah 12
Klik tombol "Publikasikan"
Langkah 13
Buka blog anda pada tab baru dan pastikan halaman yang baru saja diterbitkan tersedia. misal;

http://contoh.blogspot.com/p/pinterest-45776.html

Langkah 14

Jika halaman yang baru saja diterbitkan sudah tersedia, kembali ke dasbor blog. Pilih menu "Setelan" dan pilih submenu "Preferensi penelusuran"

Langkah 15
Masuk ke bagian "Kesalahan dan Pengalihan" kemudian klik link "Edit" pada bagian "Pengalihan Khusus"

Langkah 16
Tambahkah link pengalihan. Misal:

Dari: /pinterest-45776.html

Kepada: /p/pinterest-45776.html

Proses pengalihan ini ditujukan agar Pinterest tidak menuju kehalaman yang salah. Jika halaman tidak dialihkan, maka Pinterest akan menampilkan "error 404" yang berarti halaman tidak ditemukan.

Langkah 17
Klik link "Simpan" dan klik tombol "Simpan perubahan"
Langkah 18
Buka halaman baru pada blog anda dengan menuliskan alamat URL sesuai dengan pengalihan, misal;

http://contoh.blogspot.com/pinterest-45776.html

Maka halaman harus dialihkan menuju ke:

http://contoh.blogspot.com/p/pinterest-45776.html

Langkah 19

Jika halaman verifikasi tersebut sudah terbuka pada blog anda, scroll halaman hingga ditemukan tombol merah "Go To Pinterest" dan kemudian klik tombol tersebut

Langkah 20

Halaman verifikasi seperti sebelumnya akan terbuka kembali, kemudian klik link "Click here to complete the process"

Langkah 21

Tunggu sebentar karena Pinterest sedang melakukan proses verifikasi pada blog kita. Jika proses verifikasi berhasil maka akan muncul keterangan "We successfully verified your website!". Hal ini berarti proses verifikasi blogger pada ke akun Pinterest berhasil.

Langkah 22

Klik link "Go to your profile" untuk memastikan bahwa tanda centang (checklist) telah tampil disamping URL blog pada halaman profile Pinterest anda.

Langkah 23

Pastikan lagi bahwa tanda cheklist tampil disamping URL blog anda dibawah photo profile dengan melakukan pencarian dengan kata kunci nama anda pada halaman Pinterest

Langkah 24

Jika tampil berarti anda telah berhasil. Waktunya untuk ngopi sinambi leyeh-leyeh ngrungokno ladrang jowo...

Kesimpulan

Proses verifikasi blog ke akun Pinterest telah berhasil dan mudah-mudahan berhasil. Jika sudah berhasil waktunya kita memikirkan "Untuk apa proses verifikasi ini? Apakah berpengaruh terhadap posisi blog kita dimata mesin pencari?" Entahlah... Kita hanya menikmati dan menjalani proses sebagai seorang penulis dan pengelola blog, mengenai manfaat jelas ada namun mungkin belum kita rasakan...

Selamat mencoba dan semoga berhasil. Happy blogging :)

Pengantar LESS - Dynamic Preprocessor Stylesheet

noreply@blogger.com (Hendriono Dede) — Tue, 16 Oct 2012 05:53:00 +0000

Bismillah. Alhamdulillah. Cukup lumayan lama pernulis bermain-main dengan kosakata dalam bahasa CSS sehingga memunculkan berbagai keinginan, baik keinginan dalam mengikuti perkembangan bahasa CSS untuk mengenalinya lebih jauh, maupun keinginan cara penulisan kosakata CSS yang lebih mudah dan cepat. Kemudian penulis melakukan penelusuran untuk mencari alat atau perangkat lunak yang bisa digunakan dalam menulis kosakata bahasa CSS dengan lebih cepat dari pada cara primitif, awal pencarian ditemukanlah bahasa SASS (Syntactically Awesome Stylesheets) yang merupakan cikal bakal dari pengembangan bahasa-bahasa Preprocessor Dynamic Stylesheet, namun SASS ternyata kurang bersahabat bagi mereka-mereka yang belum terbiasa dengan Ruby atau Compass. SASS dikembangkan oleh Hampton Catlin yang terinspirasi dari bahasa Haml (HTML abstraction markup language) yang juga dikembangkan oleh pengembang SASS. Penelusuran dilanjutkan dan bertemulah dengan LESS yang dibuat dan dikembangkan oleh Alexis Sellier atau lebih dikenal dengan cloudhead. Ternyata selain LESS ada juga bahasa Preprocessor CSS lainnya yaitu Stylus.

Unduh Contoh Penggunaan LESS

Apa Preprocessor LESS?

LESS sebenarnya merupakan salah satu pengembangan bahasa CSS, namun bukan pada sisi penambahan fungsi, property maupun value, LESS lebih ke kemudahan dan kecepatan penulisan bahasa CSS yang telah ada. Boleh dikatakan, bahwa LESS hanyalah sebuah cara penulisan CSS pra pengolahan (seperti halnya bahasa side server; php, asp) yang digunakan sebagai jembatan antara CSS dengan browser. Awalnya penulis beranggapan bahwa LESS merupakan saingan bahasa CSS, namun ternyata anggapan tersebut keliru. Kemudian anggapan ini berubah menjadi, bahwa LESS merupakan bahasa penyempurnaan dari beberapa kelemahan bahasa CSS, dan jelas itu juga keliru. Lalu apa LESS?

LESS adalah preprocessor (pra pengolahan) yang merupakan cara lain dalam menuliskan kosakata CSS, penulisan menggunakan bahasa preproccesed (pra olah/mentah) dan kemudian dikonversi (compile) ke dalam bahasa CSS murni baik dengan cara dikonversi langsung kedalam bahasa CSS murni maupun tanpa dikonversi dengan menambahkan mesin side server LESS agar browser mampu mengkonversinya. Jika kita biasanya menulis bahasa CSS secara manual, LESS selangkah lebih maju dan lebih modern dari cara penulisan kosakata bahasa CSS yang primitif. Namun bukan berarti LESS merupakan tool layaknya teks editor, justru LESS dapat dituliskan pada hampir semua teks editor murni (Native Text Editor). LESS merupakan tata cara atau aturan penulisan cepat kosakata bahasa CSS dan kemudian dikonversi serta disusun ulang menjadi bahasa CSS murni sesuai dengan aturan baku bahasa CSS yang bisa dirender oleh browser. LESS lebih fleksibel dan dinamis, karena kita bisa menggunakan bahasa sendiri dalam penulisannya sebagai variabel, interpolasi, nesting, mixin, operasi dan fungsi, namun demikian property dan value harus tetap sesuai aturan bahasa CSS. (Masih bingung?)

Kenapa Menggunakan Preprocessor CSS?

Karena ini bukan CSS, maka tidak terikat dengan aturan baku dan keterbatasan CSS. LESS membuat cara menulis CSS menjadi sangat mudah dan sederhana. CSS sebenarnya sudah bagus dan hebat, tetapi CSS tidak memberikan kita kebebasan berekspresi dalam penulisannya. Misal, banyak para developer dan desainer menginginkan abstraksi lebih bebas dari pada CSS default. Salah satu tujuan dari CSS adalah untuk memberikan kemudahan dan kesederhanaan sehingga siapapun dapat dengan cepat menangkap bahasa yang digunakan dan mempelajarinya. Namun fokus tersebut justru membatasi apa yang lebih dapat dilakukan pengembang CSS, dan pada umumnya kita tidak menyukai keterbatasan. Kita membutuhkan variabel yang lebih luas, dan jika CSS tidak mampu memberikan variabel tersebut, kita akan mencari cara untuk membuat varibel yang lebih mendekati kebutuhan kita. Preprocessor menawarkan lebih dari sekedar variabel yang tersedia, sehingga kita bisa bebas berkarya selama file CSS yang dihasilkan tetap sebagai karya CSS biasa. Anda tidak harus menggunakan preprocessor dalam menuliskan CSS, namun suatu hari akan banyak orang yang kemudian belajar menggunakannya sehingga menjadi terbiasa dengan preprocessor karena mereka menemukan kemudahan dan kesederhanaan dalam menulis CSS dari pada tanpa preprocessor. Dan banyak yang kemudian enggan untuk kembali menulis CSS dengan cara biasa lagi. (Masih bingung?)

Kemungkinan Masalah Preprocessor CSS

Pada artikelnya yang berjudul "January’s 12412: Researching LESS & SASS", Amber Weinberg mengangkat tema mengenai kemungkinan masalah yang muncul dalam penggunaan preprocessor. Dari beberapa komentar yang ditinggalkan sepertinya telah banyak pengguna LESS yang telah jatuh hati dan merasa lebih nyaman menggunakan bahasa preprocessor. Namun kemungkinan masalah penggunaan preprocessor CSS memang perlu untuk diangkat sebagai sebuah perbandingan sebelum anda mengambil kesimpulan untuk menggunakannya.

Masalah yang mungkin timbul dari penggunaan preprocessor CSS menurut Amber antara lain:

Apa yang terjadi jika pengembang lain perlu mengedit CSS dan tidak tahu atau menyadari penggunaan preprocessor pada situ yang dikelolanya?
Ketika menulis CSS dalam sebuah tim, bagaimana Anda mengontrol struktur dan pengorganisasian dari kode?
Apa yang terjadi jika JavaScript dinon-aktifkan?

Isu dari masalah diatas adalah kesulitan mengkomunikasikan antara satu pengembang dengan pengembang lain terutama bagi mereka yang bekerja dalam sebuah tim. Ketika anda menggunakan bahasa fleksibel sesuai keinginan anda sendiri, belum tentu anggota tim lain akan mampu memahaminya dengan cepat, justru hal ini akan menjadi kendala ketika pekerjaan kita merupakan pesanan klien. Sedangkan klien yang membeli karya kita mempekerjakan orang lain dalam pemeliharaannya. Namun, masalah ini hanya muncul apabila kita menggunakan metode side server (menggunakan file JavaScript LESS sebagai compiler) dalam mengkonversi LESS. Toh, ini tidak akan menjadi kendala apabila LESS dikonversi terlebih dahulu secara lokal (pada komputer kita) menjadi file CSS biasa dan baru kita menyerahkan file CSS biasa tersebut kepada klien atau anggota tim lain. Dan atau untuk menghindari kesulitan komunikasi antara anggota tim, dibuat kesepakatan bersama mengenai penggunaan bahasa LESS dalam kerja tim kita. Namun, isu masalah ini akan tetap menjadi kendala ketika kita harus merubah suatu kebiasaan dan ketika anggota tim lain tidak bersedia untuk beralih menggunakan preprocessor LESS.

Jadi, semua ini kembali pada diri kita sendiri. Tetap menuliskan CSS seperti biasa, atau mulai menggunakan preprocessor LESS agar lebih cepat dan sederhana dalam penulisannya?

Compiler Preprocessor LESS

Sebagai permulaan untuk memahami LESS, kita akan belajar menuliskan LESS dan mengkonversinya menjadi file CSS biasa secara lokal saja. Jika anda menelusuri situs resmi LESS, maka akan ditemukan dua metode konversi file LESS, yaitu:

Penggunaan Client-Side; Dengan memasang file less.js pada dokumen HTML. Less.js digunakan sebagai compiler agar browser mampu membaca file LESS, kemudian Less.js akan melakukan permintaan fungsi Ajax untuk memanggil file LESS anda. Hal ini sangat tidak efisien dalam hal kinerja dan harus dihindari dalam penggunaan hasil produksi. Apalagi jika JavaScript dinon-aktifkan, maka halaman anda akan hancur berantakan. Tetapi jika anda ingin menggunakan sebagai prototype dengan menggunakan LESS dengan cepat, hal ini syah-syah saja.
Penggunaan Server-Side; dengan cara meng-install NPM (Node Package Manager) atau Ruby pada komputer sebagai compiler. Namun jika anda tidak terbiasa dengan penggunaan perintah command-line, maka hindari juga menggunakan cara ini. Walaupun sebernarnya cara ini sangat efisien bagi yang terbiasa dengan perintah command-line.
Aplikasi GUI Compiler LESS; Selain dengan dua metode diatas, kita ternyata bisa menulis LESS secara lokal (komputer sendiri) dan kemudian mengkonversinya menjadi CSS standar dengan bantuan aplikasi compiler LESS. Aplikasi-aplikasi Compiler LESS bisa dilihat dan dipilih pada bagian berikutnya.

Aplikasi GUI Compiler LESS

Beberapa aplikasi yang disebutkan, digunakan sebagai Compiler LESS, sehingga kita bisa langsung mengkonversi file LESS menjadi file CSS standar. Bahkan contoh yang disertakan bisa langsung dirender melalui browser, atau bisa di-compile menggunakan aplikasi dibawah ini:

Crunch; Merupakan rekomendasi penulis, karena; tampilannya yang sederhana, berjalan disemua sistem operasi, menggunakan framework AdobeAIR, dapat langsung digunakan sebagai teks editor.
SimpLESS; Aplikasi GUI ini hampir mirip dengan Crunch hanya saja tidak bisa digunakan sebagai teks editor. SimpLESS hanyalah compiler, namun mampu berjalan pada semua sistem operasi.
WinLESS; Aplikasi ini juga hanya compiler saja, tanpa kemampuan Text Editor, hanya berjalan pada Sistem Operasi Microsoft Windows, namun dapat diintegrasikan dengan Teks Editor.
Compass; Aplikasi ini banyak digunakan para pengembang profesional, hanya untuk preprocessor SASS, berjalan pada semua sistem operasi, namun tidak gratis alias berbayar.
Codekit; aplikasi GUI Compiler Preprocessor khusus untuk pengguna Mac dan rekomendasi para pengembang preprocessor karena kemampuannya dalam menulis dan mengkonversi hampir semua preprocessor (SASS, LESS, Stylus).
Scout; aplikasi ini berjalan disemua sistem operasi, open-source, namun saya belum mencobanya (silahkan dicoba).
LiveReload; aplikasi GUI Compiler Preprocessor ini banyak diceritakan dan digunakan para pengembang, berjalan pada sistem operasi Mac dan Windows, dan belum tersedia untuk pengguna sistem operasi Linux.

Dasar Penulisan Preprocessor LESS

Bagaimana dengan persiapan awal sebelum belajar menulis LESS? Jika sudah siap, dibawah ini tidak akan diberikan contoh yang panjang lebar hingga memusingkan, namun kita akan mencoba memahami dasar-dasar dari LESS. Contoh dibawah ini lebih baik anda coba tulis sendiri sehingga terlihat hasilnya. Kemudian pahami dengan baik, agar kita mampu merasakan manfaat dan perbedaannya antara menulis CSS biasa dengan menulis LESS.

Integrasi Compiler Side-Client

Contoh penggunaan LESS akan dibahas secara terstruktur hingga menghasilkan suatu objek tertentu dan contoh yang akan dibahas menggunakan metode kompilasi Side-Client (Unduh file contoh terlebih dahulu sebagai pembanding). Ini berarti file LESS tidak perlu di-compile menggunakan aplikasi yang disebutkan diatas, karena kita akan menggunakan less.js sebagai compiler dengan proses konversi secara langsung pada browser (gunakan browser Firefox untuk melihat hasilnya, karena browser lain kurang bahkan tidak mendukung metode side-client untuk LESS).

Sisipkan link file .less pada dokumen HTML anda dengan setting rel dengan stylesheet/less

<link rel="stylesheet/less" type="text/css" href="style.less">

Unduh file less.js dan masukan pada dokumen HTML anda

<script src="less-1.3.0.min.js" type="text/javascript"></script>

Pastikan bahwa file stylesheet ditempatkan sebelum script, sehingga persiapan awal dokumen kurang lebih menjadi seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet/less" type="text/css" href="style.less">
	<script src="less-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

style.less merupakan file yang akan kita kembangkan sebagai contoh pada langkah berikutnya. Ini berarti anda harus mempersiapkan Text Editor untuk menulis file HTML dan LESS.

Skenario HTML

Jika compiler side-client sudah tersedia pada tag <head>, mari kita lanjutkan untuk mempersiapkan elemen objek HTML, seperti dibawah ini:

<div id="WadahObjek">
	<div class="objek" id="objekSatu"></div>
	<div class="objek" id="objekDua"></div>
	<div class="objek" id="objekTiga"></div>
</div>

Skenario LESS

Setelah dokumen HTML dibuat seperti diatas, sekarang bukalah text editor anda dan buatlah file style.less. Kemudian berikan sentuhan style untuk objek yang telah dibuat pada HTML. Kita tuliskan CSS Standar dulu seperti dibawah ini:

body {
	background:#262626;
}
#WadahObjek {
	margin:0 auto;
	width:650px;
}
.objek {
	display:inline-block;
	width:150px;
	height:150px;
	background:#191919;
	margin:25px;
}

Browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:

Hmmm... Tidak ada yang spesial dari contoh kode CSS diatas, karena itu masih CSS standar walau sudah ditulis sebagai file LESS. Coba anda bayangkan, jika kita suka dengan warna #191919 untuk digunakan pada beberapa tempat yang tersebar disepanjang stylesheet dengan jumlah baris hampir 1000? Melelahkan sekali bukan? Lalu, setelah semua baris itu beres ditulis secara manual, tiba-tiba kita ingin mengubah warna tersebut dengan warna lain atau mengganti warna dengan sebuah perpaduan warna. Sungguh sangat melelahkan!

Variable

Variabel memungkinkan anda untuk menentukan suatu nilai yang dituliskan dalam satu tempat, dan kemudian menggunakannya disepanjang stylesheet, membuat perubahan global semudah mengubah satu baris kode.

Perhatikan kode LESS dibawah ini:

@WarnaDasar: #262626;
@WarnaSatu: #191919;
@TinggiLebar: 150px;

body {
    background: @WarnaDasar;
}
#WadahObjek {
    margin: 0 auto;
    width: 650px;
}
.objek {
	display: inline-block;
	width: @TinggiLebar;
	height: @TinggiLebar;
	background: @WarnaSatu;
	margin: 25px;
}

Perhatikan bahwa kita hanya perlu sekali menuliskan variable @WarnaDasar dengan nilai #262626. Ketika kita ingin melakukan perubahan warna maka hanya cukup merubah nilai pada variable @WarnaDasar saja. Lebih mudah dan cepat bukan?

Variabel LESS biasa dideklarasikan dengan simbol "@". Kita bisa memberikan nama variabel sesuai dengan keinginan kita dan atau dengan alasan kemudahan untuk mengingat, kemudian kita berikan nilainya. Setelah itu kita dapat merujuk nama variabel yang telah dibuat untuk ditempatkan dimana saja. Keren bukan?!

Ketika anda compile menggunakan Aplikasi GUI Compiler LESS (misal; Crunch) maka akan dihasilkan kode CSS standar seperti dibawah ini:

body{
	background:#262626;
}
#WadahObjek{
	margin:0 auto;
	width:650px;
}
.objek{
	display:inline-block;
	width:150px;
	height:150px;
	background:#191919;
	margin:25px;
}

Jika anda ganteng pasti anda paham...

Mixin

Mixin memungkinkan kita untuk menanamkan sifat-sifat kelas ke dalam kelas lain dengan hanya memasukan salah satu nama kelas. Hampir sama seperti halnya variabel, tetapi keseluruhan sifat kelas akan mempengaruhi kelas lainnya. Mixin juga dapat berperilaku seperti fungsi, dan mengambil argumen. Masih bingung? Lanjut...!

Anda tahu bagaimana cara membuat lingkaran untuk objekSatu? Cukup dengan mengeset radius border sebesar-besarnya seperti contoh dibawah ini:

#objekSatu{
	border-radius:9999px;
}

Maka browser akan menampilkan objek dengan bentuk kurang lebih seperti dibawah ini:

Namun harus diingat sejak penggunaan CSS3, jika ingin objek tersebut dapat ditampilkan sempurna pada semua browser maka kita harus menambahkan vendor prefix -webkit- dan -moz- sebagai cara terbaik. Maka kurang lebih kita bisa menuliskannya seperti dibawah ini:

#objekSatu{
	-webkit-border-radius:9999px;
	   -moz-border-radius:9999px;
	        border-radius:9999px;
}

Hmmm... Bagaimana jika ada objek lingkaran lain yang jumlahnya banyak dan harus diberi sifat serta vendor prefix sama seperti itu? Misal 20 objek lingkaran... Huh!!! Sangat melelahkan...

Tenang... LESS membuat pendefinisian mixin menjadi lebih sederhana dan mudah. Pendefinisian mixin pada LESS sebenarnya hampir sama dengan bahasa pemrograman lainnya. Penulisan mixin LESS hampir sama dengan CSS standar terutama dalam penggunaan grup CSS. Hampir sama dengan penulisan variabel, hanya saja kita menggunakan simbol "." (titik) untuk mendeklarasikan mixin, seperti contoh dibawah ini:

@bulatan: 9999px;

.SudutBulat {
    -webkit-border-radius: @bulatan;
       -moz-border-radius: @bulatan;
            border-radius: @bulatan;
}

#objekSatu {
	.SudutBulat;
}

Dan sekarang, kita hanya cukup memasangkan .SudutBulat pada semua objek yang akan dibuat lingkaran tanpa perlu menambahkan sifat-sifatnya (border-radius dan vendor prefix) lagi. Jika suatu hari kita ingin mengubah nilai bulatan, cukup ganti nilai pada variabel @bulatan maka semua objek yang memiliki sifat sama akan ikut berubah tanpa harus diubah satu persatu. Kereeeeennn!!! Namun hati-hati jangan sampai terjadi bentrok dengan class milik CSS. Memang cukup sulit untuk membedakannya, namun saya yakin anda paham maksud penggunaan mixin pada LESS.

Parametric Mixin

Penambahan parametric mixin membuat penulisan sifat-sifat kelas menjadi lebih fleksibel. Parametric mixin merupakan cara penyisipan dan atau penambahan sifat baru dari sifat mixin yang telah ada tanpa mempengaruhi mixin asal. Bingung lagi ya???

Ayo kita lanjutkan lagi... objekSatu telah diberi sifat lingkaran, dan kita ingin membuat sudut rounded dengan radius baru pada objekDua, namun dengan tetap memanfaatkan sifat-sifat yang sudah tersedia pada mixin objekSatu, sehingga kita tidak perlu membuat mixin baru. Bagaimanakah caranya? Perhatikan deklarasi parameter dibawah ini:

@bulatan: 9999px;

.SudutBulat (@radius: @bulatan){
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;
}

Pendeklarasian parametrik mixin yaitu dengan menambahkan tanda kurung "( )" setelah nama mixin. Didalam tanda kurung tersebut kemudian ditambahkan variabel. Variabel pada contoh diatas menggunakan nama variabel @radius yang memiliki nilai sama dengan variabel @bulatan yaitu 9999px. Kemudian nilai-nilai pada mixin diubah dengan variabel @radius, ini berarti nilai default dari variabel @radius adalah 9999px, namun ini bersifat default yang bisa saja nilai variabel @radius tersebut diganti sesuai kebutuhan. Tambah bingung ya? Perhatikan penggunaan mixin dibawah ini:

#objekSatu {
    .SudutBulat;
}

#objekDua {
    .SudutBulat(30px);
}

Perhatikan dengan seksama, bahwa objekSatu menggunakan variabel @radius dengan nilai default yaitu 9999px. Hal ini karena nilainya tidak diubah. Sedangkan pada objekDua nilai untuk variabel @radius diubah menjadi 30px. Sehingga nilai default untuk variabel @radius akan diubah menjadi 30px dan diberlakukan hanya untuk objekDua. Sehingga objekDua jika ditampilkan pada browser akan tampak seperti dibawah ini:

Mudah-mudahan paham maksud dari Parametric Mixin, jika anda paham maka tambah ganteng...

Operasi

Salah satu fitur hebat LESS lainnya adalah kemampuan untuk menggunakan operasi matematika didalam stylesheet. Mungkin kedengarannya sangat membosankan jika sudah berhubungan dengan matematika, namun hal ini sangatlah bagus untuk LESS. Operasi memberikan keleluasaan menambah, mengurangi, membagi dan mengalikan nilai properti dan warna, memberikan Anda kekuatan untuk menciptakan hubungan yang kompleks antar sifat. Bagaimana operasi matematika digunakan pada LESS?

Pada contoh terdapat 3 objek yang sudah kita berikan gaya tertentu, namun belum ditambahkan garis bingkai (border) dan warna garis bingkai (border color) pada objek tersebut. Misal;

Kita ingin menentukan tebal garis bingkai sebesar 5% dari tinggi atau lebar objek,
Kita ingin menentukan warna garis bingkai

Maka kita tuliskan operasi matematiknya kedalam stylesheet, seperti dibawah ini:

@TebalGaris: @GarisTepi * 0.05;

Kemudian warna garis diambil dari perkalian variabel @WarnaTiga dengan 3, seperti dibawah ini:

@WarnaTiga: #111;
@WarnaGaris: @WarnaTiga * 3;

atau

@WarnaGaris: @WarnaTiga * #222;

Awalnya memang cukup membingungkan, namun saya yakin anda akan memahami setelah melakukan beberapa kali uji coba. Harus diingat bahwa; menambahkan atau mengurangi dengan #000 tidak akan memberikan efek, dan penggunaan #fff merupakan efek masimal.

Setelah kita menentukan variabel untuk garis bingkai maka kita bisa menerapkannya pada garis bingkai seperti dibawah ini:

border: @TebalGaris solid @WarnaGaris;

Sehingga objek akan menjadi seperti gambar dibawah ini:

Mudah bukan? Khusus untuk warna, kita bisa menggunakan fungsi saturasi yang lumayan cukup rumit dan kompleks.

Fungsi Warna

LESS menyediakan beberapa fungsi warna berikut ini:

darken() dan lighten(), digunakan untuk menambahkan warna hitam dan putih (lebih gelap dan lebih terang)
saturate() dan desaturate(), untuk menentukan sebuah warna lebih "berwarna" atau "grayscale"
fadein() dan fadeout(), untuk menambah atau mengurangi transparansi
spin(), digunakan untuk memodifikasi rona (hue) warna

Jika, misal, kita ingin membuat warna garis pinggir (border color) menjadi desaturasi untuk mendapatkan warna yang mendekati grayscale, maka kita bisa menggunakan desaturate seperti dibawah ini:

@WarnaGaris: desaturate(@WarnaTiga, 100%);

Bahkan kita bisa memanfaatkan output dari hasil operasi suatu warna kedalam operasi warna lainnya, seperti dibawah ini:

@WarnaGaris: darken(desaturate(@WarnaTiga, 100%),20%;

Semua operasi warna bisa menggunakan warna (Hex) atau persentase sebagai parameternya, kecuali spin. spin menggunakan bilangan bulat (integer) antara 0 sampai dengan 255 dan tidak menggunakan persentase untuk memodifikasi rona (hue) warna, misal:

@WarnaGaris: spin(@WarnaTiga, 100);

Nested Rule

Ketika kita merancang suatu halaman web yang kompleks menggunakan CSS, kadang kita akan dihadapkan pada seleksi berantai (atau ada yang menyebutnya parent child, ada yang menyebutnya pewarisan) untuk elemen tertentu dalam DOM. Nested Rule didalam LESS digunakan untuk menyederhanakan penulisan nama selektor yang panjang menjadi lebih sederhana dan mudah. Didalam LESS kita bisa menempatkan suatu selektor didalam selektor lainnya. Hal ini membuat pewarisan (nest) menjadi lebih jelas dan lebih pendek. Dibawah ini contoh pewarisan atau pengelompokan CSS standar:

#header {
	border-width: 1px
}
#header h1 {
	font-size: 20px;
	font-weight: bold;
	color: #ddd
}
#header h1 a {
	text-decoration: none;
}
#header h1 a:hover {
	color: #dfe
	border-width: 2px
}

Perhatikan contoh kode penulisan CSS standar diatas. Sebenarnya ketika kita menuliskan turunan selektor yang hanya satu atau dua turunan, hal ini masih dipahami dan mengerti dengan baik. Namun ketika jumlah selektor turunan dari selektor utama sudah mencapai 4 sampai 5 selektor, masalah sudah mulai bermunculan, dari mulai penulisan yang lebih panjang, dan visualisasi penyusunan hirarki yang tidak nyaman dilihat alias berantakan. Dengan LESS kita dengan mudah menuliskan pengelompokan utama dan kemudian menuliskan turunannya didalam kelompok utama. Misal, kode contoh diatas kita modifikasi menjadi aturan pewarisan LESS dengan meniru struktur DOM, sehingga menjadi seperti dibawah ini;

#header {
	border-width: 1px;
	h1 {
		font-size: 20px;
		font-weight: bold;
		color: #ddd;
		a {
			text-decoration: none;
			&:hover {
				color: #dfe;
			}
		}
	}
}

Jika kita perhatikan contoh kode aturan pengelompokan LESS diatas, ada satu bagian yang berbeda dalam penulisan pseudo-class. Untuk penulisan pseudo-class kita menggunakan simbol "&" yang bisa berarti "ini" atau "dan".

Namun, Nested Rule untuk preprocessor LESS berefek pada kenyamanan penulisan sintak didalam teks editor. Ketika saya mulai menuliskan sintak-sintak CSS dengan prepocessor LESS, hampir semua teks editor yang digunakan tidak mampu menampilkan visualisasi syntax-highlighter yang nyaman untuk diperhatikan, terutama dari sisi pewarnaan sintak, saya bahkan merasa pewarna sintak LESS sangat kacau ketika menggunakan pseudo-class. Ini menjadi perkerjaan rumah para pengembang plugin teks editor untuk menciptakan syntax-highlighter khusus preprocessor LESS.

Crunch sepertinya memang diciptakan khusus untuk Teks Editor LESS dan Compiler LESS, dan untuk hari ini bagi anda yang ingin belajar menulis preprocessor LESS, saya merekomendasikan aplikasi GUI LESS yang satu ini. Nyaman, ringan, mengenal syntax LESS dengan baik, compiler terintegrasi, dan terintegrasi debug untuk mengetahui kesalahan penulisan.

Mengimpor File LESS

Akhirnya, ini biasanya dilakukan sebagai langkah terakhir yaitu dengan mengimpor file LESS. Membagi file-file LESS sesuai dengan penggolongan tertentu adalah cara terbaik dari pada Anda harus menuliskannya hingga 5000 baris dalam satu file.

Mengimpor satu file ke file lainnya didalam LESS sangatlah sederhana, yaitu:

@import "warna.less";

Bahkan kita dapat menghilangkan ekstensi LESS dengan hanya menuliskan:

@import "warna";

Kita dapat membagi-bagi file LESS sesuai relevansinya menjadi beberapa file terpisah. Mungkin kita bisa saja menggolongkan file-file LESS itu menjadi seperti dibawah ini:

CSS Reset atau Normalize
Warna
Huruf dan tipografi
Elemen-elemen UI
Style utama halaman
...dan pengelompokan lain secara relevan sesuai aturan yang tergantung pada proyek Anda

Sebagai contoh, anda dapat melihat bagaimana developer Twitter Bootstrap membagi-bagi file LESS kedalam beberapa file sesuai kelompoknya. Hal seperti ini akan terlihat lebih profesional dan lebih mudah dalam pengelolaan.

Anda mungkin berfikir bahwa menggunakan metode impor justru akan meningkatkan HTTP Request yang tidak perlu sehingga akan memperlambat waktu load halaman anda, dan itu betul! Namun kita harus ingat bahwa yang akan kita gunakan adalah file LESS sebagai bahan mentah yang kemudian dikonversi sehingga menjadi file CSS biasa. Jika kita memahami dengan baik, maka tidak peduli lagi, akan seberapa banyak file-file LESS itu digolongkan dan dipisahkan, karena pada akhirnya, semua bagian-bagian file LESS tersebut akan digabungkan menjadi satu file CSS baru melalui impor. Jadi, jangan takut melakukan impor. Karena hal ini akan sangat membantu kita dalam penyusunan struktur kode pada proyek yang sedang kita kerjakan.

Kesimpulan

Begitulah kurang lebih tentang Preprocessor LESS dan penulis secara pribadi berharap bahwa setelah menulis dan atau membaca artikel yang panjang lebar ini, kemudian berkembang minat para pengembang CSS di Indonesia untuk mulai menggunakan bahasa LESS. Saya merasa bahwa LESS telah melakukan perubahan cukup besar dalam tata cara penulisan bahasa Stylesheet.

Jika anda merasa tidak puas dengan artikel diatas, silahkan kunjungi dokumen resmi LESS untuk memeriksa kemungkinan terjadi perubahan yang lebih menarik. Selain itu, karena LESS dikembangkan sebagai Open Source anda bisa bergabung dan terlibat didalamnya. Anda bisa melaporkan masalah yang ditemukan (bug), pencabangan (fork), atau sekedar memantau (watch) perkembangan terbarunya melalui GitHub.

Terima kasih atas waktu dan kesempatannya untuk membaca artikel ini (yang ditulis hampir 1 minggu), semoga ada manfaat yang bisa diambil. Selamat belajar dan Happy Blogging :)

Rich Snippets - Blogger Metadata Twitter Cards

noreply@blogger.com (Hendriono Dede) — Sat, 06 Oct 2012 15:17:00 +0000

Bismillah. Alhamdulillah. Blogger Tune-Up kembali bisa menulis walau masih kaku setelah hampir satu bulan lamanya tidak menulis. Artikel kali ini merupakan lanjutan penjelasan dari artikel sebelumnya tentang Open Graph Metadata Untuk Blogger, namun lebih spesifik membahas tentang Twitter Cards. Twitter Cards adalah fasilitas yang diberikan oleh jejaring sosial Twitter untuk para blogger agar konten yang dibagikan melalui jejaring Twitter lebih menarik dan mudah dipahami oleh pengikut kita. Mereka para pengikut (follower) jejaring Twitter yang kita kelola akan lebih mudah untuk memahami dengan cepat mengenai materi utama dari artikel yang kita bagikan dari blog kita, karena sisipan konten artikel yang tampil pada Twitter berisi informasi tentang judul artikel, ringkasan (meta description) artikel, gambar thumbnail, info penulis (nama dan alamat Twitter), info blog (favicon, nama blog dan alamat Twitter) serta beberapa informasi penting lainnya.

Deskripsi

Twitter Cards atau Kartu Twitter memungkinkan kita untuk melampirkan berbagai informasi media untuk pengguna Twitter (Tweets) yang memiliki pranala ke konten blog yang kita kelola. Kita hanya cukup menambahkan beberapa baris kode HTML (metadata) kedalam halaman web yang kita kelola maka dengan otomatis pengguna yang membagikan link konten blog kita pada tweet mereka akan memiliki "kartu" informasi yang akan terlihat pada semua pengikutnya. Namun fasilitas ini belum 100% untuk semua pengguna. Twitter pada blognya yang ditulis (update) pada hari Rabu, 12-09-2012 (13:56) menjelaskan bahwa mereka masih dalam proses secara bertahap untuk menggelar teknologi tersebut hingga 100% bisa digunakan untuk semua pengguna. Ini berarti untuk sementara waktu, tidak semua pengguna akan memperoleh fasilitas ini.

Sebagai pengembang, Twitter Card (Kartu Twitter) berguna untuk:

Memberi Anda kendali tentang bagaimana konten Anda ditampilkan pada Tweet
Mengarahkan lalu lintas ke situs Anda
Meningkatkan jumlah orang yang mengikuti akun Twitter Anda melalui atribusi konten

Integrasi Metadata Twitter Cards

Pada artikel Open Graph Metadata Untuk Blogger sebenarnya sudah dibahas lengkap. Silahkan mengikuti tata cara pemasangan metada seperti yang dijelaskan pada artikel tersebut.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Dasbor - Template - Edit HTML - Lanjutkan"
Langkah 3
Pastikan kode dibawah ini tersedia:

<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>

Perhatian! Kode metadata Twitter Cards diatas hanya sepenggal, wajib metadata tersebut lengkap dengan metadata open graph
Langkah 4
Simpan template jika yakin kode tersebut tersedia

Pemeriksaan Metadata Twitter Cards

Setelah yakin bahwa metadata Twitter Cards terpasang dengan baik pada template, lakukan pemeriksaan dengan langkah sebagai berikut:

Langkah 1
Buka halaman Preview your Twitter Card
Langkah 2
Masukan alamat artikel yang akan diperiksa pada kotak "Media URL"

Langkah 3
Klik tombol "Preview Card" dan tunggu hingga kartu twitter ditampilkan seperti dibawah ini:

Langkah 4
Berarti integrasi metadata Twitter Cards berhasil...

Berpartisipasi pada Twitter Cards

Agar Kartu Twitter dapat ditampilkan dengan baik maka sebaiknya anda berpartisipasi dalam pengembangan Twitter Cards dengan mengikuti ketentuan sebagai berikut:

Baca dokumentasi dan cara menambahkan markup yang tepat untuk Blog Anda.
Uji markup Anda dengan alat pratinjau yang disediakan (Lolos Pemeriksaan Metadata Twitter Cards). Kiriman Anda akan ditolak secara otomatis jika Anda memiliki markup tidak lengkap atau cacat.
Setelah markup diimplementasikan, mengisi formulir dan menyertakan link ke halaman yang berisi perwakilan markup.

Hal yang harus diperhatikan dalam pengisian formulir:

Pada bagian "Twitter Username" isi dengan nama akun twitter anda.
Pada bagian "Twitter Username associated with that domain" isi dengan nama akun twitter yang khusus dibuat untuk pengikut blog anda.
Yang diberi tanda bintang merah adalah bagian yang tidak boleh dikosongkan, namun sebaiknya semua bagian diisi dengan baik.

Setelah formulir diisi dengan baik, tunggu beberapa saat (bisa satu minggu hingga satu bulan) email konfirmasi dari tim Kartu Twitter.

Twitter Cards Pengguna Non Blog*Spot

Ma'af sekali, Blogger Tune-Up tidak akan membahas bagaimana mengintegrasikan Twitter Cards untuk platform blog selain Blog*Spot. Bagi para pengguna CMS non Blog*Spot seperti Wordpress, Drupal dan lain sebagainya terutama yang berbasis PHP silahkan merujuk pada artikel Niall Kennedy berjudul "Twitter Cards PHP" yang ditulis lengkap beserta source code-nya pada GitHub.

Kesimpulan

Dibawah ini adalah screenshoot blog yang sudah terintegrasi Twitter Card dan yang belum dipasang Twitter Card pada saat di-tweet.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Memahami CSS Selector - Bagian 3

noreply@blogger.com (Hendriono Dede) — Fri, 10 Aug 2012 13:35:00 +0000

Bismillah. Alhamdulillah. Dua artikel yang khusus membahas CSS Selector telah ditulis dengan harapan kita bersama bisa mempelajarinya dengan baik. Dan mudah-mudahan dapat memberikan gambaran serta memecahkan permasalahan-permasalahan yang berhubungan dengan CSS selama ini. Saya menulis artikel tentang CSS Selector bukan bermaksud menggurui sahabat blogger, tapi pada mulanya dimaksudkan sebagai catatan pribadi, untuk mengingatkan diri sendiri disaat lupa. Maklum saya juga bukanlah blogger profesional yang setiap hari selalu berkutat dengan kode-kode CSS. Semakin jarang bertemu dengan CSS semakin besar kemungkinan lupa.

Artikel kali ini masih sambungan dari dua artikel sebelumnya yang membahas CSS Selector. CSS Selector yang akan dibahas kali ini cukup lumayan sulit dan rumit, bahkan beberapa kode masih jarang yang menggunakannya namun tidak ada salahnya tetap dibagikan sebagai bahan diskusi. Mari kita pelajari CSS Selector berikutnya, jika anda merasa pusing dan bingung berarti saya pun demikian adanya... (hehehehe...)

Unduh CSS Selector Bagian 3

Agar pemahaman tentang artikel CSS Selector kali ini menjadi lebih mudah, sebaiknya anda unduh terlebih dahulu contoh study case pada link unduhan diatas, kemudian baca artikel dengan memahami langsung dari contoh yang tersedia. Jangan lupa ekstrak file hasil unduhan dengan perangkat lunak archive extractor (misal; 7ZIP, WinZIP, atau WinRAR).

(21) X::pseudoElement

Kita dapat menggunakan Pseudo Element untuk memberikan style pada bagian-bagian dari suatu elemen, seperti misal; style untuk baris pertama pada sebuah paragrap atau huruf pertama dari sebuah paragrap. Pseudo Element tersusun dari dua titik-dua "::" (two colon).

Pseudo Elemen dengan Target Huruf Pertama Paragrap

Dibawah ini contoh kode CSS yang digunakan untuk memberikan style pada huruf pertama pada sebuah paragrap:

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

Pseudo Elemen pada kode CSS diatas memberikan style pada semua huruf pertama dari setiap paragrap yang terdapat pada halaman yang sedang dibuka. Cara ini biasanya digunakan pada style sebuah halaman koran (newspaper).

Pseudo Elemen dengan Target Baris Pertama Paragrap

Dibawah ini contoh kode CSS yang digunakan untuk memberikan style pada baris pertama pada sebuah paragrap:

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

Hampir sama dengan fungsi kode Pseudo Elemen CSS sebelumnya, hanya saja target style ditujukan pada semua baris pertama dari setiap paragrap halaman yang sedang dibuka.

Mengutip dari www.w3.org bahwa:

"Untuk kesesuaian dengan style sheet yang ada, maka semua user agent harus bisa menerima notasi satu titik-dua (one-colon) sebelumnya untuk pseudo elemen yang dimasukan pada CSS level 1 dan level 2 (yaitu, :first-line, :first-letter, :before dan :after). Kompatibilitas ini tidak berlaku untuk pseudo element baru yang diperkenalkan pada spesifikasi ini."

Kenyataannya, user agent pada browser versi terbaru mampu membaca dengan baik notasi satu titik-dua pada pseudo element yang terdapat didalam kode CSS dan dengan otomatis mengubahnya menjadi notasi dua titik-dua (two-colon). Terserah anda, apakah akan menggunakan pseudo element dengan notasi two-colon atau one-colon.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(22) X:nth-child(n)

Pseudo Element ini digunakan untuk memberikan style pada anak (child) dari sebuah deret item. Pseudo Element ini sederhananya untuk menyeleksi suatu deret item yang tersedia didalam sebuah susunan daftar dengan penghitungan item dimulai dari atas.

li:nth-child(2) {
 color: red;
}

Perhatikan kode CSS diatas. Pseudo Element nth-child(2) digunakan untuk memberikan style pada setiap list item (li) yang berada pada susunan (baris) ke-dua dalam setiap kumpulan list item. Pseudo Element ini juga dapat digunakan untuk menyeleksi atau memberikan style list item dengan cara penentuan kelipatannya. Misal; nth-child(2n), maka item 2, 4, 6, 8, dan seterusnya yang merupakan kelipatan dua akan dipengaruhi oleh style pseudo element. nth-chlid mampu menyeleksi item hingga urutan ke-397 [li:nth-child(397)].

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(23) X:nth-last-child(n)

Pseudo Element ini hampir sama dengan nth-chlid, hanya berbeda cara seleksinya saja. Jika nth-child melakukan seleksi dengan cara mengitung list item dari atas, sedangkan nth-last-child adalah kebalikannya, yaitu melakukan penghitungan list item dari item yang terakhir.

li:nth-last-child(2) {
 color: red;
}

Perhatikan kode CSS diatas. Pseudo Element nth-last-child(2) digunakan untuk memberikan style pada setiap list item (li) yang berada pada susunan (baris) ke-dua dari bawah (dari item terakhir) dalam setiap kumpulan list item. Misal; list item terdiri dari 8 baris, maka target pseudo elemen ini adalah list item pada baris ke-7 (jika dihitung dari atas) atau baris ke-2 (jika dihitung dari bawah).

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(24) X:nth-of-type(n)

Pseudo Element ini hampir sama dengan :nth-child hanya saja terdapat perbedaan dalam menentukan targetnya. Jika :nth-child akan mencari target berupa child, jika :nth-of-type akan mencari target berupa type elemen.

ul:nth-of-type(2) {
 border: 1px solid black;
}

Perhatikan kode CSS diatas. Anggaplah kita memiliki 5 kumpulan unordered list (ul) yang setiap ul terdiri dari 5 list item (li). Kemudian kita ingin memberikan style berupa garis kotak hanya pada ul ke-dua, dan ul ke-dua ini tidak memiliki ID unik yang terkait antara elemen dengan CSS. Maka kita menggunakan pseudo elemen nth-of-type(2), dan hasilnya hanya ul urutan ke-dua dari ataslah yang akan diberi garis kotak hitam.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(25) X:nth-last-of-type(n)

Pseudo Element ini hampir sama dengan :nth-of-type hanya berbeda cara menentukan target type-nya saja. Jika nth-of-type menentukan target elemen dengan cara mengitungnya dari atas, sedangkan nth-last-of-type adalah kebalikannya, yaitu melakukan penghitungan target elemen dari elemen yang terakhir.

ul:nth-last-of-type(2) {
 border: 1px solid black;
}

Perhatikan kode CSS diatas. Anggaplah kita memiliki 5 kumpulan unordered list (ul) yang setiap ul terdiri dari 5 list item (li). Kemudian kita ingin memberikan style berupa garis kotak hanya pada ul ke-dua (dari bawah) atau ul ke-empat jika dihitung dari atas. Maka kita menggunakan pseudo elemen nth-last-of-type(2), dan hasilnya hanya ul urutan ke-dua (dari bawah) atau ke-empat (dari atas) yang akan diberi garis kotak hitam.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(26) X:first-child

Pseudo Element ini cukup banyak digunakan oleh para web desainer. Struktur pseudo class ini digunakan untuk menentukan style dengan target child (anak) pertama dari elemen utama (parent).

ul li:first-child {
 border-top: none;
}

Perhatikan kode CSS diatas. Anggaplah kita memiliki sekumpulan list item (li) dari sebuah unordered list (ul). Kemudian diberikan style garis pada bagian-atas (border-top) dari masing-masing list item. Namun kita ingin membuang garis-atas (border-top) hanya pada list item urutan ke-satu, maka gunakan :first-child untuk menyeleksinya, kemudian buang garis-atasnya (border-top: none;).

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(27) X:last-child

Pseudo class ini hampir sama dengan :first-child namun berbeda target. Struktur pseudo class ini digunakan untuk menentukan style dengan target child (anak) terakhir dari elemen utama (parent).

li:last-child {
 border-bottom: none;
}

Perhatikan kode CSS diatas. Anggaplah kita memiliki sekumpulan list item (li) dari sebuah unordered list (ul). Kemudian diberikan style garis pada bagian-bawah (border-bottom) dari masing-masing list item. Namun kita ingin membuang garis-bawah (border-bottom) hanya pada list item urutan terakhir, maka gunakan :last-child untuk menyeleksinya, kemudian buang garis-bawahnya (border-bottom: none;).

Hati-hati, IE8 mendukung pseudo element :first-child tetapi tidak mendukung pseudo element :last-child.

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(28) X:only-child

Pseudo class :first-child dan :last-child sudah kita pelajari dan pahami, lalu untuk apa pseudo class :only-child?

div p:only-child {
 color: red;
}

Perhatikan kode CSS diatas. Mungkin diantara kita ada yang pernah menemukan masalah ini. Misal; kita ingin memberikan style HANYA pada paragraph pertama yang merupakan child (anak) dari SEBUAH div. Namun, paragrap lainnya dari div lain tidak ingin kita beri style. Jika menggunakan pseudo class :first-child maka setiap paragrap pertama dari setiap div akan diberi style. Sedangkan kita hanya mentargetkan paragrap pertama dari sebuah div. Ini berarti style hanya akan diberlakukan pada paragrap pertama yang merupakan child sebuah div (dari sebuah div hanya terdapat sebuah paragraph), sedangkah div lain yang memiliki paragrap lebih dari satu tidak akan diberi style. Kondisi seperti ini sangat sulit diselesaikan dengan menggunakan pseudo class lain, maka gunakanlah pseudo class :only-child untuk menyelesaikannya.

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(29) X:only-of-type

Pseudo class ini hampir sama dengan :only-child dan :nth-of-type(n) hanya saja berbeda target. Mungkin bisa dikatakan sebagai perpaduan dari :only-child dan :nth-of-type(n).

li:only-of-type {
 font-weight: bold;
}

Perhatikan kode CSS diatas. Sebenarnya sama saja dengan :only-child hanya saja berbeda target. Jika :only-child menentukan target yang merupakan child dari sebuah elemen, sedangkan :only-of-type menentukan target berdasar type. Misal; Kita memiliki dua unordered list (ul), ul pertama hanya terdiri dari satu li (list item) sedangkan ul kedua terdiri dari lima li. Jika anda menggunakan li:only-of-type maka style hanya akan berpengaruh pada target li tunggal dari sebuah ul.

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

(30) X:first-of-type

Pseudo element ini mungkin boleh dikatakan sebagai perpaduan dari :first-child dengan :nth-of-type(n). Karena pseudo element ini memiliki target style untuk elemen pertama yang terdekat pada tipenya (jenisnya).

Untuk memahami fungsi pseudo element :first-of-type maka perhatikan skenario HTML dibawah ini:

<div>
    <p>Solusi Pseudo Element :first-of-type</p>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>

    <ul>
        <li>List Item 3</li>
        <li>List Item 4</li>
    </ul>
</div>

Kita memiliki 2 Unordered List (ul) yang setiap ul terdiri dari 2 list item (li). Dan kita ingin memberikan style pada "List Item 2", maka beberapa solusi pseudo element yang bisa kita gunakan adalah sebagai berikut:

Solusi 1

ul:first-of-type > li:nth-child(2) {
    font-weight: bold;
}

Keterangan:

ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipenya
Notasi > digunakan untuk memilih langsung turunan dari ul:first-of-type (lihat direct selector)
li:nth-child(2) digunakan untuk menyeleksi child li ke-dua dihitung dari atas

Solusi 2

p + ul li:last-child {
    font-weight: bold;
}

Keterangan:

p + ul digunakan untuk menyeleksi ul yang posisinya tepat dibawah p (lihat adjacent selector)
li:last-child digunakan untuk menyeleksi li child terakhir

Solusi 3

ul:first-of-type li:nth-last-child(1) {
    font-weight: bold;   
}

Keterangan:

ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipe-nya (jenisnya atau kelompoknya)
li:nth-last-child(1) digunakan untuk menyeleksi ul terakhir diurutan pertama yang dihitung dari bawah

Selector ini bekerja pada browser: IE9+ - Firefox 3.5+ - Chrome - Safari - Opera

Kesimpulan

Jika terpaksa harus menggunakan dan memperhatikan browser versi lama seperti Internet Explorer Versi 6, maka kita harus berhati-hati dalam menggunakan selector versi baru. Namun jangan sampai hal ini justru menghalangi keinginan anda untuk belajar. Jangan sampai versi browser menurunkan semangat belajar dan membuat kita harus diam, karena hal ini sangat merugikan diri kita sendiri. Untuk memperkecil kesalahan penggunaan selector selalu rujuklah daftar kompatibilitas-browser. Atau, Anda dapat menggunakan script IE9.js buatan Dean Edward agar browser versi lama mampu mendukung selector baru. Dan atau, gunakan framework tertentu agar browser lama mampu me-render CSS Selector baru dengan baik, misal; Modernizr.

Ketika kita harus menuliskan kode berdampingan dengan framework populer, semisal jQuery, usahakan kita menuliskan kode selector CSS3 asli pada sekumpulan kode-kode custom perpustakaan. Hal ini akan membuat susunan kode-kode menjadi lebih cepat untuk diakses (dirender) oleh browser, jika memungkinkan. Usahakan menggunakan parsing asli browser daripada menggunakan parsing buatan sendiri, hal ini akan meningkatkan kinerja kode saat dirender.

Akhirnya, saya secara pribadi berharap, 3 artikel yang membahas tentang CSS Selector ini dapat membantu mempercepat pemahaman anda tentang fungsi dari masing-masing kode tersebut. Sehingga, suatu hari saya bisa bertanya tentang pengalaman anda dalam penggunaan CSS Selector. Jika anda menemukan kasus dari CSS Selector diatas, atau menemukan CSS selector lain dan ingin dibahas pada artikel Blogger Tune-Up, jangan sungkan untuk mengirimkan kritik, saran dan pengetahuan baru kepada penulis. Selamat mencoba, selamat belajar dan semoga berhasil. Happy Blogging :)

Pranala Luar:

Memahami CSS Selector - Bagian 2

noreply@blogger.com (Hendriono Dede) — Sat, 04 Aug 2012 17:08:00 +0000

Bismillah. Alhamdulillah. Membahas tentang CSS terkadang sangatlah membingungkan. Karena jika diibaratkan, bahasa CSS adalah make-up untuk mempercantik penampilan suatu elemen. Sederhananya, CSS itu berpengaruh terhadap suatu elemen, namun tidak mampu membuat atau menciptakan elemen. CSS hanya akan tampak menarik jika bersatu dengan suatu elemen, namun tidak mampu berdiri sendiri. Pemahaman, pengetahuan dan pengalaman yang kurang dalam menggunakan CSS kadang berakibat cukup fatal dengan tidak tampilnya suatu elemen, bergesernya posisi elemen, tertutupnya elemen satu oleh elemen lainnya, posisi yang tidak rata dan seimbang dan lain sebagainya, dan kita sering kesulitan untuk mencari solusinya ketika ratusan bahkan ribuan baris CSS telah dituliskan.

Pada artikel sebelumnya telah dibahas tentang CSS Selector Bagian 1, mudahan-mudahan artikel tersebut telah dipahami dengan baik dan sudah dilakukan trial and error untuk menemukan letak perbedaan dan kehebatan masing-masing fungsinya. Jika belum memahaminya dengan baik, ada baiknya terus dilakukan percobaan dan penelaahan sampai kita benar-benar memahaminya. Pemahaman yang baik akan melahirkan keyakinan yang kuat, dan ini tentunya modal dasar seorang web desainer. Yakin anda sudah paham dengan CSS Selector bagian 1? Jika merasa yakin, mari kita lanjutkan ke pembahasan CSS Selector bagian 2...

Unduh CSS Selector Bagian 2

(11) X[href="foo"]

Selector ini lebih cocok jika disebut sebagai url filter selector. Karena sisipan yang dimasukan didalam tanda kutip merupakan target yang akan mengarah hanya kepada link yang memiliki url sama.

a[href="http://modification-blog.blogspot.com"] {
 color: red;
}

Perhatikan contoh CSS diatas. Selector diatas hanya akan berpengaruh pada target tag anchor yang memiliki url http://modification-blog.blogspot.com, sedangkan tag anchor lainnya (yang tidak memiliki url sama) tidak akan dipengaruhi sama sekali.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(12) X[href*="modif"]

Selector ini hampir mirip dengan selector X[href="foo"], namun selector X[href*="modif"] memiliki target yang lebih luas dan tidak terlalu spesifik.

a[href*="modif"] {
 color: red;
}

Perhatikan contoh CSS diatas. Selector ini digunakan untuk memberikan style pada tag anchor yang url-nya mengandung kata "modif", misal; blog.modif.com, modif.blog.com, modifblog.com dan atau modification-blog.blogspot.com. Sedangkan tag anchor yang url-nya tidak mengandung kata "modif" tidak akan dipengaruhi sama sekali. Penggunaan simbol bintang didalamnyalah yang membuat selector bersifat lebih luas. Tanpa simbol bintang maka target sangat sempit, bahkan kata "modif" tidak akang mengenai tag anchor apapun.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(13) X[href^="http"]

Selector ini digunakan untuk memberikan style dengan menggunakan regular expression untuk menentukan kata kunci awal.

a[href^="http"] {
 background: url(external/icon.png) no-repeat;
 padding-left: 10px;
}

Perhatikan contoh CSS diatas. Ini biasanya digunakan untuk menambahkan icon kecil pada tag anchor yang menandakan bahwa url tersebut mengarah keluar (eksternal) dari halaman yang sedang dibuka. Disini kode CSS menggunakan bantuan simbol carat (^) yang biasanya digunakan sebagai regular expression untuk menentukan string awal. String awal yang akan dideteksi dari kode contoh diatas adalah href yang url-nya diawali dengan "http" karena biasanya url halaman internal dari suatu situs tidak disertai "http" sedangkan untuk halaman eksternal harus lengkap dengan penambahan "http" diawal url-nya.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(14) X[href$=".jpg"]

Selector ini hampir mirip dengan selector X[href^="http"], perbedaannya hanya pada regular expression untuk menentukan string.

a[href$=".jpg"] {
 color: red;
}

Perhatikan contoh CSS diatas. Kode CSS menggunakan simbol dollar ($), yang merupakan regular expression untuk menentukan string akhir. Maka kode CSS pada contoh diatas hanya akan mempengaruhi tag anchor href yang url-nya mengandung string .jpg pada akhir url-nya. Sedangkan url yang akhiran stringnya bukan .jpg maka tidak akan dipengaruhi sama sekali.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(15) X[data-*="foo"]

Selector ini merupakan cara lain untuk menentukan type suatu file yang akan dipengaruhi oleh CSS.

a[data-filetype="image"] {
 color: red;
}

Selector pada nomor 14 biasanya digunakan untuk membuat style berdasarkan type file, misal; untuk memberikan style pada file-file dengan type png, jpg, jpeg, gif maka kita menggunakan multiple selector pada kode CSS seperti dibawah ini:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
 color: red;
}

Jika menggunakan multiple selector seperti diatas ini tentunya berpengaruh pada setiap tag anchor dengan string akhir sama, lalu bagaimana jika ada diantaranya tag anchor yang tidak ingin dipengaruhi CSS? Solusinya dengan menggunakan custom attribute. Kita dapat menambahkan sendiri atribut data-filetype pada masing-masing tag anchor yang mengandung link sebuah gambar, seperti dibawah ini:

<a href="path/image.jpg" data-filetype="image">Image Link</a>
<a href="path/image.png" data-filetype="image">Image Link</a>

Setelah pengaitnya (custom attribute) diletakan pada tag anchor, kita dapat dengan mudah menuliskan atribut tersebut pada CSS agar target menjadi spesifik yang mengarah pada tag anchor tertentu, seperti dibawah ini:

a[data-filetype="image"] {
 color: red;
}

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(16) X[foo~="bar"]

Selector ini menggunakan penambahan simbol tilda (~) yang digunakan untuk mentargetkan style pada atribut elemen yang memiliki spasi (space) value (nilai).

a[data-info~="external"] {
 color: red;
}
a[data-info~="image"] {
 border: 1px solid black;
}

Perhatikan contoh CSS diatas. Kita telah mendeklarasikan 2 selector dengan nilai berbeda, yaitu external dan image. Misal elemen yang dipengaruhi CSS tersebut seperti dibawah ini:

<a href="path/to/image.jpg" data-info="external image">Gambar Eksternal</a>

Pada contoh elemen diatas, kita telah membuat atribut data-info dengan 2 nilai, yaitu external dan image. Dua nilai atribut ini memberikan keleluasaan bagi kita untuk menentukan style yang tepat dan lebih fleksibel dari pada hanya dengan satu nilai. Dua nilai pada atribut ini hanya dipisahkan dengan spasi kosong seperti halnya penggunaan selector class.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(17) X:checked

Pseudo class ini digunakan untuk memberikan style input yang terpilih (checked) seperti tombol radio atau checkbox.

input[type=radio]:checked {
 border: 1px solid black;
}

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

(18) X:hover

Selector ini mungkin sangat familiar bagi anda, karena memang selector yang sering digunakan, namun pada mulanya hanya digunakan pada tag anchor saja. Sekarang :hover bisa digunakan pada berbagai elemen. Istilah resmi untuk selector ini adalah user action pseudo class.

div:hover {
 background: #e3e3e3;
}

Perhatikan kode CSS diatas. Selector :hover tidak digunakan pada tag anchor tetapi digunakan pada sebuah elemen div. Hati-hati menggunakan selector :hover karena Internet Explorer versi lama tidak akan memberikan perubahan apapun dalam penggunaan :hover pseudo class ini dan hanya berlaku pada tag anchor saja. Contoh dibawah ini adalah :hover pseudo class pada tag anchor yang akan memberikan style garis bawah dengan warna hijau (green) pada saat pointer mouse berada diatas tag anchor.

a:hover {
 border-bottom: 1px solid green;
}

Para web desainer menyarankan penggunaan border-bottom: 1px solid #000; untuk garis bawah sebuah tag anchor dari pada menggunakan text-decoration: underline;

Selector ini bekerja pada browser: IE6+ (tapi hanya pada elemen tag anchor) - Firefox - Chrome - Safari - Opera

(19) X:after

Selector :before dan :after pseudo class sangat berguna sekali dan sering digunakan. Setiap hari, banyak para web desainer kreatif melakukan percobaan untuk menemukan cara baru yang lebih efektif. Salah satu teknik :after pseudo class yang sangat terkenal adalah clear-fix hack seperti kode dibawah ini:

.clearfix:after {
 content: "";
 display: block;
 clear: both;
 visibility: hidden;
 font-size: 0;
 height: 0;
}
.clearfix {
 *display: inline-block;
 _height: 1%;
}

Penggunaan hack :after pseudo class ini untuk menyisipkan sebuah spasi (ruang kosong) setelah elemen sebelumnya.

Selector ini bekerja pada browser: IE8+ - Firefox - Chrome - Safari - Opera

(20) X:not(selector)

Selector ini disebut negation pseudo class yang digunakan sebagai pengingkaran (negation) terhadap suatu kondisi.

div:not(#container) {
 color: blue;
}

Perhatikan kode CSS diatas. Jika kita baca maka kurang lebih berbunyi; jika elemen div bukan (atau tidak memiliki) id container maka huruf akan diberi warna biru (blue).

Atau kita ingin memilih setiap elemen namun bukan paragraph dengan huruf diberi warna hijau (green) maka kode CSS ditulis seperti dibawah ini:

*:not(p) {
 color: green;
}

Jika dibaca kurang lebih berbunyi; semua elemen (*) huruf akan diberi warna hijau (green) kecuali huruf yang berada didalam paragrap (tag p).

Selector ini bekerja pada browser: IE9+ - Firefox - Chrome - Safari - Opera

Kesimpulan

Bertambah 10 selector dalam memori kita dan selector-nya pun semakin lumayan rumit untuk dipahami dan dihapal. Namun jika kita terus melakukan trial and error, perlahan tapi pasti selector diatas akan mampu diingat dan dipahami dengan baik. Penggunaan kode-kode CSS terutama selector tidak hanya cukup untuk dibaca, kita harus benar-benar mencobanya sendiri agar paham perubahan demi perubahan yang terjadi pada elemen-elemen HTML yang kita tulis. Lakukan eksplorasi lebih jauh dengan mengikuti imajinasi kita agar muncul permasalahan-permasalahan yang harus dipecahkan, semakin sering menemukan masalah semakin paham fungsi dari masing-masing selector diatas. Lakukan pula pengkombinasian selector hingga terjadi bentrok disana-sini, maka ketika kita mampu melakukan perbaikan bentrok, semakin baik pula pemahaman kita.

Ingat! Mengerti belum tentu memahami, karena mengerti saja belum cukup untuk menyelesaikan permasalahan-permasalahan yang timbul. Tulis dan terus tulis kode demi kode hingga kita benar-benar memahaminya.

know:not(#understand){
 error: rewrite;
 often: successful;
}

Sampai ketemu dipembahasan berikutnya. Selamat belajar dan selamat mencoba. Happy Blogging :)

Pranala Luar:

Memahami CSS Selector - Bagian 1

noreply@blogger.com (Hendriono Dede) — Thu, 02 Aug 2012 14:16:00 +0000

Bismillah. Alhamdulillah. Perkembangan bahasa markup Cascading Style Sheet (CSS) cukuplah pesat dan ini membuat tampilan situs menjadi semakin dinamis. Pada awal perkembangannya, bahasa CSS masih termasuk kaku, namun kini para web desainer mampu menciptakan efek-efek yang mengesankan hanya dengan CSS. Ini tentunya seiring dengan ide-ide yang terus berkembang, kebutuhan akan situs yang sederhana namun tetap menarik dan banyak lagi faktor lain yang membuat bahasa markup CSS semakin hebat. Para developer browser pun dipaksa untuk mengikuti perkembangan bahasa markup ini, atau bahkan para developer browser-lah yang memancing perkembangan bahasa markup yang satu ini. Ini tentunya berimbas pada pertambahan kosakata yang digunakan pada bahasa markup CSS, dan bagi para pecinta desain layout situs tentunya juga harus menyediakan memori ekstra untuk menghafal lebih banyak kosakata.

Salah satu dari sekian banyak pertambahan kosakata bahasa markup CSS adalah fungsi selector (pemilih). Mungkin dulu kita hanya mengenal selektor id, class dan descendant (turunan), namun hari ini, ketika CSS memasuki versi 3 (atau sering dikenal CSS3) semakin bertambah pula fungsi-fungsi selektor yang digunakan dalam mendesain situs. Dalam penggunaannya pun, para desainer web dituntut berhati-hati karena penggunaan versi terbaru bahasa markup harus pula diikuti dengan penggunaan browser versi baru, hal ini karena penggunaan fungsi baru bisa saja tidak mampu bekerja baik pada browser lama terutama browser IE :( Sebuah konsekwensi dari perkembangan dan perubahan...

Dibawah ini akan dibahas selektor yang paling banyak digunakan dan harus diingat dengan baik oleh para desainer web. Untuk memahami dengan baik fungsi dari masing-masing selector, lebih baik anda unduh terlebih dahulu contoh penggunaannya pada link dibawah ini, ekstrak dengan perangkat lunak ekstraktor (misal; 7ZIP, WinZIP atau WinRAR) kemudian buka masing-masing contoh pada browser.

Unduh CSS Selector Bagian 1

(1) *

Sebelum membahas jenis selector lainnya maka selector yang satu ini harus dipahami dengan baik terutama bagi anda yang baru memulai belajar tentang bahasa CSS. Selector dengan simbol bintang (atau sering disebut asterik) akan mengarahkan target pada semua elemen tunggal didalam halaman.

* {
 margin: 0;
 padding: 0;
}

Para web desainer biasanya menggunakan selector ini untuk me-reset atau mengkosongkan margin dan padding. Selector ini sangat bermanfaat untuk menyamakan posisi margin dan padding pada berbagai penampilan browser. Namun hati-hati dalam penggunaannya, karena terlalu sering menggunakan selector ini akan menambah beban load halaman pada browser.

Selector * juga bisa digunakan pada child (anak) dari selector lain, misal:

#container * {
 border: 1px solid black;
}

Maka selector ini akan mengarah pada target elemen tunggal dari semua child div #container. Namun ingat juga, jangan terlalu sering menggunakannya.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(2) #X

Simbol # (id) sering disebut hash. Selector dengan prefix hash digunakan untuk pentargetan sesuai dengan ID pada halaman. Dalam penggunaannya sangatlah sederhana, karena kita hanya perlu menentukan target sesuai dengan ID yang digunakan pada halaman.

#container {
 width: 960px;
 margin: auto;
 border: 1px solid #212121;
 background-color: #CCCCCC;
}

Selector # bersifat tetap atau kaku karena hanya boleh digunakan pada satu target ID dan tidak boleh digunakan lagi.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(3) .X

Simbol . sering disebut class. Dalam penggunaannya hampir sama dengan selector id, namun selector class diperbolehkan untuk digunakan secara berulang pada berbagai elemen halaman dan dapat digunakan secara bersamaan (multiple) dengan selector class lainnya.

.error {
 color: red;
}
.warning {
 border: 1px solid #212121;
}

Dalam penerapannya, kita bisa menggabungkannya dengan selector id untuk pentargetan yang lebih spesifik, bahkan bisa saja memiliki class yang sama namun digunakan dalam style yang lebih spesifik.

Contoh penggambungan selector id dengan selector class:

#container .error {
 color: red;
}
#container .warning {
 border: 1px solid #212121;
}

Penggabungan dua selector diatas hanya akan memberikan style pada target elemen yang lebih spesifik.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(4) X Y

Selector ini sering disebut selector descendant (turunan). Selector ini digunakan untuk menentukan style target yang lebih spesifik.

li a {
 text-decoration: none;
}

Perhatikan CSS diatas. Selector diatas digunakan untuk memberikan style pada semua tag anchor yang berada didalam unordered list (daftar urutan yang biasanya menggunakan tag li). Sedangkan tag anchor yang berada diluar unordered list tidak akan dipengaruhi sama sekali.

Bagaimana jika kita menuliskannya X Y Z A B.error? maka penulisan seperti ini adalah salah. Hindari penggunaan metode seperti ini, kita akan lebih baik dengan menentukan selector descendant atau turunan yang paling dekat.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(5) X

Selector tunggal umum yang digunakan untuk memberikan style pada target elemen dengan type tertentu tanpa penggunaan id atau class.

a {
 color: red;
}
ul {
 margin-left: 0;
}

Contoh CSS diatas akan memberikan target style pada semua tag anchor dan unordered list. Namun, jika ada style lain yang ditulis lebih spesifik maka kesamaan property yang ada pada style diatas akan dinonaktifkan.

a {
 color: red;
}
li a {
 color: blue;
}

Style CSS diatas akan menghasilkan warna tag anchor blue untuk tag anchor yang berada didalam unordered list, dan akan menghasilkan warna tag anchor red pada semua tag anchor yang berada diluar unordered list.

Selector ini bekerja pada browser: IE6+ - Firefox - Chrome - Safari - Opera

(6) X:visited dan X:link

Selector ini sudah termasuk ke dalam pseudo-class, yang merupakan salah satu perkembangan bahasa CSS. Sehingga pada browser lawas, penggunaan pseudo-class tidak akan berpengaruh apa-apa terutama pada browser lawas IE6+ :(.

a:link {
 color: red;
}  
a:visited {
 color: blue;
}

Pengguaan selector pseudo-class :link akan memberikan style pada semua tag anchor yang bisa diklik (memiliki target URL). Sedangkan penggunaan selector pseudo-class :visited hanya akan memberikan style pada tag anchor yang pernah di klik dan atau pernah dikunjungi (visited).

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(7) X + Y

Selector ini biasa disebut adjacent selector, yang digunakan untuk memberikan style pada elemen yang terdekat atau berdekatan.

ul + p {
 color: red;
}

Pada contoh CSS diatas, style hanya akan diterapkan hanya pada paragrap pertama yang ditempatkan setelah ul namun p bukanlah child dari ul. Sedangkan paragrap kedua dan seterus tidak akan terpengaruhi style ini.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(8) X > Y

Selector ini biasa disebut direct selector, yang digunakan untuk memberikan style pada elemen yang ditargetkan langsung.

#container > ul {
 border: 1px solid black;
}

Pada contoh CSS diatas, style hanya akan diterapkan pada ul yang merupakan child langsung (atau child pertama) yang ditempatkan setelah div #container. Sedangkan ul lain (child kedua, ketiga dan seterusnya) tidak akan dipengaruhi walaupun masih berada didalam div #container. Selector X > Y hampir mirip dengan selector X Y, perbedaan hanya pada target. Jika selector X Y akan berpengaruh pada semua target elemen yang ada didalamnya, sedangkan selector X > Y hanya berpengaruh pada child pertama saja.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(9) X ~ Y

Selector ini sering disebut sibling combinator yang hampir mirip dengan selector X + Y. Perbedaannya ada pada target, jika X + Y hanya memiliki target pada elemen pertama yang ditempatkan setelahnya, sedangkan X ~ Y akan berpengaruh pada semua target elemen yang ditempatkan setelahnya.

ul ~ p {
 color: red;
}

Pada contoh CSS diatas, style akan diterapkan pada semua paragrap yang ditempatkan setelah elemen ul, namun p bukanlah child dari ul. p berada tepat dibawah elemen ul.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

(10) X[title]

Selector ini disebut attributes selector yang digunakan untuk memberikan style pada elemen yang memiliki attribut title saja.

a[title] {
 color: green;
}

Pada contoh CSS diatas, style hanya akan mempengaruhi tag achor yang memiliki atribut title saja, sedangkan tag anchor yang tidak memiliki atribut title tidak akan dipengaruhi.

Selector ini bekerja pada browser: IE7+ - Firefox - Chrome - Safari - Opera

Kesimpulan

Selector yang dibahas diatas adalah selector dasar yang harus diingat dengan baik, karena kita akan sering bertemu dengan selector ini. Disini diperlukan kemampuan eksplorasi dan imajinasi untuk bisa mengkombinasikan dan menggunakan berbagai selector yang sudah dibahas diatas. Sangat membingungkan jika kita baru saja berkenalan dengan selector ini, namun jangan lelah untuk melalukan trial and error agar kita dapat menemukan fungsi spesifik dari masing-masing selector. Semua kembali pada kemampuan kita untuk bisa membedakan fungsi dari masing-masing selector. Janganlah lelah untuk mencoba...

Sampai ketemu dipembahasan berikutnya. Selamat belajar dan selamat mencoba. Happy Blogging :)

Pranala Luar:

Rich Snippets - Blogger Authorship

noreply@blogger.com (Hendriono Dede) — Thu, 26 Jul 2012 11:27:00 +0000

Bismillah. Alhamdulillah. Walau menggunakan Netbook tapi Blogger Tune-Up masih bisa menulis artikel-artikel tentang blog walau bersifat sederhana, setelah beberapa minggu yang lalu, Laptop kesayangan penulis mengalami kerusakan total dan tak bisa lagi diperbaiki (100% mati). Bahkan beberapa proyek yang masih dalam tahap pengembangan, ikut menghilang. Namun bukan berarti ngeblog berhenti total, karena berbagai cara dilakukan agar kegiatan ngeblog tetap aktif dengan konsekwensi frekuensi penerbitan artikel menjadi sangat lambat dan beberapa percobaan yang bersifat online juga menjadi tersendat.

Deskripsi

Artikel kali ini masih membahas tentang Rich Snippets yaitu penambahan sisipan konten tentang kepemilikan blog pada hasil pencarian search engine, atau pihak Google menyebutnya dengan Authorship. Ketika kita melakukan pencarian dengan kata kunci tertentu pada mesin pencari, kadang kita menemukan beberapa deret situs pada hasil pencarian yang mampu menampilkan photo profile, nama penulis dan jumlah teman dalam lingkaran (circle) Google Plus. Hal ini sangat membantu keakuratan blog yang kita tuju, karena sisipan ini sangat membantu kita dalam pencarian. Authorship atau kepemilikan blog memiliki nilai tambah pada hasil pencarian karena para pengunjung biasanya jika sudah mengenal seseorang dengan baik maka tanpa pikir panjang mereka percaya dengan artikel yang disusun oleh penulis tersebut. Misal kita mencari suatu artikel dengan kata kunci "New 30 day challenge" dan hasil pencarian Google menampilkan sederet hasil pencarian seperti dibawah ini:

Dari sederet artikel tersebut anggaplah kita mengenal salah satu penulisnya dengan baik. Misal; Matt Cutts. Maka saya tidak akan lagi mengklik situs lain dalam sederetan hasil pencarian tersebut, karena saya tahu betul bagaimana seorang Matt Cutts menuliskan artikel. Paham betul loyalitas Matt Cutts pada dunia internet dan lain sebagainya. Sisipan kaya atau Rich Snippet ini tentunya memberikan nilai tambah atas kualitas sebuah blog. Atau justru sebaliknya; Kita paham betul karakter seorang penulis artikel yang hobi-nya copy paste atau hanya menulis ulang artikel orang lain, maka kita enggan untuk mengklik link tersebut. Rinch Snippet Authorship walau hanya terdiri dari beberapa baris informasi, namun memiliki manfaat hebat untuk memberikan nilai lebih pada suatu blog.

Konsep Authorship

Google telah memberikan referensi cukup jelas mengenai Authorship, anda bisa menemukan artikel-artikel yang berhubungan dengan Authorship pada bagian akhir artikel ini (Pranala Luar). Bagaimana konsep Authorship tersebut? Perhatikan gambar dibawah ini:

Konsep Authorship ini menggunakan Rich Snippet dengan standar Microformats, yaitu menggunakan tag rel (relationship) dalam implementasinya. Mesin pencari Google akan mengumpulkan informasi dari halaman blog dan kemudian menguraikannya untuk memeriksa link-link eksternal yang secara sengaja dikaitkan dengan halaman lain diluar blog tersebut. Dalam kasus authorsip, mesin pencari Google hanya mengenali relationship dengan Google Plus untuk Rich Snippets hasil pencarian. Ketika mesin pencari melakukan crawler (merayapi) halaman-halaman blog, robots spider akan mencari link-link yang memiliki hubungan (relation) dengan halaman-halaman terkait terutama halaman Google Plus. Suatu halaman eksternal yang dikaitkan secara sengaja (dalam kasus ini Google Plus) dengan halaman blog akan dirayapi ulang untuk melihat keterkaitannya dengan blog yang sebelumnya telah dirayapi.

Memahami Tag Rel

Dari konsep diatas dapat kita ambil kesimpulan bahwa robots spider mesin pencari pada mulanya melakukan crawling (perayapan) pada halaman blog, kemudian robots ini menemukan suatu link yang dikaitkan keluar yaitu link yang disisipi tag rel="auhor". Misal seperti contoh dibawah ini:

<a href="https://plus.google.com/12345" rel="author">Hendriono</a>

Maka kemudian robot spider akan melakukan perayapan terhadap halaman yang dituju (dalam contoh; https://plus.google.com/12345) hingga ditemukan suatu link pada halaman tersebut yang memiliki keterkaitan yaitu link yang memiliki tag rel="me". Misal seperti contoh dibawah ini:

<a href="http://modification-blog.blogspot.com/" rel="me">Blogger Tune-Up</a>

Ketentuan Authorship

Dari penjelasan diatas berarti ada ketentuan yang harus dipenuhi jika kita ingin Rich Snippets Authorship mampu menampilkan; Photo Profile, Nama Penulis dan Jumlah teman dalam lingkaran (circle) pada deret halaman hasil pencarian Google, yaitu:

Halaman blog harus memiliki link tautan menuju halaman Google Plus dengan menyisipkan tag rel="author" pada link tautan tersebut
Halaman Google Plus harus memiliki link tautan menuju halaman blog dengan menyisipkan tag rel="me" pada link tautan tersebut
Halaman blog dan halaman Google Plus harus melewati proses otentikasi dengan alamat email yang valid untuk mencegah klaim kepemilikan oleh pihak lain.

Jika tiga ketentuan tersebut dipenuhi, dalam beberapa hari Rich Snippet Authorship akan ditampilkan pada halaman hasil pencarian. Lalu bagaimana proses integrasinya?

Integrasi Tag rel="author" pada Blog

Untuk menyisipkan link tautan eksternal yang menuju ke halaman Google Plus, ikuti langkah dibawah ini:

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

<head>
...
</head>

Langkah 4
Sisipkan (copy paste) kode dibawah ini diantara tag/kode pada langkah 3:

<link href="https://plus.google.com/ID_Profile" rel="author"/>

Ganti ID_Profile dengan ID Profile Google Plus anda (klik disini) yang bisa dilihat pada address bar, seperti contoh dibawah ini:

Langkah 5
Simpan template

Integrasi Tag rel="me" pada Google Plus

Langkah 1
Buka halaman Profile Google+ Anda
Langkah 2
Klik tombol "Edit Profile" atau klik link ini
Langkah 3
Pilih bagian "Contibute to" atau "Kontributor pada", kemudian isi dengan Link URL Blog

Langkah 6
Klik tombol "Done Editing"
Keterangan: Tag rel="me" secara otomatis ditambahkan tanpa harus dimasukan secara manual. Ketika kita menambahkan suatu link pada bagian "Contribute to" maka didalamnya sudah mengandung tag rel="me".

Verifikasi Email Author

Setelah proses integrasi tag rel pada link tautan Blog dan Google Plus, lakukan proses otentikasi authorship seperti langkah dibawah ini:

Langkah 1
Buka link Google Plus Authorship
Langkah 2

Masukan alamat email valid sesuai dengan email yang digunakan untuk login pada Blog, GMail, dan Google Plus

Langkah 3
Klik tombol "Signup for Authorship"
Langkah 4

Tunggu proses verifikasi, kemudian buka profile Google Plus anda. Pada bagian "Work email" harus ada tanpa cheklist yang berarti bahwa author telah terverifikasi.

Pemeriksaan Rich Snippets Authorship

Setelah tiga ketentuan diatas selesai dilakukan maka lakukan pengecekan, bahwa Rich Snippets Authorship telah berhasil. Ikuti langkah dibawah ini:

Langkah 1
Buka halaman Rich Snippets Testing Tools
Langkah 2
Masukan (copy paste) URL halaman blog anda pada kotak yang tersedia
Langkah 3
Klik tombol "Preview" dan tunggu proses...
Langkah 4
Perhatikan preview yang dihasilkan oleh Rinch Snippet Webmaster Tools seperti contoh dibawah ini:

Hal yang harus diperhatikan adalah:

Photo Profile yang tampil sama dengan yang digunakan pada profile Google Plus yang disertai nama author
Verified: Authorship markup is verified for this page. Yang berarti bahwa author telah terverifikasi dengan baik

Langkah 5

Sabar menunggu, hingga mesin pencari Google melakukan Re-Index pada halaman blog anda atau lakukan proses Re-Index blog melalui Google Web Master Tools milik anda. Dalam beberapa hari atau minggu maka Rich Snippets Author ditampilkan pada hasil pencarian mesin pencari.

Kesimpulan

Para webmaster menyebutkan "embrace authorsip" atau rangkul dan klaim kepemilikan blog dengan mengikuti ketentuan dari pemilik mesin pencari, karena sampai hari ini Google adalah penguasa mesin pencari. Dan lagi pula, ketentuan diatas sesuai dengan standar Rich Snippets yang disepakati bersama, yaitu standar microformats sehingga ada kemungkinan mesin pencari lain akan mengikuti metode yang sama. Matt Cutts bercanda pada videonya "sampai hari ini, saya tidak tahu apakah ada mesin pencari lain?". Lalu apakah artikel ini termasuk teknik SEO? Lagi-lagi Blogger Tune Up menegaskan, bahwa kami menulis artikel ini bukan bertujuan untuk SEO, kami hanya menulis artikel sesuai dengan ketentuan semantic web sebagai cara pendekatan pada mesin pencari. Mengenai "apakah berpengaruh pada rangking pencarian?" Blogger Tune Up tidak menjamin dan tidak tahu. Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi. Sampai ketemu dipembahasan berikutnya. Happy Blogging :)

Pranala Luar:

jQuery CDN Failover

noreply@blogger.com (Hendriono Dede) — Wed, 25 Jul 2012 11:29:00 +0000

Bismillah. Alhamdulillah. CDN atau Content Distribution Network (atau ada juga yang menyebutnya Content Delivery Network) seperti pernah dibahas pada artikel sebelumnya, bahwa jQuery sebagai salah satu framework javascript yang paling populer dan banyak digunakan membuat beberapa situs besar merasa perlu untuk menyediakan salinan file utamanya. Salinan ini sama persis dengan file asli yang tersimpan pada file server jQuery. Hal ini memberikan kemudahan kepada para penggunanya untuk memanfaatkan salinan-salinan tersebut, sehingga kita tidak perlu untuk menyimpannya pada file server milik sendiri. Terutama memberikan keuntungan besar bagi para pengguna hosting berbayar yang memiliki limit bandwidth akses.

Deskripsi

CDN Failover adalah metode pengalihan lokasi framework jQuery dari satu host menuju ke host alternatif (cadangan). Metode failover sangat bermanfaat ketika host utama mengalami kendala akses baik itu karena limit bandwidth atau karena memang benar-benar mengalami masalah. Jika kita tidak menggunakan metode pengalihan (failover) ketika host utama mengalami kendala maka hal tersebut akan mempengaruhi kondisi situs yang kita kelola, apalagi jika situs tersebut menggunakan jQuery Ajax, jelas situs akan down total atau tidak bisa diakses. Hal ini sangat merugikan dan akan mempengaruhi kenyamanan pengunjung situs, ujung-ujungnya para pengunjung enggan kembali lagi untuk menulusuri situs. Mencegah hal tersebut maka kita perlu menyediakan cadangan framework agar masalah down host utama bisa teratasi. CDN Failover adalah cara terbaik untuk mengatasi masalah diatas.

Lokasi CDN jQuery

Untuk menggunakan metode CDN Failover berarti kita membutuhkan dua lokasi penyimpanan framework. Satu lokasi (link) digunakan sebagai link utama dan satu lokasi digunakan sebagai cadangan ketika host utama mengalami masalah. Bagi para pengguna hosting berbayar maka bisa menggunakan skenario; lokasi framework utama diambil dari situs penyedia CDN dan lokasi framework cadangan ditempatkan pada filehosting milik sendiri. Keuntungan skenario tersebut akan mampu mengirit trafik bandwidth ke filehosting sendiri, namun ketika CDN utama mengalami masalah (down) barulah lokasi cadangan (filehost milik sendiri) diakses. Dibawah ini beberapa situs besar penyedia CDN jQuery yang bisa anda manfaatkan. Beberapa situs dibawah ini merupakan rekomendasi para desainer web, diantaranya:

[1] Google (Sangat Baik)

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

[2] Microsoft (Baik)

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

[3] CDNJS (Sedang)

http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js

[4] jQuery (Kurang)

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.js

[5] Yandex (Sangat Kurang)

http://yandex.st/jquery/1.7.2/jquery.js
http://yandex.st/jquery/1.7.2/jquery.min.js

CDN jQuery diatas merupakan alternatif untuk metode failover. Blogger Tune Up pun melakukan tes sendiri terhadap kecepatan akses (load) dari masing-masing lokasi CDN tersebut dengan hasil akhir tes sebagai berikut:

CDN Google rata-rata waktu load 228ms
CDN jQuery rata-rata waktu load 439ms
CDN-JS rata-rata waktu load 340ms
CDN Yandex rata-rata waktu load 575ms
CDN Microsoft rata-rata waktu load 334ms

Namun, kemungkinan akan berbeda hasil akhir jika anda melakukan test load dari wilayah lain, hal ini karena dipengaruhi banyak faktor. Ada kemungkinan untuk wilayah Indonesia, CDN Yandex memiliki kecepatan akses sangat jelek, namun besar kemungkinan menjadi lebih baik jika diakses dari wilayah diluar Indonesia. (Mungkin perlu dilakukan pooling internasional)

Integrasi jQuery CDN Failover

Dibawah ini akan dijelaskan beberapa alternatif penggunaan metode CDN Failover. Silahkan anda memilih salah satunya yang dianggap paling mudah untuk diterapkan pada situs yang anda kelola. Secara garis besar ada dua cara metode CDN Failover, yaitu:

Direct CDN Failover (CDN Failover Langsung)

Direct CDN Failover adalah metode penulisan script load failover (pengalihan) lokasi framework secara langsung pada situs. Biasanya menggunakan statement javascript if else untuk failover-nya. Ketika halaman diload maka script akan melakukan pemeriksaan keadaan, "apakah framework jQuery dari CDN utama berhasil diload? Jika ternyata framework CDN utama tidak berhasil diload, maka link lokasi utama dialihkan ke link lokasi cadangan". Dibawah ini beberapa metode direct CDN failover:

CDN Failover Metode 1

Script dibawah ini merupakan yang metode failover yang paling sederhana. Script akan melakukan pemeriksaan ketersediaan framework, jika ternyata framework tidak berhasil di-load, maka lokasi framework dialihkan.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (jQuery) {  
 // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
 // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>');
}
</script>

CDN Failover Metode 2

Metode ke-2 ini hampir mirip dengan metode ke-1, perbedaannya hanya pada statement pemeriksaan keadaan. Script hanya akan melakukan pengalihan jika keadaan halaman tidak mampu me-load framework, jika berhasil maka script tidak akan menjalankan perintah pengalihan lokasi framework.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') {  
    // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>'); 
} else {
    // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
}
</script>

CDN Failover Metode 3

Metode ke-3 ini merupakan metode yang banyak digunakan oleh situs-situs jejaring sosial media dalam memanggil framework-nya. Metode ini sebenarnya merupakan pengembangan dari CDN Failover metode ke-2.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
 if (typeof jQuery === 'undefined') {  
    var e = document.createElement('script');  
    e.src = '/local/jquery-1.7.2.min.js';  
    e.type='text/javascript';  
    document.getElementsByTagName("head")[0].appendChild(e);  
 }
</script>

Indirect CDN Failover (CDN Failover Tidak Langsung)

Indirect CDN Failover adalah metode pengalihan CDN framework jQuery dengan memanfaatkan framework lain dalam pemeriksaan kondisinya. Berarti halaman membutuhkan framework lain untuk memeriksa keadaan framework jQuery. Metode seperti ini banyak dimanfaatkan dan digabungkan dengan DOM Event Listener atau sering disebut juga Lazy Load framework. (Hiks... Mulai membingungkan... Saran penulis, baca artikelnya malam hari jadi bisa sambil ngopi...)

Menggunakan framework lain untuk memeriksa kondisi framework jQuery sangat bermanfaat dalam meningkatkan waktu respon halaman. Metode Direct CDN Failover mempunyai kelemahan dalam hal waktu respon. Maksudnya, ketika CDN utama mengalami delay yang cukup lama dalam penyediaan perpustakaan jQuery maka halaman juga akan menunggu hingga perpustakaan berhasil dimuat dengan sempurna. Jika load CDN memiliki respon yang sangat lama, maka waktu load halaman situs juga akan relatif lebih lama. Lazy Load framework digunakan untuk mengatasi masalah delay respon.

Framework lain (anggaplah framework A) digunakan selain untuk CDN failover (pengalihan) juga digunakan untuk Lazy Load (pemeriksaan delay respon) framework. Ketika CDN jQuery tersedia namun ternyata memiliki respon yang sangat lambat, maka framework A akan mengalihkan framework jQuery tersebut pada CDN cadangan yang telah disiapkan. Sebuah metode yang tidak bisa dilakukan oleh Direct CDN Failover.

Dibawah ini beberapa framework lain yang dapat digunakan sebagai CDN Failover dan Lazy Load Framework, diantaranya:

Modernizr

Modernizr merupakan framework yang sedang hangat-hangatnya dibicarakan karena kemampuannya dalam menyederhanakan fungsi CSS3 dan HTML5. Baru-baru ini para developer Modernizr memasukan fungsi YepNope pada perpustakaan Modernizr. (Dibahas lengkap pada artikel terpisah)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
Modernizr.load([
 {
  load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
  complete: function () {
   if (!window.jQuery) {
    Modernizr.load('/local/jquery-1.7.2.min.js');
   }
  }
 }
]);
</script>

LABjs

Framework LABjs merupakan script loader cikal bakal dari berbagai framework lain dalam menangani dan memanajemen CDN Failover maupun Lazy Load Framework, bahkan YepNope diciptakan karena inspirasi dari LABjs. (Dibahas lengkap pada artikel terpisah)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
$LAB.script("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js").wait(function () {
    if (typeof window.jQuery === "undefined") {
        $LAB.script("/local/jquery-1.7.2.min.js");
    }
});
</script>

Kesimpulan

Dari beberapa metode jQuery CDN Failover diatas, kita bisa memilah salah satu metode yang dianggap cocok dengan karakter situs yang kita kelola. Sedangkan untuk CDN Failover dengan metode Indirect CDN Failover akan dibahas secara rinci pada artikel terpisah. Metode diatas hanya gambaran sepintas saja walau sebenarnya bisa digunakan, namun mungkin belum maksimal dalam penggunaannya dan fungsinya. Atau bisa juga digunakan sebagai pancingan bagi anda yang ingin mengembangkan lebih rinci sesuai dengan pemahaman anda. Sampai ketemu dipembahasan artikel berikutnya, dan Happy Blogging :)

jQuery .submit() & Google Custom Search Engine

noreply@blogger.com (Hendriono Dede) — Wed, 11 Jul 2012 10:54:00 +0000

Bismillah. Alhamdulillah. Bagaimana dengan artikel sebelumnya tentang 'Membuat dan Memasang Google Custom Search Engine'? Mudah-mudahan telah berhasil dipasang pada blog anda. Kelemahan dari cara tersebut adalah ketika kita mengganti kata kunci (keyword) pada form input maka halaman hasil pencarian akan di-load (di panggil) ulang, dan reload halaman ini terjadi setiap mengganti kata kunci. Hal ini tentunya memperlambat proses pencarian dan kadang membuat kesal saat seseorang telah mencapai lelah untuk mencari sesuatu di internet. Bagaimana caranya agar halaman tidak di reload saat kita mengganti kata kunci lainnya, namun hasil pencarian tetap ditampilkan pada halaman tersebut? Disinilah kita membutuhkan bantuan script jQuery. jQuery .submit() yang akan mengambil alih event handler saat seseorang meng-klik tombol submit.

Demo jQuery Blogger Custom Searchn Engine

Deskripsi

Pada artikel sebelumnya, kita telah membahas tentang integrasi Google Custom Search Engine pada Blogger, namun bahasan materinya terlalu praktis bahkan nyaris tidak ada pemahaman materi yang lebih luas. Artikel tersebut justru hanya akan menjadi materi (copy paste) yang sangat sulit untuk dikembangkan lebih lanjut. Saya hanya berharap, dari setiap artikel yang diterbitkan, janganlah hanya tips trik yang instan tanpa mampu dipahami dengan baik namun lebih jauh anda mengembangkan sendiri sesuai imajinasi atau mungkin lebih sempurna. Mari kita sama-sama pelajari dan pahami.

jQuery .submit()

.submit() adalah metode lain atau metode yang lebih praktis untuk .bind('submit', handler) dalam variasi pertama, dan .trigger('submit') dalam variasi ketiga. Event submit akan dikirimkan ke sebuah elemen ketika pengguna mencoba untuk mengirimkan (submit) formulir (form). Form akan berhasil dikirimkan dengan meng-klik eksplisit <input type="submit">, <input type="image">, atau <button type="submit">, atau dengan menekan tombol Enter jika elemen form memiliki focus.

Harus diperhatikan pula bahwa event pengiriman formulir juga tergantung pada browser. Beberapa browser ada yang mampu mengirimkan formulir hanya dengan menekan tombol Enter jika input formulir berisi satu kolom teks, atau formulir bisa terkirim jika menekan tombol submit. Interface tidaklah harus bergantung pada perilaku tertentu, kecuali hal ini memang memaksa harus dengan mengamati event penekanan tombol untuk tombol Enter.

Sebagai contoh, perhatikan kode HTML dibawah ini:

<form id="target" action="tujuan.html">
 <input type="text" value="Ini hanya percobaan"/>
 <input type="submit" value="Kirim"/>
</form>
<div id="lain">
 Pemicu Lain
</div>

Event handler dibawah terlibat ke dalam form:

$('#target').submit(function() {
 alert('Handler untuk .submit() terpanggil');
 return false;
});

Ketika form (formulir) dikirimkan (submit), pesan akan tampil dengan isi "Handler untuk .submit() terpanggil". Hal ini terjadi sebelum pengiriman form yang sebenarnya, maksudnya seperti ini (sambil dibuka demonya disini):

Ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) untuk mengirimkan input text (<input type="text" value="Ini hanya percobaan"/>) dari form dengan id #target ke halaman tujuan (action="tujuan.html") maka input text tidak akan dikirimkan ke URL tujuan tetapi langsung diambil alih (handle) oleh jQuery .submit() dengan memanfaatkan fungsi .preventDefault(). Atau jika terjadi kesalahan fungsi maka akan dikembalikan pada handle sebelumnya (return false;). Fungsi .preventDefault() sering digunakan untuk menghentikan (pada kasus tertentu dapat mengambil alih) sebuah event agar tidak langsung disampaikan pada tujuan. Contoh penggunaan fungsi .preventDefault() ada pada artikel sebelumnya. [1], [2], [3]. Jika kita menggunakan fungsi event .submit() maka event .preventDefault() sudah termasuk didalamnya tanpa harus dituliskan pada kode. (Lumayan membingungkan... Ngopi dulu...)

Atau, kita juga dapat memanfaatkan pemicu event secara manual ketika elemen lain diklik, contoh script jQuery-nya seperti dibawah ini:

$('#lain').click(function() {
  $('#target').submit();
});

Setelah code diatas dieksekusi, kemudian kita klik pada "Pemicu Lain", hal ini juga akan menampilkan pesan yang sama, yaitu "Handler untuk .submit() terpanggil". Lihat demonya disini. Ingat! Jika tanpa kode jQuery diatas, maka ketika kita klik tombol submit (<input type="submit" value="Kirim"/>) maka browser akan menuju dan membuka halaman URL tujuan (action="tujuan.html"). (Mudah-mudahan ada lampu listrik menyala diatas kepala... Cling...)

Mekanisme Kerja Google Custom Search Engine

Setelah memahami fungsi dari event jQuery .submit(), sekarang kita akan mencoba memahami bagaimana Google Custom Search Engine bekerja. Perhatikan gambar dibawah ini:

Ketika kita membuat sebuah mesin telusur sendiri menggunakan fasilitas Google Custom Search Engine, maka proses index halaman demi halaman blog kita akan segera dimulai. Google Custom Search Engine akan melakukan pengumpulan data pada blog kita secara bertahap dan sesuai edisi yang digunakan. (Untuk Edisi gratis, jumlah index halaman terbatas). Ketika seseorang memasukan sebuah kata kunci (keyword) pada Input Form kemudian mengirimkannya (submit) pada Google API CSE, maka Google API CSE akan mengambil data dari index server Google CSE. Setelah ditemukan kecocokan dengan kata kunci yang dimasukan pada Input Form, Google API CSE akan mengambilnya dari server Google CSE dan kemudian mengirimkan hasil pengambilan data tersebut ke Halaman Hasil Pencarian.

jQuery Google Custom Search Engine

jQuery .submit() sudah dipahami, dan mekanisme kerja Google Custom Search Engine juga sudah dipahami, waktunya kita memodifikasi script bawaan Google Custom Search Engine. Pada artikel sebelumnya kita sudah mengetahui bahwa script dari Form Input dan Google Custom Search Engine seperti dibawah ini:

Kode Form Input

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Kode Google API Custom Search Engine

google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);

Hasil Perpaduan

Dibawah ini kode hasil perpaduan antara Google API CSE dengan jQuery .submit(). Saya tidak akan lagi menjelaskan secara detail, silahkan dipelajari untuk dipahami. Berikut hasil perpaduan kodenya:

$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});

Keterangan:

Pada dasarnya kita hanya mengalihkan proses load dan mengganti proses eksekusi kode Google API CSE. Pada mulanya load dilakukan dengan:

google.setOnLoadCallback

kemudian di ganti dengan:

$("#searchform").submit

ID #searchform diambil dari ID form (Jika memahami penjelasan sebelumnya, pasti paham fungsi event ini)

Kemudian mengganti eksekusi yang pada mulanya seperti dibawah ini:

for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
 var b = e[d].split("="),
  f = decodeURIComponent(b[0]);
 a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
}
a.q && c.execute(a.q, null, {
 oq: a.oq,
 aq: a.aq,
 aqi: a.aqi,
 aql: a.aql,
 gs_sm: a.gs_sm,
 gs_upl: a.gs_upl
})

menjadi seperti dibawah ini:

(a = $("#searchq").val()) && b.execute(a);
return !1

Namun hati-hati, saya telah melakukan perubahan nama variabel, dengan tujuan untuk membedakan, mana script Google API CSE yang asli, dan mana script Google API CSE hasil perpaduan dengan jQuery. Script hasil perpaduan ini memang harus diperhatikan dan dibandingkan dengan hati-hati.

Conditional Tag

Sudah dibahas diatas bahwa ketika kita menggunakan jQuery .submit() maka URL tujuan tidak akan dibuka oleh browser karena fungsi submit form diambil alih oleh jQuery. Ini akan memunculkan masalah ketika halaman hasil pencarian sedang tidak dibuka, maka keyword apapun yang kita masukan pada input form itu tidak akan menghasilkan apa-apa. Google API CSE tidak akan pernah memproses perintah apapun dari form jika halaman hasil pencarian sedang tidak dibuka. Jika demikian berarti kita membutuhkan suatu kondisi.

Kondisi ini akan mengatur kapan jQuery .submit() harus diload atau dieksekusi. Pada saat halaman yang sedang dibuka bukanlah halaman hasil pencarian maka input form masih menggunakan script Google API CSE aslinya, namun ketika halaman hasil pencarian sedang dibuka, maka jQuery .submit() juga telah dieksekusi dan siap untuk digunakan.

Solusi dari masalah ini adalah dengan menggunakan conditional tag, seperti contoh dibawah ini:

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
... Script jQuery Google API CSE ...
</b:if>

Bagaimana conditional tag ini bekerja? Silahkan baca disini.

Integrasi Pada Blog

Masih bingung? Mungkin harus mencoba dulu baru memahaminya. Kode jQuery Google API CSE dibawah ini silahkan digunakan pada blog anda. Ikuti langkahnya:

Langkah 1
Buka template blog anda
Langkah 2
Cari kode dibawah ini:

</body>

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

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});
//]]>
</script>
</b:if>

Langkah 4
Simpan Template

Keterangan:

Kode Google API CSE yang telah dimasukan sebelumnya jangan dibuang, karena kita membutuhkan loadernya.
Ganti URL /p/pencarian.html sesuai dengan URL halaman hasil pencarian anda.
Buang framwork jQuery jika blog anda telah memasang framework jQuery.
Samakan atau ubah ID #searchform pada jQuery sesuai dengan ID Form Input anda (misal ID form input; <form id="searchform").
Jangan lupa untuk mengganti 012345678901234567890:mdrcctmncrt sesuai dengan kode yang anda peroleh dari Google CSE.
Samakan atau ubah ID #searchq pada jQuery sesuai dengan ID Input anda (misal ID Input; <input id="searchq" name="q")

Kesimpulan

Mudah bukan? Dari pembahasan diatas mudah-mudahan anda memahami bagaimana cara kerja jQuery .submit() dan Google API CSE dengan baik, sehingga kedepannya anda bisa melakukan modifikasi dan perbaikan yang lebih baik lagi dari pada apa yang sudah dibahas di atas. Sampai ketemu dipembahasan berikutnya (Rencananya membuat Blogger Search Ajax API). Happy Blogging :)

Membuat dan Memasang Google Custom Search Engine

noreply@blogger.com (Hendriono Dede) — Mon, 09 Jul 2012 13:01:00 +0000

Bismillah. Alhamdulillah. Google memberikan keleluasaan kepada para penggunanya untuk melakukan berbagai modifikasi script, fungsi dan fasilitas yang tersedia secara gratis. Salah satu fasilitas yang cukup bagus adalah Google Custom Search Engine. Fasilitas ini disediakan bagi mereka yang ingin membuat sendiri mesin pencari sesuai dengan keinginan penggunanya. Kita bisa membuat mesin pencari layaknya Google Search untuk meng-index artikel atau informasi dari situs yang bisa kita tentukan sendiri atau dari kumpulan situs favorit kita. Bagi para blogger, banyak pula yang menggunakan Google Custom Search Engine ini sebagai mesin pencari blog sendiri yang khusus meng-index artikel pada blog yang dikelolanya. Bagaimana caranya?

Membuat Akun Google Custom Search Engine

Untuk membuat Google Custom Search Engine, maka syarat utamanya kita harus memiliki akun Google atau GMail. Jika sudah memiliki akun, ikuti langkah dibawah ini:

Langkah 1
Login ke Google dan masuk ke Halaman "Google Penelusuran Khusus"
Langkah 2
Jika anda sudah Login maka akan dihadapkan pada formulir dibawah ini:

Keterangan Gambar

Nama: Isilah dengan dengan Google Custom Search Engine (rekomendasi; sesuaikan dengan nama blog anda)
Deskripsi: Isi deskripsi mengenai fungsi mesin telusur yang anda buat, karena mesin telusur ini bersifat publik yang siapapun bisa menggunakannnya
Bahasa: Pilihlah bahasa yang sesuai dengan kemampuan anda (sayangnya tidak ada bahasa Jawa. #LOL)
Situs yang akan ditelusuri: Masukan alamat URL (tanpa http://) yang akan ditelusuri pada hasil pencarian. Jika khusus untuk blog pribadi, masukan satu URL alamat blog anda saja.
Edisi: Jika punya uang, beli saja yang $100 per tahun. Kalau seperti saya, tidak ada pilihan lain kecuali Edisi Standar GRATIS!. Perbedaannya antara limited dan unlimited konfigurasi. Silahkan temukan sendiri perbedaannya.
Jangan lupa checklist "Saya telah membaca dan menyetujui Persyaratan Layanan"

Langkah 3
Klik tombol "Lanjut"
Langkah 4
Lewati langkah ke 2 ini dengan klik tombol "Lanjut"
Langkah 5
Catat kode mesin telusur anda

Integrasi Google Custom Search Engine pada Blogger

Ada dua bagian untuk mengintegrasikan Google Custom Search Engine pada Blogger, yaitu:

A. Halaman Hasil Pencarian

Buatlah sebuah halaman sebagai tempat untuk menampilkan hasil pencarian. Bisa berupa halaman artikel atau halaman statis (pada contoh artikel ini menggunakan halaman statis).

Langkah 1
Pindahkan mode editor pada mode HTML (Jangan pada mode Compose!). Jangan lupa beri judul halaman.
Langkah 2
Masukan (copy paste) kode dibawah ini pada area artikel:

<div id="cse" style="width: 100%;">Tunggu Sebentar...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);
//]]></script>

Perhatian!

Kode diatas adalah kode yang sudah disesuaikan dengan karakter Blogger, namun anda bisa saja menggunakan kode bawaan Google Custom Search Engine.

Jangan lupa ganti kode dibawah ini:

012345678901234567890:mdrcctmncrt

dengan kode mesin telusur yang sudah anda peroleh.
Langkah 3
Terbitkan artikel atau halaman dan catat URL artikel atau halaman ini. Lanjutkan ke langkah berikutnya...

B. Form Input Keyword (Kata Kunci)
Jika pada blog anda sudah tersedia form pencarian, biasanya memiliki kode mirip seperti dibawah ini:

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Carilah kode diatas pada widget atau template dan hal yang harus diperhatikan adalah sebagai berikut:

action="/p/pencarian.html": ganti /p/pencarian.html dengan URL halaman yang sudah anda buat tadi (lihat A. Halaman Hasil Pencarian)
name="q": ini tidak bisa di tawar, karena mesin pencari akan menggunakan karakter unik "q" (query) untuk mengeksekusi kata kunci yang dimasukan pada input
type="submit": ini juga tidak bisa di tawar (bagi yang belum paham form) karena berfungsi untuk mengirimkan kata kunci input pada halaman yang ada pada action
Sedangkan untuk atribut lainnya silahkan sesuaikan

Proses pencarian ini dilakukan kurang lebih seperti dibawah ini:

Jika seseorang memasukan kata kunci pada form input name="q", kemudian meng-klik tombol type="submit" maka kata kunci akan dikirim pada halaman action="/p/pencarian.html" untuk diproses. Dan halaman /p/pencarian.html akan memproses kata kunci tersebut untuk menampilkan hasil yang relevan dengan menggunakan Google Custom Search Engine.

Template CSS Google Custom Search Engine

Jika anda kurang suka dengan perpaduan warna bawaan Google Custom Search Engine, silahkan lakukan modifikasi pada kode CSS-nya. Namun sebelum melakukan modifikasi pada kode CSS, buanglah kode dibawah ini:

style : google.loader.themes.V2_DEFAULT

dari kode Google Custom Search Engine (lihat A. Halaman Hasil Pencarian), kemudian tambahkan dan lakukan modifikasi pada kode CSS dibawah ini:

.gsc-control-cse {
 font-family: Arial, sans-serif;
 border-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-control-cse .gsc-table-result {
 font-family: Arial, sans-serif;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
 border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
 border-color: #802020;
 background-color: #660000;
 background-image: none;
}
.gsc-tabHeader.gsc-tabhInactive {
 border-color: #CCCCCC;
 background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
 border-color: #CCCCCC;
 border-bottom-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-tabsArea {
 border-color: #CCCCCC;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
 border-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
 border-color: #EEEEEE;
 background-color: #F9F9F9;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
 color: #802020;
}
.gsc-cursor-page {
 color: #802020;
}
a.gsc-trailing-more-results:link {
 color: #802020;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
 color: #000000;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
 color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
 color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
 display: none;
}
.gs-webResult div.gs-visibleUrl-long {
 display: block;
}
.gs-promotion div.gs-visibleUrl-short {
 display: block;
}
.gs-promotion div.gs-visibleUrl-long {
 display: none;
}
.gsc-cursor-box {
 border-color: #FFFFFF;
}
.gsc-webResult.gsc-result.gsc-promotion {
 border-color: #F6F6F6;
 background-color: #F6F6F6;
}
.gsc-completion-title {
 color: #802020;
}
.gsc-completion-snippet {
 color: #000000;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
 color: #1155CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
 color: #1155CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
 color: #1155CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
 color: #1155CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right *  {
 color: #666666;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
 color: #009933;
}

Kesimpulan

Google Custom Search Engine ini bisa diintegrasikan dengan Google Adsense jika anda memiliki akunnya. Integrasi dengan Google Adsense dilakukan pada konfigurasi Mesin Telusur bukan pada kode yang telah dibahas diatas. Kelemahan menggunakan mesin telusur ini adalah halaman yang selalu di-reload jika kita mengubah kata kunci pencarian. Bagaimana jika ingin halaman ini tidak di-reload apabila kita mengganti kata kunci? Nantikan pada pembahasan berikutnya. Silahkan anda bereksperimen dan memodifikasinya sendiri sesuai keinginan dan imajinasi. "Bagaimana jika kita membuat sendiri mesin pencari dengan memanfaatkan Blogger JSON API?" In Progress Trial and Error...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar:

Blogger Meta Description

noreply@blogger.com (Hendriono Dede) — Sat, 07 Jul 2012 10:38:00 +0000

Bismillah. Alhamdulillah. Bagian ini sering terlupakan atau bahkan tidak mendapat perhatian dari para pengguna Blogger. Mereka seakan menganggap meta description sebagai sebuah hal yang biasa saja tanpa pengaruh yang besar. Meta description adalah bagian vital blog yang berisi informasi tentang blog dan artikel-artikel yang ditulis. Meta description tidak akan ditampilkan oleh browser namun diperlukan oleh machine-readable metadata untuk mengurai isi situs. Tanpa meta description maka blog akan sangat sulit dirayapi oleh mesin pencari. Pada bahasan sebelumnya tentang Metadata Open Graph sudah banyak diulas tentang keberadaan dan posisi meta description bagi mesin pencari dan situs lain. Salah satunya bahwa, situs lain akan menampilkan situs blog kita pada situs mereka dengan mengambil informasinya dari meta description.

Deskripsi

Sesuai dengan perubahan kebijakan mesin pencari dalam merayapi suatu situs, maka blogger menyediakan fasilitas meta description agar para pengguna blogger tidak tersisihkan dimata mesin pencari. Bahkan fasilitas ini dikeluarkan ketika Google belum mengeluarkan kebijakan penghapusan meta keyword dari index mesin pencarinya. Matt Cutts sebagai seorang senior engineer di mesin pencari Google menyebutkan bahwa "kami mengabaikan dan tidak lagi menggunakan meta keyword untuk mengindex suatu situs namun kami menggunakan meta description untuk merayapi suatu situs" hal ini menjadi penegasan bahwa mereka (mesin pencari) tidak perlu dan tidak menganggap keberadaan meta keyword namun mereka sangat memperhatikan meta description. Dalam video yang diunggah pada Youtube, Matt Cutts menyebutkan "jangan habiskan waktu anda untuk mengumpulkan berbagai keyword karena kami telah mengabaikan meta keyword, sekarang konsentrasi-lah untuk membuat meta description yang menarik bagi pengunjung".

Perhatikan screenshoot dibawah ini:

Facebook dan Goole Plus menampilkan meta description Blogger Tune-Up. Apa yang ditampilkan pada Facebook dan Google Plus bukanlah paragraph awal atau isi artikel namun itu adalah meta description. Meta description berisi informasi yang unik pada setiap halaman artikel. Ini berarti meta description bersifat dinamis dan berbeda disetiap halaman artikel. Seorang Blogger harus menuliskan meta description pada masing-masing artikel.

Mengaktifkan Meta Description

Jika anda menggunakan template bawaan blogger sudah tentu meta description terintegrasi didalamnya, namun tidak demikian bagi para pengguna custom template. Meta description biasanya harus dimasukan secara manual atau mungkin sebenarnya sudah tersedia namun terkadang tidak tahu maksudnya. Mari kita aktifkan meta description.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Setelan - Preferensi Penelusuran - Tag Meta"

Langkah 3
Klik "Edit" pilih "Ya" pada "Aktifkan deskripsi penelusuran?"

Langkah 4

Isi meta description dengan karakter maksimum 150 karakter. Setelah di isi klik tombol "Simpan perubahan"

Keterangan: Meta description ini akan digunakan hanya pada halaman utama (halaman index atau halaman beranda) sedangkan untuk masing-masing artikel, kita harus menuliskannya lagi.

Memeriksa Ketersediaan Meta Description

Untuk meyakinkan bahwa meta description telah terintegrasi pada blog kita, lakukan pemeriksaan pada dua lokasi berikut, yaitu:

Pada Editor Entri
Langkah 1
Buat sebuah artikel
Langkah 2
Perhatikan pada sidebar editor, harus sudah bertambah satu widget "Deskripsi Penelusuran"

Langkah 3

Klik "Deskripsi Penelusuran" dan masukan deskripsi artikel pada kotak dibawahnya, setelah itu klik tombol "Selesai"

Keterangan: Deskripsi Penelusuran ini akan menggantikan deskripsi global, dan deskripsi ini akan digunakan mesin pencari untuk mengurai isi artikel anda. Meta Description ibarat ringkasan dari artikel yang anda tulis, makanya, buatlah deskripsi yang menarik. Deskripsi artikel tidak akan ditampilkan pada browser namun akan diambil oleh mesin pencari (machine-readable metadata) dan situs lain (misal Facebook dan Google Plus).

Pada Template
Langkah 1
Masuk ke "Template - Edit HTML - Lanjutkan"
Langkah 2
Scroll hingga di temukan kode dibawah ini:

<meta expr:content='data:blog.metaDescription' name='description'/>

Jika tidak ditemukan berarti blog anda belum menggunakan meta description walau sudah diaktifkan, ikuti langkah penyisipan kode berikutnya.

Langkah 3
Jika template belum menerapkan meta description, cari kode dibawah ini:

<b:include data='blog' name='all-head-content'/>

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

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Keterangan: Mengenai conditional tag silahkan baca disini
Langkah 6
Simpan template

Memeriksa Meta Description

Setelah meta description diaktifkan, dan artikel yang disertai meta descriptioan diterbitkan maka lakukan pengecekan untuk memastikan bahwa meta description sudah aktif pada blog anda. Lakukan langkah berikut:

Langkah 1
Lihat artikel yang sudah disertai meta description
Langkah 2

Gunakan kombinasi tombol keyboard CTRL + U (pengguna Firefox dan Chrome) atau klik kanan pada area artikel dan pilih "View source" (pengguna Safari) untuk melihat source code blog anda, dan perhatikan meta deskripsi yang baru saja anda buat. Atau gunakan kata kunci "name='description'" menggunakan pencarian browser. Jika sudah tampil seperti apa yang anda tuliskan pada artikel berarti meta description pada blog anda sudah aktif, lakukan share pada Facebook atau Google Plus, maka yang akan ditampilkan adalah meta description, bukan penggalan artikel.

Video Penggunaan Meta Description

Dibawah ini adalah video yang dijelaskan oleh Matt Cutts tentang penggunaan meta description dan pengabaian meta keyword.

Kesimpulan

Penambahan meta description berarti menambah daftar pekerjaan anda, karena artikel-artikel sebelumnya mungkin tidak disertai meta description. Ini berarti sekarang anda harus memasukannya satu persatu. Huh!!! Sangat melelahkan, bayangkan jika artikel sudah mencapai 500 halaman? Namun itulah sebuah konsekwensi dari sebuah kebijakan. Google memiliki kebijakan maka blogger mau tidak mau harus mengikuti, kecuali jika kita tidak peduli dengan semua perubahan itu.

Apakah meta description adalah salah satu teknik SEO? Ma'af saya bukan ahli SEO dan tidak tahu tentang SEO. Blogger Tune-Up hanya menuliskan artikel sesuai dengan standar yang belaku dan tidak dimaksudkan untuk bermain SEO. Semantic Web adalah pendekatan situs terhadap mesin pencari, dan meta description adalah bagian dari semantic web. Jadi, SEO atau bukan tidaklah menjadi tujuan, tetap menulis untuk konsumsi manusia itu lebih baik dari pada menulis untuk konsumsi mesin.

Pranala Luar:

Blogger Widget - Cumulus Label Cloud

noreply@blogger.com (Hendriono Dede) — Sat, 07 Jul 2012 07:36:00 +0000

Bismillah. Alhamdulillah. Rehat dari bahasan berat, kali ini membahas yang ringan dan praktis saja, yaitu memasang widget cumulus label cloud di Blog. Widget cumulus label cloud ini ternyata masih terus dikembangkan setelah pada mulanya dibuat oleh Roy Tanck khusus untuk pengguna Wordpress dengan nama WP Cumulus Tag Cloud. Minimus kemudian mengembangkannya untuk versi Blogger karena pada Blogger tidak ada fasilitas tag jadi mungkin lebih tepatnya diberi nama Blogger Cumulus Label Cloud. Masih tetap menggunakan flash seperti pendahulunya, hanya ditambahkan beberapa fasilitas untuk mempercantik tampilan, seperti; penambahan angka sesuai dengan jumlah artikel pada label tersebut, penambahan kotak label ketika mouse hover, pengaturan warna untuk label, dan semakin mudah dalam penerapannya. Mau mencoba?

Demo Blogger Widget Cumulus Label Cloud

Integrasi Widget Cumulus pada Blogger

Tidak seperti sebelumnya, Cumulus ini cukup mudah dalam pemasangannya, ikuti langkah dibawah ini:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Tata Letak
Langkah 3
Tambahkan sebuah Gadget

Langkah 4
Pilih "Tambahkan Milik Anda"

Langkah 5
Masukan (copy paste) link dibawah ini pada bagian URL kemudian klik "Tambah URL":

http://henscripts.googlecode.com/svn/trunk/tag/cumulus.xml

Langkah 7
Atur konfigurasi dengan menyesuaikan pada Template yang anda gunakan

Langkah 8
Simpan widget dan preview blog anda...

Pengaturan

Dibawah ini pengaturan untuk Cumulus Label Cloud. Ubahlah sesuai dengan keinginan anda.

Judul Label - Ubah sesuai dengan Judul Gadget.
Tinggi - Ubahlah sesuai tinggi gadget.
Tinggi Cloud - Ubah tinggi dalam satuan pixel, harus diperhatikan pula tinggi widget yang anda gunakan.
Lebar Cloud - Ubah lebar dalam satuan pixel, harus diperhatikan pula lebar widget yang anda gunakan.
Ukuran Huruf Min - Atur ukuran minimum font dari label, ini akan tampil sebagai label cloud terkecil pada widget.
Ukuran Huruf Maks - Atur ukuran maksimum font dari label, ini akan tampil sebagai label cloud terbesar pada widget.
Warna Label Min - Aturlah warna label ukuran terkecil. Warna ini akan mempengaruhi warna huruf terkecil saat rotasi pada widget.
Warna Label Maks - Aturlah warna label ukuran terbesar. Warna ini akan mempengaruhi warna huruf terbesar saat rotasi pada widget.
Warna Hover - Aturlah warna yang akan muncul saat mouse hover, warna ini mempengaruhi kotak, huruf dan angka label.
Kecepatan Rotasi - Mengatur kecepatan perputaran awan.
Warna Latar - Untuk mengatur warna latar belakang (background) label cloud.
Mode Transparan - Menetapkan warna latara belakang label cloud yang transparan.
Tampilkan Penanda - Menunjukkan jumlah label ketika Anda menggeser kursor mouse di atas label.

Kesimpulan

Disediakannya Blogger API memang mempermudah konektifitas antara satu aplikasi dengan aplikasi lainnya, lebih cepat dan lebih ringan, dan salah satunya adalah Blogger Cumulus Label Cloud ini. Beberapa masa yang lalu, untuk memasang cumulus label cloud ini sangatlah ribet dan rumit, namun sekarang pengguna awam pun bisa dengan mudah menggunakannya. Widget ini bersifat opsional atau tambahan. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Rich Snippets - Microformat & Microdata

noreply@blogger.com (Hendriono Dede) — Thu, 05 Jul 2012 14:27:00 +0000

Bismillah. Alhamdulillah. Berawal dari rasa penasaran dengan perkembangan standar bahasa HTML dan tingkah laku mesin pencari, juga rasa penasaran dengan gencarnya para Blogger membahas "cara menampilkan bintang pada hasil penelusuran Google" yang secara garis besar para Blogger baik lokal maupun global hanya membahas cara-caranya saja tanpa detail maksud dan tujuan hingga memperoleh bintang pada hasil penelusuran. Muncul berbagai pertanyaan dalam benak saya secara pribadi. Untuk apakah jika kita memperoleh bintang? Berpengaruhkan hal tersebut terhadap blog kita dihadapan mesin pencari? dan lain sebagainya. Hingga terjadilah pertemuan dengan istilah Rich Snippet yang sedang hangat dibahas, terutama Google yang gencar memperkenalkan Rich Snippet pada para webmaster. Masih hangat beberapa saat yang lalu, Blogger Tune-Up membahas tentang metadata dengan standar Open Graph, sekarang akan dibahas yang mirip-mirip namanya tetapi berbeda fungsinya yaitu microdata dan microformat. Apa perbedaan microdata dan microformat? Dan apa hubungannya dengan Rich Snippet? Atau justru masih bertanya, apa Rich Snippet? Mari sama-sama menyimak artikel ini.

Apa dan Untuk Apa Rich Snippet?

Jika diterjemahkan perkata mungkin akan menghasilkan persepsi yang berbeda. Rich Snippet dalam bahasa Indonesia berarti sama dengan Sisipan Kaya. Sesuai dengan namanya maka Rich Snippet digunakan untuk memperjelas atau memberikan deskripsi tambahan dari suatu situs agar pengunjung dengan mudah menemukan target yang dicarinya. Silahkan anda perhatikan mesin pencari dalam menampilkan suatu kata kunci, semakin sedikit situs spam yang menggunakan black hat SEO ter-index pada mesin pencari hal ini salah satunya dipengaruhi oleh Rich Snippet. Jika suatu situs menambahkan Rich Snippet sama persis seperti situs resminya maka situs tersebut dianggap sebagai situs sampah. Sisipan Kaya berfungsi untuk menambahkan atau melengkapi informasi yang penting untuk diketahui oleh pengguna internet. Misal; Kita akan mencari suatu aplikasi dengan nama "Tune Up Utilities" namun lupa nama lengkap aplikasi tersebut, yang kita ingat hanya kata "Tune Up". Ketika kita mencari aplikasi tersebut dengan kata kunci "Tune Up" pada mesin pencari maka akan disuguhkan sederet situs yang beragam, beberapa kemungkinan yang bisa saja muncul pada mesin pencari adalah sebagai berikut:

Tune-Up yang berhubungan dengan blog ini
Tune-Up yang berhubungan dengan mesin
Tune-Up yang berhubungan dengan aplikasi

Perhatikan screenshoot hasil pencarian dengan kata kunci "Tune Up" dibawah ini:

Situs mana yang akan diklik? Dapat dipastikan pengguna internet akan meng-klik "Tune Up Utilities 2012 - CNET Download.com" sesuai tujuannya untuk memperoleh informasi lengkap tentang aplikasi tersebut. Nomor 1 itulah yang kemudian dikenal dengan Rich Snippet yang berisi informasi sisipan tentang:

Rating
Penulis Ulasan
Harga
Sistem Operasi
Kategori Aplikasi

Dan kecil kemungkinan pengguna nyasar ke situs "Blogger Tune Up". Disinilah fungsi Rich Snippet yang membuat mesin pencari lebih mudah untuk digunakan oleh pengguna yang awam sekalipun. Index mesin pencari pun semakin mendekati sasaran yang benar-benar dibutuhkan oleh pengguna internet. Rich Snippet akan memberikan informasi yang sangat berguna bagi pengguna.

Sedangkan Nomor 2 pada gambar biasanya diambil dari meta description.

Manusia Pertama, Mesin Kedua

Human First, Machines Second adalah kalimat yang selalu ditekankan oleh para webmaster. Intinya, ketika kita membuat sebuah situs maka hal yang pertama harus diperhatikan adalah para pengunjung baik itu dari sisi usability dan accessibility. Sedangkan mesin adalah prioritas kedua dalam membangun sebuah situs. Tim Berners - Lee menyebutkan:

... berbagai informasi penting dalam desain web digunakan untuk konsumsi manusia, dan ... stuktur data tidak ditujukan untuk robot web browsing. ... Semantic Web disusun dalam membantu pendekatan bahasa untuk mengekspresikan informasi kedalam sebuah mesin pemrosesan formulir.

Tim Berners - Lee

Dari penjelasan diatas dapat diambil kesimpulan bahwa pada dasarnya desain web itu mengutamakan manusia namun ketika kita menyusun web dengan aturan semantic berarti kita juga melakukan pendekatan pada mesin. Semantic berada diantara web desainer dan mesin yang digunakan sebagai media untuk saling berkomunikasi dan Rich Snippet harus disusun sesuai dengan Semantic Web.

Kenapa Harus Menambahkan Rich Snippet?

Kebanyakan para webmaster sangat familiar dengan tag HTML dalam menyusun halam web. Dan biasanya tag HTML ditulis untuk memberitahu browser bagaimana menampilkan informasi yang ada didalam tag. Sebagai contoh; <h1>Tune Up</h1>. Tag ini berarti memberitahu browser untuk menampilkan string teks "Tune Up" dalam format heading 1 (Judul 1). Namun, tag HTML ini tidak memberikan informasi apa-apa tentang arti string teks tersebut. Apakah string teks "Tune Up" tersebut merupakan sebuah aplikasi, sebuah blog, atau tentang mesin? Sehingga hal ini menjadi sangat sulit bagi mesin pencari untuk menampilkan informasi yang relevan kepada pengguna internet. Dimulai dari permasalah inilah kemudian mesin pencari (Google, Yahoo!, Microsoft dan Yandex) memperkenalkan Rich Snippet agar hasil pencarian mereka menjadi lebih relevan sesuai dengan apa yang dicari pengguna internet.

Seperti dijelaskan diatas bahwa untuk menyusun Rich Snippet, kita harus mengikuti aturan main semantic agar web yang kita susun mampu dengan mudah dibaca oleh mesin pencari. Dalam menyusun Rich Snippet para webmaster menyarankan dua format yaitu microdata dan microformat. Format microdata dan microformat sebenarnya merupakan pengembangan dari bahasa mark up, sehingga dalam penggunaannya pun terintegrasi didalam tag-tag HTML yang sudah ada. Namun tidak menutup kemungkinan untuk menyusun Rich Snippet didalam tag HTML secara terpisah.

Apa Microformat dan Microdata?

Microdata hampir sama dengan microformat, karena keduanya merupakan perkembangan bahasa markup yang masih termasuk kedalam machine-readable metadata (mesin pembaca metadata) untuk menguraikan konten web. Tag HTML, Microdata dan Microformat adalah bahasa markup unik yang saling melengkapi satu sama lain dan ketiganya sangat membantu mesin pencari dalam merayapi halaman-halaman web. Diantara ketiganya, microdata merupakan perkembangan bahasa markup terbaru yang keberadaannya memberikan persaingan selaras terhadap microformat yang menggunakan standar RDFa. Dalam penggunaannya, sebenarnya para webmaster bebas untuk menentukan format markup-nya, boleh menggunakan microformat saja, microdata saja atau menggunakan keduanya. Namun webmaster terutama Google menyarankan penggunaan kedua format tersebut.

Microformat didesain untuk berbagai jenis konten web secara umum. Mereka terintegrasi didalam markup dan atribut yang sebenarnya mudah untuk dipahami dan digunakan. Dan mereka sangatlah sederhana karena menggunakan kosakata pre-defined, misal; fn, author, rel, vcard, updated, dan sebagainya. Microformat menggunakan format standar yang didefinisikan oleh microformat.org.

Contoh penggunaan microformat:

<dl class="vcard">
 <dt class="fn"><a href="http://modification-blog.blogspot.com" class="url">Hendriono</a></dt>
 <dd class="title">Web Desain</dd>
 <dd class="adr"><span class="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region">JABAR</abbr> <span class="postal-code">46383</span></dd>
</dl>

Perhatikan nilai dari atribut class (vcard, fn, url, title, adr, locality, region, postal-code). Dari contoh diatas dapat diambil kesimpulan bahwa microformat bisa diintegrasikan didalam atribut class, dan dapat digunakan bersama dengan CSS. (Insya Allah artikel berikutnya akan membahas tentang Microformat secara detail)

Microdata adalah bagian dari spesifikasi HTML5. Namun juga tergantung pada perubahan kosakata dan atribut baru dalam penerapan metadata. Dan itu tidak dibatasi untuk setiap jenis tertentu dari konten web, untuk dapat menjelaskan konten unik yang tidak mampu ditangani oleh Microformat. Selanjutnya, microdata dapat menggunakan notasi DOM, yang dapat membuat parsing metadata lebih mudah.

Ada dua standar kosakata microdata yang digunakan saat ini yaitu kosakata dari data-vocabulary.org dan kosakata dari schema.org. Namun dari keduanya, beberapa webmaster terutama Google menyarankan penggunaan kosakata dari schema.org, dengan alasan kosakata schema.org lebih banyak dan lebih fleksibel dari pada kosakata data-vocabulary. Walau contoh yang diberikan oleh Google masih menggunakan data-vocabulary namun disarankan pada webmaster untuk menggunakan Schema yang lebih banyak kosakatanya dan kemungkinan kedepannya, data-vocabulary tidak lagi digunakan.

Contoh penggunaan microdata:

<dl itemscope itemtype="http://schema.org/Person">
 <dt itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
 <dd itemprop="title">Web Desain</dd>
 <dd itemprop="address" itemscope itemtype="http://schema.org/Address">
  <span itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" itemprop="region">JABAR</abbr> <span itemprop="postal-code">46383</span>
 </dd>
</dl>

Nah, sekarang kita bisa membedakan, mana syntaks microformat dan mana syntaks microdata. Keduanya jelas memiliki perbedaan syntaks, microdata menggunakan itemscope untuk sinkronisasi dengan kosakata dan itemtype untuk deklarasi spesifik kosakata yang akan digunakan. Sedangkan itemprop adalah deklarasi masing-masing item yang harus sesuai dengan jenis kosakata (itemtype) yang digunakan.

Misal contoh diatas jika saya baca sebagai mesin; Tujuannya adalah memperkenalkan siapa Hendriono, maka syntaks wajibnya adalah itemscope. Kemudian menentukan jenis kosakata yang akan digunakan dalam memperkenalkan diri, maka syntaks itemtype spesifik mengarah pada perpustakaan http://schema.org/Person. Sedangkan itemprop adalah deklarasi masing-masing item; name, title dan address. Disana ada lagi penambahan kosakata lain yaitu http://schema.org/Address karena alamat memiliki begitu banyak item lainnya (dalam contoh; locality, region, postal-code). Apakah susunannya harus selalu seperti itu? Tidak...

Contoh diatas hanya menggunakan logika sederhana;

Siapa namanya? Hendriono
Apa hobinya? Web Desain
Dimana alamatnya? (Nah, pada pertanyaan ini, kita akan membutuhkan banyak sekali item jawaban, misal; Kabupaten, Propinsi, Kode POS, Nomor Telephone dan lain sebagainya, maka dibutuhkan sebuah kosakata lagi)

Jika masih bingung, Insya Allah kedepan tentang microdata ini akan dibahas lebih detail.

Walaupun memiliki perbedaan syntaks dan perbedaan standar namun microdata dan microformat bisa di-integrasikan secara bersama-sama. Dibawah ini contoh perpaduan Microformat dan Microdata:

<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">
 <dt class="fn" itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
 <dd class="title" itemprop="title">Web Desainer</dd>
 <dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
  <span class="locality" itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region" itemprop="region">JABAR</abbr> <span class="postal-code" itemprop="postal-code">46383</span>
 </dd>
</dl>

Warning Microformat Google Webmaster Rich Snippets

Saya secara pribadi sempat bingung dengan beberapa warning yang ditampilkan saat melakukan pemeriksaan Rich Snippet. Namun warning default yang ditampilkan Tool Rich Snippet biasanya terdiri dari tiga jenis (tidak menutup kemungkinan lebih banyak lagi) warning dan semua itu kesalahan secara default dari microformat blogger (bukan dari microdata):

Warning: Missing required hCard "author"

<span class='post-author vcard'>
 <a class='url fn' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a>
</span>

Warning ini diatasi dengan menambahkan kode class='url fn'. url menunjukan link url author dan fn menunjukan nama lengkap (full name)

Warning: Missing required field "updated"

<abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Warning ini diatas dengan menambahkan kode class='updated published' yang menunjukan waktu diterbitkan dan waktu diupdatenya artikel.

Warning: Missing required field "entry-title"

<h2 class='post-title entry-title'>

Warning diatas diatasi dengan menambahkan entry-title pada class, untuk menunjukan judul artikel.

Situs wiki microformats.org menuliskan beberapa issue untuk para pengguna blogger, diantaranya:

Template baru menggunakan "main" untuk identifikasi global semua artikel (entri)
Template baru menggunakan "post" untuk identifikasi masing-masing artikel blog
Template baru menggunakn "post-title" untuk identifikasi judul artikel

Untuk mengetahui issue baru silahkan kunjungi secara teratur situs wiki microformats.org.

Video Rich Snippet dari Google Webmaster

Video dibawah ini dibahas oleh tim Google Webmaster khusus tentang Rich Snippet. Video-video terbaru akan ditambahkan kemudian.

Introduction to Rich Snippets

Types of Rich Snippets

Rich Snippets - Product Search

Rich Snippets - Reviews

Rich Snippets - Recipe markup

Rich Snippets - Events

Rich Snippets - Breadcrumbs

Rich Snippets - Apps

Rich Snippets - Notifying Google

Rich Snippets - Troubleshooting

When will Rich Snippets become widely available?

Kesimpulan

Artikel diatas mungkin belum memenuhi harapan akan keingintahuan tentang semantic microformat dan microdata. Artikel ini hanya pancingan agar kita jangan telalu cepat menggunakan trik-trik yang dibahas luas oleh pada blogger tanpa tahu tujuannya dan efeknya untuk blog kita. Hati-hati dalam menerapkan kode, script atau tutorial sepintas tanpa penjelasan, karena ketidaktahuan fungsi bisa membuat kita masuk dalam kotak sebagai bagian dari Blogger yang menerapkan Black Hat SEO. Dan Black Hat SEO membuat blog kita dianggap sampah oleh mesin pencari.

Lalu apakah microformat dan microdata adalah bagian dari teknik SEO. Ma'af saya bukan ahli SEO dan tidak tahu tentang SEO, saya menulis artikel ini hanya mengikuti aturan main dan standar yang ada. Blogger Tune-Up masih tetap berkomitmen "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi". Sampai ketemu pada pembahasan berikutnya. Happy Blogging :)

Open Graph Metadata Untuk Blogger

noreply@blogger.com (Hendriono Dede) — Sat, 30 Jun 2012 13:47:00 +0000

Bismillah. Alhamdulillah. Bingung dengan judul artikel ini? Saya juga bingung menentukan judul artikel kali ini, namun bahasan materinya tidaklah terlalu rumit dengan catatan bahwa pembaca artikel ini pernah menggunakan Facebook dan Blogger. Kenapa tidak menggunakan judul "Memperbaiki Snippet Deskripsi Blogger pada Facebook"? Atau "Menampilkan Deskripsi dan Gambar Artikel Blog pada Facebook?" dan lain sebagainya. Judul tersebut sepertinya terlalu praktis untuk digunakan dan mesin pencari sudah terlalu bingung dengan artikel-artikel tersebut. Artikel kali ini masih terkait dengan dua artikel sebelumnya yang membahas Integrasi Blogger Facebook. Fokus materi kali ini adalah Open Graph Protocol. Apa Open Graph? Apa hubungan Open Graph dengan Blogger, Facebook, Twitter dan situs jejaring sosial lainnya? Mari kita diskusikan...

Deskripsi

Blog adalah sebuah objek dihadapan jejaring sosial dan jejaring sosial mau tidak mau harus diakui sudah menjadi subjek bagi para pengguna internet didunia maya. Ketika seseorang membuka jejaring sosial maka mereka berharap dapat bertemu dengan teman-teman lama dan teman baru, menemukan ide-ide baru atau menemukan berbagai ilmu baru, untuk itulah saya menempatkan jejaring sosial menjadi sebuah subjek. Artikel yang kita buat pada blog dapat menjadi sebuah objek yang dapat digunakan untuk memperkaya konten jejaring sosial. Blog-blog dengan artikel-artikel menarik seringkali dibagikan via jejaring sosial, dan trafik pengunjung juga cukup signifikan berasal dari para pengguna jejaring sosial. Lalu bagaimana agar sebuah blog dapat terhubung dengan jejaring sosial dan mampu memperkaya konten jejaring sosial? Sederhananya, bagaimana agar blog kita bisa menjadi salah satu objek pada jejaring sosial?

Open Graph Protocol atau Protokol Grafik Terbuka menjadi sebuah standar yang disepakati bersama antar para pengembang jejaring sosial dan digunakan untuk menghubungkan sebuah objek (blog dan lain sebagainya) dengan subjek (jejaring sosial). Open Graph Protocol memungkinkan halaman web untuk menjadi sebuah objek pada Grafik Sosial (Social Graph). Salah satu situs jejaring sosial yang menggunakan Standar Open Graph Protocol adalah Facebook selain Twitter dan Google. Dengan standar Open Graph ini memungkin halaman-halaman blog kita memiliki fungsi dan posisi sama seperti halnya objek-objek lain pada Facebook.

Blog merupakan situs yang berdiri sendiri, Facebook juga demikian merupakan situs yang berdiri sendiri dan Open Graph berada diantara keduanya agar saling berhubungan dan saling berkomunikasi satu sama lain. Open Graph digunakan sebagai protokol standar untuk mengkombinasikan satu sama lain agar menjadi satu bagian, hal ini karena teknologi dan skema yang berbeda diantara para pengembang teknologi. Tidak ada satu teknologi yang menyediakan informasi sangat melimpah dan beragam yang mampu menandingi konsep Sosial Graph dan Open Graph Protocol dikembangkan berdasar pada teknologi Social Graph. Lalu dimana posisi API (Javascript SDK) yang sudah kita buat sesuai dua artikel sebelumnya? Sederhananya; API adalah kendaraan dan Open Graph Protocol adalah jalan penghubung.

Dasar Metadata

Setiap objek digital seharusnya memiliki metadata, bahkan sebuah photo yang kita sebar memalui internet itu memiliki metadata. Metadata berisi informasi tentang objek tersebut. Misal; sebuah photo memiliki informasi tentang; luas area photo, kepadatan pixel, tipe kamera, model kamera, waktu memotret, versi software, posisi objek tersebut diambil dan lain sebagainya. Informasi-informasi yang ada pada photo tersimpan pada metadata.

Untuk mengaktifkan halaman-halaman blog agar menjadi objek grafik (Graph Object) maka kita harus menambahkan metadata dasar pada halaman blog. Open Graph telah menyiapkan metadata yang berdasarkan pada standar protokol RDFa. Untuk menambahkan metadata pada halaman blog, berarti kita harus memasukan tag <meta> pada bagian <head>. Didalam metadata inilah tersimpan informasi tentang blog dan metadata tidak akan ditampilkan pada browser karena metadata layaknya sebuah informasi yang akan diambil dan ditampilkan apabila diakses oleh situs lain.

Proses Pengambilan Metadata

Dibawah ini gambaran proses sederhana ketika Facebook mengambil informasi metadata dari Blog.

Dari gambar diatas dapat diambil kesimpulan sebagai berikut:

Ketika pengunjung membuka halaman blog anda dan kemudian melakukan aksi (misal; suka, rekomendasi, berbagi dan lain-lain) melalui aplikasi yang sudah terintegrasi pada blog, maka...
Aplikasi akan mengirimkan aksi tersebut ke Facebook melalui otentikasi akun pengguna, jika pengguna belum melakukan login pada Facebook, maka aplikasi akan memintanya untuk login (dibahas pada artikel sebelumnya).
Facebook kemudian mengambil informasi halaman yang dikirim oleh pengguna melalui metadata yang disediakan pada halaman blog tersebut.

Beberapa saat yang lalu banyak beredar tutorial blog membahas tentang cara memperbaiki deskripsi blog yang tidak muncul pada Facebook, salah satunya membahas dengan cara menambahkan tag <p> pada awal artikel blog. Cara ini jelas bukan cara terbaik dan merupakan metode yang tidak sesuai dengan Social Graph Protocol, walaupun memang berhasil namun hal tersebut tidak sesuai standar dasar metadata.

Standar Metadata Open Graph

Sifat dasar metadata untuk halaman-halaman situs harus sesuai dengan protokol Social Graph. Sudah menjadi kesepakatan bersama bahwa protokol yang digunakan sebagian besar pengembang jaringan sosial adalah standar protokol Open Graph. Dibawah ini empat sifat Metadata Open Graph yang diperlukan untuk setiap halaman, yaitu:

og:title - Judul objek yang akan ditampilkan dalam grafik (misal; "Tampilkan Deskripsi Blog pada Facebook").
og:type - Ini jenis obyek halaman blog Anda (misal; "article"). Ini tergantung pada jenis yang Anda tentukan, properti lainnya silahkan baca pada halaman dokumentasi Open Graph.
og:image - Sebuah URL gambar yang mewakili objek dalam grafik. URL ini diambil dari halaman blog anda.
og:url - URL Canonical dari objek yang akan digunakan sebagai ID tetap dalam grafik (misal; "http://modification-blog.blogspot.com/metadata-tag.html").

Contoh Metadata Open Graph

Dibawah ini adalah contoh metadata standar Open Graph yang harus ada pada halaman situs, yaitu:

<html prefix='og: http://ogp.me/ns#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta property='og:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta property='og:type' content='article'/>
<meta property='og:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta property='og:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>

Metadata ini diambil dari standar Open Graph yang secara global berlaku pada semua pengembang jejaring sosial baik itu Facebook, Twitter maupun Google Plus. Empat sifat dasar diatas adalah standar kesepakatan bersama, sedangkan properti lain adalah bersifat tambahan. Untuk properti lain dari Metadata Open Graph silahkan merujuk kesitus Open Graph.

Metadata Facebook

Setiap situs pasti punya kebijakan sendiri tentang pengunaan metadata, begitu pula dengan Facebook. Situs jejaring sosial ini menambahkan beberapa sifat dasar metadata sebagai hal wajib jika ingin terkoneksi dengan baik. Berikut sifat dasar Metadata Facebook, yaitu:

fb:app_id - Ini berisi ID Aplikasi atau API Key yang sudah kita buat pada artikel sebelumnya (masih ingatkan?).
fb:admins - Berisi ID User atau pengguna. Setiap membuat akun Facebook pasti kita diberikan ID User unik, masukan pada bagian ini.
og:site_name - Nama dari situs yang anda kelola.
og:description - Berisi deskripsi dari halaman situs blog anda.

Dibawah ini adalah contoh metadata standar Facebook yang harus ada pada halaman situs, yaitu:

<html xmls:fb='http://ogp.me/ns/fb#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' content='Blogger Tune-Up'/>
<meta property='og:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
...
</head>
...
</html>

Metadata diatas adalah rekomendasi Facebook, hal ini berarti tidak bisa ditawar jika blog anda ingin terintegrasi dengan Facebook. Mengenai properti lain silahkan merujuk pada dokumen Pengembang Facebook.

Metadata Twitter

Twitter sebagai salah satu jejaring sosial besar juga tidak mau ketinggalan dengan menyediakan property metadata sendiri, seperti dibawah ini:

name='twitter:card' - Ini berisi informasi tentang situs dan pemilik situs.
name='twitter:site' - Anda harus membuat dulu akun Twitter khusus untuk blog anda (misal; @bloggertuneup), ketika seseorang membagikan melalui jejaring twitter maka properti ini akan otomatis dimasukan.
name='twitter:creator' - Ini berisi informasi alamat akun Twitter author blog (misal; @dedehendriono). Jadi anda harus memiliki akun twitter pribadi dan ketika seseorang membagikan halaman situs maka otomatis properti ini akan dimasukan.
Sedangkah Metadata selanjutnya hampir sama dengan Metadata Open Graph.

Dibawah ini adalah contoh metadata standar Twitter yang harus ada pada halaman situs, yaitu:

<html prefix='og: http://ogp.me/ns#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta name='twitter:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta name='twitter:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<meta name='twitter:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>

Metadata diatas adalah rekomendasi Twitter, hal ini berarti tidak bisa ditawar jika blog anda ingin terintegrasi dengan Twitter. Mengenai properti lain silahkan merujuk pada dokumen Pengembang Twitter.

Integrasi Metadata Pada Blogger

Sudah panjang lebar bahasan mengenai metadata, waktunya kita mengintegrasikan metadata pada Blog kita. Bagaimana cara mengintegrasikan metadata pada Blogger? Apakah semua harus dimasukan kedalam metadata Blog? Dibawah ini adalah contoh metadata secara keseluruhan hasil dari penggabungan Open Graph, Facebook dan Twitter yang dimulai dari Twitter dulu, yaitu:

<html prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'>
<head>
<title>Tampilkan Deskripsi Blog pada Facebook</title>
<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta name='twitter:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta name='twitter:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<meta name='twitter:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
<!-- Metadata Facebook -->
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' content='Blogger Tune-Up'/>
<meta property='og:description' content='Rahasia memperbaiki deskripsi blog yang tidak tampil pada Facebook.'/>
<!-- Metadata Open Graph -->
<meta property='og:title' content='Tampilkan Deskripsi Blog pada Facebook'/>
<meta property='og:type' content='article'/>
<meta property='og:url' content='http://modification-blog.blogspot.com/artikel/metadata-tag.html'/>
<meta property='og:image' content='http://modification-blog.blogspot.com/gambar/metadata-tag.jpg'/>
...
</head>
...
</html>

Metadata diatas jika langsung dipasang pada blog akan menampilkan metadata yang kacau balau. Metadata diatas hanyalah contoh.

Metadata Twitter, Facebook dan Open Graph Untuk Blogger

Dibawah ini metadata yang sudah disesuaikan dengan karakter Blogger. Ingat! Metadata ini khusus untuk pengguna Blogspot sedangkan pengguna platform blog yang lain, silahkan sesuai dengan metadata yang sudah dijabarkan diatas.

Sisipkan Document Conformance dibawah ini (seperti sudah dijelaskan pada artikel sebelumnya) pada tag <html>:

prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'

Masukan metadata dibawah ini pada tag <head>:

<!-- Metadata Twitter -->
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@situsAnda'/>
<meta name='twitter:creator' content='@userName'/>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
<!-- Metadata Facebook -->
<meta property='fb:app_id' content='1234567890'/>
<meta property='fb:admins' content='0987654321'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<!-- Metadata Open Graph -->
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:type' content='article'/>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl'/>

Lakukan penyesuaian metadata pada bagian dibawah ini:

content='@situsAnda' - ganti dengan akun situs di jejaring sosial twitter.
content='@userName' - ganti dengan akun anda di jejaring sosial twitter.
content='1234567890' - ganti dengan API Key atau Aplication ID situs anda di jejaring sosial Facebook (API Key sudah dibahas sebelumnya).
content='0987654321' - ganti dengan ID User anda di jejaring sosial Facebook.
content='article' - ganti dengan jenis blog anda, apakah berjenis artikel, photo, video dan lain sebagainya.
Anda bisa menambahkan conditional tag pada metadata sesuai dengan kebutuhan.

Memeriksa Metadata

Jika metadata sudah terintegrasi pada blog anda, lakukan permeriksaan metadata dengan alat Debugger Facebook atau foursquare.

Berikut contoh screenshoot pada Facebook:

Masalah Metadata Deskripsi dan Gambar

Beberapa blog bisa saja bermasalah saat diuji metadata. Masalah yang sering ditemukan adalah:

Deskripsi Blog tidak tampil - Ini bukan masalah pada metadata diatas, namun pada meta deskripsi Blogger yang belum terintegrasi pada Blog anda. Ini akan dibahas pada artikel berikutnya.
Gambar muncul namun ada peringatan - Ini masalah internal pada Blogger yang hanya memberikan gambar thumbnail yang ter-crop pada ukuran 72x72 pixel, sedangkah Facebook memiliki standar ukuran minimal gambar yaitu 200x200 pixel. Mungkin ada yang bisa memecahkan?

Mencari ID Facebook User

Tadinya saya mengira semua sudah tahu ID Facebooknya masing-masing, ternyata ada juga yang kesulitan. Untuk yang kesulitan menemukan ID Facebook-nya, silahkan gunakan tools yang sudah saya buat. Cukup mudah, misal; saya mempunyai URL Facebook https://www.facebook.com/dede.hendriono, ambil namanya saja yaitu dede.hendriono kemudian masukan kedalam form input dan klik Submit. Halaman baru akan terbuka yang berisi informasi cukup lengkap tentang anda.

Facebook ID Finder

Kesimpulan

Akhirnya selesai juga menulis tentang Metadata. Lalu bagaimana dengan Google Plus? Kita tidak usah bingung dengan Google Plus karena Blogger merupakan bagian dari Perusahaan Google sudah jelas hal ini pasti diperhatikan tanpa perlu penambahan kode secara manual. Lalu apakah ini bagian dari teknik SEO? dan Apakah ini mempengaruhi SERP? Saya bukan ahli SEO, jadi tidak tahu perkara demikian. Saya menulis tentang artikel diatas hanya untuk mengikuti standar-standar yang disepakati bersama, dan tidak ada hubungan dengan pembahasan SEO. Sampai hari ini Blogger Tune-Up masih memegang prinsip "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi" Sampai ketemu pada pembahasan berikutnya. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Plugin jQuery Image Maps

noreply@blogger.com (Hendriono Dede) — Fri, 29 Jun 2012 13:49:00 +0000

Bismillah. Alhamdulillah. Berhenti sejenak dalam mempelajari Facebook API dan kembali ke dunia jQuery. Beberapa saat yang lalu Blogger Tune-Up pernah membahas tentang penggunaan tag HTML Maps Area Coords. Pada artikel kali ini Blogger Tune-Up mencoba menyederhanakan fungsi tag HTML Maps Area Coords dengan menulis sebuah plugin jQuery. Plugin ini memudahkan kita dalam memasukan koordinat XY kedalam peta. Ditambahkan beberapa tambahan mark (penanda) dan tooltip agar tampilan menjadi lebih bagus dan menarik. Bagaimana menggunakannya? Lanjutkan...

Fork Plugin jQuery Image Maps

Demo Plugin jQuery Image Maps

Unduh Plugin jQuery Image Maps

Deksripsi

jQuery Image Maps digunakan sebagai metode lain dalam mengganti fungsi-fungsi tag HTML Maps Area Coords. Kode jQuery utama yang digunakan dalam membuat plugin Image Maps adalah jQuery.data(). jQuery.data() akan melakukan pemeriksaan data pada koordinat XY yang dimasukan kedalam peta. Sehingga memudahkan kita dalam menentukan titik koordinat XY. Berbeda halnya dengan tag Coords yang mengharuskan kita menentukan titik koordinat XY lebih dari satu untuk sebuah area, dengan jQuery Image Maps kita cukup memasukan satu titik koordinat XY. Pada saat halaman diload sebuah markah atau penanda ditambahkan pada area peta dengan bentuk yang bisa disesuaikan, kita bisa menggunakan border atau icon sebagai penunjuk lokasi pada map, satu hal yang tidak bisa diterapkan pada tag HTML Maps Area Coords. Pada saat mouse hover atau berada diatas markah, sebuah tooltip yang berisi informasi keluar diatas atau dibawah markah. Posisi dan efek tooltips bisa kita atur sesuai dengan keinginan. Luas area maps atau peta secara otomatis akan menyesuaikan dengan luas (panjang dan lebar) gambar sehingga kita tidak perlu menentukan luas area map.

Kekurangan dan Kelebihan

Plugin jQuery Image Maps ini jelaslah masih mengandung banyak kekurangan, anda bisa saja kemudian memodifikasi dan menambahkan fungsi-fungsi baru untuk menghasilkan tampilan yang lebih sempurna. Beberapa kekurangannya adalah:

Tidak menggunakan tag HTML Maps Area Coords sesuai standar W3C, sehingga ada kemungkinan tidak lolos validasi (silahkan periksa sendiri).
Untuk membuat area polygon masih rumit, karena masih mengandalkan kode CSS3.
Baru diperiksa menggunakan framework jQuery versi 1.7.2 sehingga ada kemungkinan tidak bekerja normal pada versi sebelumnya (silahkan periksa sendiri).
Pada IE 8 tampilan tooltips tidak sempurna namun itu karena IE 8 belum mampu merender CSS3 dengan sempurna. Bukan kesalahan pada plugin.
Jika menemukan kelemahan, bug atau perbaikan lain silahkan tinggalkan pada komentar.

Sedangkan beberapa kelebihannya diantaranya:

Cukup satu titik koordinat XY untuk menentukan suatu area pada peta dengan luas yang bisa kita atur dengan mudah pada kode CSS.
Integrasi antara gambar dengan peta dilakukan secara otomatis oleh Plugin.
Area koordinat dalam peta bisa diberi mark atau penanda sesuai dengan yang kita inginkan. Bisa menggunakan rectangle, circle, rounded, polygon atau pun image (icon).
Dilengkapi tooltip yang akan keluar ketika mouse hover pada markah atau penanda.
Ukuran file plugin sangat kecil hanya 950 byte (versi minified).
Silahkan temukan sendiri kelebihan lainnya.

Skenario HTML

Dibawah ini adalah kode HTML yang digunakan sebagai area peta:

<div id="peta">

 <img width="620" height="346" src="peta.jpg" alt="Peta"/>
 
 <!-- Awal Area Satu -->
 <div class="penanda atas" data-posx="255" data-posy="70">
  <!-- Awal Isi Tooltips -->
  <h2>iMac</h2>   
  <ul>
   <li><b>Harga:</b> Rp 24.000.000</li>
   <li><b>Tahun Produksi:</b> 2020</li>
  </ul>
  <!-- Akhir Isi Tooltips -->
 </div>
 <!-- Akhir Area Satu -->
 
 <!-- Area Dua dan seterusnya -->
 
</div>

Hal yang harus diperhatikan pada skenario HTML ini adalah:

src pada tag img digunakan sebagai peta.
Ukuran gambar akan lebih baik ditentukan dengan width dan height, tetapi tidak menggunakan properti juga tidak apa-apa.
Tag alt pada gambar tidak berpengaruh pada plugin.
class="penanda": hukumnya wajib, karena class ini akan diakses oleh plugin. Sedangkan class=" atas" digunakan untuk menentukan posisi tooltip, jika dikosongkan (misal; class="penanda") maka tooltip akan muncul dibawah mark atau penanda. Jika ditambahkan class "atas" (misal; class="penanda atas") maka tooltip akan muncul pada bagian atas penanda.
data-posx="255": ganti nilai 255 sesuai dengan koordinat X pada gambar yang akan digunakan sebagai area.
data-posy="70": ganti nilai 70 sesuai dengan koordinat Y pada gambar yang akan digunakan sebagai area peta.
data-posx dan data-posy tidak boleh diganti, karena plugin akan mengambil nilai koordinat XY dari sini.
Untuk menentukan titik koordinat XY peta silahkan merujuk pada artikel sebelumnya tentang HTML Maps Area Coords, hanya saja cukup mengambil satu titik koordinat XY untuk setiap areanya.
Sedangkan tag yang berada didalam <div class="penanda" data-posx="" data-posy=""> adalah informasi yang akan muncul pada bagian tooltips. Anda bisa saja mengisinya dengan informasi yang sesuai dengan area pada peta.

Skenario CSS

Dibawah ini adalah skenario CSS yang digunakan untuk menentukan area penanda dan tooltips:

#peta {
 position: relative;
 margin: 20px auto;
 border: 1px solid #ccc;
}

.penanda {
 display: none;
}

.area {
 width: 32px;
 height: 32px;
 position: absolute;
}

.buble-up, .buble-down {
 background: url(../img/mark.png) no-repeat 0 0;
}

.buble-down {
 background-position: 0 -32px;
}

.buble {
 display: none;
 width: 200px;
 cursor: pointer;
 text-shadow: 0 1px 0 #fff;
 position: absolute;
 top: 10px;
 left: 50%;
 z-index: 999;
 margin-left: -115px;
 padding:15px;
 color: #222;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 background-color: #dce9f9;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
 background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
 border: 1px solid #ccc;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);  
}

.buble::after {
 content: '';
 position: absolute;
 top: -10px;
 left: 50%;
 margin-left: -10px;
 border-bottom: 10px solid #ebf3fc;
 border-left: 10px solid transparent;
 border-right :10px solid transparent;
}

.buble-down .buble {
 bottom: 12px;
 top: auto;
}

.buble-down .buble::after {
 bottom: -10px;
 top: auto;
 border-bottom: 0;
 border-top: 10px solid #dce9f9;
}

.buble h2 {
 font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
 margin: 0 0 10px;
 text-align: center;
}

.buble ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

Kode diatas tidak akan dijelaskan mendetail, jadi silahkan dipelajari sendiri. Namun ada bagian yang bisa anda modifikasi untuk menentukan bentuk atau jenis penanda, yaitu:

.area {
 width: 32px;
 height: 32px;
 position: absolute;
}

.buble-up, .buble-down {
 background: url(../img/mark.png) no-repeat 0 0;
}

.buble-down {
 background-position: 0 -32px;
}

Silahkan kode diatas dimodifikasi sesuai dengan kebutuhan.

Skenario jQuery

Secara default skenario jQuery ditulis seperti dibawah ini:

$('#peta').imgMaps();

#peta diambil dari area yang akan digunakan sebagai peta. Perhatikan skenario HTML yang menggunakan id="peta". Anda bisa saja mengganti #peta sesuai dengan keinginan namun perhatikan bahwa id tersebut digunakan sebagai id area peta.

Secara lengkap kode jQuery ditulis seperti dibawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript' src='URL/jquery.imgmaps.min.js'/>
<script>
$(document).ready(function(){
 $('#peta').imgMaps();
});
</script>

Silahkan letakan kode diatas pada bagian atas tag </head> atau tag </body> pada halaman situs anda. Sedangkan untuk konfirgurasi tambahan anda bisa melakukan modifikasi kode jQuery menjadi seperti ini:

$('#peta').imgMaps({
 speed: 250,
 titik: 'penanda'
});

speed digunakan untuk menentukan kecepatan tampil tooltips, semakin kecil nilainya semakin cepat tampilannya. Efek yang digunakan adalah efek fade.
titik digunakan untuk menentukan class penanda, perhatikan class="penanda" pada skenario HTML diatas.

Kesimpulan

Plugin jQuery Image Maps bermanfaat bagi anda yang biasanya membuat situs sebagai sarana jual beli online. Anda akan dengan mudah untuk menentukan titik lokasi agen atau area dealer dari toko anda. Jika merasa tidak puas dengan fungsi plugin jQuery ini, silahkan lakukan modifikasi agar plugin ini bekerja sesuai dengan keinginan anda. Jika anda tidak keberatan, silahkan kirim informasi kepada author apabila ditemukan bug, perbaikan atau pengembangan pada plugin ini. Selamat mencoba dan semoga berhasil. Happy Blogging :)

JavaScript SDK - Integrasi Facebook dengan Blog

noreply@blogger.com (Hendriono Dede) — Wed, 27 Jun 2012 15:54:00 +0000

Bismillah. Alhamdulillah. Setelah kemarin kita belajar membuat aplikasi Facebook untuk Blogger, artikel kali ini adalah lanjutan dari pembahasan tentang Facebook untuk Blog. Application ID atau API Key adalah kunci yang akan kita gunakan pada artikel kali ini. Setelah aplikasi kita buat, sebenarnya banyak plugin dan fungsi yang bisa kita gunakan dari Facebook, namun bagaimana semua ini bisa terjadi? Dan bagaimana mana pula sebuah blog mampu mengambil data dari Facebook? Mari kita pelajari...

Apa SDK?

SDK atau Software Development Kit (atau sering disebut "devkit") adalah seperangkat alat pengembangan perangkat lunak yang digunakan dalam pembuatan aplikasi software, framework software, platform hardware, sistem komputer, konsol video game, sistem operasi, atau platform yang serupa. Ini membuat proses pembuatan suatu aplikasi menjadi sangat sederhana seperti halnya sebuah Application Programming Interface (API) yang terbentuk dari beberapa file yang merupakan bagian dari sebuah bahasa pemrograman atau termasuk membuat komunikasi perangkat keras canggih dengan sistem yang sudah tersedia didalamnya. Peralatan ini umumnya menyediakan alat debugging atau utilitas lain yang sering dilampirkan pada Integrated Development Environment (IDE).

Facebook Javascript SDK

Seperti telah dijelaskan diatas mengenai peranan SDK dalam pengembangan perangkat lunak, begitu pula peranan JavaScript SDK yang disediakan oleh Facebook. Javascript SDK Facebook menyediakan beragam pengaturan fungsi client-side (sisi pengguna atau sisi browser) untuk mengakses Facebook melalui pemanggilan server-side API (sisi server Facebook). Termasuk fungsi-fungsi API REST, API Graph, dan Dialog-dialog. Kedepannya, kita dapat melengkapi berbagai mekanisme rendering versi XFBML untuk Social Plugin, dan membuka saluran untuk halaman Canvas sehingga mampu berkomunikasi dengan Facebook.

Proses Otentikasi Facebook

Dibawah ini sedikit gambaran bagaimana ketika user (pengguna Facebook) berkunjung ke halaman website anda dan kemudian melakukan suatu tindakan (berbagi konten atau suka).

Penggunaan dan Integrasi Javascript SDK

Setelah cukup panjang membahas Facebook Javascript SDK, sekarang waktunya kita mengintegrasikan fungsi Javascript SDK ini agar mampu memanggil fungsi-fungsi API sehingga blog kita bisa berkomunikasi lancar dengan sisi server (server-side) Facebook. Sebenarnya ada beberapa metode lain yang bisa digunakan namun diantara cara yang disediakan Facebook, Javascript SDK-lah yang cocok untuk pengguna Blogger. Untuk lebih lengkapnya silahkan pelajari jenis-jenis SDK yang disediakan Facebook pada halaman Dokumentasi Developer.

[1] Penyesuaian Dokumen (Document Conformance)

Mungkin sebagian pembaca artikel ini ada yang bertanya-tanya, kenapa membutuhkan penyesuaian dokumen? Pihak Facebook menjelaskan bahwa Document Conformance ini digunakan agar plugin XFBML dapat bekerja dengan baik dan fitur-fitur tambahan lainnya dapat pula bekerja daripada menggunakan metode iframe. Dengan Document Conformance ini berarti diasumsikan bahwa fungsi API benar-benar terintegrasi dari pada metode numpang (iframe). Selain itu, terutama bagi para pengguna browser Internet Explore, Document Conformance digunakan agar XFBML (eXtensible Facebook Markup Language) dapat dirender (ditampilkan) dengan sempurna. Tanpa Document Conformance ini, Internet Explorer tidak akan mampu merender fungsi-fungsi API dengan sempurna.

Sisipkan Document Conformance XFBML dibawah ini pada tag <html>:

xmlns:fb='http://ogp.me/ns/fb#'

Sehingga menjadi seperti dibawah ini (contoh dibawah untuk Blogger yang masih menggunakan HTML 4.0)

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

[2] Integrasi Javascript SDK Facebook

Setelah penyesuaian dokumen selanjutnya adalah integrasi Javascript SDK pada template blog. Javascript dibawah ini sudah disesuai dengan OAuth 2.0 (Open Standard Co-Authored) seperti dijelaskan oleh Jerry Cain pada blog Facebook dan juga telah dialihbahasakan sesuai dengan standar Facebook Localization.

Masukan (copy paste) kode Javascript SDK Facebook dibawah ini diatas tag </body> :

<div id='fb-root'/>
<script type='text/javascript'>
// <![CDATA[
window.fbAsyncInit = function() {
FB.init({
 appId: 'API_KEY',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
 });   
};
(function() {
 var e = document.createElement('script');
 e.async = true;
 e.src = document.location.protocol 
   + '//connect.facebook.net/id_ID/all.js';
 document.getElementById('fb-root').appendChild(e);
 }());
// ]]>
</script>

Jangan lupa ganti API_KEY dengan ID Aplikasi yang telah anda buat sebelumnya. Kemudian simpan template anda...

Bersambung...

Membuat Aplikasi Facebook Untuk Blog

noreply@blogger.com (Hendriono Dede) — Tue, 26 Jun 2012 13:54:00 +0000

Bismillah. Alhamdulillah. Facebook sebagai salah satu jejaring sosial sudah tidak diragukan lagi manfaatnya oleh para Blogger. Banyak yang kemudian memanfaatkan Facebook sebagai sarana untuk berbagai artikel yang tentunya dapat mendatangkan trafik yang lebih banyak lagi. Telah banyak blogger membahas tentang integrasi Facebook pada blog dari mulai menambangkan tombol "SUKA" sampai dengan integrasi komentar Facebook dengan Blog. Mungkin Blogger Tune-Up baru kali ini membahas tentang Facebook dibandingkan blogger lainnya dan boleh dikatakan tertinggal informasi. Namun tidak ada salahnya Blogger Tune-Up membahas hal ini sebagai tambahan referensi.

Deskripsi

Pada artikel kali ini kita akan membahas cara membuat aplikasi Facebook dengan mengintegrasikan blog didalamnya. Facebook telah memberikan kesempatan untuk memanfaatkan API (Application Programming Interface) yang banyak digunakan sebagai saluran integrasi antara satu aplikasi dengan aplikasi lain. Disini kita akan mengintegrasikan blog dengan Facebook. Manfaatnya cukup banyak, salah satunya adalah blog yang telah terintegrasi menggunakan API Facebook bisa memanfaatkan hampir semua widget yang disediakan oleh Facebook dengan mudah. Blog yang terintegrasi melalui API Facebook mempermudah pengunjung untuk berbagai konten, baik itu berupa rekomendasi artikel, menandai artikel yang disukai, membagi artikel pada jejaring pengunjung dan lain sebagainya. API sekarang sudah menjadi bagian dari situs-situs besar dengan tujuan untuk mempermudah para pembaca menjangkau artikel-artikel atau informasi yang dibuat oleh suatu situs. Penasaran dengan API? (sama... hehehehe...)

Tutorial kali ini mungkin belum membahas secara teknis tentang fungsi aplikasi Facebook yang telah kita buat. Pada artikel berikutnya baru akan membahas lebih mendalam tentang pemanfaatan aplikasi Facebook ini. Tujuan utama dari pembuatan aplikasi Facebook untuk Blog ini sebenarnya sederhana yaitu mengambil "KUNCI" API agar proses integrasi antara Facebook dengan Blog kita semakin mudah. Tanpa kunci maka sulit untuk saling berkomunikasi satu sama lain.

Proses Pembuatan Aplikasi

Mudah-mudahan penjelasan diatas memberikan sedikit gambaran tentang fungsi API Key yang akan kita ambil dari Facebook. Untuk membuat aplikasi pada Facebook ikuti langkah dibawah ini:

Langkah 1
Pastikan anda dalam keadaan login pada situs Facebook dan Blog dengan akun yang telah anda buat (direkomendasikan akun anda telah terverifikasi)
Langkah 2
Masuklah ke Pengembang Facebook (Facebook Developers)
Langkah 3
Klik menu Aplikasi

Langkah 4
Klik tombol "+ Create New App"

Langkah 5
Kotak Dialog "Create New App" terbuka, isilah data yang diperlukan kemudian klik tombol "Lanjutkan"

Langkah 6
Isilah kotak "Pemeriksaan Keamanan" sesuai dengan gambar yang tampil kemudian klik tombol "Kirim"

Langkah 7
Halaman Aplikas terbuka seperti gambar dibawah ini.

Anda bisa saja menyesuaikan bagian ini sesuai keperluan anda, misal mengganti icon (harus 16x16, tipe file JPG, PNG atau GIF) atau mengganti logo (harus maksimal berukuran 75x75, tipe file JPG, PNG atau GIF). Namun bagian yang terpenting adalah pengisian "App Domains" isilah dengan blogspot.com dan "Site URL" pada "Website with Facebook Login", isilah sesuai dengan URL blog anda. Bagian lain abaikan saja jika masih bingung dalam penggunaannya. Kemudian klik tombol "Simpan Perubahan"

Langkah 8

Nah... Sekarang kita sudah memiliki API Key atau Application ID yang terdapat pada bagian atas. Biasanya tertulis seperti dibawah ini:

Nama Aplikasi
App ID: 12345678901234 (biasanya terdiri dari 15 angka)
App Secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (bagian rahasia)

Langkah 9
Bersabarlah untuk menunggu artikel berikutnya... (hehehehe...)

Membuat Status via Aplikasi Anda

Ini anggaplah sebagai bonus saja dari pada tidak ada kegiatan setelah membuat aplikasi Facebook. Anda bisa menerbitkan status dari Aplikasi Facebook anda seperti gambar screenshoot dibawah ini:

Caranya bagaimana?
1. Siapkan notepad atau yang sejenis kemudian copy paste URL dibawah ini:

https://www.facebook.com/dialog/feed?app_id=<APP_ID>&redirect_uri=http://modification-blog.blogspot.com

2. Ganti <APP_ID> sesuai dengan API Key/App ID (yang terdiri dari 15 angka) seperti terlihat pada langkah 8
3. Ganti URL http://modification-blog.blogspot.com sesuai dengan URL blog yang anda gunakan saat membuat aplikasi
4. Paste URL yang sudah dimodifikasi tersebut pada Adress Bar browser kemudian buka, maka halaman update status akan terbuka seperti dibawah ini:

5. Kemudian "BAGIKAN!!!"... Berhasil!!!

Selamat mencoba dan semoga berhasil. Happy Blogging :)

jQuery Modal Popup - Form Newsletter

noreply@blogger.com (Hendriono Dede) — Fri, 22 Jun 2012 11:16:00 +0000

Bismillah. Alhamdulillah. Pada saat kita berkunjung pada suatu situs, sering kita dihadapkan dengan kotak popup yang meminta kita untuk berlangganan Newsletter (berita terbaru yang dikirim via email), dengan memasukan alamat email dan kemudian kita diberi sebuah panduan berupa eBooks sebagai ucapan terima kasih karena telah berlangganan. Nah, pada artikel kali ini kita akan membahas tentang pembuatan Popup Form Signup Newsletter tersebut.

Demo jQuery Modal Popup - Form Newsletter

Download jQuery Modal Popup - Form Newsletter

Deskripsi

Pada saat pengunjung membuka halaman kita maka cookie akan memeriksa, apakah browser yang membuka halaman situs kita sudah menyimpan cookie? Jika belum maka Form Newsletter akan ditampilkan, namun jika browser telah menyimpan cookie yang artinya telah pernah berlangganan maka Form Newsletter tidak ditampilkan. Pada saat Form Newsletter ditampilkan maka semua halaman situs akan ditutup overlay sampai pengunjung melakukan aksi "Close" atau "Submit" pada Form. Jika pengunjung hanya melakukan aksi "Close" maka cookie tidak akan menyimpan data apapun, sehingga saat pengunjung tersebut membuka situs kita lagi dilain waktu maka Form Newsletter akan ditampilkan lagi.

Untuk membuat Form Newsletter ini kita membutuhkan 3 buah plugin jQuery, yaitu:

In-Field Label jQuery Plugin yang dibuat oleh Doug Neiner. Plugin ini digunakan untuk mengatur label pada input, agar ketika cursor aktif maka label akan disembunyikan. (plugin tambahan dan tidak terlalu penting)
jQuery Modal Popup Plugin yang dibuat oleh Bjoern Klinggaard. Ini plugin yang digunakan untuk menampilkan dan mengatur popup. Plugin ini diberi nama jQuery bPopup dan kita akan menggunakan Versi 0.4.1. Untuk versi terbaru silahkan kunjungi situs pembuatnya.
jQuery Cookie yang dibuat oleh Klaus Hartl. Plugin ini yang mengatur penulisan, pengecekan dan penghapusan cookie pada browser pengunjung.

Skenario HTML

Seperti biasa, untuk membuat sebuah elemen maka kita memerlukan sebuah kontener yang disimpan pada halaman HTML. Dibawah ini adalah kode HTML yang digunakan untuk membuat tampilan dari Popup Form Newsletter

<div id="jq-popup" style="display:none; background-color: #2C7BB3;"> 
<div class="pClose exit-button"></div>
<p>
 <h1>Berita Gembira: Dapatkan Panduan 10 langkah untuk menjadi jutawan Internet!</h1>
 <p>Jangan lewatkan untuk berlangganan informasi dari Blogger Tune-Up!</p>
 <form method="post" id="newsletter-signup-form" action="URL Proses">
  <fieldset>
   <div id="newsletter" class="clear">
    <p class="inline-label">
     <label class="pInline inline-label" onclick='if (this.value == "Sign up now") { this.value = ""; }' for="email-address">Masukan Alamat Email Anda</label>
     <input type="text" id="email-address" name="email" value="" />
    </p>
    <input type="submit" id="newsletter-submit" class="go-signup" value="Dapatkan Panduan Gratis"/>
   </div>
  </fieldset>
 </form>
 <p class="not-ready">Mungkin lain waktu? Baiklah, Kenapa tidak berlangganan <a href="http://feeds.feedburner.com/BloggerTune-up">RSS Feed</a></p>
</p>
</div>

Bagian terpenting dari Form Newsletter diatas adalah sebagai berikut:

id="jq-popup" : Ini bagian yang akan kita registrasikan pada plugin. Jika anda menggantinya maka ganti pula pada skenario jQuery-nya. (Sebaiknya jangan diubah jika belum memahaminya)
class="pClose exit-button" : Bagian pClose sebaiknya jangan diganti karena bagian ini akan diakses oleh Plugin jQuery bPopup.
id="newsletter-signup-form" : Bagian ini yang akan diregistrasikan pada jQuery Cookie.
action="URL Proses" : Gantilan URL Proses dengan alamat URL yang telah anda siapkan untuk memproses data input dari form.
class="pInline inline-label" : Bagian ini juga akan diakses oleh plugin jQuery bPopup dan jQuery In-Field Label,jadi biarkan seperti itu.
Sedangkan bagian-bagian lain silahkan sesuaikan dengan imajinasi dan kebutuhan anda.

Skenario CSS

Skenario CSS dibawah ini digunakan untuk memberikan sentuhan menarik pada form newsletter. Jika anda mengerti tentang bahasa CSS, silahkan manipulasi sesuai dengan imajinasi anda. (Ma'af tidak bisa menjelaskan baris perbaris...)

#jq-popup h1 {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 1.75em;
 line-height: 1.375em;
 margin: 0 0 0.5em;
 font-weight: 700;
 color: #FEFEFE;
}
#jq-popup .hidden {
 display: none;
 visibility: hidden;
}
#jq-popup input[type="button"], #jq-popup input[type="submit"], #jq-popup button {
 cursor: auto;
}
#jq-popup select, #jq-popup input, #jq-popup textarea, #jq-popup button {
 font: 99% sans-serif;
}

#jq-popup p.inline-label {
 position:relative; color:#000000;
}
#jq-popup label.inline-label {
 position:absolute; 
 top:22px; 
 left:15px; 
 text-shadow: none;
}
#jq-popup {
 width: 500px;
 padding:20px;
 background: #2c7bb3;
 border: 5px solid #fafafa;
 color: #fefefe;
 font-family: Helvetica,Arial,sans-serif;
 font-size: 14px;
 line-height: 1.5em;
 text-shadow: 0 1px 1px #444;
 box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);;
 -webkit-box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);;
 -moz-box-shadow: 0 0 10px #000, 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset, 0 0 1px rgba(0, 0, 0, 0.4), 0px 16px 14px -10px rgba(0, 0, 0, 0.5);
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
#jq-popup form fieldset {
 border: none;
}
#jq-popup p {
 margin: 0px;
}
#jq-popup a, #jq-popup a:visited {
 color: #fff;
}
#jq-popup #email-address {
 font-size: 16px;
 width: 474px;
 border: 3px solid #cecece;
 padding: 10px;
 margin: 10px 0;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
} 
#jq-popup #newsletter-submit {
 float: right;
 display: block;
 color: #fff;
 text-shadow: 0 1px 1px rgba(0,0,0,0.45);
 font-weight: 700;
 background: #d08032 url(img/button-gradient.png) 0 50% repeat-x;
 border: 1px solid #d08032;
 padding: 7px;
 text-align: center;
 margin-bottom: 10px;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
#jq-popup #newsletter-submit:hover {
 background: #d05032 url(button-gradient.png) 0 50% repeat-x;
 border-color: #d05032;
}
#jq-popup .exit-button {
 display: block;
 position: absolute;
 top: -15px;
 right: -15px;
 width: 25px;
 height: 25px;
 background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/s800/jquery.imageZoom.png) no-repeat;
}
#jq-popup .exit-button:hover { 
 cursor:pointer;
}
#jq-popup .exit-phrase {
 margin: 15px 0 0 0;
 float: right;
}

Skenario jQuery

Perhatikan skenario jQuery dibawah ini agar kita mampu melakukan modifikasi fungsi sesuai kebutuhan dan imajinasi.

jQuery(document).ready(function () {
 // Menghubungkan Cookie dengan aksi tombol submit
 jQuery("#newsletter-signup-form").submit(function () {
  jQuery.cookie("popup_seen_", '1', {
   expires: 30,
   path: "/"
  });
 });
 // Membuat Popup
 if (jQuery.cookie('popup_seen_') != 1)
 jQuery('#jq-popup').bPopup({
  cookieClose: true,
  cookieExpire: 30,
  modalColor: "#000",
  modalClose: false,
  vStart: 100,
  closeClass: "pClose",
  delay: 1000,
  follow: false,
  inlineClass: "pInline",
  inlineLabel: true,
  escClose: true
 });
});

Skenario jQuery diatas dibagi menjadi 2 blok, yaitu:
Penulisan Cookie

jQuery("#newsletter-signup-form").submit(function () {
 jQuery.cookie("popup_seen_", '1', {
  expires: 30,
  path: "/"
 });
});

Jika pengunjung melakukan submit dengan identitas tombol #newsletter-signup-form maka jQuery Plugin akan menuliskan cookie dengan nama popup_seen_ dengan nilai (value) 1. Cookie ini akan berakhir pada 30 hari kedepan (expires: 30) dan cookie ini berlaku pada semua halaman situs (path: "/").

Pengecekan Cookie dan Pembuatan Form Newsletter

if (jQuery.cookie('popup_seen_') != 1)

Pemeriksaan cookie. Jika cookie bernama popup_seen_ tidak sama dengan 1 maka...

jQuery('#jq-popup').bPopup({

Form Newsletter dengan identitas #jq-popup akan dibuat

cookieClose: true,

Jika bernilai true maka cookie akan ditulis ketika tombol Close diklik. Jika bernilai false maka cookie tidak akan ditulis ketika tombol close diklik.

cookieExpire: 30,

Cookie akan berlaku selama 30 hari kedepan

modalColor: "#000",

Untuk menentukan warna Overlay atau warna latar dari form

modalClose: false,

Jika bernilai false maka ketika overlay/latar di klik maka form tidak akan ditutup. Jika bernilai true maka form akan ditutup ketika overlay/latar diklik.

vStart: 100,

Vertical Start atau jarak form dari atas. Ubah nilai untuk menentukan posisi form saat diload secara vertikal.

closeClass: "pClose",

Ketika tombol dengan class pClose diklik, maka form akan ditutup.

delay: 1000,

Jeda waktu tampil form dimulai saat halaman diload. Idealnya 5000 milidetik.

follow: false,

Jika bernilai false maka form tidak akan mengikuti pergerakan halaman ketika discroll. Jika bernilai true maka form akan selalu berada ditengah halaman ketika pengujung melakukan scroll halaman.

inlineClass: "pInline",

Class pInline digunakan untuk menampilkan label yang akan diakses juga oleh plugin jQuery In-Field Label

inlineLabel: true,

Jika bernilai true maka label akan ditampilkan. Jika bernilai false maka label (Masukan Alamat Email Anda) tidak akan ditampilkan.

escClose: true

Jika bernilai true maka ketika pengunjung menekan tombol Esc maka form akan ditutup. Jika benilai false maka tombol Esc tidak berpengaruh pada form.

});

Fungsi pembuatan Popup ditutup

Total Skenario

Lalu bagaimana integrasi pada Blogger? Pastikan anda berada pada Template - Edit HTML kemudian tempat bagian-bagian dibawah ini.

[1] Tempatkan kode dibawah ini diatas tag </head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.infieldlabel.js'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.bpopup.js'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js'/>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function () {
 // Menghubungkan Cookie dengan aksi tombol submit
 jQuery("#newsletter-signup-form").submit(function () {
  jQuery.cookie("popup_seen_", '1', {
   expires: 30,
   path: "/"
  });
 });
 // Membuat Popup
 if (jQuery.cookie('popup_seen_') != 1)
 jQuery('#jq-popup').bPopup({
  cookieClose: true,
  cookieExpire: 30,
  modalColor: "#000",
  modalClose: false,
  vStart: 100,
  closeClass: "pClose",
  delay: 1000,
  follow: false,
  inlineClass: "pInline",
  inlineLabel: true,
  escClose: true
 });
});
//]]></script>

[2] Tempatkan kode CSS (Skenario CSS) diatas kode ]]></b:skin>
[3] Tempatkan kode HTML (Skenario HTML) diatas kode </body>

Kesimpulan

Kode diatas hanya dijelaskan secara praktis dan sederhana. Jika anda merasa tidak puas dengan penjelasan diatas silahkan lakukan ekplorasi pada situs pembuat dari plugin-plugin yang sudah disebutkan diatas. Semua kembali kepada imajinasi anda. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Kreatifitas Blogger yang Kebablasan

noreply@blogger.com (Hendriono Dede) — Mon, 18 Jun 2012 08:09:00 +0000

Bismillah. Sungguh sangat disayangkan dengan tingkah laku Blogger Cloning jika kemudian hasil cloning-nya tersebut diperjualbelikan. Saya secara pribadi sebagai seorang penulis tutorial blog juga tidak bisa memungkirinya, kadang atau bahkan sering melakukan CTRL-U untuk melihat source code yang digunakan, dipelajari bagaimana cara kerjanya dan kemudian direkayasa sesuai imajinasi yang kita miliki. Namun "TIDAK PERNAH MENJUALNYA" karena hal itu merugikan pelaku cloning.

Kerugian Pelaku Cloning

[1] Hilang Kehormatan

Berapa yang sudah anda peroleh dari jual beli hasil cloning? Itu tidak sebanding dengan hilangnya rasa hormat blogger lain. Bukankah blogger yang hebat itu adalah blogger yang dihormati sepanjang hari, bulan, tahun, bahkan bertahun-tahun? Apa yang kamu lakukan hari ini bisa saja mengakhiri semua mimpimu dimasa datang.

[2] Mematikan Kreatifitas

Bukankah dengan cloning anda tidak perlu bersusah payah mengumpulkan ide dan kemudian mengaplikasikannya? Hal termahal dari seorang blogger adalah "IDE". Dan ide itu bukanlah hal yang tiba-tiba datang menghampiri, perlu ilmu pengetahuan yang cukup, perlu sejumlah sahabat, perlu kemampuan dan masih banyak faktor lain untuk menumbuhkan ide dalam diri. Cukupkah semuanya hanya sampai ke ide? Tidak... Ide harus direalisasikan kedalam bentuk real agar orang lain bisa menikmati bahkan mengagumi hasil ide kita. Untuk merealisasikan ide maka kita membutuhkan disiplin ilmu tertentu dan itu berarti menuntut kita untuk belajar tentang ilmu yang bersangkutan dengan ide yang akan direalisasikan. Ketika ide mampu terealisasikan maka itulah kreatifitas.

[3] Terjebak
Seorang blogger yang sudah menikmati tindakan cloning akan terjebak didalamnya. Ia akan sulit keluar dari lingkaran cloning dan itu sama dengan mematikan kreatifitas dalam diri. Seorang blogger yang terkungkung dalam jebakan cloning akan diam menunggu mangsa atau justru haus untuk mencari target, ketika menemukan target ia tidak akan peduli lagi dengan sekitarnya. Seperti itulah yang kemudian terjadi dalam dirinya, terulang dan berulang-ulang. Bukankah yang demikian sama dengan terjebak? Diam, mencari namun tetap tidak bisa keluar.

[4] Stagnan

Blogger cloning akan merasakan stagnan dalam dirinya disaat ia sudah merasa lelah untuk melakukan cloning. Stagnan atau tidak ada perubahan justru akan membentuk blogger paling ego dan paling sombong karena tidak bisa merasakan orang lain atau bahkan tidak mampu menghargai kreatifitas orang lain. Harus diingat bahwa banyak blogger selain diri kita bisa melakukan cloning namun mereka tidak mengambil keuntungan dari cloning tersebut, karena mereka sadar, cloning tidak akan membuat dirinya berkembang dan dihormati.

[5] Keras Hati

Bukankah Cloning itu tidak ada Undang-Undangnya? Itulah yang akan sering digunakan sebagai alasan. Blogger syarat dengan blogosphere yaitu semangat untuk saling menghargai satu sama lain. Jangankan total mencuri (cloning) satu bagian saja kita mesti meminta ijin sang pemilik, karena blogger sebenarnya tahu bahwa mengambil secara keseluruhan sama dengan merampoknya. Satu bagian saja itu terkadang sang pemilik dengan berat hati memberikan ijin walau pemilik tahu mereka sudah mengambilnya. Disinilah terjadi interaksi yang membentuk peraturan-peraturan tidak tertulis, dan interaksi inilah yang akan memperat tali persahabatan antar blogger. Saling mempercayai dan menghormati merupakan kekuatan blogosphere yang tak ternilai harganya. Berlaku sebaliknya untuk para pelaku cloning, mereka sudah tidak peduli lagi apa yang terjadi yang penting diri sendiri sudah berhasil melakukan cloning, bukankah yang demikian adalah sebaliknya? Itu sama dengan menciptakan permusuhan. Dan permusuhan adalah hal yang tidak akan pernah selesai sampai kapanpun. Pepatah menyebutkan "Musuh satu terlalu banyak namun kawan seribu terlalu sedikit"

Benarkan Harga Desain Blogku Rp. 20.000?

Heran... Itulah yang terpikirkan olehku. Ada apa dengan Blogger Indonesia? Jika memang mampu melakukan cloning maka hindari blog lokal karena itu jelas sangat merugikan keberadaan blogger lokal. Itu sama dengan saling menjatuhkan sesama teman. Kapan kita akan dihormati dan disegani blogger Internasional kalau ternyata didalamnya kita saling menjatuhkan? Blogger Tune-Up terbuka dan memperbolehkan untuk diambil source codenya, baik itu berupa tutorial atau plugin dan diperbolehkan untuk diperjual belikan dengan atau tanpa backlink seperti tertuang dalam halaman Perizinan & Syarat Penggunaan. Namun bukan berarti diperbolehkan diambil secara total dengan brangkas-brangkasnya. Kalau misal bermunculan tampilan seperti Blogger Tune-Up itu justru akan membingungkan para pengunjung. Kejadian yang lalu bisa terulang lagi ketika seorang pembeli template marah-marah di email saya dengan tuduhan saya melakukan cloning atas blognya. Dilain kejadian ada blogger meminta pertanggungjawaban karena blognya tidak berjalan dengan baik. Saya belum pernah menjual template tapi kenapa saya yang kena getahnya? Rugi 2 kali, rugi karena di cloning, dan rugi dimarahi orang lain. Saya hanya berharap pengertiannya dari para blogger Indonesia, sampai hari ini saya tidak melakukan tindakan apa-apa karena saya masih berfikir jauh dan masih merasa kita sama-sama dari Indonesia, entahlah jika cloning dilakukan oleh blogger negara lain, mungkin saya juga tidak akan berdiam diri.

Image Maps (Map Area Coords)

noreply@blogger.com (Hendriono Dede) — Sat, 16 Jun 2012 09:13:00 +0000

Bismillah. Alhamdulillah. Pernahkah kita berkunjung pada suatu situs yang didalamnya menggunakan peta? Kemudian ketika kita arahkan mouse dan klik suatu area maka kita diarahkan pada suatu target URL? Jika pernah maka kemungkinan terbesar situs tersebut menggunakan Image Maps (Pemetaan Gambar). Fungsi ini sangat bermanfaat dan mampu menyederhanakan peranan tag-tag lain, namun tag map ini sangat jarang digunakan. Entah karena kerumitannya atau karena ketidaktahuan? Mari kita pelajari bagaiman Image Maps ini bekerja dan semoga apa yang dijabarkan mampu membantu menyederhanakan hal yang terlihat rumit menjadi mudah, sederhana dan dipahami dengan baik.

Demo Image Maps (Map Area Coords)

Download Image Maps (Map Area Coords)

Deksripsi

Image Map atau Pemetaan Gambar memungkinkan author (penulis) untuk menentukan daerah (area) dari suatu gambar (img) atau objek (object) dan menetapkan tindakan tertentu untuk masing-masing daerah (area) (misal; mengambil dokumen, menjalankan program, mengarahkan URL dan lain-lain). Ketika daerah (area) tersebut di eksekusi atau diaktifkan oleh user maka aksi akan dijalankan. Fungsi tag ini sebenarnya sangat bermanfaat ketika kita ingin memetakan suatu gambar dan menyisipkan aksi-aksi didalamnya, hal yang mungkin menjadi sangat sulit jika diterapkan dengan metode (tag) lain.

Kita akan membahas 2 tag dan 3 attibut untuk menggunakaan fungsi pemetaan ini, yaitu:

Tag <map> digunakan untuk mendefinisikan sisi klien peta gambar (image-map). Peta gambar adalah gambar dengan area yang dapat dieksekusi atau di klik. Elemen name pada tag <map> diperlukan/wajib dan hal ini terkait dengan attribut usemap pada tag <img> yang berfungsi untuk menciptakan hubungan antara gambar dan peta. Identitas yang ada pada attibut name (tag <map>) terkait erat dengan identitas yang ada pada attribut usemap (tag <img>). Identitas ini harus sama agar gambar dan peta mampu berhubungan. Unsur <map> berisi sejumlah elemen <area> dengan fungsi untuk mendefinisikan daerah yang dapat diklik/dieksekusi dalam peta gambar.
Tag <area> digunakan untuk mendefinisikan area atau daerah didalam peta gambar. Area merupakan tag spesifik untuk membagi-bagi daerah dalam peta gambar dan daerah tersebut adalah area yang dapat dieksekusi/diklik. Tag <area> selalu dan wajib berada didalam tag <map>.
Attribut usemap dan attribut name adalah attribut penyatuan anatara 2 elemen, yaitu elemen gambar dengan elemen peta. Attribut usemap pada tag <img> dikaitkan langsung dengan attribut name pada tag <map> dan menciptakan hubungan antara gambar dengan peta. Pada mulanya antara gambar (<img>) dengan peta (<map>) adalah 2 elemen yang terpisah satu sama lain. Gambar hanya berisi objek dan peta hanya berisi area pemetaan, kemudian keduanya menjadi satu karena satu sama lain dikaitkan. Pengkaitan ini menggunakan 2 attribut yaitu attribut usemap pada tag <img> dan attribut name pada tag <map>. Kedua attribut itu harus memiliki identitas sama.
Attribut coords digunakan untuk menspesifikasi titik koordinat X dan Y dari suatu wilayah pada peta gambar. Attribut coords (harus) digunakan bersama-sama dengan attribut shape untuk menentukan ukuran, bentuk dan penepatan suatu area (daerah). Titik koordinat X dan Y dimulai dari pojok kiri atas sebagai titik 0,0.

Syntax

Secara default kode Image Maps (Pemetaan Gambar) ditulis seperti dibawah ini:

<img src ="peta.jpg" alt="Nama Gambar Peta" usemap="#petaku" />

<map name="petaku">
  <area shape="rect" coords="x1,y1,x2,y2" href="URL" alt="Nama Area" />
  <area shape="circle" coords="x,y,r" href="URL" alt="Nama Area" />
  <area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href="URL" alt="Nama Area" />
</map>

Perhatikan gambar dibawah ini:

Pada mulanya terdapat dua buah elemen yaitu elemen tag <img> dan elemen tag <map>. Keduanya merupakan elemen yang berdiri sendiri dengan fungsi masing-masing. Tag <img> adalah elemen yang berisi gambar, sedangkan tag <map> adalah elemen yang berisi pemetaan area. Kemudian keduanya disatukan/dikaitkan seakan-akan menjadi satu elemen dengan bantuan attribut usemap pada tag <img> dan attribut name pada tag <map>. Perhatikan contoh; attribut usemap diberi identitas #petaku dan attribut name diberi identitas yang sama yaitu petaku namun tanpa simbol hash (#). Tanda hash dapat diartikan sebagai pengalamatan. Maka usemap="#petaku" dan name="petaku" adalah cara untuk mengkaitkan atau menyatukan antara elemen gambar dan elemen peta.

Shape dan Coords

Didalam tag <area> terdapat 2 buah attribut penting yaitu shape dan coords. Attribut shape digunakan untuk menentukan bentuk, ukuran dan penetapan suatu area, sedangkan attribut coords untuk menentukan titik sumbu koordinatnya.

[A] Attribut Shape

Attibut shape terdiri dari 4 jenis value atau identitas, yaitu:

rect atau rectangle atau segi empat, ini digunakan untuk menentukan area yang bisa diklik dengan bentuk segi empat
circle atau lingkaran, ini digunakan untuk menentukan area yang bisa diklik dengan bentuk lingkaran.
poly atau polygon atau segi tidak beraturan, ini digunakan untuk menentukan area yang bisa diklik dengan bentuk segi tidak beraturan.
default, ini adalah bentuk dasar untuk menentukan semua area sebagai peta.

Syntax Shape ditulis sebagai berikut:

<area shape="default|rect|circle|poly" />

Perhatikan gambar dibawah ini:

Nomor 1 : Area berbentuk rectangle (Segi Empat)
Nomor 2 : Area berbentuk circle (Lingkaran)
Nomor 3 : Area berbentuk polygon (tidak beraturan)

[B] Attribut Coords

Attibut coords sebenarnya merupakan penjabaran dari attribut shape, sehingga nilai (value) yang digunakan mengikuti aturan shape. Sedangkan shape memiliki 3 value penting yang harus dideklarasikan titik sumbun X dan Y-ya (default tidak perlu dijabarkan) agar bentuknya sesuai aturan shape. Attribut coord mengikuti aturan shape, sebagai berikut:

Jika shape bernilai rect maka syntax coords harus ditulis seperti dibawah ini:

<area shape="rect" coords="x1,y1,x2,y2" />

Kita cukup menentukan 2 titik sumbu koordinat, yaitu x1,y1 dan x2,y2
Jika shape bernilai circle maka syntax coords harus ditulis seperti dibawah ini:

<area shape="circle" coords="x,y,r" />

Kita harus menentukan satu titik sumbu koordinat x,y sebagai titik pusat lingkaran dan panjang jari-jari (r=radius) dari lingkaran
Jika shape bernilai poly maka syntax coords harus ditulis seperti dibawah ini:

<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" />

Ini mungkin merupakan bentuk yang paling komplek, kita harus menentukan titik-titik sumbu x,y pada setiap sudut area. Jika area poly tersebut terdiri dari 10 sudut, maka kita harus menulis 10 titik sumbu x dan 10 titik sumbu y.

Perhatikan gambar dibawah ini:

Cara Menentukan Nilai Coords (Titik Sumbu Koordinat XY)

Setelah memahami dengan baik konsep Image Maps diatas, sekarang kita belajar menentukan titik sumbu koordinat xy. Sebenarnya banyak cara, namun diantara cara yang ada penulis lebih mudah menggunakan metode dibawah ini.

Perhatikan gambar dibawah ini:

Gunakan perangkat lunak pengolah citra gambar (GIMP atau Adobe Photoshop). Bagi pengguna GIMP, telah tersedia plugin khusus untuk menentukan titik sumbu koordinat XY dengan mudah. Silahkan baca-baca disini cara menggunakan GIMP untuk menentukan nilai coords.
Buka gambar yang akan digunakan sebagai peta dengan Adobe Photoshop.
Tentukan bentuk dari shape pada objek gambar (anda bisa menggunakan Rectangle Tool, Ellipse Tool, atau Polygon Tools)
Arahkan pointer mouse pada titik sumbu koordinat yang akan diambil dan baca hasilnya pada Panel Info (Tekan F8) kemudian tulis sumbu X dan sumbu Y pada attribut coords.
Pindahkan pointer mouse pada titik sumbu koordinat lainnya untuk menentukan titik sumbu X dan titik sumbu Y berikutnya.

Kesimpulan

Penggunaan Image Maps sebenarnya bebas untuk berbagai keperluan. Silahkan anda bereksperimen dengan Image Maps dan temukan keindahan koding. Mudah bukan? Selamat mencoba dan semoga berhasil. Happy Blogging :)

Sumber dan Pranala Luar:

Plugin jQuery Menu Klik Kanan

noreply@blogger.com (Hendriono Dede) — Fri, 08 Jun 2012 17:47:00 +0000

Bismillah. Alhamdulillah. Satu plugin jQuery selesai ditulis walau dalam kondisi masih banyak sekali kekurangan. Plugin jQuery ini digunakan untuk mengubah menu browser saat melakukan klik kanan mouse pada suatu halaman. Pada mulanya fungsi ini digunakan untuk men-non-aktikan klik kanan dengan tujuan meminimalisir tindakan Copy Paste artikel. Namun sepertinya sangat disayangkan kalau hanya sebuah alert (peringatan) yang muncul pada saat klik kanan di area halaman. Lalu munculah ide untuk mengganti alert tersebut dengan menu. Script ini merupakan comotan dari berbagai script jQuery yang ada, yah maklumlah, saya hanya blogger bodoh yang tidak lebih pintar dari pembacanya.

Fork Plugin jQuery Right-Click

Demo Plugin jQuery Right-Click

Download Plugin jQuery Right-Click

Deskripsi

Plugin jQuery Right-Click Menu atau Plugin jQuery Menu Klik Kanan berfungsi untuk mengganti menu bawaan browser dengan menu baru yang bisa kita tentukan. Menu ini akan muncul ketika kita klik kanan pada mouse disuatu area halaman web tertentu yang sudah kita tentukan. Jadi kita bisa menentukan area-area tertentu untuk menampilkan menu buatan sendiri, sedangkan diarea yang tidak kita tentukan, ketika dilakukan klik kanan mouse maka menu default browser-lah yang akan ditampilkan. Plugin ini ditulis mengikuti kaidah framework jQuery versi 1.7, ini berarti pula bahwa plugin jQuery Right-Clik Menu tidak akan bekerja jika kita memasang framework jQuery dibawah versi 1.7 pada halaman situs. Script Plugin jQuery ini tidak lagi menggunakan .bind() tapi sudah menggunakan .on() sebagai penggantinya sesuai dengan perubahan yang dilakukan sejak jQuery versi 1.7. Memanfaatkan "contextmenu" untuk mengganti menu default bawaan browser.

Ingatlah! Plugin jQuery Right-Click tidak bekerja pada framework jQuery dibawah versi 1.7

Skenario HTML

Pada dasarnya menu yang ditampilkan ditempatkan dalam posisi bebas saja. Anda mau menempatkan pada widget, atau ditempatkan diatas tag </body> atau dibawah tag <body> menu tersebut akan tetap bisa di tampilkan. Jadi tidak ada lokasi khusus untuk menempatkan menu tersebut. Perhatikan kode HTML dibawah ini:

Kode HTML untuk Area Klik Kanan

Dibawah ini hanyalah kode penjelasan tentang area yang akan di-set sebagai area yang menampilkan menu saat di-klik kanan.

<div id="areaKlik" class="item">
 <p>Area widget, artikel atau apalah disini...<p/>
</div>

Kode diatas tidak usah dimasukan kedalam blog anda. Kode HTML ini berhubungan dengan penentuan area pada Skenario jQuery. Lebih baik baca dulu hingga tuntas artikel ini.

Kode HTML untuk Menu Klik Kanan

Dibawah ini adalah kode yang digunakan untuk membuat menu yang akan ditampilkan.

<div id="menuKanan">
 <ul>
  <li><a class="facebook" href="#">Share on Facebook</a></li>
  <li><a class="twitter" href="#">Share on Twitter</a></li>
  <li><a class="delicious" href="#">Share on Delicious</a></li>
  <li><a class="stumble" href="#">Share on StumbleUpon</a></li>
  <li><a class="reddit" href="#">Share on ReddIt</a></li>
  <li><a class="digg" href="#">Share on Digg</a></li>
 </ul>
</div>
<div id="latarMenu"></div>

Area ini adalah area wajib yang harus dimasukan kedalam halaman blog anda (baik didalam template maupun didalam widget). Perhatikan dengan baik kode diatas yang terdiri dari 2 id, yaitu:

<div id="menuKanan">...</div> : Ini adalah area menu yang akan ditampilkan ketika melakukan klik kanan pada area yang sudah ditentukan. Silahkan ubah dan atur-atur sesuai kebutuhan namun jangan membuang id-nya, karena id="menuKanan" merupakan yang diintegrasikan kedalam plugin jQuery. ID ini hilang maka hilang pula menu klik kanan.
<div id="latarMenu"></div> : Ini adalah area latar, area yang bisa kita set untuk ditampilkan atau dibuat transparan saja. id="latarMenu" tidak boleh dibuang karena area ini digunakan untuk menutup menu saat mouse kiri di klik pada area diluar menu. Saat menu aktif maka area diluar menu adalah area id="latarMenu".

Skenario CSS

Kode CSS dibawah ini tidak akan dijelaskan secara detail, silahkan unduh file yang telah sediakan kemudian modifikasi file CSS ini sesuai dengan kebutuhan dan imajinasi anda. Namun yang terpenting pada kode CSS dibawah ini adalah properti #latarMenu dan #menuKanan (lebih baik tidak diubah jika belum paham tentang CSS).

#latarMenu {
 position:absolute;
 left:0;
 top:0;
 z-index:9000;
 display:block;
 background-color:#000000; /* Warna Latar Dibelakang Menu */
 opacity:0;
}
#menuKanan {
 position:absolute;
 display:none;
 z-index:9999;
 background:#212121; /* Warna Latar Menu */
 border:1px solid #302F2F;
 width:220px; /* Lebar Menu */
 height:215px; /* Tinggi Menu */
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 -o-border-radius:5px;
 border-radius:5px;
 -moz-box-shadow:0 0 2px #000;
 -webkit-box-shadow:0 0 2px #000;
 -o-box-shadow:0 0 2px #000;
 border-box-shadow:0 0 2px #000;
}

Skenario jQuery

Kode dibawah ini untuk mengaktifkan fungsi Plugin jQuery Right-Click. Untuk menggunakan plugin ini, pastikan website anda (periksa diantara tag head) menggunakan framework jQuery versi 1.7 keatas seperti dibawah ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Masukan plugin Plugin jQuery Right-Click dibawah framework jQuery, misal seperti dibawah ini:

<script src=".../jquery.klikanan.min.js"></script>

Sampai disini plugin masih belum aktif, kita perlu melakukan beberapa settingan. Silahkan teruskan membaca...

Setting jQuery Right-Click

Untuk mengaktifkan plugin jQuery Klik Kanan, secara default settingan ditulis seperti dibawah ini:

$('#areaKlik').klikanan();

Atau lebih detailnya:

<script type="text/javascript">
$(function () {
 $('#areaKlik').klikanan();
});
</script>

Berikut fungsi yang bisa kita gunakan untuk mengeset jQuery Menu Klik Kanan, yaitu:

$('#areaKlik').klikanan({
 speed: 400,
 overlay: false
});

speed: 400 = speed digunakan untuk menentukan seberapa cepat menu klik kanan ditampilkan. Secara default bernilai 400.
overlay: false = overlay digunakan untuk menentukan latar dari menu, jika bernilai "false" maka latar (overlay) tidak diaktifkan. Secara default bernilai "true" berarti overlay diaktifkan.
#areaKlik = ini adalah id dari area yang akan digunakan untuk menampilkan menu saat halaman di klik kanan. Sangat berhubungan erat dengan Skenario HTML (Lihat Skenario HTML). #areaKlik merupakan id yang menunjuk langsung kepada id="areaKlik", itu berarti anda diperbolehkan mengubah target area menu klik kanan.

Misal; Blogger secara default memiliki area artikel dengan class entry-content (silahkan cek pada template blogger dan cari kode class='post-body entry-content'). Jika anda ingin area artikel tersebut merupakan area menu klik kanan maka tulislah fungsi plugin-nya seperti dibawah ini:

$('.entry-content').klikanan({
 speed: 400,
 overlay: false
});

atau lebih lengkapnya:

<script type="text/javascript">
$(function () {
 $('.entry-content').klikanan({
  speed: 400,
  overlay: false
 });
});
</script>

Kesimpulan

Plugin jQuery Right-Click Menu mungkin saja mengandung bug karena kesalahan fungsi atau kesalahan penulisan, maka dari itu kontribusi, kritik, dan saran anda setelah penggunaan plugin ini sangat diharapkan untuk perbaikan lebih lanjut. Plugin ini baru dites pada browser Firefox 12 (Win), Chrome 19.0.1084.52 m (Win), dan Safari 5.1.4 (Win). Plugin ini bersifat bebas untuk digunakan, dimodifikasi dan dikembangkan baik untuk kepentingan eksperimen atau untuk digunakan pada situs komersil.

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

Ubah Nama Navigasi Halaman Artikel

noreply@blogger.com (Hendriono Dede) — Wed, 06 Jun 2012 20:07:00 +0000

Bismillah. Alhamdulillah. Navigasi halaman per artikel biasanya ditampilkan dengan keterangan "Posting Lebih Baru" untuk berpindah halaman pada artikel yang terbaru, dan "Posting Lama" untuk berpindah halaman pada artikel yang lebih lama. Beberapa blogger kemudian menggantinya dengan gambar panah atau gambar lainnya yang mewakili navigasi halaman per artikel. Sedangkan jika kita perhatikan pada platform CMS (misal; Wordpress) navigasi halaman per artikel biasanya berisi judul artikel. Bisakah pengguna Blogger mengubah "Posting Lebih Baru" dan "Posting Lama" dengan judul artikel?

Demo jQuery Navigation Item

Skenario (X)HTML Navigasi Halaman Per Artikel

Dibawah ini adalah kode (X)HTML dari Blogger, namun tidak akan dijelaskan baris perbaris. Kita hanya akan mengambil bagian pentingnya saja yang punya peranan pada navigasi halaman artikel. Perhatikan kode (X)HTML dibawah ini:

<b:includable id='nextprev'>
 <div class='blog-pager' id='blog-pager'>
  
  <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
     <data:newerPageTitle/>
    </a>
   </span>
  </b:if>

  <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
     <data:olderPageTitle/>
    </a>
   </span>
  </b:if>

  <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

  <b:if cond='data:mobileLinkUrl'>
   <div class='blog-mobile-link'>
    <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
   </div>
  </b:if>
  
 </div>
 <div class='clear'/>
</b:includable>

Diantara sekumpulan kode (X)HTML navigasi halaman artikel diatas kita hanya akan mengambil 2 kode yang kemudian dimanipulasi agar mampu menampilkan judul artikel, yaitu:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' ...><data:newerPageTitle/></a>

Kode diatas terdiri dari fungsi:

class='blog-pager-newer-link' : ini merupakan style CSS yang digunakan untuk mengatur link 'Posting Lebih Baru' baik berupa pengaturan warna, tombol atau gambar background.
expr:href='data:newerPageUrl' : ini berisi URL 'Posting Lebih Baru' yang kemudian nanti akan diambil URL-nya melalui feed dan dimanfaatkan sebagai tag Anchor Link Judul Artikel pengganti 'Posting Lebih Baru'.
data:newerPageTitle : kode inilah yang menampilkan kalimat 'Posting Lebih Baru' dan kode ini pula nanti yang akan diganti dengan judul artikel.

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' ...><data:olderPageTitle/></a>

class='blog-pager-older-link' : ini merupakan style CSS yang digunakan untuk mengatur link 'Posting Lama' baik berupa pengaturan warna, tombol atau gambar background.
expr:href='data:olderPageUrl' : ini berisi URL 'Posting Lama' yang kemudian nanti akan diambil URL-nya melalui feed dan dimanfaatkan sebagai tag Anchor Link Judul Artikel pengganti 'Posting Lama'.
data:olderPageTitle : kode inilah yang menampilkan kalimat 'Posting Lama' dan kode ini pula nanti yang akan diganti dengan judul artikel. (Beberapa blogger kemudian mengganti kode ini dengan gambar misal <img src="img/navbaru.png"/>)

Skenario JSON dan jQuery

Dibawah ini adalah script JSON dan jQuery yang digunakan untuk memanipulasi navigasi halaman artikel/item. Namun tidak dijelaskan secara detail, silahkan anda jelaskan dan tulis sendiri pada artikel anda, dan saya akan mencantumkannya sebagai referensi. Jangan lupa tinggalkan informasi ketika anda selesai menerbitkan artikel tentang penjelasan script JSON dan jQuery dibawah ini.

/*!
 * jQuery Blogger Item Navigation 1.0
 * http://modification-blog.blogspot.com/
 * Copyleft 2012, Blogger Tune-Up
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * Date: Mon May 28 14:54:29 2012 -0500
 */
var JudNav = {};
//Fungsi pengambilan judul artikel melalui feed
function ambilJudNav(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var judul = json.feed.entry[i];
        var data = "";
        for (var k = 0; k < judul.link.length; k++) {
            if (judul.link[k].rel == 'alternate') {
                data = judul.link[k].href;
                break
            }
        }
        if (data != "") JudNav[data] = judul.title.$t
    }
}
//Fungsi penulisan sekumpulan judul feed dengan mengambilnya dari fungsi sebelumnya 'ambilJudNav'
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=ambilJudNav"></' + 'script>');
//Fungsi Pengambilan Anchor, Pengecekan URL dan Penggantian beberapa simbol
function JudulURL(anchor) {
    var linkurl = anchor.match(/\/([^\/_]+)(_.*)?\.html/);
    if (linkurl) {
        linkurl = linkurl[1].replace(/-/g, " ");
        linkurl = linkurl[0].toUpperCase() + linkurl.slice(1);
        if (linkurl.length > 28) linkurl = linkurl.replace(/ [^ ]+$/, "...")
    }
    return linkurl
}
//Mengganti 'Posting Lama' dan 'Posting Lebih Baru' dengan fungsi jQuery saat halaman di-load
$(window).load(function () {
    window.setTimeout(function () {
        var anchor = $("a.blog-pager-newer-link").attr("href");
        if (anchor) {
            var judul = JudNav[anchor];
            if (!judul) judul = JudulURL(anchor);
            if (judul) $("a.blog-pager-newer-link").html(judul)
        }
  anchor = $("a.blog-pager-older-link").attr("href");
        if (anchor) {
            var judul = JudNav[anchor];
            if (!judul) judul = JudulURL(anchor);
            if (judul) $("a.blog-pager-older-link").html(judul)
        }
    }, 500)
});

Integrasi Pada Blog

Dibawah ini integrasi script JSON jQuery pada template Blogger.
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Template - Edit HTML - Lanjutkan"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (Copy Paste) kode dibawah ini tepat diatas kode pada langkah 4:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://raw.github.com/hendriono/Blogger-Plugins/master/js/jquery.navitem.min.js'/>

Perhatian: Jika sudah pernah memasang framework jQuery maka kode baris pertama tidak perlu dimasukan.
Langkah 5
Klik tombol "Simpan Template" dan preview blog anda

Update Script jQuery tanpa Script JSON

Taufik Nurrohman menjelaskan bahwa script diatas cukup membebani load halaman blog dengan analisis pemanggilan feed sebanyak 500 artikel. Dan terima kasih untuk Mas Ireng yang kemudian memberikan solusi terbaiknya dengan membuang script JSON dan hanya menggunakan script jQuery untuk meload URL dan judul artikel. Script dibawah ini adalah solusi atas masalah kelemahan load feed JSON. Pada bagian "Integrasi Pada Blog" langkah 4 silahkan ganti kode menjadi seperti dibawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var newerLink = $('a.blog-pager-newer-link').attr('href');
 $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () {
        var newerLinkTitle = $('a.blog-pager-newer-link').text();
  $('a.blog-pager-newer-link').text('← ' + newerLinkTitle);
    });
    var olderLink = $('a.blog-pager-older-link').attr('href');
 $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () {
        var olderLinkTitle = $('a.blog-pager-older-link').text();
  $('a.blog-pager-older-link').text(olderLinkTitle + ' →');
    });
});
//]]>
</script>

Kesimpulan

Script ini tidaklah begitu penting untuk digunakan, namun jika ingin tampil beda, tidak ada salahnya diterapkan. Kode yang ditulis tidaklah terlalu banyak sehingga tidak terlalu membebani load halaman blog. Jika dalam penerapan terjadi kegagalan ada kemungkinan terjadi bentrok script pada blog anda. Periksa dengan hati-hati... Dan silahkan modifikasi script diatas sesuai dengan kebutuhan atau mungkin ingin mengembangkannya lebih bagus lagi sesuai karakter diri. Jika merasa lebih nyaman dengan menggunakan hosting file sendiri, silahkan unduh script-nya pada link dibawah ini dan upload pada web hosting miliki sendiri.

jQuery Blogger Item Navigation

jQuery Blogger Item Navigation Minified

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

jQuery Overlay Sederhana

noreply@blogger.com (Hendriono Dede) — Mon, 04 Jun 2012 05:52:00 +0000

Bismillah. Disela-sela kesibukan dunia teknik, Alhamdulillah masih sempat menulis artikel sederhana ini. Artikel kali ini akan membahas cara membuat efek overlay sederhana dengan jQuery. Namun tidak akan dijelaskan secara detail karena sepertinya terlalu panjang jika harus ditulis detail. Pada script yang disertakan diberikan penjelasan-penjelasan penting walau tidak detail, jadi silahkan dianalisis sendiri. Fungsi script overlay ini sebenarnya hanya secuil kode yang tersedia pada efek-efek overlay hebat (misal; colorbox, nivozoom, prettyPhoto, dll). Maka dari itu jangan membandingkan dengan plugin-plugin tersebut.

Demo dan Unduh jQuery Simple Overlay

Deskripsi

Ketika kita klik pada salah satu gambar yang memiliki keterangan tombol perbesar (icon +) maka gambar akan ditampilkan dengan efek luntur (fade) dalam ukuran besar beserta keterangan, sedangkan seluruh halaman ditutup dengan latar hitam transparan. Ketika tombol tutup (icon X) di klik dan atau latar hitam transparan diklik dan atau tombol ESC pada keyboard di tekan maka gambar disembunyikan dengan efek luntur (fade). Latar hitam transparan berfungsi untuk memfokus gambar dan artikel yang di tampilkan pada layar. Layar hitam transparan yang menutupi seluruh halaman sering disebut overlay. Untuk memahami bahasan berikutnya sebaiknya anda unduh terlebih dahulu file demo.

Skenario HTML

Skenario HTML dibawah ini terdiri dari 1 kontener, kontener ini berisi 3 area utama. Perhatikan kode HTML dibawah ini:

<div class="feat-overlay">

 <!-- Area Item 1-->
 <div class="item">
  <a class="bingkai" rel="overlay-1" href="#"><span class="perbesar"></span></a>
  <div class="thumb">
   <img height="147" border="0" width="217" alt="" src="gbr/banjarsari-s.jpg">
  </div>
  <h4>Judul Item</h4>
  <p>Keterangan Gambar Pendek</p>
 </div>
 
 <!-- Area Overlay Tersembunyi 1-->
 <div style="display: none;" id="overlay-1">
  <img height="383" border="0" width="585" alt="" alt="" src="gbr/banjarsari.jpg">
  <h5>Judul Overlay</h5>
  <p>Keterangan Gambar Panjang</p>
 </div>
 
 <!-- Area Item 2, 3, 4, dst -->
 <!-- Area Overlay Tersembunyi 2, 3, 4, dst -->
 
 <!-- Area Untuk Menampilkan Overlay Tersembunyi -->
 <a href="#" id="latar"></a>
 <div class="info-overlay">
  <a href="#" class="tutup"></a>
  <div class="txt">
   <h5>loading...</h5>
  </div>
 </div>

</div>

feat-overlay adalah kontener dari seluruh overlay yang akan dibuat.
item merupakan wadah yang berisi gambar thumbnail dan penggalan keterangan. Jumlah wadah item ini tidak terbatas, anda bisa membuatnya sebanyak mungkin, namun hal yang terpenting adalah tag rel. Tag rel tidak boleh sama, harus unik. Misal disana tertulis overlay-1 maka berikutnya anda bisa menggunakan overlay-2, overlay-3 dan seterusnya.
overlay-1 adalah wadah dari area informasi lengkap overlay yang disembunyikan pada saat halaman di-load. Didalamnya berisi gambar dalam ukuran besar dan informasi secara lengkap. Tag id overlay-1 juga harus unik, karena ini terkait langsung dengan tag rel item. Misal, pada item tertulis rel="overlay-1" maka informasi lengkapnya tersedia pada id="overlay-1", maka yang berikutnya ditulis; rel="overlay-2" (pada item) dan id="overlay=2" (pada area informasi lengkap) dan seterusnya.
Informasi lengkap yang tersimpan pada id="overlay-1" dan seterusnya, akan ditampilkan saat gambar di klik pada satu area saja, yaitu area info-overlay. Area info-overlay adalah lokasi untuk menampilkan semua informasi lengkap (gambar besar dan keterengan lengkap) overlay-1, overlay-2 dan seterusnya. Namun wadah ini hanya cuku ditulis satu kali saja.

Skenario CSS

Kode CSS dibawah ini hanya terdiri dari 2 bagian utama, yaitu bagian list item dan bagian overlay. List item berfungsi untuk mengatur bagian-bagian item (gambar thumbnail, judul, teks pendek dan tombol perbesar), informasi lengkap (frame, gambar besar, judul dan teks lengkap). Sedangkan bagian overlay berisi tentang pengaturan latar (warna, area dan opacity), informasi lengkap (frame, teks lengkap, gambar besar dan tombol tutup). Secara detail silahkan dipelajari sendiri (ma'af kepanjangan jika dijabarkan).

/* List Item */
.feat-overlay {
 width: 725px;
 margin: 0 auto;
}
.feat-overlay .item {
 position: relative;
 float: left;
 width: 249px;
 padding-bottom: 15px;
}
.feat-overlay .item.last {
 width: 225px;
}
.feat-overlay span.perbesar {
 background: transparent url(../img/enlarge.png) no-repeat top left;
 position: absolute;
 z-index: 3;
 top: 133px;
 left: 201px;
 width: 22px;
 height: 22px;
 z-index: 8;
}
.feat-overlay a.perbesar {
 background: transparent url(../img/enlarge.png) no-repeat top left;
 position: absolute;
 z-index: 3;
 top: 133px;
 left: 201px;
 width: 22px;
 height: 22px;
 z-index: 8;
}
.feat-overlay a:hover span.perbesar, .feat-overlay a.perbesar:hover {
 background-position: 0 -26px;
}
.feat-overlay .item .thumb {
 width: 217px;
 height: 147px;
 overflow: hidden;
 margin-bottom: 9px;
 position: relative;
}
.feat-overlay .item .bingkai {
 background: transparent url(../img/bg-item.png) no-repeat top left;
 position: absolute;
 z-index: 2;
 top: 0;
 left: 0;
 width: 217px;
 height: 147px;
}
.feat-overlay .item h4 {
 width: 213px;
 font-size: 14px;
 line-height: 16px;
 font-weight: bold;
 padding: 0 2px 4px 0;
}
.feat-overlay .item p {
 line-height: 16px;
 width: 213px;
 padding-left: 2px;
}
.clear {
 clear: both;
 font-size: 1px;
 line-height: 0;
 margin: 0;
 padding: 0;
}

/* Overlay */
#latar {
 position: fixed;
 z-index: 15;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: 0;
 visibility: hidden;
}
.info-overlay {
 background: transparent url(../img/bg-overlay.png) no-repeat top left;
 z-index: 20;
 position: fixed;
 margin: auto;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 width: 872px;
 height: 435px;
 opacity: 0;
 visibility: hidden;
 *position: absolute;
 *zoom: 1;
 *visibility: visible;
 *display: none;
}
.info-overlay .overlay-img {
 float: left;
 width: 585px;
 height: 383px;
 margin: 26px 20px 0 26px;
 *display: inline;
 *zoom: 1;
 *position: relative;
}
.info-overlay .txt {
 position: relative;
 z-index: 1;
}
.info-overlay .txt img {
 float: left;
 width: 585px;
 height: 383px;
 margin: 26px 20px 0 26px;
 *display: inline;
 *zoom: 1;
 *position: relative;
}
.info-overlay .txt h5 {
 font: 14px/16px Helvetica, Arial, sans-serif;
 color: #404040;
 width: 210px;
 margin: 34px 0 6px 0;
 font-weight: bold;
 float: left;
}
.info-overlay .txt p {
 width: 210px;
 line-height: 16px;
 float: left;
}
.info-overlay a.tutup {
 background: transparent url(../img/close.png) no-repeat top left;
 position: absolute;
 z-index: 1;
 top: 1px;
 right: 0px;
 width: 29px;
 height: 30px;
 z-index: 2;
}
.info-overlay a.tutup:hover {
 background-position: 0 -32px;
}
* html #latar {
 position: absolute;
 height: expression(document.body.offsetHeight);
 filter: alpha(opacity=0);
}

Skenario jQuery

Script dibawah ini digunakan untuk mengatur fungsi overlay. Ketika gambar di klik $(.item a).click maka overlay diaktifkan dan informasi lengkap juga ditampilkan. Ketika #latar, tombol tutup di klik dan atau tombol ESC di tekan maka overlay disembunyikan. Begitulah garis besar fungsi script jQuerynya. Mengenai secara lengkap, silahkan jabarkan sendiri... (ge males...)

$(document).ready(function(){
 
 var bukaOverlay = false;
 
 // tampilkan overlay
 $('.item a').each(function(){
  $(this).click(function(){
   bukaOverlay = true;
   
   if ($.browser.msie) {
    // menampilkan overlay dengan efek luntur (fade)
    var posisi = $('.feat-overlay').offset();
    $('.info-overlay').css('left', (posisi.left+44) + 'px');
    $('.info-overlay').css('top', (posisi.top-10) + 'px');
    $('#latar').css('visibility', 'visible');
    $('#latar').animate({ opacity:"0.8" }, 200, function() { 
     $('.info-overlay').css('display', 'block');
    });
   } else {
    $('#latar').css('visibility', 'visible');
    $('.info-overlay').css('visibility', 'visible');
    $('#latar').animate({ opacity:"0.8" }, 100, function() { 
     $('.info-overlay').animate( { opacity:"1" }, { queue:false, duration:200 } )
    });
   }
   
   // ubah isi overlay jika tersedia
   if($( '#' + $(this).attr('rel') ) != null){
    $('.txt').html( $( '#' + $(this).attr('rel') ).html() );
   }
   return false;
  });
 });
 
 // tutup overlay dengan event klik dan tombol ESC
 $('#latar').click(function(e) {
  e.preventDefault();
  tutupOverlay();
 });
 
 $('.info-overlay .tutup').click(function(e) {
  e.preventDefault();
  tutupOverlay();
 });
 
 $(document).keyup(function(event) {
  if ((event.keyCode == 27) && (bukaOverlay)) {
   tutupOverlay();
  }
 });
 
});

// membuat fungsi tutup overlay
function tutupOverlay() {
 bukaOverlay = false;
 if ($.browser.msie) {
  $('.info-overlay').css('display', 'none');
  $('#latar').animate({ opacity:"0" }, 200, function() { 
   $('#latar').css('visibility', 'hidden');
  });
 } else {
  $('.info-overlay').animate({ opacity:"0" }, 200, function() { 
   $('#latar').animate({ opacity:"0" }, 100, function() { 
    $('#latar').css('visibility', 'hidden');
    $('.info-overlay').css('visibility', 'hidden');
   });
  });
 }
}

Kesimpulan

jQuery overlay sederhana (jQuery Simple Overlay) ini memang sangat sederhana, karena bukanlah sebuah plugin yang kompleks. Dan anda bisa saja kemudian menyusun ulang script diatas untuk dibuat plugin yang lebih sederhana. Mengenai fungsi-fungsinya mari kita diskusikan pada kotak komentar atau pada fan page Blogger Tune-Up. Penggunaan overlay diatas bisa disesuaikan dengan keperluan anda, bisa untuk halaman depan blog atau halaman portofolio. Selanjutnya silahkan berkreasi dengan script diatas, anda bebas memodifikasinya sesuai dengan kebutuhan. Selamat mencoba, belajar dan obrak-abrik script. Semoga berhasil. Akhirnya kata Happy Blogging :)

Menyembunyikan Teks Diatas Gambar (Font Crush)

noreply@blogger.com (Hendriono Dede) — Sun, 27 May 2012 10:41:00 +0000

Bismillah. Alhamdulillah. Untuk menampilkan gambar logo sebuah website, kita biasanya mengganti nama anchor link pada bagian header H1 dengan gambar logo, padahal H1 secara semantic digunakan sebagai identitas pada situs tersebut, sehingga ada pula yang menggunakan metode CSS untuk menempatkan gambar logo. Gambar Logo diletakan pada kode CSS sebagai background, pada saat halaman di-load, gambar logo dianggap background oleh header H1. Jika title atau judul header H1 tidak diset indentasinya, maka title akan menimpah gambar logo karena title berada diatas gambar logo (lihat ilustrasi gambar).

Skenario HTML CSS

Dibawah ini termasuk cara lama yang masih tetap banyak digunakan dan sampai saat ini masih dianggap cara yang terbaik. Kode HTML untuk menampilkan Judul situs dibagian header pada umumnya ditulis seperti ini:

<header><h1 class="sembunyikan">Judul Website</h1></header>

Kemudian agar gambar logo bisa muncul biasanya kode CSS ditulis seperti ini:

.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
}

Jika kode CSS ditulis seperti diatas maka gambar logo akan tertutup Judul Website, untuk mengakalinya biasanya ditambahkan kode indentasi teks seperti dibawah ini:

text-indent: -9999px;

sehingga apabila kode CSS digabungkan menjadi seperti dibawah ini:

.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
text-indent: -9999px;
}

text-indent atau indentasi teks digunakan untuk menggeser Judul Website sejauh mungkin dari area halaman atau sebesar -9999px (indentasi bisa bernilai positif atau negatif). Metode seperti diatas sampai hari ini masih dapat digunakan dan browser masih mampu me-render dengan sempurna, namun ada kemungkinan ketika HTML5 sudah menjadi standar bahasa HTML menggantikan HTML4 secara total, ditakutkan metode tersebut sudah tidak layak digunakan. Kemungkinan terbesar adalah browser tetap menampilkan teks walau indentasinya digeser sejauh mungkin, semakin jauh indentasi teks maka semakin lebar halaman situs, padahal yang ditampilkan hanya sebuah Judul Website. Hal ini juga didiskusikan pada HTML5 Boilerplate sebagai salah satu pengembang HTML5.

Metode "Font Crush"

Metode dibawah ini merupakan metode lain yang digunakan untuk menyembunyikan Judul Website dan memuncul gambar logo tanpa menggunakan indentasi teks atau text-indent. text-indent digantikan kode-kode seperti dibawah ini:

font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;

sehingga jika di gabungkan menjadi seperti dibawah ini:

.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}

Apa yang Dilakukan Deklarasi Ini?

Jika kita perhatikan, mungkin ada kejanggalan dan tidak lazim dari kode CSS yang digunakan. Namun mari kita telusuri, apa yang bisa dilakukan oleh deklarasi kode CSS tersebut.

font: 0/0 a; ini adalah shorthand property untuk mengkosongkan ukuran huruf (font-size) dan spasi antar baris (line-height). Sedangkah nilai a adalah font-family terpendek (idenya diambil dari BEM implementation of this method). CSS Validator jelas akan menolak penggunaan 0/0 pada shorthand property font namun browser akan tetap menampilkannya tentunya dengan pemberitahuan error validasi. Makanya kemudian shorthand property ditambahkan nilai a sehingga menjadi font: 0/0 a; untuk melewati atau meloloskan kode CSS agar tetap dianggap valid oleh validator dan ternyata dengan penambahan value a halaman dianggap valid.
text-shadow: none; ini untuk memastikan bahwa tidak terdapat inherit text-shadow pada property CSS lain yang mempengaruhi class tersebut dan jika ternyata ada maka deklarasi ini akan mengkosongkannya atau menghilangkannya.
color: transparent; ini dibutuhkan apabila browser tidak mampu me-render deklarasi sebelumnya dengan baik. Karena pada beberapa browser, properti-properti yang tidak lazim tidak akan digunakan atau di-render sehingga properti yang paling dekatlah yang kemudian digunakan. Properti color: transparent; inilah yang kemudian akan membuat huruf atau judul seakan hilang atau transparan sehingga tidak tampak pada browser.
background-color: transparent; ini berfungsi untuk menyembunyikan/membuang warna latar yang (kemungkinan) dipengaruhi oleh style lain.

Pada HTML5 Boilerplate juga ditambahkan border: 0; pada properti elemen. Hal ini memudahkan penggunaan class pada elemen seperti halnya tombol (button) atau link yang menggunakan background sebagai pengganti teks.

Keuntungan Metode "Font Crush"

Metode diatas mampu menyelesaikan berbagai masalah yang muncul dengan metode text-indent, termasuk yang pernah diusulkan oleh Scott Kellum untuk menghindari masalah kinerja pada iPad 1 mengenai indentasi teks negatif (negatif text-indent).

Bekerja dengan sempurna pada IE6 dan IE7 pada elemen dengan properti inline-block. Sedangkan metode indentasi teks (text-indent) tidak mampu menampilkannya dengan sempurna bahkan cenderung hancur, seperti yang ditunjukan pada uji kasus ini (silahkan buka dengan IE6/IE7).
Tidak menampilkan kotak offscreen (kotak rahasia). Metode text-indent menampilkan sebuah kotak lain yang dibuat didalamnya (kadang-kadang offscreen) untuk setiap teks dengan properti text-indent positif atau negatif. Dan kadang-kadang menimbulkan masalah performa.
Tidak perlu menentukan spesifikasi text-alignment dan overflow: hidden; karena font (huruf) dihancurkan (crush) sehingga tidak memiliki ruang.
Tidak perlu menyembunyikan tag br (line break) atau membereskan tag HTML dengan display: inline; karena masalah yang ditimbulkan oleh text-indent.
Hanya diperlukan sedikit perbaikan pada style akibat penggunaan metode ini.

Kesimpulan

Metode ini hanya salah satu cara dari sekian banyak cara untuk menyembunyikan huruf/karakter diatas background/gambar, dan metode ini masih terus didiskusikan. Anda bisa meninggalkan komentar penting tentang kegagalan metode diatas pada HTML5 Boilerplate GitHub issue tracker.

Special thanks to Nicolas Gallagher dan HTML5 Boilerplate for Font Crush Methode. Happy Blogging :)