Open Graph Metadata Untuk Blogger

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...
Open Graph Metadata Untuk Blogger

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.
Proses Pengambilan Metadata
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:
Memeriksa Metadata

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.

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

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

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

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...
 Integrasi Facebook dengan Blog

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).
Facebook Authentication Process

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

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.
Membuat Aplikasi Facebook

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
Membuat Aplikasi Facebook
Langkah 4
Klik tombol "+ Create New App"
Membuat Aplikasi Facebook
Langkah 5
Kotak Dialog "Create New App" terbuka, isilah data yang diperlukan kemudian klik tombol "Lanjutkan"
Mengisi Form Aplikasi Facebook
Langkah 6
Isilah kotak "Pemeriksaan Keamanan" sesuai dengan gambar yang tampil kemudian klik tombol "Kirim"
Verifikasi Form Aplikasi Facebook
Langkah 7
Halaman Aplikas terbuka seperti gambar dibawah ini.
Halaman Setting Aplikasi Facebook
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:
Update Status dari Aplikasi Facebook
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:
Update Status dari Aplikasi Facebook
5. Kemudian "BAGIKAN!!!"... Berhasil!!!

Selamat mencoba dan semoga berhasil. Happy Blogging :)

jQuery Modal Popup - Form Newsletter

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.
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:
  1. 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)
  2. 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.
  3. 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

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.
Cloning sama dengan Plagiat

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)

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.
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:
Image Maps - Map Area Coords
Image Maps - Map Area Coords
Image Maps - Map Area Coords
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:
  1. rect atau rectangle atau segi empat, ini digunakan untuk menentukan area yang bisa diklik dengan bentuk segi empat
  2. circle atau lingkaran, ini digunakan untuk menentukan area yang bisa diklik dengan bentuk lingkaran.
  3. poly atau polygon atau segi tidak beraturan, ini digunakan untuk menentukan area yang bisa diklik dengan bentuk segi tidak beraturan.
  4. 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:
Image Maps - Map Area Coords
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:
Image Maps - Map Area Coords

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:
Image Maps - Map Area Coords
  • 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

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.
Plugin jQuery Menu Klik Kanan

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

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?
Ubah Nama Navigasi Halaman Artikel

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.

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