Rich Snippets - Blogger Authorship

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:

• Microformats rel author
• Author information in search results

(X)HTML Semantic

jQuery CDN Failover

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

jQuery .submit() & Google Custom Search Engine

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 :)

jQuery Widget

Membuat dan Memasang Google Custom Search Engine

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:

• Membuat Mesin Penelusuran Khusus
• Custom Search Help
• Dokumentasi pengembang
• Google Custom Search Engine Blog
• Google Custom Search Engine TOS
• Video Introduction to Google Custom Search

Tools Widget

Cara Membuat Text Shadow CSS Efek Blur

Membuat Text Shadow Efek Blur

Cara Membuat Text Shadow Efek Blur ~ Tutorial CSS 3 Efek Shadow Text On Mouse Blur sekarang kita belajar lagi menggunakan CSS dengan memanfaatkan fasilitas Text Shadow menjadi Blur. Efek Shadow ini banyak digunakan pada Blogazine untuk lebih menghidupkan Blog / Web mereka.

Tutorial CSS 3 Efek Text Shadow On Mouse Blur ini akan menjadi berubah ketika cursor didekatkan ke Text. Memanfaatkan Hover yang ada pada CSS Tutorial ini bagus untuk Blog bercitra Dark atau Gelap sehingga kelihatan menyala. Namun tidak menutup kemungkinkan untuk dipasang pada Blog bergaya simple dengan dasar putih.

Anda bisa melihat contohnya seperti pada gambar diatas, tulisan yang menyamping dengan aturan kemiringan dan efek shadow juga Blur yang terkombinasi dengan baik.

Demo klik [+]

HTML 

<div id="wrapper" contenteditable="true" spellcheck="false">      
        <p>Where</p>
        <p>are the</p>
        <p>trees</p>
</div>

​CSS

/* Wrapper ------------------------------------------------------ */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
 
    background-color: hsla(30,20%,95%,.9);
 
    /* Pixel pattern only enabled for WebKit because of performance */  
    background-size: 2px 3px;
    background: hsla(30,20%,95%,.9) -webkit-linear-gradient(45deg, hsla(0,0%,0%,0)  0px,
                                                                    hsla(0,0%,0%,0)  1px,
                                                                    hsla(0,0%,0%,.1) 2px,
                                                                    hsla(0,0%,0%,.1)  3px);
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
 
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
 
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-box-pack: center;
         -o-box-pack: center;
            box-pack: center;
    }
#wrapper {
    position: relative;
    background :#333;
    /z-index: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 0 auto;
    width: 600px;
    padding: 7em 0;
    background: url(bg.jpg) no-repeat center center;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
 
    -webkit-perspective: 350;
       -moz-perspective: 350;
        -ms-perspective: 350;
         -o-perspective: 350;
            perspective: 350;
    }
 
    #wrapper:focus {
        outline: none;
        }

#wrapper p {
    font-size: 10em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow:     rgba(0,0,0,0.1) 0 20px 80px;
    -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
    }

/* Hover ------------------------------------------------------ */
#wrapper:hover p {
    color: hsla(0,0%,0%,0);
 
    -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
       -moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
        -ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
         -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
            transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
 
    -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
    }
#wrapper:hover p:nth-child(1) {
    font-size: 9em;
    text-shadow:     #fff 0 0 10px,
                    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    text-indent: 0.3em;
    }
#wrapper:hover p:nth-child(2) {
    font-size: 10em;
    text-shadow:     #fff 0 0 1px,
                    #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }
#wrapper:hover p:nth-child(3) {
    font-size: 11em;
    text-shadow:     #fff 0 0 2px,
                    #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }

/* Middle ------------------------------------------------------ */
#wrapper p:nth-child(2):hover {
    text-shadow:     #fff 0 -5px 1px,
                    #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px,
                    rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
 
#wrapper p:nth-child(2):active {
    text-shadow:     rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
/*effand bocah nozh*/
#wrapper p::selection {
    background-color: red;
    }

Silahkan dicomot dan dimodifikasi gan, jangan lupa Es Degan nya di tinggalin dibawah biar tambah Brrrr ..
Ref : http://simurai.com

CSS

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS

Cara Membuat List Styles Dengan CSS ~ Tutorial Membuat List Menu Hover berikut adalah tutorial CSS untuk membuat List Menu Hover, triks ini saya dapat dari http://designshack.net anda bisa mencobanya dan tentunya tetap untuk mampercantik blog kita.

Tutorial Membuat List Menu Hover sudah banyak juga diterangkan di blog-blog lain sehingga jika disini beda bisa anda terapkan di blog anda.

Tidak ada salahnya juga anda memodifikasinya agar lebih jan jos tenan.

Oke sekarang anda bisa mencobanya, berikut ini script yang bisa anda pakai dan modifikasi :

HTML :

<div>
  <h2>List Hover</h2>
  <ul>
    <li><a href="#">Demo 1</a></li>
    <li><a href="#">Demo 2</a></li>
    <li><a href="#">Demo 3</a></li>
    <li><a href="#">Demo 4</a></li>
    <li><a href="#">Demo 5</a></li>
  </ul>
</div>​

CSS :

div {
  width: 200px;
}

h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

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

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border: none;
}

li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

li a:hover {
  font-size: 30px; color:#026aba;
  background: #f6f6f6;
}​

Selesai sudah agan-agan, silahkan dicomot dan jangan lupa tinggalkan baunya dibawah untuk mempererat jalinan blogger Indonesia.

Demonya : Klik [+]

CSS

Membuat Text Shadow Dengan CSS

Tutorial Membuat Text Shadow menggunakan CSS 

Cara Membuat Text Shadow Dengan CSS ~ Tutorial Membuat Text Shadow menggunakan CSS lanjutan tutorial sebelumnya tentang text shadow, Kali ini untuk text shadow lanjutan untuk tambahan koleksi text shadow yang saya punya dan saya share saja agar temen-temen tahu bagi yang belum tahu dan yang sudah tahu harap di buat baca-baca saja, hee..

Tutorial Membuat Text Shadow menggunakan CSS ini saya adopsi dari tutorial dari website luar negeri yang menurut saya perlu saya share untuk pengetahuan kita semua.

Sekarang ayo kita lihat beberapa demonya :

CSS :

.shadow  { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px;  }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666;  } 

 HTML :

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

Diatas hanya untuk contoh saja.

Sekarang Kita Belajar Membuat text Shadow Dengan CSS


1. Double Text

Double Text Shadow

Script : text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

2. Close and Heavy

Text Shadow  Close and Heavy

Script : text-shadow: 0px 4px 3px rgba(0,0,0,0.4),             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);









3. Text Shadow 3D

Text shadow 3 dimensi (3D)

Script : text-shadow: 0 1px 0 #ccc,   0 2px 0 #c9c9c9,  0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa,  0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3),  0 3px 5px rgba(0,0,0,.2),   0 5px 10px rgba(0,0,0,.25),  0 10px 10px rgba(0,0,0,.2),  0 20px 20px rgba(0,0,0,.15);

4. Text Shadow Glowing

Text Shadow Glowing

Script : text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

5. Text Soft Embos

Membuat Text Shadow Dengan CSS

Script : color: rgba(0,0,0,0.6);

            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),

            0px -5px 35px rgba(255,255,255,0.3);

6. Text Shadow Down

Shadow and down

Script : text-shadow: 0px 3px 0px #b2a98f,

                 0px 14px 10px rgba(0,0,0,0.15),

                 0px 24px 2px rgba(0,0,0,0.1),

                 0px 34px 30px rgba(0,0,0,0.1);

Oke kawand, diatas 6 tutorial CSS untuk membuat efek shadow dan masih bisa kamu modifikasi lagi. Tutorial sejenis akan saya lanjutkan ditutorial part ke-2.

Coming Soon...

CSS

Blogger Meta Description

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:

• Google Does Not Use Keywords Meta Tag in Web Ranking
• How To "Legally" Hide Words On Your Pages For Search Engines
• Serving Filters
• Meta Tags

(X)HTML Semantic

Blogger Widget - Cumulus Label Cloud

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 :)

Widget

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS

Membuat Menu Blog Hover Dengan CSS ~ Tutorial Cara Membuat Menu di Blog ini bisa kita pakai di blog kita sebagai variasi untuk mempercantik blog kita. Menu yang ada diatas blog bisa kita tambahi script ini untuk memperindah blog kita tentunya.

Anda bisa membuat tampilannya dengan sedikit perubahan mungkin menambahi Hover, Text Shadow dan Box Efek shadow dengan CSS.

Anda bisa melihat contohnya di bawah ini.

• Button 1
• Button 2
• Button 3
• Button 4
• Button 5

Anda bisa melihat demonya diatas dan anda bisa memodifikasi nya agar sesuai dengan template blog Anda.

Script nya bisa anda copy dibawah ini
Embed Script CSS

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

 HTML

 <ul>
        <li>Button 1</li>
        <li>Button 2</li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
</ul>

Langsung Praktek Gan. .

CSS