Sunday, May 27, 2012

Menyembunyikan Teks Diatas Gambar (Font Crush)

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

Skenario HTML CSS

Dibawah ini termasuk cara lama yang masih tetap banyak digunakan dan sampai saat ini masih dianggap cara yang terbaik. Kode HTML untuk menampilkan Judul situs dibagian header pada umumnya ditulis seperti ini:
<header><h1 class="sembunyikan">Judul Website</h1></header>
Kemudian agar gambar logo bisa muncul biasanya kode CSS ditulis seperti ini:
.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
}
Jika kode CSS ditulis seperti diatas maka gambar logo akan tertutup Judul Website, untuk mengakalinya biasanya ditambahkan kode indentasi teks seperti dibawah ini:
text-indent: -9999px;
sehingga apabila kode CSS digabungkan menjadi seperti dibawah ini:
.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
text-indent: -9999px;
}
text-indent atau indentasi teks digunakan untuk menggeser Judul Website sejauh mungkin dari area halaman atau sebesar -9999px (indentasi bisa bernilai positif atau negatif). Metode seperti diatas sampai hari ini masih dapat digunakan dan browser masih mampu me-render dengan sempurna, namun ada kemungkinan ketika HTML5 sudah menjadi standar bahasa HTML menggantikan HTML4 secara total, ditakutkan metode tersebut sudah tidak layak digunakan. Kemungkinan terbesar adalah browser tetap menampilkan teks walau indentasinya digeser sejauh mungkin, semakin jauh indentasi teks maka semakin lebar halaman situs, padahal yang ditampilkan hanya sebuah Judul Website. Hal ini juga didiskusikan pada HTML5 Boilerplate sebagai salah satu pengembang HTML5.

Metode "Font Crush"

Metode dibawah ini merupakan metode lain yang digunakan untuk menyembunyikan Judul Website dan memuncul gambar logo tanpa menggunakan indentasi teks atau text-indent. text-indent digantikan kode-kode seperti dibawah ini:
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
sehingga jika di gabungkan menjadi seperti dibawah ini:
.sembunyikan {
background: url(./gambar/logo.png) no-repeat 0 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}

Apa yang Dilakukan Deklarasi Ini?

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

Keuntungan Metode "Font Crush"

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

Kesimpulan

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

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

Friday, May 25, 2012

CSS Membuat Background Gradient

CSS Membuat Background Gradient - Triks berikut ini adalah lanjutan dari tips belajar CSS dari awal yang juga adalah hasil dari googling di Internet. Oke marilah kita belajar lagi tentang CSS yang masih banyak menyimpan Rahasia ini.

Kali ini kita akan buat CSS untuk Background Gradient kalau kalian masih bingung bisa melihat gambar berikut ini :















Script : 

background-image:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#999));
background-image:
-moz-linear-gradient(100% 100% 90deg, #999, #eee);

Mozilla :

background-image:
-moz-linear-gradient(bottom, #999, #eee);

Setelah di praktekkan untuk membuat CSS Gradient adalah sb :

CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS 

Oke, silahkan dicoba dulu agan2 yang terhormat !!!
Salam Blogger Donomulyo.

Thursday, May 24, 2012

Membuat Update Comment Blog Berjalan

Membuat Update Comment Blog Berjalan
Tutorial Membuat Update Comment Blogspot Berjalan - Comment Pada Blog yang Berjalan Otomatis ini adalah lanjutan tutorial blog sebelumnya, kali ini kita akan mencoba membuat Update Comment Blog Berjalan pada blog. Ketika kita melihat blog kita maka biasanya kita akan juga melihat commentar dari blog sahabat kita atau penugnjung yang kebetulan main-main ke blog kita.



Cara Membuat Update Comment Blog Berjalan ini memanfaatkan javascript sehingga bisa dengan mudah anda masukkan kedalam blog tanpa harus mengubah script dalam di blog anda.

Untuk cara Membuat Update Comment Blog Berjalan silahkan anda ikuti langkah berikut ini.
  1. Silahkan anda Log in ke account Blog anda.
  2. Masuk kedalam Edit Tata Letak
  3. Add gadget/widget dimana anda ingin menampilkan Update Comment Blog Berjalan ini.
  4. Copy script berikut ini
<marquee align="center" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2">
<script src="http://buternaker.googlecode.com/files/comment-slide.js">
</script>
<script>
var numcomments = 15;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://aregnoz.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments">
</script>
</marquee>

  5. Ganti tulisan warna Merah dengan Alamat Blog Anda.

Langkah terakhir silahkan save. Demikian langkah-langkah Membuat Update Comment Blog Berjalan.
Selamat mencoba.

Tuesday, May 22, 2012

CSS Memberi Model Font Pada Artikel

CSS Memberi Model Font Pada Artikel - Biasanya kita memakai font bawaan dari Blog sendiri yang tetap itu-itu aja. Kita dapat memberi model font yang berbeda pada tulisan kita. Tidak terlalu sulit untuk membuatnya dan mungkin sebagian dari kalian juga sudah pada tau.

Berikut ini caran kita membuat CSS Memberi Model Font Pada Artikel :
CSS Memberi Model Font Pada Artikel
CSS Memberi Model Font Pada Artikel


@font-face {
     font-family: 'Fontin-Italic';
     src: url('/fonts/Fontin-Italic.otf') format('opentype');
}
h1 { font-family: 'Fontin-Italic', Georgia, Serif; }

Silahkan Anda Coba!!!!

Monday, May 21, 2012

Text Editor Script Code Populer

Bismillah. Alhamdulillah. Setelah melakukan polling mengenai Text Editor Script Code yang paling sering digunakan oleh para web desainer dan script coder didunia maya, dibawah ini akan disampaikan hasil dari pengambilan suara tersebut. Hasil polling ini bukan berarti mewakili suara secara global, namun lebih bersifat lokal untuk wilayah Indonesia saja. Dan hasil polling ini bukan berarti mempengaruhi atau mengharuskan anda berganti text editor yang sudah biasa anda gunakan. Ini hanya sebuah gambaran secara umum, mengenai cocok dan tidak cocok dengan hasil polling ini, semua kembali kepada kebiasaan anda dalam menggunakan text editor. Text Editor dengan peringkat teratas bukan berarti text editor yang paling sempurna, hanya kebetulan Text Editor tersebut ternyata lebih banyak digunakan oleh para web desainer dan script coder yang tentunya dengan beberapa alasan yang akan sedikit diulas. Dibawah ini peringkat Text Editor hasil polling yang diurutkan dari peringkat 1 hingga yang paling jarang digunakan.


1. Notepad++ (Freeware)

Ini Text Editor paling populer yang banyak digunakan oleh web desainer dan web developer terutama di Indonesia. Namun sayang Text Editor ini hanya diperuntukan bagi mereka yang menggunakan Sistem Operasi Microsoft. Sedangkan untuk pengguna keluarga Unix (X Windows) Notepad++ tidak tersedia. Text Editor ini menjadi populer karena memiliki interface yang userfriendly, menu yang sederhana, gratis, dan memiliki kemampuan mengenali banyak sekali bahasa pemrogramman, serta terintegrasi syntax highlighter. Didukung banyak sekali plugin yang juga disediakan secara gratis, membuat Notepad++ mampu menjadi favorit. Dan saya juga termasuk paling sering menggunakan Notepad++ untuk menulis, termasuk menulis artikel ini.
Text Editor Script Code

2. gEdit (Opensource)

Peringkat ke-2 ditempati gEdit. Ini pertanda baik bagi perkembangan Opensource Indonesia. Jika gEdit mendapat posisi ke-dua berarti para web desainer dan web developer Indonesia sudah banyak yang beralih dari sistem operasi Microsoft ke sistem operasi sumber terbuka (Opensource) yaitu Linux. gEdit awalnya dikembangkan untuk keluarga Unix dan tersedia bagi para pengguna sistem operasi Linux namun sekarang sudah tersedia untuk semua sistem operasi. gEdit menjadi dikenal dan terkenal karena merupakan text editor default yang disertakan pada beberapa sistem operasi keluarga Linux. Terutama bagi para pengguna Ubuntu, gEdit layaknya Notepad pada Microsoft. Selain interface yang userfriendly, sederhana, gratis, sumber terbuka, juga mampu mengenali banyak bahasa pemrograman serta terintegrasi syntax highlighter sehingga memudahkan dalam penulisan kode-kode. Sebelum saya mengenal gVim, gEdit merupakan yang paling sering digunakan.
Text Editor Script Code

3. Dreamweaver (Berbayar)

Tidak bisa dipungkiri, bahwa text editor ini sangat hebat walau berbayar. Banyak sekali para web desainer dan web developer professional menggunakan perangkat lunak yang satu ini. Mengenai harga sepertinya saya tidak perlu mencantumkannya karena jika ditelusuri dengan jujur, masih sedikit yang rela merogoh dompetnya untuk membeli lisensi Dreamweaver buatan perusahaan Adobe ini. Walaupun mahal, tetap saja text editor ini merupakan yang populer digunakan. Interface yang sangat modern, mendukung berbagai bahasa pemrograman, didukung syntaxhighter, plugin yang melimpah, live preview dan masih banyak keunggulan lainnya jika dibandingkan dengan text editor yang sudah dibahas dan akan dibahas berikutnya. Dreamweaver hanya tersedia untuk sistem operasi Microsoft dan Macintosh. Wajar Dreamweaver sangat hebat, toh kita harus mengeluarkan dana ekstra untuk dapat menggunakan Dreamweaver. Kecuali anda mengambil jalur tak terlihat alias siluman.
Text Editor Script Code

4. Vim (Opensource)

Text Editor yang satu ini masih jarang digunakan di Indonesia, karena memang termasuk cukup sulit untuk digunakan. Bagi anda yang terbiasa dengan Notepad++ dan gEdit mungkin akan kerepotan saat awal-awal menggunakannya, hal ini karena gVim sangat minim penggunaan mouse bahkan bagi para pecinta Vim, text editor ini digunakan hampir tanpa mouse. gVim merupakan versi GUI hasil pengembangan dari Vim yang pada awalnya hanya tersedia untuk komputer Amiga (1991). Namun jika kita menelusuri Vim pada tingkatan global, justru Vim-lah yang paling banyak digunakan oleh para web desainer dan web developer. gVim layaknya Notepad++ dan gEdit, tersedia secara gratis, melimpah plugin, didukung syntax highlighter, dan yang sangat menarik bagi saya secara pribadi, Vim tersedia untuk semua sistem operasi, baik itu pengguna sistem operasi Microsoft, Linux, XOS (Macintosh), dan sistem operasi turunan keluarga unix lainnya. Dengan ini kita tidak perlu berganti text editor ketika berganti sistem operasi.
Text Editor Script Code

5. TextMate (Berbayar)

Secara pribadi saya belum pernah merasakan text editor eksklusif ini. Karena TextMate hanya tersedia untuk pengguna sistem operasi XWindows (Macintosh) yang tentunya hanya orang-orang tertentu saja yang memiliki komputer sekelas Macintosh ini. Dan saya sepertinya tidak bisa panjang lebar membahas TextMate, karena sama sekali diluar kemampuan (maklum Blogger kampungan kelas kere). Jika anda telusuri video di Youtube tentang TextMate maka anda akan menemukan nuansa eksklusif pada TextMate. Jika saya mau jujur, TextMate ini berhubungan dengan masalah gengsi. Video-video tutorial TextMate disuguhkan dengan kualitas gambar yang hebat, penyampaian yang sangat professional dan entahlah saya harus menulis apa lagi...
Text Editor Script Code

6. Emacs (Opensource)

Sebelum era kebangkitan Gnome pada Linux, inilah text editor default Linux yang dikembangkan dibawah bendera GNU. Emacs merupakan text editor senior (1976) sebelum posisinya perlahan namun pasti tergeser oleh gEdit. Namun sampai hari ini Emacs masih banyak digunakan oleh mereka yang sangat peduli dengan perkembangan Linux dan sistem operasi sumber terbuka. Dan mungkin saja, Emacs pernah digunakan untuk menulis kode-kode sumber gEdit. Emacs padamulanya memang menjadi text editor default linux layaknya notepad pada Microsoft, namun sekarang tersedia untuk pengguna Windows. Untuk para pengguna Windows bisa mengunduh XEmacs yang khusus dikembangkan sebagai text editor multiplatform.
Text Editor Script Code

7. E-TextEditor (Berbayar)

Katanya sih, E-TextEditor adalah saudara kembar TextMate yang dibuat khusus bagi para pengguna sistem operasi Microsoft yang ingin merasakan hebatnya TextMate. Situsnya meng-klaim bahwa E-TextEditor memiliki tampilan dan kemampuan yang hampir sama dengan TextMate. Jika memang demikian, maka E-TextEditor termasuk kategori bagus. Namun menjadi kurang populer karena mengharuskan penggunanya membayar lisensi yang tidak murah. Kehebatan E-TextEditor tertutup oleh harga, sehingga membuat para web desainer dan web developer lebih memilih Dreamweaver. Walau demikian, tetap saja E-TextEditor merupakan text editor bagus bagi para penggunannya.
Text Editor Script Code

8. Aptana (Freeware)

Ini text editor pendatang baru yang mulai menapaki hati para web desainer dan web developer. Kehebatan Aptana mulai banyak dibicarakan. Ketersediaannya yang gratis, kemampuannya yang diatas rata-rata text editor gratisan membuat Aptana mulai ditelusuri kehebatannya. Namun jika anda memiliki spesifikasi komputer yang kurang mumpuni, mungkin segera lakukan upgrade perangkat keras, karena Aptana cukup menguras resource komputer. Aptana baru tersedia untuk semua sistem operasi.
Text Editor Script Code

9. Bluefish (Opensource)

Sebenarnya text editor yang satu ini termasuk kategori bagus, hampir memiliki kemampuan sama dengan text editor yang sudah disebutkan diatas. Memiliki tampilan yang sederhana, gratis, sumber terbuka, didukung syntax higlighter, dan mendukung banyak bahasa pemrograman. Tersedia untuk para pengguna sistem operasi Linux dan sistem operasi lainnya. Entah kenapa Bluefish kurang populer daripada yang lain, mungkin karena tidak disertakan dalam repository sistem operasi Linux sehingga Bluefish kurang dikenal jika dibandingkan dengan gEdit. Bluefish digunakan oleh mereka yang merasa tidak puas dengan kemampuan gEdit. Sepintas, tampilan Bluefish hampir mendekati Dreamweaver saat masih dibawah manajemen Macromedia.
Text Editor Script Code

10. PSPad (Freeware)

PSPad merupakan text editor yang mungkin anda baru saja mengetahuinya sekarang. PSPad kurang begitu populer bagi kalangan penulis kode lokal, mungkin karena kemampuannya masih dibawah Notepad++ sehingga banyak para penulis kode yang hanya mencobanya dan kemudian membuangnya lagi. Padahal PSPad memiliki tampilan yang hampir mirip dengan text editor lainnya serta memiliki kemampuan yang hampir sama pula. Namun entahlah, toh buktinya tidak begitu dikenal.
Text Editor Script Code

11. Intype (Freeware)

Ini mungkin TextEditor yang masih termasuk berumur muda, sehingga kurang begitu dikenal. Namun jika melihat perkembangannya, Intype termasuk pesat karena dibeberapa forum, text editor ini telah banyak dibahas dan didiskusikan. Bagi para pengguna sistem operasi windows, Intype bisa dijadikan text editor alternatif. Selain mendukung banyak bahasa pemrograman, userfriendly, portable, didukung syntax highlighter, dan termasuk kategori irit resource komputer. Mungkin setelah artikel ini diterbitkan banyak yang kemudian penasaran untuk mencobannya dan menjadi kecanduan. Kalau sudah ketagihan jangan lupa tinggalkan informasinya pada komentar ya?
Text Editor Script Code

Text Editor Populer Lainnya

Text Editor dibawah ini tidak akan dibahas detail, jadi silahkan mencobanya sendiri.
12. skEdit (Mac - Berbayar)
13. TextPad (Win - Berbayar)
14. UltraEdit (Semua OS - Berbayar)
15. Programmer’s Notepad (Win - Gratis)
16. Panic Coda (Mac - Berbayar)
17. SubEthaEdit (Mac - Berbayar)
18. Komodo Edit (Semua OS - Gratis Berbayar)
19. Eclipse (Java - Gratis)
20. HTML-Kit (Win - Gratis Berbayar)
21. Scriptly (Win - Gratis)
22. BBEdit (Mac - Berbayar)
23. Screem (Linux - Gratis)
24. CSSEdit (Mac - Berbayar)
25. Arachnophilia (Java - Gratis)
26. CoffeeCup HTML Editor (Win - Berbayar)
27. Smultron (Mac - Gratis)
28. EditPlus (Win - Berbayar)
29. EmEditor (Win - Berbayar)
30. PageSpinner (Mac - Berbayar)
31. HateML Pro (Win - Gratis)
32. Adobe HomeSite (Mac Win - Berbayar)
33. NoteTab (Win - Berbayar)
34. jEdit (Java - Gratis)
35. Quanta Plus (Linux - Gratis)
36. Taco HTML Edit (Mac - Berbayar)
37. TSW WebCoder (Win - Berbayar)
38. PhpED (Win - Berbayar)
39. HippoEDIT (Win - Berbayar)
40. VEdit (Win - Berbayar)

Kesimpulan

Dari semua text editor yang sudah dibahas diatas, janganlah sampai mempengaruhi anda dalam menggunakan text editor yang selama ini sudah digunakan. Karena berganti peralatan itu berarti mengambil resiko untuk belajar lagi, kecuali anda memiliki banyak waktu untuk mempelajarinya. Jika anda sudah mantap dengan salah satu text editor diatas walaupun memiliki peringkat dibawah maka tetaplah gunakan text editor tersebut, karena yang ditunggu oleh orang lain adalah karyanya, bukan seberapa hebat text editor dan seberapa mahal text editor tersebut. Sehebat dan semahal apapun text editor yang anda gunakan jika tidak memiliki ilmunya dan tidak menguasai peralatannya tetap tidak akan mampu menghasilkan sesuatu yang berharga. Tetaplah pada jalur anda untuk tetap berkarya, janganlah berganti kebiasaan jika itu menyulitkan anda dalam berkarya. Happy Blogging :)

Cara Menghilangkan Index Archive di google

Cara Menghilangkan Index Archive digoogle
Cara Menghilangkan Index Archive digoogle
Cara Menghilangkan Index Archive di google ~ Index Archive di Google Tampil dan tak jarang kita tag menyadarinya. Banyak pakar SEO menyarankan untuk menonaktifkan index Archive ini. Karena dirasa memang kurang efektif. Saya sendiri belum tahu benar untuk kejelasannya tapi yang jelas memang benar-benar tidak efektif ketika kita men search di google yang keluar malah Archive kita bukan menuju ke Artikel yang kita maksut.

Disini ada sedikit cara untuk Menghilangkan Index Archive digoogle, ini merupakan referensi dari beberapa blog master Luar Negeri yang menurut saya sudah Mastahnya di dunia Blogging.


Jika kamu ingin menggunakannya juga berikut ini caranya.
1. Silahkan kamu masuk blog ke Edit HTML
2. Taruh Script dibawah ini di bawah Meta Tag kamu yang biasanya berada di bawah <head>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <link href='http://alamatblogmu.blogspot.com/' rel='canonical'/>
  </b:if>
  <b:if cond='data:blog.pageType == "archive"'>
    <link href='http://almatblogmu.blogspot.com/' rel='canonical'/>
  </b:if>
</b:if>
3. Ganti Tulisan warna kuning diatas dengan alamat blogmu.
4. Simpan Template blogmu.

Silahkan lakukan eksperimen untuk anda analisa efek dari pemasangan script diatas.

Sunday, May 20, 2012

Memahami Post Footer Blogger - Bagian 1

Bismillah. Alhamdulillah. Artikel kali ini rehat dulu dari bahasan jQuery, kita akan menelisik kedalam kode-kode (X)HTML Blogger. Jadi bagi para pengguna platform non Blogger, artikel ini sangat tidak bermanfaat dan tidak berhubungan dengan platform Non Blog*Spot. Yang akan kita bahas sekarang mengenai kode-kode (X)HTML milik Blogger yang kadang sangat membingungkan. Mungkin ada diantara para pengguna Blog*Spot yang pernah menemukan kasus-kasus yang sulit untuk dipahami dengan baik. Ketika kita melakukan modifikasi pada salah satu kode, kadang tidak bereaksi apa-apa, atau terkadang justru tidak tampil, error parse dan lain sebagainya. Bagi saya secara pribadi, disanalah letak keindahan Blog*Spot, misteri, seni, rumit, dan stress campur menjadi satu. Tiba-tiba masuk sebuah kode aneh, atau fitur baru di tambahkan namun tidak secara otomatis terintegrasi pada blog kita. Yah... Begitulah Blog*Spot, pengguna hanya punya kendali pada beberapa bagian saja, maklum gratis. Berbeda dengan platform CMS (Content Management System) berbayar, semua fitur dibawah kendali sang pemilik/penyewa.
Dari sekian banyak kode (X)HTML Blogger yang terkadang membingungkan, salah satu diantaranya adalah Informasi Artikel atau sering di kenal Post Footer. Didalam post footer terdapat beberapa kode (X)HTML yang berhubungan dengan artikel. Mari kita pelajari. (Siapkan waktu yang cukup banyak, karena artikel pasti panjang dan lumayan rumit untuk dipahami...)

Pemahaman Umum

Didalam post footer terdapat beberapa informasi yang berhubungan dengan artikel, dan ini sangat penting sebagai pelengkap artikel-artikel didalam blog. Para pengunjung blog, ada diantaranya yang sangat kritis, mereka akan memeriksa hal-hal penting yang berhubungan dengan artikel, misal; mereka akan memeriksa nama penulis artikel dan tanggal terbit, hal ini berhubungan dengan tata cara mengutip suatu artikel. Sangat lucu ketika kita menemukan sebuah artikel menarik namun tidak ada penulisnya dan tidak di ketahui tanggal terbitnya, lalu bagaimana jika orang lain ingin mengutip artikel tersebut? Maka dari itu, bagi para blogger kreatif, mereka pasti akan selalu menampilkan nama penulis dan tanggal terbit. Itu salah satu pentingnya Post Footer atau Informasi Artikel.
Untuk memahami dimana letak kode-kode (X)HTML Post Footer, kita harus berada pada lokasi Edit HTML dengan Expand Template Widget ter-checklist. Secara garis besar dan default, biasanya blogger membagi post footer kedalam 3 (tiga) kontener atau wadah, seperti dibawah ini:
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
Post Footer
Jika kita perhatikan kode HTML diatas, maka post footer memiliki satu kontener utama yaitu kontener dengan class post-footer dan 3 kontener didalamnya yaitu; kontener dengan class post-footer-line-1, post-footer-line-2 dan post-footer-line-3. Didalam kontener dengan class post-footer-line inilah terdapat kode-kode (X)HTML yang berhubungan dengan artikel. Kata berhubungan saya pertebal sebagai sebuah penegasan yang berarti bahwa kode-kode (X)HTML yang akan dibahas dibawah ini merupakan bagian terintegrasi dari artikel (post) dan tidak boleh berada diluar area artikel kecuali menggunakan bantuan jQuery untuk memindahkannya.

1. Post Author vCard (Nama Penulis Artikel)

Kode (X)HTML dibawah ini digunakan untuk mengatur nama penulis. Kode dibawah ini terkait erat dengan pengaturan pada artikel pada Tata Letak, maka untuk memahaminya harus memperhatikan gambar dan penjelasan dari baris per baris kodenya. Jika kode (X)HTML Post Author vCard dibawah ini tidak tersedia pada template blog anda maka nama penulis tidak akan di tampilkan.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</b:if>
</span>
Post Footer
Nomor 1 : Dasbor >> Tata Letak >> Posting Blog >> Edit
Nomor 2 : Preview
Fungsi Kode Post Author vCard
Perhatikan gambar diatas dan pahami dengan seksama penjelasan baris kode-kode dibawah ini:
<span class='post-author vcard'>
Kode diatas berisi pengaturan kontener melalui class post-author vcard. (Lihat CSS Template Post Footer)
<b:if cond='data:top.showAuthor'>
Jika kondisi data penulis ditampilkan maka...
<data:top.authorLabel/>
Untuk menampilkan label sebelum penulis
<b:if cond='data:post.authorProfileUrl'>
Jika kondisi data artikel menampilkan URL penulis maka...
<span class='fn'>
Kode pengaturan konterner melalui class fn. (Lihat CSS Template Post Footer)
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
Tag anchor yang berisi link profile penulis artikel
<data:post.author/>
Untuk menampilkan nama penulis
</a>
Tag anchor link profile penulis ditutup
</span>
Kode pengaturan kontener melalui class fn ditutup
<b:else/>
Jika tidak. Ini artinya; jika kondisi data artikel tidak menampilkan URL penulis maka...
<span class='fn'>
Lihat keatas
<data:post.author/>
Untuk menampilkan nama penulis (tanpa URL Profile)
</span>
Lihat ke atas
</b:if>
Kondisi data artikel tanpa URL penulis ditutup
</b:if>
Kondisi data untuk menampilkan nama dan atau link penulis ditutup
</span>
Kode pengaturan kontener melalui class fn ditutup
Untuk menampilkan nama penulis tanpa URL Profile maka alamat blog tersebut harus dipilih "Pilih blog untuk ditampilkan" pada setting halaman profile penulis atau buang kode tag anchor yang berisi link profile penulis artikel.

2. Post Timestamp (Waktu Terbit Artikel)

Jika sudah memahami kode sebelumnya, mari kita lanjutkan. Kode (X)HTML dibawah ini digunakan untuk menampilkan Post Timestamp atau Waktu Terbit Artikel (meliputi; hari, tanggal, bulan, tahun, jam, menit, dan siang (AM) atau malam (PM)). Tampil dan tidak tampilnya waktu artikel berkaitan erat dengan pengaturan artikel pada Tata Letak. Perhatikan gambar dan pahami baris per baris kodenya. Kode (X)HTML Post Timestap secara default seperti dibawah ini:
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='published' expr:title='data:post.timestampISO8601'>
<data:post.timestamp/>
</abbr>
</a>
</b:if>
</b:if>
</span>
Post Footer
Nomor 1 : Dasbor >> Tata Letak >> Posting Blog >> Edit
Nomor 2 : Preview
Fungsi Kode Post Timestamp
Perhatikan gambar diatas dan pahami baris per baris kode (X)HTML dibawah ini:
<span class='post-timestamp'>
Kode diatas berisi pengaturan kontener melalui class post-timestamp. (Lihat CSS Template Post Footer)
<b:if cond='data:top.showTimestamp'>
Jika kondisi data waktu terbit artikel ditampilkan maka...

Untuk menampilkan label sebelum waktu terbit
<b:if cond='data:post.url'>
Jika kondisi data menunjukan url artikel maka...
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
Tag anchor link artikel yang mengarah pada waktu terbit
<abbr class='published' expr:title='data:post.timestampISO8601'>
Tag anchor abbr (abbreviation) dengan class published untuk menampilkan judul tooltip artikel saat di hover dengan standar ISO8601
<data:post.timestamp/>
Data yang berisi waktu terbit artikel ditampilkan
</abbr>
Tag anchor abbr ditutup
</a>
Tag anchor link artikel yang berisi waktu terbit ditutup
</b:if>
Tag kondisi data yang menunjukan url artikel sesuai terbit ditutup
</b:if>
Tag kondisi data yang menunjukan waktu terbit artikel ditutup
</span>
Tag kontener class post-timestamp ditutup

3. Post Comment Link (Jumlah Komentar Artikel dan Link)

Masih cukup waktu dan lokasi memori? Mari kita lanjutkan bahasan tentang Post Footer blogger. Kode dibawah ini digunakan untuk menampilkan jumlah komentar dan link yang jika di klik akan mengarahkan kita pada formulir komentar.
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</b:if>
</span>
Post Footer
Nomor 1 : Dasbor >> Tata Letak >> Posting Blog >> Edit
Nomor 2 : Text Editor Artikel
Nomor 3 : Preview
Fungsi Kode Post Comment Link
Perhatikan gambar diatas dan pahami baris per baris kode (X)HTML dibawah ini:
<span class='post-comment-link'>
Kode diatas merupakan kontener untuk Post Comment Link dengan class post-comment-link. (Lihat CSS Template Post Footer)
<b:if cond='data:blog.pageType != &quot;item&quot;'>
Jika halaman blog yang sedang dibuka bukanlah halaman per artikel (item) maka...
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Jika halaman blog yang sedang bibuka bukanlah halaman statis (static_page) maka...
<b:if cond='data:post.allowComments'>
Jika halaman artikel memperbolehkan meninggalkan komentar maka...
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
Tag achor yang berisi link menuju formulir komentar dengan class comment-link (Lihat CSS Template Post Footer). Jika diklik maka formulir komentar siap untuk di isi komentar anda
<b:if cond='data:post.numComments == 1'>
Jika kondisi data artikel memiliki jumlah komentar 1 maka...
1 <data:top.commentLabel/>
Akan ditulis 1 sesuai label yang sudah ditentukan (sebenarnya ini untuk blog berbahasa Inggris. Jika lebih dari satu biasanya ditambahkan huruf s. Misal; jika hanya ada 1 komentar maka ditulis "1 Comment" namun jika lebih dari satu komentar maka ditulis "2 Comments")
<b:else/>
Jika tidak maka... (maksudnya jika komentar lebih dari satu atau tidak sama dengan satu)
<data:post.numComments/>
Jumlah data komentar pada artikel tersebut ditulis
<data:top.commentLabelPlural/>
Label Plural (label jamak atau lebih dari satu) akan ditampilkan (misal; yang tadinya "Comment" menjadi "Comments")
</b:if>
Tag kondisi jumlah komentar ditutup
</a>
Tag achor yang berisi link menuju formulir komentar ditutup
</b:if>
Tag kondisi yang memperbolehkan berkomentar ditutup
</b:if>
Tag kondisi jika bukan halaman statis ditutup
</b:if>
Tag kondisi jika bukan halaman per artikel ditutup
</span>
Tag kontener untuk Post Comment Link ditutup

Perhatikan tag kondisi seperti ditulis dibawah ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Jika kita sederhanakan maka; Keterangan jumlah komentar hanya akan ditampilkan jika halaman yang sedang dibuka bukanlah halaman per artikel dan bukan pula halaman statis, namun halaman index atau halaman kategori.

4. Post Labels (Kategori Artikel)

Kode (X)HTML dibawah ini digunakan untuk menampilkan label atau kategori dari sebuah artikel. Hal ini sangat bermanfaat bagi para pembaca untuk menelusuri artikel-artikel yang sejenis serta membantu dalam pencarian artikel.
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
Post Footer
Nomor 1 : Dasbor >> Tata Letak >> Posting Blog >> Edit
Nomor 2 : Text Editor Artikel
Nomor 3 : Preview
Fungsi Kode Post Labels
Perhatikan gambar diatas dan pahami baris per baris kode (X)HTML dibawah ini:
<span class='post-labels'>
Kode diatas berisi kontener Post Labels dengan class post-labels (Lihat CSS Template Post Footer)
<b:if cond='data:post.labels'>
Jika kondisi data artikel diset untuk menampilkan label dan artikel memiliki label maka...
<data:postLabelsLabel/>
Menampilkan keterangan nama label
<b:loop values='data:post.labels' var='label'>
Dilakukan pengulangan label jika data artikel mengandung label
<a expr:href='data:label.url' rel='tag'>
Tag anchor yang berisi link menuju ke URL label
<data:label.name/>
Kode ini untuk menampilkan nama label
</a>
Tag anchor link label di tutup
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
Jika kondisi label ternyata lebih dari satu label maka simbol koma (,) digunakan untuk memisahkan antar nama label
</b:loop>
Tag pengulangan label ditutup
</b:if>
Tag Kondisi data label di tutup
</span>
Tag kontener Post Labels dengan class post-labels ditutup

5. Post Backlinks (Informasi Backlink)

Masih mau diteruskan? Kode dibawah ini berfungsi untuk menampilkan link backlink. Lokasi kumpulan link backlink (link tautan dari luar blog sendiri) biasanya di tempatkan pada bagian bawah komentar. Ketika link baclink ini diklik maka kita diarahkan ke bagian bawah komentar yang berisi sekumpulan link tautan dari blog diluar situs kita. Pada beberapa kasus, walau blog lain mentautkan sebuah link pada artikel kita, kadang backlink ini tidak muncul. Sampai hari ini kasus-kasus tersebut masih ada yang terjadi.
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>
<data:top.backlinkLabel/>
</a>
</b:if>
</b:if>
</b:if>
</span>
Post Footer
Nomor 1 : Dasbor >> Tata Letak >> Posting Blog >> Edit
Nomor 2 : Text Editor Artikel
Nomor 3 : Preview
Fungsi Kode Post Backlinks
Perhatikan gambar diatas dan pahami baris per baris kode (X)HTML dibawah ini:
<span class='post-backlinks post-comment-link'>
Kode diatas berisi kontener Post Backlinks dengan class post-backlinks dan class post-comment-link (Lihat CSS Template Post Footer)
<b:if cond='data:blog.pageType != &quot;item&quot;'>
Sudah dijelaskan diatas (lihat bagian 3. Post Comment Link)
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Sudah dijelaskan diatas (lihat bagian 3. Post Comment Link)
<b:if cond='data:post.showBacklinks'>
Jika kondisi data artikel diset untuk menampilkan backlink maka...
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>
Tag anchor yang berisi link menuju tag anchor <a name='links'> pada bagian bawah komentar, serta achor ini memiliki class comment-link (Lihat CSS Template Post Footer)
<data:top.backlinkLabel/>
Data backlink (tautan dari blog lain) akan ditampilkan
</a>
Tag anchor link ditutup
</b:if>
Tag kondisi artikel yang diset untuk menampilkan backlink ditutup
</b:if>
Tag kondisi jika bukan halaman statis ditutup
</b:if>
Tag kondisi jika bukan halaman per artikel ditutup
</span>
Tag kontener Post Backlinks dengan class post-backlinks dan class post-comment-link ditutup

CSS Template Post Footer

Dibawah ini adalah CSS Template yang bisa anda gunakan sebagai patokan dalam memberi style pada Post Footer. Namun, CSS Tempate Post Footer dibawah ini tidak harus semua digunakan dan tidak baku. Gunakanlah pada bagian-bagian yang memang perlu untuk diberikan style yang unik. Semua kembali pada imajinasi anda.
/* Kontener Utama Post Footer */
.post-footer { }
.post-footer-line { }
.post-footer-line-1 { }
.post-footer-line-2 { }
.post-footer-line-3 { }

/* 1. Post Author vCard */
.post-author { }
.vcard { }
.fn { }

/* 2. Post Timestamp */
.post-timestamp { }
.timestamp-link { }
.published { }

/* 3. Post Comment Link */
.post-comment-link { }
.comment-link { }

/* 4. Post Labels */
.post-labels { }

/* 5. Post Backlinks */
.post-backlinks { }
.post-comment-link { }
.comment-link { }

Kesimpulan

Mudah-mudahan artikel diatas bisa membantu kebingungan anda selama ini tentang kode-kode (X)HTML Blogger (Hindari stress dengan meninggalkan artikel ini jika gejalanya sudah terasa). Jika anda memahami baris per baris kode diatas, maka anda bisa menentukan mana bagian-bagian tersebut yang bisa dimodifikasi sesuai dengan keinginan. Dipindah posisikan, dibuang bagian-bagian yang tidak perlu dan mengganggu, dibuang tag kondisinya agar tidak tergantung setting, dimodifikasi style yang unik dan lain sebagainya. Kembangkanlah imajinasi anda hingga mampu menciptakan karya seni yang indah dan hebat. Jangan lupa tinggalkan komentar jika menemukan kesalahan ketik atau kesalahan penjelasan.
Tunggu seri-seri pembahasan (X)HTML lainnya pada artikel-artikel mendatang. Selamat berkarya dan salam hangat Penulis dari hadapan Axioo, Banjarsari, Ciamis, Jawa Barat, Indonesia, Bumi, Bima Sakti... Happy Bloging :)

Bersambung...
Tubi kontinyu...

Thursday, May 17, 2012

Membuat Blog Responsive Untuk Video

Membuat Blog Responsive Untuk Video
Membuat Blog Responsive Untuk Video ~ Cara agar Blog Responsive ini adalah cara agar blog kita bisa menjadi responsive tampil memanjang ketika dibuka di beberapa device yang berbeda. Dari beberapa cara yang ada di blog master responsive saya mengambil sedikit script khusu untuk saya copy disini agar saya juga bisa menggunakan jika butuh.

Membuat Blog Responsive Untuk Video Bisa membuat blog kita akan tampil dinamis ketika dibuka di browser lain dan juga device lain.




Script berikut ini khusus untuk responsive Video
Embed Script
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.video iframe,  .video object,  .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
Anda bisa mencopy script diatas dan menaruhnya diatas ]]></b:skin>
Oke, sekedar share untuk Membuat Blog Responsive Untuk Video.

Sunday, May 13, 2012

jQuery Decoder - Alamat Email

Bismillah. Alhamdulillah. Diantara sekian banyak profesi didunia maya, ada diantaranya yang bekerja untuk mengumpulkan alamat email dari berbagai halaman situs web. Profesi ini memang masih menjadi kontroversi karena sebagian para pengumpul alamat email ini tidak peduli kepada siapa mereka kemudian menjual sekumpulan alamat email yang sudah diperolehnya. Ketika sebuah perusahaan memperoleh sekumpulan alamat email ini, biasanya mereka gunakan untuk mengirimkan informasi tentang suatu produk yang mereka buat. Namun bagaimana kalau sekumpulan alamat email ini diterima oleh orang-orang yang berniat jahat, misal dengan mengirimkan email berupa informasi palsu untuk memancing target, kemudian target tergiur dengan iming-iming sejumlah uang, dan ujung-ujungnya tertipu. Apapun tujuannya, jika ada diantaranya yang memperkenalkan suatu produk atau informasi yang tidak melalui persetujuan pemilik email, maka hal ini sudah termasuk tindakan spamming. Kita sebagai blogger juga punya cara untuk meminimalisir spamming dan memperkecil pencurian alamat email oleh orang yang tidak bertanggung jawab, yaitu dengan metode encode alamat email.

Deskripsi

Ada banyak metode encode yang bisa kita gunakan, dari mulai metode encode URL, HEX, dan BASE64. Pada artikel kali ini kita akan menggunakan metode encode dan decode HEX. Apa itu encode(r), decode(r) dan HEX?
  • Encode adalah kegiatan mengubah informasi dari satu format atau kode ke format atau kode lain.
  • Decode adalah kegiatan mengembalikan informasi dari satu format atau kode yang telah di encode agar kembali menjadi format atau kode asalnya.
  • Encoder adalah perangkat, sirkuit, perangkat lunak, algoritma atau orang yang mengubah informasi dari satu format atau kode ke format atau kode yang lain dengan tujuan standardisasi, kecepatan, kerahasiaan, keamanan, atau menyimpan dengan mengecilkan ukuran.
  • Decoder adalah ... (silahkan isi sendiri).
  • HEX atau sering juga disebut Hexadecimal adalah salah satu jenis bilangan matematik yang terdiri dari 16 karakter (atau sering di sebut BASE16). Bilangan matematik ini terdiri dari 16 karakter dimulai dari simbol 0-9 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) dan A-F (A, B, C, D, E, F).

Proses Encode

Setelah memahami pengertian Encode(r), Decode(r) dan HEX maka selanjutnya mari kita mulai melakukan encode alamat email. Langkah Encode Email seperti dibawah ini:
Alamat email asal:
bloggertuneup@yahoo.com
Kemudian saya tulis terbalik:
yahoo.com@bloggertuneup
Alamat email ditukar posisi (reverse) dengan tujuan menghindari script yang mampu melakukan decode otomatis. Dan nanti decoder yang akan kita gunakan sudah secara otomatis pula membalikan alamat email tersebut.
Alamat email hasil encode dengan karakter HEX:
7961686F6F2E636F6D40626C6F6767657274756E657570
Saya menggunakan Encoder dari Stephen Ostermiller [BASE64 and URL Encoding and Decoding]
Kemudian alamat email hasil encode disusun seperti ini:
_79_61_68_6F_6F_2E_63_6F_6D_40_62_6C_6F_67_67_65_72_74_75_6E_65_75_70
Jangan menggunakan underscore (_) tapi gunakan spasi. Underscore hanya untuk memudahkan saja.

Skenario HTML

Setelah melakukan encode alamat email, sekarang kita menyusun skenario HTML-nya. Skenario HTML ini dibuat agar pada saat halaman di load maka alamat email akan ditampilan sebagai karakter HEX. Saat pengunjung meng-klik tombol decode maka alamat email asal akan ditampilkan dalam keadaan siap klik. Maka kode HTML ditulis seperti ini:
<span>
<tt><span id="email"> 79 61 68 6F 6F 2E 63 6F 6D 40 62 6C 6F 67 67 65 72 74 75 6E 65 75 70</span></tt>
<a class="tomboldec" href="#">Klik untuk Decode</a>
</span>
Jika diperhatikan skenario HTML diatas maka terdiri dari 2 bagian besar, yaitu (bagian kesatu) alamat email hasil encode HEX yang dimulai dengan tag <tt>. Tag <tt> ini biasanya digunakan untuk memberikan tanda tentang suatu informasi dan mengubah bentuk font menjadi teletype. Sedangkan bagian kedua yaitu tombol (yang di wakili anchor link) dengan class tomboldec. Ketika link ini di klik maka proses decode alamat email hasil encode HEX akan diubah menjadi alamat email aslinya.

Skenario CSS

Kode CSS dibawah ini sebenarnya hanya digunakan untuk memanipulasi penampilan link (tombol decode). Sifatnya sebagai tambahan saja.
a.tomboldec {
text-decoration: none;
}
.tomboldec {
background-color: #EEEEEE;
border: medium none;
border-radius: 4px;
color: #000000;
margin: 2px;
padding: 2px 4px;
}
.tomboldec:hover {
background-color: #DDDDDD;
}

Skenario jQuery

Script jQuery ini berperan sebagai decoder untuk mengubah alamat email yang sudah di encode menjadi karakter HEX agar dapat ditampilkan sebagaimana alamat email asal. Script ditulis seperti dibawah ini:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function() {
jQuery('.tomboldec').click(function(){
var $demail = jQuery('#email');
var bagian = decodeURIComponent($demail.text().replace(/ /g, '%')).split('@');
bagian.reverse();
var email = bagian.join('@');
$demail.replaceWith(jQuery('<a/>', {href: 'mailto:' + email, text: email}));
jQuery('.tomboldec').remove();
});
});
//]]></script>
(Karena sedang dikejar target, mengenai penjelasan per baris script-nya menyusul)

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar:

Friday, May 11, 2012

Membuat Efek Hover di Kotak Search Blog

Membuat Efek Hover di Kotak Search Blog dengan CSS ~ Triks CSS Efek Hover pada Kotak Pencarian Blog ini bisa kita manfaat kan untuk penghias blog kita agar lebih atraktir dan beda dengan yang lain. Efek yang akan kita buat ini akan memanfaatkan kotak search atau pencarian yang ada pada blog kita masing-masing. ini bertujuan untuk mempercantik tampilan blog kita dan sebagai pembeda tentunya.

Membuat Efek Hover di Kotak Search Blog tentunya sudah tidak asing lagi kita dengar, atau mungkin sebagian dari agan-agan sudah pernah mencobanya. Bagi yang belum silahkan bisa mencoba triks ini untuk penambah ilmu dalam dunia CSS dan Blogging.



Seperti itu untuk demonya bisa agan-agan lihat,, jika memang tertarik silahkan embed scriptnya dibawah ini.
Script Embed
Untuk Script Pemanggilnya [ID]

<div id="wrap-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="URL_IMAGE" type="image"/>
    <input type="text" name="q" value="Pencarian" onfocus="this.value='';" onblur="this.value='Pencarian';" onmouseover="this.value='';" onmouseout="this.value='Pencarian';" />
    </form>
  </div>
</div>
 Script CSS [Embed]

<style>
  #wrap-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #wrap-search:hover input[type='text'] { color:#597C84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #25464D;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
</style>
Rumayan Jan Joss tenan kan..??
Oke Silahkan di Coba dan jangan lupa berkomentar sebagai jejak anda datang kesini.


Thursday, May 10, 2012

Artikel kali ini akan membahas tentang script jQuery yang sederhana saja. Maklum sedang dihinggapi rasa malas membuat demo yang cukup kompleks dan lagi sedang mempelajari Repository GitHub, karena rencananya kedepan untuk arsip-arsip artikel yang dibuat akan di simpan sebagian pada GitHub dengan tujuan memancing minat orang lain untuk ikut mengembangkannya dan memperbaiki kesalahan-kesalahan yang ada. Script jQuery kali ini mengenai cara menambahkan attribut target="_blank" pada setiap tag anchor link yang mengarah pada situs eksternal. Karena kadang kita cukup repot jika harus selalu menambahkan attribut target="_blank" pada tautan-tautan yang diarahkan pada situs diluar URL situs kita sendiri. Biasanya karena terlalu banyaknya tautan situs luar kita lupa menambahkan attribut target="_blank". Daripada repot-repot harus selalu menambahkan attribut target="_blank" maka kita buat semuanya menjadi otomatis melalui bantuan jQuery. jQuery akan melakukan penyaringan terhadap tautan yang mengarah keluar dan kemudian menambahkan attribut target="_blank" pada setiap tag anchor eksteral. Perpustakaan jQuery yang akan digunakan adalah .not(). Perpustakaan ini termasuk pada kategori perpustakaan penyaring (filter) dan pelintas (traversing).

Skenario HTML

Misalkan kita memiliki 4 buah link tautan seperti dibawah ini:
<a href="/">Beranda</a>
<a href="/p/kontak.html">Kontak</a>
<a href="http://www.hendriono.web.id">Tentang</a>
<a href="http://www.google.co.id">Google</a>
Pada skenario HTML diatas, kita sudah menentukan 4 buah link tautan, 2 link tautan merupakan URL lokal yaitu Beranda dan Kontak, sedangkan 2 link tautan mengarah ke luar dari situs sendiri yaitu Tentang dan Google. Ketika halaman di load maka jQuery akan melakukan seleksi terhadap URL yang bukan bagian dari URL lokal dan kemudian akan menambahkan attribut target="_blank" pada situs tautan luar tersebut.

Skenario jQuery

Agar jQuery bisa melakukan seleksi terhadap URL tautan luar, maka kita akan menggunakan perpustakaan .not() sebagai penyaringnya. Maka kode ditulis sebagai berikut:

Fungsi Penyaringan
Dibawah ini merupakan script yang digunakan untuk melakukan penyaringan terhadap URL tautan keluar.
function target_luar(){
try{
if(top.location != location){
jQuery("a[href^='http']").not("[href*='"+location.host+"']").attr('target','_blank');
}
}
catch(err){}
}
Jika anda ingin menambahkan attribut lebih dari satu, maka fungsi .attr ditulis seperti ini:
Ganti script dibawah ini:
.attr('target','_blank')
Dengan script dibawah ini:
.attr({
target:'_blank',
rel:'nofollow'
})

Penjelasan Fungsi
Dibawah ini penjelasan bagaimana fungsi penyaringan bekerja.
function target_luar(){
Ini digunakan untuk meregistrasikan fungsi dengan nama target_luar
try{
Fungsi akan melakukan percobaan pemeriksaan...
if(top.location != location){
Proses pemeriksaan seluruh tautan (top.location) pada halaman yang di load dan jika hasilnya tidak sama dengan lokasi URL utama/lokal maka...
jQuery("a[href^='http']").not("[href*='"+location.host+"']").attr('target','_blank');
jQuery akan melakukan pemeriksaan terhadap tag anchor attribute href yang berisi http, jika tidak sama (.not) dengan attribut href yang berisi URL lokal, maka attribut target="_blank" akan ditambahkan
}
Proses pemeriksaan dan penyaringan dengan jQuery ditutup
}
Proses percobaan pemeriksaan dengan JavaScript di tutup
catch(err){}
Fungsi tidak akan melakukan apa-apa jika ternyata terjadi error
}
Registrasi fungsi target_luar ditutup

Fungsi Load Penyaringan
Setelah fungsi penyaringan dibuat, maka selanjutnya adalah proses load/pemanggilan fungsi agar jQuery bisa melakukan eksekusi terhadap URL eksternal, maka fungsi ditulis seperti dibawah ini:
jQuery(document).ready(function(){
target_luar();
});

Keseluruhan Fungsi

Jika fungsi penyaringan dan fungsi load penyaringan di satukan maka akan menjadi seperti dibawah ini:
jQuery(document).ready(function(){
target_luar();
});


function target_luar(){
try{
if(top.location != location){
jQuery("a[href^='http']").not("[href*='"+location.host+"']").attr('target','_blank');
}
}
catch(err){}
}

Kesimpulan

Cara diatas adalah alternatif yang bisa digunakan, namun semua kembali kepada tujuan pemilik blog, apakah perlu untuk menambahkan attribut target="_blank" atau tidak. Fungsi diatas hanya satu dari sekian banyak cara untuk menambahkan attibute target="_blank", jadi mohon ma'af jika anda merasa artikel ini sangat-sangat tidak bermanfaat dan ketinggalan jaman. Anggaplah ini hanya sebuah hal kecil yang tidak penting untuk anda pelajari... Selamat mencoba dan semoga berhasil... Happy Blogging :)

Pranala Luar:

Membuat Efek Round Image dengan CSS

Membuat Efek Round Image dengan CSS
Membuat Efek Round Image CSS
Tutorial Membuat Efek Round Image Di Blog - Membuat efek melingkar dipojok gambar. Kali ini saya akan share tutorial untuk membuat image yang akan mempunyai efek round pada Image atau sekeliling image akan seperti ada lingkaran yang mengelilingi image dan di beri efek hover. Langsung anda coba cara berikut ini.

Sehingga ketika image didekati oleh Cursor maka otomatis image akan mempunyai efek round dan ada warna hovernya.


Berikut ini cara membuat Membuat Efek Round Image Di Blog

Berikut ini adalah script yang harus anda gunakan :
1. Buka Blog anda
2. Silahkan masuk pada edit html
3. Kemudian cari kode berikut ini ]]></b:skin>
4. Jika sudah ketemu silahkan anda copy code dibawah ini.
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
Keterangan :
- Opacity adalah tingkat transparansi dari efek round image
- Border adalah warna border image, silahkan anda seuaikan kode warnanya
NB : jangan lupa save dulu template anda.

5. Langkah terakhir adalah save template anda. 

Oke sekian tutorial Membuat Efek Round Image dengan CSS malam ini, and good nite guys ..

Wednesday, May 9, 2012

jQuery Confirm Plugin

Pada artikel sebelumnya Blogger Tune-Up pernah membahas tentang Konfirmasi Klik Link dengan jQuery, namun tampilan kotak dialog konfirmasi tampak klasik, sehingga terasa kurang menarik untuk digunakan. Nah, artikel kali ini kita akan menggunakan plugin jQuery dan CSS untuk mengubah tampilan kotak dialog konfirmasi agar tampil lebih menarik. Plugin untuk pengganti kotak dialog konfirmasi ini sebenarnya di tulis oleh TutorialZine, saya hanya melakukan modifikasi kecil pada bagian centering elemen. Pada script plugin aslinya, memposisikan elemen agar tepat berada di tengah halaman masih menggunakan CSS, kemudian saya sisipkan jQuery Centering Elemen agar posisi elemen kotak dialog tepat berada ditengah secara otomatis tanpa pengaturan melalui CSS-nya. Hanya sebuah perubahan kecil... (Untuk mempelajarinya, lebih baik unduh terlebih dahulu paket jQuery Confirm Plugin)

Skenario HTML

Kode HTML di bawah ini berisi class item yang berisi anchor dan gambar. Ketika halaman di load maka gambar yang ada didalam img akan di tampilkan untuk memanipulasi link anchor. Ketika gambar di klik maka kotak dialog konfirmasi akan tampil dan halaman akan ditutup dengan warna overlay. Ketika kita klik tombol "Ya" maka link didalam tag anchor akan ditampilkan. Ketika klik tombol "Batal" maka halaman semula akan ditampilkan. Maka skenario HTML ditulis seperti dibawah ini:
<div class="item">
<a href="http://modification-blog.blogspot.com/">
<img src="http://modification-blog.blogspot.com/gambar.png" width="630" height="250" />
</a>
</div>
Jangan lupa sertakan kode-kode dibawah ini diantara tag <head>:
<link rel="stylesheet" type="text/css" href="assets/jquery.confirm.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="assets/jquery.confirm.js"></script>
<script src="assets/script.js"></script>

Skenario CSS

Kode CSS ini diberi nama jquery.confirm.css yang disertakan pada file yang bisa anda unduh. Kode-kode dibawah ini digunakan untuk memanipulasi penampilan kotak dialog konfirmasi.
/* Latar Penutup Halaman */
#confirmOverlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:url('ie.png');
background:-moz-linear-gradient(rgba(21,48,110,0.4), rgba(21,48,110,0.8)) repeat-x rgba(21,48,110,0.4);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(21,48,110,0.4)), to(rgba(21,48,110,0.8))) repeat-x rgba(21,48,110,0.4);
z-index:100000;
}
/* Kotak Dialog Konfirmasi */
#confirmBox {
background: #142D69;
width:460px;
border: 1px solid #051950;
}

#confirmBox h1, #confirmBox p {
font:26px/1 'Open Sans Condensed','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding:10px 20px;
text-shadow:0 1px 0 #000F2D;
color:#8AA5E1;
}

#confirmBox h1 {
letter-spacing:0.3px;
background:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 30px);
background:-moz-linear-gradient(bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 30px);
border-bottom:1px solid #051950;
border-top:1px solid #143778;
font-weight:bold;

}

#confirmBox p {
border-top:1px solid #143778;
font-size:18px;
line-height:1.4;
padding-top:25px;
text-align:center;
color: #ffffff;
}
/* Tombol */
#confirmButtons {
padding:15px 0 25px;
text-align:center;
}

#confirmBox .button {
display:inline-block;
position:relative;
height:27px;
font:17px/26px 'Open Sans Condensed','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin:0 5px;
padding:0;
text-decoration:none;
}

#confirmBox .button span {
text-align:center;
display:block;
position:absolute;
top:0;
left:0;
right:0;
cursor:pointer;
font-weight:bold;
}

#confirmBox .round-blue {
width:150px;
color:#8aa5e1;
cursor:default;
border:1px solid #04133D;
text-shadow:0 -1px 0 #000f2d;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:inset 0 1px 0 #1A428C, 0 1px 0 #173C82;
-moz-box-shadow:inset 0 1px 0 #1A428C, 0 1px 0 #173C82;
-webkit-box-shadow:inset 0 1px 0 #1A428C, 0 1px 0 #173C82;
background:#133573;
background:-moz-linear-gradient(top, #133573 0%, #132A65 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#133573), color-stop(100%,#132A65));
background:-webkit-linear-gradient(top, #133573 0%,#132A65 100%);
background:-o-linear-gradient(top, #133573 0%,#132A65 100%);
background:-ms-linear-gradient(top, #133573 0%,#132A65 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#133573', endColorstr='#132A65',GradientType=0 );
-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#133573', endColorstr='#132A65',GradientType=0 );
background:linear-gradient(top, #133573 0%,#132A65 100%);
}

#confirmBox .round-blue:hover {
box-shadow:inset 0 1px 0 #1c4593, 0 1px 0 #173C82;
-moz-box-shadow:inset 0 1px 0 #1c4593, 0 1px 0 #173C82;
-webkit-box-shadow:inset 0 1px 0 #1c4593, 0 1px 0 #173C82;
background:#1d3e60;
background:-moz-linear-gradient(top, #15306E 0%, #163B7F 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#15306E), color-stop(100%,#163B7F));
background:-webkit-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-o-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-ms-linear-gradient(top, #15306E 0%,#163B7F 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
background:linear-gradient(top, #15306E 0%,#163B7F 100%);
}

#confirmBox .round-blue:active {
box-shadow:inset 0 1px 0 #173C82, 0 1px 0 #173C82;
-moz-box-shadow:inset 0 1px 0 #173C82, 0 1px 0 #173C82;
-webkit-box-shadow:inset 0 1px 0 #173C82, 0 1px 0 #173C82;
background:#1d3e60;
background:-moz-linear-gradient(top, #15306E 0%, #163B7F 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#15306E), color-stop(100%,#163B7F));
background:-webkit-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-o-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-ms-linear-gradient(top, #15306E 0%,#163B7F 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
background:linear-gradient(top, #15306E 0%,#163B7F 100%);
}
#confirmOverlay ini digunakan untuk memanipulasi tampilan warna latar yang digunakan untuk menutupi halaman saat kotak dialog konfirmasi tampil. Di sini menggunakan CSS3 gradient dan tranparansi PNG khusus untuk browser IE. #confirmBox digunakan untuk memanipulasi kotak dialog dari mulai warna, jenis huruf (kebetulan menggunakan contoh ini menggunakan jenis huruf Open Sans Condensed), dan lebar tinggi kotak dialog. Silahkan berkreasi lebih mendalam dengan kode-kode CSS ini. Silahkan dicari pada folder assets dengan nama file jquery.confirm.css. round-blue digunakan untuk memanipulasi tombol konfirmasi "Ya" dan "Batal". Tombol ini menggunakan gradient yang cukup rumit, lebih rumit dari kode CSS aslinya...

Skenario jQuery

Script jQuery dibawah ini bukan script plugin, tapi script untuk melakukan setting pada beberapa bagian kotak dialog konfirmasi (lihat file script.js pada folder assets). Perhatikan baik-baik, jika masih bingung, baca penjelasan dibawah.
$(document).ready(function(){
$('.item a').click(function(event){
event.preventDefault();
var tujuan = $(this).attr('href');
$.confirm({
'title' : 'Konfirmasi',
'message' : 'Anda akan membuka halaman baru.
Apakah Anda yakin akan membuka halaman ini pada jendela baru?',
'buttons' : {
'Ya, Saya Yakin!' : {
'class' : 'round-blue',
'action': function(){
window.open(tujuan,'_blank');
}
},
'Tidak, Malas Baca' : {
'class' : 'round-blue',
'action': function(){
// Kosong tidak ada aksi
}
}
}
});
});
});

Penjelasan Setting jQuery Confirm

Script dibawah ini digunakan untuk mengeset tampilan kotak dialog konfirmasi. Script ini berhubungan langsung dengan jquery.confirm.js (lihat file ini pada folder assets).
$(document).ready(function(){
Pemuatan fungsi akan dimulai jika dokumen sudah siap...
$('.item a').click(function(event){
Mencari dan menyeleksi achor yang ada di dalam kontener item. Ketika anchor di klik maka fungsi dimulai...
event.preventDefault();
Jika metode ini dipanggil maka aksi default (asalnya) tidak akan dipicu (baca; aksi tertahan disini), klik hanya bereaksi pada aksi kode dibawah ini tanpa menuju sebuah halaman.
var tujuan = $(this).attr('href');
Membuat dan menentukan sebuah variabel tujuan yang berisi url tujuan...
$.confirm({
Registrasi fungsi konfirmasi (berhubungan dengan plugin jquery.confirm.js)
'title'  : 'Konfirmasi',
Judul kotak dialog. Ganti kata "Konfirmasi" sesuai keinginan anda.
'message' : 'Anda akan membuka halaman baru. 
Apakah Anda yakin akan membuka halaman ini pada jendela baru?',
Pesan yang akan tampil pada kotak dialog konfirmasi. Ubahlah sesuai keinginan anda.
'buttons' : {
Menentukan tombol...
'Ya, Saya Yakin!' : {
Keterangan nama tombol "Ya". Ubahlah sesuai keinginan...
'class' : 'round-blue',
Menentukan bentuk tombol. Perhatikan kode CSS, jika anda memiliki bentuk lain, silahkan registrasikan disini...
'action': function(){
Aksi akan dilakukan ketika tombol "Ya, Saya Yakin!" di klik, dan fungsi dimulai...
window.open(tujuan,'_blank');
Jendela akan terbuka sesuai dengan URL yang ada pada tujuan (lihat var tujuan) dan halaman dibukan pada jendela baru (_blank)
}
Aksi ditutup
},
Aksi klik tombol "Ya, Saya Yakin!" ditutup
'Tidak, Malas Baca' : {
Keterangan nama tombol "Batal". Ubahlah sesuai keinginan...
'class' : 'round-blue',
Menentukan bentuk tombol. Perhatikan kode CSS.
'action': function(){
Aksi akan dilakukan ketika tombol "Tidak, Malas Baca" di klik. Jika di kosongkan maka tombol tidak akan bereaksi apa-apa dan kotak dialog konfirmasi akan ditutup.
}
Aksi ditutup
}
Aksi klik tombol "Tidak, Malas Baca" ditutup
}
Setting tombol ditutup
});
Registasi fungsi confirm ditutup
});
Fungsi klik anchor pada kontener item ditutup
});
Fungsi jQuery ditutup...

Plugin jQuery Confirm

Script-script dibawah ini jika di jelaskan cukup menarik, namun sayang, sepertinya saya harus membuat halaman khusus untuk membahasnya (lihat file jquery.confirm.js pada folder assets).
/* ------------------------------------------------------------------------
jQuery Confirm Plugin
Version: 1.0.1
Description: jQuery Confirm Dialog Replacement
Original Script: TutorialZine (http://www.tutorialzine.com/)
Modify Script: Hendriono (http://modification-blog.blogspot.com/)
------------------------------------------------------------------------- */
(function($){

$.confirm = function(params){

if($('#confirmOverlay').length){
// Sebuah konfirmasi siap untuk ditampilkan pada halaman
return false;
}

var buttonHTML = '';
$.each(params.buttons,function(name,obj){

// Membuat markup tombol

buttonHTML += '<a href="#" class="button '+obj['class']+'"><span>'+name+'</span></a>';

if(!obj.action){
obj.action = function(){};
}
});

var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');

$(markup).hide().appendTo('body').fadeIn();

var buttons = $('#confirmBox .button'),
i = 0;

$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){

// Memanggil aksi atribut ketika klik dilakukan
// dan menyembunyikan kotak dialog

obj.action();
$.confirm.hide();
return false;
});
});

//Centering elemen
$(window).resize(function(){
$('#confirmBox').css({
position: 'fixed',
left: ($(window).width() - $('#confirmBox').outerWidth()) / 2,
top: ($(window).height() - $('#confirmBox').outerHeight()) / 2
});
});

$(window).resize();
}


$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}

})(jQuery);

Kesimpulan

Silahkan berkreasi dengan memanfaatkan plugin ini. Anda bisa mengubah tampilan kotak dialog melalui file jquery.confirm.css. Anda bisa menyisipkan gambar pada kotak dialog, mengganti latar kotak dialog dan menambahkan icon pada kotak dialog.
Anda bahkan bisa saja hanya menampilkan satu tombol konfirmasi tanpa pilihan lain. Jadi silahkan berkreasi dalam menggunakan plugin jQuery Confirm ini untuk keperluan-keperluan lainnya.

Special thanks to TutorialZine for Plugin jQuery Confirm. Selamat mencoba dan semoga berhasil. Happy Blogging :)