Pembaharuan: Posting ini sudah usang. Cek versi plugin-nya di sini
jQuery
// Iterate over each select element
$('select').each(function() {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.styledSelect.active').each(function() {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this line for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
Dalam tag kondisional blogspot kita tahu bahwa kondisi dinyatakan dengan <b:if>. Tapi biasanya kita juga akan menemui <b:else/>. Apa itu?
Mereka berdua pada dasarnya masih memiliki tugas yang sama yaitu untuk menciptakan kondisi seperti halnya peraturan if dalam JavaScript. Jika kondisi terpenuhi, lakukan A. Jika tidak, lakukan B.
Berikut ini adalah salah satu contoh peraturan if pada JavaScript dengan perintah: Jika A, tulskan A!
if(A) {
document.write('A');
}
Dalam tag kondisional blogspot, kita bisa menuliskannya seperti ini:
<b:if cond='A'>
A
</b:if>
<b:else/>
<b:else/> digunakan untuk menyatakan perintah cadangan jika tugas yang diberikan tidak terpenuhi. Sama seperti halnya else dalam JavaScript: Jika A, tuliskan A. Jika bukan A, tuliskan B!
Dalam tag kondisional blogspot, kita bisa menuliskannya seperti ini:
<b:if cond='A'>
A
<b:else/>
B
</b:if>
Satu contoh nyata ada dalam beberapa penerapan tag kondisional halaman. Katakanlah, saat kita sedang berada pada halaman item, kita ingin menampilkan posting. Sedangkan saat kita sedang tidak berada pada halaman item, kita ingin menampilkan sidebar. Pada umumnya, kita akan menuliskan kondisinya seperti ini:
Style Switcher adalah aplikasi/aksesoris kecil yang biasa ada dalam sebuah situs untuk mengizinkan pengunjung mengganti tampilan dari luar sesuka hati. Dengan ini diharapkan pengunjung tidak akan bosan dengan artikel yang dia baca karena dia bisa memutuskan desain situs yang sedang dia kunjungi melalui Style Switcher.
Versi asli yang lebih besar sebenarnya cenderung mengambil konsep penggantian file CSS secara keseluruhan:
Style Switcher pada Yahoo! Mail
Di sini Saya hanya akan mengambil beberapa perubahan kecil saja seperti warna latar, warna huruf, jenis huruf dan ukuran huruf. Versi ini agak berbeda dengan yang biasa Anda temui, karena versi ini sudah Saya lengkapi dengan JavaScript Cookies. Kelebihannya adalah, saat pengunjung blog Anda mengubah tampilan template Anda dari luar, meskipun dia sudah berpindah-pindah halaman, perubahan yang dia lakukan akan tetap bertahan:
Kode yang Saya beri tanda adalah masa kadaluarsa kuki. Saya membuat masa kadaluarsa selama 7000 hari untuk membuat tampilannya bertahan selama mungkin. Tapi jika Anda ingin menentukan sendiri masa kadaluarsa perubahan tema yang pengunjung Anda lakukan, (misalnya tampilan yang telah berubah akan kembali menjadi seperti semula dalam waktu 3 hari), cukup ganti nilainya dari 7000 menjadi 3 (untuk 3 hari).
Catatan: Aksesoris ini cocok diterapkan pada tema yang sederhana, cenderung berkotak-kotak dan tidak memiliki detail elemen yang rumit. Tidak cocok untuk Blogazine.
Pertanyaan mengenai pengembangan dan penambahan fitur bisa dilanjutkan di bawah, tapi pastikan Anda sudah membaca cara kerja JavaScript Cookies sebelum berdiskusi » (pelajari di sini)
Eksperimen sederhana untuk menciptakan navigasi dengan efek hover menggulung dari Sohtanaka yang dulu pernah Saya tuliskan di artikel ini. Kali ini Saya hanya akan menggunakan CSS3 Transisi untuk menganimasikan efek menggulung tiap item menu:
Atribut data-clone digunakan untuk menyimpan nilai kloning yang dituliskan secara manual menggantikan fungsi .clone() dalam jQuery. Efek animasi dibuat dengan cara menganimasikan properti margin dengan CSS transisi.
Desain elemen halaman berupa navigasi angka yang terispirasi dari tokoh kartun Flying Squirrel. Bentuk setiap item navigasi menggambarkan bahwa mereka adalah kacang-kacang pohon yang sangat disukai oleh tupai terbang ini. Memang tidak mirip, tapi cukup mewakili:
Cookie sebenarnya hanyalah memori peramban yang tercipta untuk menyimpan data kecil berupa teks. Sekedar untuk memberikan indikasi apakah sesuatu harus diingat atau tidak. Memori ini digunakan untuk membuat peramban mengingat sesuatu saat mengunjungi situs yang pernah dia kunjungi. Satu contoh yang paling umum ada pada semua halaman login situs. Dalam halaman login tersebut biasanya terdapat pilihan Ingat saya? atau Remember me? atau Keep me logged in? seperti ini:
Formulir Login Facebook
Saat Anda mengecek kotak centang tersebut sebelum melakukan login, maka setelah Anda melakukan login, dan kemudian Anda menutup peramban kemudian membukanya lagi, Anda tidak perlu melakukan login untuk yang ke dua kalinya karena peramban yang sedang Anda gunakan telah menyimpan data login Anda. Begitulah fungsi kuki secara umum (Sebenarnya Saya masih tidak begitu yakin apakah cara kerja ‘ingat Saya?’ pada aplikasi login informasi menggunakan sesuatu sesederhana kuki atau tidak. Mohon dikoreksi).
Saya berikan sebuah demo sederhana terlebih dahulu. Bukan demo formulir login akun (kuki login tidak dibuat begitu saja dengan JavaScript. Itu bisa mengancam keamanan akun), tapi konsep kotak dialog yang hanya akan tampil sekali saja:
Dasar kerjanya adalah, saat sebuah halaman terbuka maka kotak dialog akan tampil.
Saat Anda menutup kotak dialog tersebut, di balik itu sebenarnya Anda juga telah menciptakan kuki untuk mengingat sesi penutupan kotak dialog.
Setelah kuki kotak dialog tersimpan, maka saat peramban memuat ulang halaman tersebut dia akan secara otomatis membaca kuki terkait yang telah tersimpan kemudian memutuskan untuk melakukan sesuatu terhadap data yang berhasil dibaca tersebut.
JavaScript Cookie
Berikut ini adalah fungsi JavaScript Cookie yang Saya dapatkan dari QuirksMode:
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
Hanya ada tiga fungsi yaitu createCookie(name, value, days), readCookie(name) dan eraseCookie(name).
createCookie(name, value, days)
createCookie digunakan untuk mencipatkan kuki bersamaan saat sebuah perintah dikerjakan (dalam demo kotak dialog, kuki dibuat saat tombol [×] diklik):
$('a.close').click(function() {
$('#dialog').fadeOut();
createCookie("hideDialog", "hide", 7000); // Membuat kuki...
});
hideDialog adalah nama kuki, hide adalah nilai kuki dan 7000 adalah masa kadaluarsa. Dalam fungsi di atas, kuki akan kadaluarsa setelah 7000 hari.
Nilai kuki sebenarnya bisa diabaikan dengan menuliskan nilai berupa null, jika yang kita inginkan hanya mengingat sesi yang terjadi. Tapi jika kuki yang akan kita tampilkan/tugaskan lebih spesifik (nama orang misalnya) maka nilai kuki akan bermanfaat. Sebagai contoh, jika peramban Anda telah menyimpan kuki yang diciptakan dari ini:
createCookie("Nama", "Taufik Nurrohman", 30);
Maka Anda bisa menampilkan nilai kuki tersebut dengan menuliskan ini:
Kode di atas akan menampilkan kotak pesan peringatan bertuliskan Taufik Nurrohman.
readCookie(name)
Anda sudah mengeklik tombol penutup kotak dialog. Kuki hideDialog sudah tersimpan. Tugas selanjutnya hanyalah menciptakan kondisi untuk memerintahkan peramban melakukan sesuatu saat kuki hideDialog terbaca. Ini bisa dilakukan dengan menuliskan fungsi readCookie dalam kondisi:
Kode di atas Saya rasa cukup jelas. Saat kuki hideDialog terbaca maka kotak dialog akan dihilangkan. Itulah sebabnya kenapa kotak dialog hanya tampil sekali saja.
eraseCookie(name)
eraseCookie tidak memiliki keistimewaan apapun. Ini hanyalah fungsi sederhana untuk menghapus kuki melalui dokumen HTML:
Tombol di atas akan menghapus kuki penutupan kotak dialog saat diklik. Hal ini tidak jauh berbeda seperti halnya saat kita menghapus kuki secara manual melalui histori peramban:
Menghapus kuki melalui histori peramban
Kode Lengkap
jQuery
$(function() {
// Tampilkan kotak dialog saat halaman telah termuat
$(window).load(function() {
$('#dialog').animate({top:($(window).height()/2)-20}, 400, "swing");
});
// Saat tombol tutup diklik, sembunyikan kotak dialog dengan efek .fedeOut()
// dan buat kuki dengan nama "hideDialog" dengan waktu kadaluarsa 7000 hari
$('a.close').click(function() {
$(this).parent().fadeOut('fast');
createCookie("hideDialog", "hide", 7000);
return false;
});
// Digunakan saat kuki sudah tercipta
// Saat kuki "hideDialog" terbaca, singkirkan kotak dialog
if(readCookie("hideDialog")) {
$('#dialog').remove();
}
});
HTML
<div id='dialog'>
Lorem ipsum dolor sit amet.
<a class='close' href='#'>×</a>
</div>
Dalam Bentuk Plugin jQuery (Dengan Sedikit Perubahan)
/**
* TextAreaExpander plugin for jQuery
* v1.0
* Expands or contracts a textarea height depending on the
* quatity of content entered by the user in the box.
*
* By Craig Buckler, Optimalworks.net
* With some modification by Taufik
* As featured on SitePoint.com:
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
* Please use as you wish at your own risk.
*/
/**
* Usage:
*
* From JavaScript, use:
* $(<node>).TextAreaExpander(<minHeight>, <maxHeight>);
* where:
* <node> is the DOM node selector, e.g. "textarea"
* <minHeight> is the minimum textarea height in pixels (optional)
* <maxHeight> is the maximum textarea height in pixels (optional)
*
* Alternatively, in you HTML:
* Assign a class of "expand" to any <textarea> tag.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea>
*
* Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea>
* The textarea will use an appropriate height between 50 and 200 pixels.
*/
(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length,
ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));
e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
e.style.height = h + "px";
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != "textarea") return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0' + p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0' + p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
}
});
return this;
};
})(jQuery);
Penggunaan
Dasar
Seleksi sebuah <textarea> kemudian terapkan fungsi .TextAreaExpander(min-height, max-height):
$('textarea').TextAreaExpander(200, 700);
Tinggi Minimal & Maksimal dalam Kelas
Berikan kelas expandMinHeight-MaxHeight pada <textarea>:
Cara sederhana untuk menciptakan efek komentar bertingkat dengan CSS pseudo-class :nth-child(N)
Anda pernah tertarik untuk memasang fitur/sistem thread comment bertingkat dengan hack komentar Blogger dari beberapa blog yang Saya temukan? Jika Anda sekedar tertarik dengan efek bertingkatnya saja, sebenarnya efek itu bisa diciptakan hanya dengan CSS3. Blogger memiliki tingkatan komentar balasan satu tingkat, namun setidaknya mereka memiliki induk komentar yang bisa kita jadikan sebagai batas akhir perhentian efek.
Cukup salin kode ini dan letakkan di atas kode ]]></b:skin> atau </style>:
Ide ini sebenarnya Saya ambil dari sebuah artikel - Lazy Load YouTube Videos. Tapi Saya pikir kodenya terlalu panjang. Dan prosedurnya juga terlalu rumit.
Berikut ini adalah versi paling sederhana dari jQuery YouTube Lazy Loader:
Cukup tulis beberapa tautan dengan format seperti ini maka jQuery akan mengubah mereka semua menjadi video (dalam versi palsu pada saat pertama, dan akan berubah menjadi video asli setelah diklik):
Cara kerjanya sangat sederhana. jQuery akan mencari semua tautan yang memiliki kelas youtube-link. Setelah elemen ditemukan, maka jQuery akan mencari atribut href darinya untuk mengambil ID video:
var yt_url = this.href,
yt_id = yt_url.split('?v=')[1]; // Mendapatkan ID video dari URL
Kemudian juga mengambil teks dari tautan tersebut sebagai judul video palsu yang akan kita buat nanti:
var yt_title = $(this).text();
Setelah ID dan teks didapatkan, maka dia akan menggunakannya untuk membangun elemen-elemen yang tampak sebagai video dengan latar belakang gambar dan judul yang diambil dari data tadi:
Video tidak akan dipanggil sampai sejauh ini, hingga saat seorang pengunjung (penonton) mengeklik video palsu yang kita buat, maka video palsu tersebut akan berubah menjadi elemen <iframe> yang akan memuat video asli:
Rilis paket JavaScript manipulasi komentar Blogger! Setelah beberapa kali menemukan masalah pada kode JavaScript manipulasi komentar yang biasa digunakan (Saya rasa ada banyak dimana-mana dalam berbagai versi), kali ini Saya akan memperkenalkan versi yang lebih aman dan lebih lengkap. Berikut ini adalah beberapa fitur yang ada:
Menyisipkan gambar pada komentar Blogger.
Menyisipkan video YouTube ke dalam komentar Blogger.
Menyisipkan tag <code>
Menyisipkan tag <pre>
Menyisipkan <blockquote>
Mengubah teks emotikon secara otomatis.
Dua metode penyisipan kode untuk manipulasi komentar Blogger.
Aman. Kode braket kotak yang keliru saat diimplementasikan tidak akan diparse menjadi tag HTML.
CSS Fallback. Artinya bahwa jika JavaScript tidak bekerja, beberapa elemen penting masih bisa bekerja sebagaimana saat menggunakan JavaScript (Progressive Enhancement).
Pengaturan ukuran dan posisi dilakukan melalui CSS.
Ada beberapa hal yang menjadi perhatian Saya di sini:
Perhatian Pertama: Rusaknya DOM (?)
Rusaknya elemen-elemen HTML karena terkadang JavaScript memanipulasi karakter dengan perintah yang salah yang berasal dari faktor manusia. Hal ini biasanya terjadi ketika penulis melakukan kesalahan saat menerapkan kode. Salah satu contoh umum adalah saat menyisipkan gambar dengan manipulasi braket kotak seperti ini:
[img]gambar-pemandangan.jpg[/img]
Kode di atas adalah kode yang dituliskan secara benar, sehingga kita bisa membuat manipulasi dengan regex untuk mengubahnya menjadi tag <img> seperti ini:
var a = something.innerHTML;
a = a.replace(/\[img\]/ig, "<img src='");
a = a.replace(/\[\/img\]/ig, "' alt='' />");
another.innerHTML = a;
Sehingga JavaScript akan mengubah kode di atas menjadi seperti ini:
<img src='gambar-pemandangan.jpg' alt='' />
Tapi terkadang kita juga bisa saja mengalami kesalahan ketik seperti ini:
[img]gambar-pemandangan.jpg[img]
Hal ini sangat berbahaya, karena sekali saja Anda melakukan kesalahan terhadap peraturan JavaScript yang Anda buat sendiri, meskipun hanya satu kode tapi itu bisa merusak dokumen HTML secara global!
<img src='gambar-pemandangan.jpg<img src='
Masalah system of blog pada diskusi hilangnya beberapa item komentar karena JavaScript - Permalink
Oleh karena itu, dibandingkan mengubah setiap karakter unik secara terpisah, akan lebih baik jika Anda menggabungkannya dalam satu kelompok, antara braket pembuka dan braket penutup:
var a = something.innerHTML;
a = a.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img src='$1' alt='' />");
another.innerHTML = a;
Cara di atas jauh lebih aman, karena JavaScript hanya akan memanipulasi karakter [img] yang memiliki penutupnya yaitu [/img]. Jika karakter akhirnya bukan [/img], maka JavaScript akan mengabaikannya. Itu adalah konsep yang Saya pegang di sini.
Penggunaan Tag HTML Asli
Ini penting, dan Saya memang lebih memfokuskan karya ini pada penerapan tag HTML murni, bukan braket kotak atau karakter-karakter paksaan lainnya. Blogger sudah memiliki fasilitas pengecekan validasi tag HTML pada formulir komentar mereka. Singkatnya, tag HTML bisa menjadi sesuatu yang sangat aman karena Blogger secara normal akan memastikan bahwa kode yang Anda tuliskan benar:
var a = something.innerHTML;
// Mengubah tag <i> menjadi <code>
a = a.replace(/<i rel="code">(.[^>]*)<\/i>/g, "<code>$1<\/code>");
another.innerHTML = a;
Progressive Enhancement
Saya menggunakan dua tag HTML utama yaitu <i> dan <b> dengan atribut rel yang berbeda-beda. Apa yang Saya lakukan di sini adalah Saya akan memastikan bahwa jika JavaScript tidak bekerja, maka tampilan tag HTML manipulator akan tetap sama dengan tag HTML yang akan menjadi penggantinya. Sebagai contoh, Saya akan menyamakan tampilan tag <pre> dengan <i rel="pre"> sebagai cadangan:
Dengan begitu Saya bisa memastikan bahwa jika tag <i rel="pre"> berhasil dimanipulasi menjadi tag <pre>, maka tampilan pada peramban akan tampak seperti apa adanya tag <pre>. Namun jika gagal dimanipulasi, tampilan tag <i rel="pre"> akan tetap tampak sebagai sesuatu yang memiliki wujud sama dengan tag <pre> - Selengkapnya bisa dibaca di CSS Fallback untuk Manipulasi Bagian Komentar
Mengatur Tampilan Melalui CSS
Semua pengaturan seperti lebar elemen, posisi dan warna dilakukan melalui CSS.
Cara Memasang Fitur Ini
Pertama-tama masuklah ke halaman editor HTML blog Anda. Klik Edit HTML dan klik Lanjutkan:
<b:if cond='data:blog.pageType == "item"'>
<script>
//<\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
// YouTube video
b = b.replace(/<i rel="youtube">https?:\/\/www\.youtube\.com\/embed\/(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/<i rel="youtube">(https?:\/\/youtu\.be\/|https?:\/\/www\.youtube\.com\/watch\?v\=)(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]https?:\/\/www\.youtube\.com\/embed\/(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[youtube\](https?:\/\/youtu\.be\/|https?:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='https://www.youtube.com/embed/$2'><\/iframe>");
// Code & text block
b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
b = b.replace(/\[code\](.*?)\[\/code\]/ig, "<code>$1<\/code>");
b = b.replace(/\[pre\](.*?)\[\/pre\]/ig, "<pre>$1<\/pre>");
b = b.replace(/\[blockquote\](.*?)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
// Finishing YouTube and Reduce filesize from images that uploaded by Blogger
b = b.replace(/&feature=[\w-]*/ig, "");
b = b.replace(/\/s(640|1600)/g, "/s400");
// Emoticons
b = b.replace(/\s:\)+/g, " <img class='emo' alt=':)' src='" + c + "01.gif'\/>");
b = b.replace(/\s;\)+/g, " <img class='emo' alt=';)' src='" + c + "02.gif'\/>");
b = b.replace(/\s:\(/g, " <img class='emo' alt=':(' src='" + c + "03.gif'\/>");
b = b.replace(/\s=\(/g, " <img class='emo' alt='=(' src='" + c + "04.gif'\/>");
b = b.replace(/\s@@,/g, " <img class='emo' alt='@@,' src='" + c + "05.gif'\/>");
b = b.replace(/\s:s/ig, " <img class='emo' alt=':s' src='" + c + "07.gif'\/>");
b = b.replace(/\s:(\\|\/)/g, " <img class='emo' alt=':\\' src='" + c + "08.gif'\/>");
b = b.replace(/\s:D/g, " <img class='emo' alt=':D' src='" + c + "09.gif'\/>");
b = b.replace(/\s=D/g, " <img class='emo' alt='=D' src='" + c + "10.gif'\/>");
b = b.replace(/\s\^:D/g, " <img class='emo' alt='^:D' src='" + c + "11.gif'\/>");
b = b.replace(/\s\^_?\^/g, " <img class='emo' alt='^_^' src='" + c + "12.gif'\/>");
b = b.replace(/\s:'\(/g, " <img class='emo' alt=':'(' src='" + c + "13.gif'\/>");
b = b.replace(/\sT_T/ig, " <img class='emo' alt='T_T' src='" + c + "15.gif'\/>");
b = b.replace(/\sB\)/g, " <img class='emo' alt='B)' src='" + c + "16.gif'\/>");
b = b.replace(/\s:Q/ig, " <img class='emo' alt=':Q' src='" + c + "17.gif'\/>");
b = b.replace(/\s7:\(/g, " <img class='emo' alt='7:(' src='" + c + "19.gif'\/>");
b = b.replace(/\s:p/ig, " <img class='emo' alt=':p' src='" + c + "20.gif'\/>");
b = b.replace(/\s:Oz+/ig, " <img class='emo' alt=':Ozzz' src='" + c + "21.gif'\/>");
b = b.replace(/\s7:O/ig, " <img class='emo' alt='7:O' src='" + c + "22.gif'\/>");
b = b.replace(/\s\\o\//ig, " <img class='emo' alt='\\o/' src='" + c + "23.gif'\/>");
b = b.replace(/\s\\m\//ig, " <img class='emo' alt='\\m/' src='" + c + "24.gif'\/>");
b = b.replace(/\s(<3|:\*)/ig, " <img class='emo' alt=':*' src='" + c + "25.gif'\/>");
b = b.replace(/\s0:\)+/ig, " <img class='emo' alt='0:)' src='" + c + "26.gif'\/>");
b = b.replace(/\s\^o\^/ig, " <img class='emo' alt='^o^' src='" + c + "27.gif'\/>");
b = b.replace(/\s:-a/ig, " <img class='emo' alt=':-a' src='" + c + "28.gif'\/>");
b = b.replace(/\s\*fck\*/ig, " <img class='emo' alt='*fck*' src='" + c + "29.gif'\/>");
b = b.replace(/\sxV/ig, " <img class='emo' alt='xV' src='" + c + "30.gif'\/>");
b = b.replace(/\sx\@/g, " <img class='emo' alt='x@' src='" + c + "31.gif'\/>");
b = b.replace(/\s\X\@/g, " <img class='emo' alt='X@' src='" + c + "32.gif'\/>");
b = b.replace(/\s:-d/ig, " <img class='emo' alt=':-d' src='" + c + "33.gif'\/>");
b = b.replace(/\s:-bd/ig, " <img class='emo' alt=':-bd' src='" + c + "34.gif'\/>");
b = b.replace(/\s\~x\(+/ig, " <img class='emo' alt='~x(' src='" + c + "35.gif'\/>");
b = b.replace(/\s:W/g, " <img class='emo' alt=':W' src='" + c + "37.gif'\/>");
b = b.replace(/\s''J/ig, " <img class='emo' alt='''J' src='" + c + "47.gif'\/>");
a.innerHTML = b;
} repText('comment-holder');
//]]>
</script>
</b:if>
Klik Simpan Template.
Pembaharuan: Mengganti pola /<tag>(.[^>]*)<\/tag>/ig dan /\[bracket\](.[^\]]*)\[\/bracket\]/ig menjadi /<tag>(.*?)<\/tag>/ig dan /\[bracket\](.*?)\[\/bracket\]/ig untuk meloloskan tag <br> di dalam tag manipulasi.
Penerapan Kode-Kode Manipulasi
Saya memberikan dua pilihan, yaitu menggunakan tag HTML dengan target manipulasi yang diambil berdasarkan atribut rel dan menggunakan kata-kata kunci yang dimasukkan ke dalam braket kotak sebagai penggambaran tag HTML. Saya merekomendasikan Anda untuk menggunakan tag HTML karena mereka masih bisa bekerja tanpa JavaScript (ini juga merupakan standar manipulasi komponen komentar di blog Saya):
Perintah
Format
Memasukkan gambar
<i rel="image">URL Gambar</i>
[img]URL Gambar[/img]
Memasukkan video YouTube
<i rel="youtube">URL YouTube</i>
[youtube]URL YouTube[/youtube]
Memasukkan tag <code>
<i rel="code">Kode Anda</i>
[code]Kode Anda[/code]
Memasukkan tag <pre>
<i rel="pre">Kode Anda</i>
[pre]Kode Anda[/pre]
Memasukkan kuota
<b rel="quote">Kata-kata Anda</b>
[blockquote]Kata-kata Anda[/blockquote]
Memasukkan emotikon
Beberapa kode yang bisa digunakan: :) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W
Berikut ini adalah beberapa keterangan singkat mengenai klasifikasi fon yang Saya temukan dari luar. Beberapa mungkin masih akan Saya edit suatu saat nanti jika Saya telah menemukan referensi yang lebih meyakinkan. Tapi pada intinya beginilah hasil paling meyakinkan untuk saat ini.
Calligraphic
Huruf yang terkait dengan seni kaligrafi dan fon yang dikembangkan dari produksi mereka dapat diklasifikasikan sebagai kaligrafi. Huruf kaligrafi dapat, walaupun tidak harus, diklasifikasikan sebagai Chancery, Etruscan atau Uncial. Huruf Chancery memiliki huruf sempit sedikit miring dan sangat berpengaruh dalam pengembangan serif italik. Wajah Etruscan tidak memiliki huruf kecil dan didasarkan pada bentuk awal dari kaligrafi Romawi dimana kuas diadakan di sudut curam. Gaya Celtic, huruf Uncial diciptakan dari cara memegang kuas pada sudut hampir horizontal. Hanya ada satu case dalam desain Uncial, meskipun mereka menjadi dasar untuk pengembangan roman lowercase.
Sebuah gaya naskah kaligrafi dibuat dengan broad-nibbed pen menggunakan stroke vertikal, melengkung dan miring. Juga disebut sebagai Fraktur atau Blackletter. Populer dari abad pertengahan melalui Renaissance (dan sampai abad ke-20 terutama di Jerman). Ketika ahli-ahli Taurat menggunakan metode penulisan dan harus angkat pena untuk setiap segmen huruf. Dari sinilah istilah “Fraktur” berasal; itu berasal dari kata latin untuk rusak. Gaya sering dikaitkan dengan beberapa negara tertentu atau wilayah.
Kategori Serif didefinisikan oleh tambahan goresan horizontal pada setiap huruf (sering disebut sebagai feet). Ada berbagai macam fon Serif yang dibagi menjadi tiga subkategori: old style, modern dan transitional. Ada kategori tambahan dari fon Serif —Serif Slab— yang kini telah berevolusi dalam kategori tersendiri.
Serif Gaya Lama diidentifikasi oleh bentuk miring, bulat. Setiap goresan huruf memiliki berat yang sama, membuat setiap huruf tampak seragam.
Serif Modern, memiliki kontras goresan huruf tipis dan tebal. Berat huruf jauh lebih berat dari tipografi gaya lama. Goresan lebih tebal secara vertikal daripada horizontal.
Serif Transisi menggabungkan atribut dari gaya lama dan tipografi modern. Setiap huruf berisi goresan horizontal tajam dari setiap huruf tetapi juga memiliki berbagai lebar goresan. Tipografi transisi yang umum digunakan dalam berbagai aplikasi, terutama sebagai jenis huruf standar (Times New Roman) dalam aplikasi perangkat lunak umum seperti Microsoft Word dan Adobe Photoshop.
Adalah jenis huruf tanpa serif. Mereka dapat ditemukan dalam sejarah sejak abad ke-5, meskipun kembalinya kebangkitan klasik Renaissance Italia untuk tipografi gaya lama serif membuat mereka hampir usang sampai abad ke-20. Ada banyak pengembangan mereka huruf Sans-Serif di Jerman sebagai pemberontakan terhadap tulisan hiasan gaya Blackletter populer yang menghasilkan tipografi Sans-Serif berdasarkan pada kemurnian bentuk-bentuk geometris. Sama seperti tipografi Serif, ada klasifikasi yang berbeda untuk Sans-Serif.
Fon dalam kategori jenis Script mudah diidentifikasi karena mereka dirancang untuk meniru tulisan tangan. Setiap huruf terhubung satu sama lain. Dalam varian Cursive —yang juga biasa diklasifikasikan sebagai Script— huruf memiliki ekor panjang tapi tidak benar-benar menyentuh.
Adalah fon dengan tampilan hiasan yang tidak lazim, atau yang menyimulasikan bentuk nontipografikal. Semua yang eksentrik, tipografi tak biasa dikelompokkan ke dalam satu kategori: Novelty. Ada beberapa nama lain untuk jenis tipografi ini: Decorative, Grunge, Artistic, Ornamental. Tetapi mereka semua mengacu pada klasifikasi yang sama. Fon-fon ini diidentifikasi karena kurangnya karakteristik lainnya.
Cek Apakah Textarea Mengandung Karakter Ganti Baris atau Tidak
Ini adalah masalah yang Saya alami. Mengenai konverter HTML khusus di blog Saya. Sepertinya pengunjung masih belum begitu mengerti bahwa <i rel="code"> dan <i rel="pre"> itu berbeda. Jadi saat mereka mem-paste kode yang seharusnya berada segaris dengan kalimat malah menghasilkan tampilan yang terpotong dengan kalimat:
Contoh kasus terbaru: Seharusnya kode <p> yang dituliskan tidak masuk di dalam elemen <pre> melainkan masuk di dalam elemen <code> - Permalink
Dengan beberapa baris kode ini Saya telah berhasil mengatasi masalahnya:
function check() {
var input = document.getElementById('txt').value;
if (input.lastIndexOf('\n') != -1) {
// Mengandung karakter ganti baris
} else {
// Tidak mengandung karakter ganti baris
}
}
Intinya adalah, kode ini akan mengecek apakah di dalam textarea mengandung karakter \n (ganti baris) atau tidak. Jika ya, lakukan perintah A. Jika tidak, lakukan perintah B. Dan setelah alat diperbaiki, hasil komentarpun membaik.
