Membuat Spoiler Pada Postingan Blog

Spoiler adalah suatu fitur pada forum ataupun blog yang secara default menyembunyikan/menutup isi konten, akan tetapi terdapat tombol untuk membuka/melihat isinya. Biasanya spoiler ini sering digunakan pada forum-forum seperti kaskus, dan lain-lain.
Jika pada forum, untuk membuat spoiler tinggal memasukkan tag code sepert [spoiler] [/spoiler] kan. Tetapi jika untuk postingan blog, butuh code yang sedikit rumit.

Silahkan ada copy-paste code berikut pada postingan blog anda dan letakkan pada bagian edit HTML.

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b> for open <b>Script</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Cilukkkkkkkkkkkk....Baaaaaaaaaa........... Inilah isi spoiler........... </div> </div> </div>

Anda bisa mengganti beberapa teks yang di bold warna merah sesuai keinginan Anda.

Hasilnya adalah sebagai berikut:

Spoiler for open Script:

Cilukkkkkkkkkkkk....Baaaaaaaaaa...........
Inilah isi spoiler...........

Membuat Tulisan Terbalik (ʞılɐqɹǝʇ uɐsılnʇ ʇɐnqɯǝɯ)

Tutorial kali ini kita akan membuat Form HTML untuk konversi dari tulisan normal menjadi tulisan terbalik, dan sebaliknya dari tulisan terbalik ke tulisan normal.

Tulisan-tulisan terbalik itu bisa kita pakai untuk update status di facebook, twitter, ataupun kita bisa posting artikel diblog pakai tulisan terbalik. Kan seru tuh bisa bikin orang yang baca jadi pusing. hehehe... :D

lɐɯɹou ıpɐɾuǝɯ ıuı uɐsılnʇ ʇɹǝʌuoɔ-ƃuǝɯ ɐuɐɯıɐƃɐq ɐpuɐ ɐpɐd uɐʞɹɐɾɐƃuǝɯ uɐʞɐ ɐʎɐs ıuısıp ɐuǝɹɐʞ nlɹǝd ʞɐpıʇ nʇı ¿ɐpuɐ ɹoʇıuoɯ ɹɐʎɐl ɹɐʇnɯǝɯ snɹɐɥ ɥɐʞɐdɐ ˙ıuı ʞılɐqɹǝʇ ɐɹɐɔǝs uɐsılnʇ ɐɔɐqɯǝɯ uɐʞ ɥɐsns ıʇsɐd ¿ıuı ʞılɐqɹǝʇ uɐsılnʇ ɐɔɐqɯǝɯ ɐsıq ɐpuɐ ɥɐʞɐdɐ

bingung ya membaca tulisan itu? nih saya translate:

apakah anda bisa membaca tulisan terbalik ini? pasti susah kan membaca tulisan secara terbalik ini. apakah harus memutar layar monitor anda? itu tidak perlu karena disini saya akan mengajarkan pada anda bagaimana meng-convert tulisan ini menjadi normal

Baiklah langsung saja saya tampilkan source code untuk membuat web HTML untuk membuat tulisan terbalikdan mengkonversi dari tulisan terbalik ke tulisan normal. Berikut source codenya, silahkan copy-paste pada notepad dan simpan dengan format .HTML.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form Pembuat Tulisan Terbalik</title>
<script language="JavaScript">
function flip() {
var result = flipString(document.f.original.value.toLowerCase());
document.f.flipped.value = result;
}
function flipString(aString) {
var last = aString.length - 1;
var result = new Array(aString.length)
for (var i = last; i >= 0; --i) {
var c = aString.charAt(i)
var r = flipTable[c]
result[last - i] = r != undefined ? r : c
}
return result.join('')
}
var flipTable = {
a : '\u0250',
b : 'q',
c : '\u0254',
d : 'p',
e : '\u01DD',
f : '\u025F',
g : '\u0183',
h : '\u0265',
i : '\u0131',
j : '\u027E',
k : '\u029E',
//l : '\u0283',
m : '\u026F',
n : 'u',
r : '\u0279',
t : '\u0287',
v : '\u028C',
w : '\u028D',
y : '\u028E',
'.' : '\u02D9',
'[' : ']',
'(' : ')',
'{' : '}',
'?' : '\u00BF',
'!' : '\u00A1',
"\'" : ',',
'<' : '>',
'_' : '\u203E',
'\\' : '/',
';' : '\u061B',
'\u203F' : '\u2040',
'\u2045' : '\u2046',
'\u2234' : '\u2235'
}
for (i in flipTable) {
flipTable[flipTable[i]] = i
}
</script>
</head>

<body>
<form name="f">
<p>Tulisan Asli: </p>
<textarea rows="6" cols="50" name="original" onkeyup="flip()"></textarea>

<p>Tulisan Terbalik: </p>
<textarea rows="6" cols="50" name="flipped"></textarea>
</form>
</body>
</html>

Redirect Page Menggunakan Javascript

Jika pada artikel sebelumnya saya membahas mengenai Redirect Page Menggunakan Meta-Tags, kini kita membahas dengan topik yang sama tapi beda cara yaitu Redirect Page Menggunakan Javascript.

Fungsi javascript yang dipakai untuk redirect page menggunakan window.location. Dan kita bisa menentukan lokasi redirect yang dituju dengan menentukan waktu tertentu untuk me-redirect page.


Berikut syntax javascript untuk redirect page dan letakkan pada halaman body, yaitu antara tag <body> dan </body>:

<script language="JavaScript">
    var time = null
    function move() {
    window.location = 'index.php'
    }
</script>

Kemudian ubah tag <body> menjadi seperti berikut:

<body onload="timer=setTimeout('move()',2000)">

Yang berarti bahwa halaman akan di redirect dalam waktu 2000mili second = 2 second ke halaman index.php. Anda dapat mengubah waktu redirect tersebut dalam satuan mili second.

Redirect Page Menggunakan Meta-Tags

Untuk membuat suatu halaman web di redirect ke halaman yang lain memiliki banyak cara, salah satunya adalah dibuat melalui meta-tags. Penggunaan redirect web page ini biasa dipakai pada halaman konfirmasi. Misalkan setelah kita melakukan insert data, selalu ada konfirmasi untuk sukses dan gagal. Setelah konfirmasi page tersebut, diberi jeda waktu yang kemudian di redirect ke halaman lain/halaman utama.

Proses redirect web page berikut ini menggunakan meta-tags.

Penempatan script meta-tags berikut ini diletakkan antara tag <head> dan </head> dari code HTML web.
Berikut codenya:

<meta HTTP-EQUIV="REFRESH" content="2; url=index.php">

Code di atas me-redirect page ke halaman index.php dengan diberi jeda waktu 2 detik (dideklarasikan pada tag content). Pemberian waktu pada code content dapan anda ganti sesuai keinginan dengan satuan detik/second.

HTML - Select All dan Unselect All Checkbox (Versi 2)

Jika pada tulisan saya mengenai select dan unselect all checkbox versi 1 menggunakan button, pada tulisan yang versi 2 ini menggunakan data dalam tabel. Sehingga bisa diterapkan untuk data-data dari database. Disini saya hanya menjelaskan pembuatan pada fungsi HTML biasa.

Bagaimana penerapannya, silahkan ikuti langkah-langkahnya berikut:


Fungsi berikut diterapkan berdasarkan data dalam tabel. Hanya menggunakan fungsi checkbox untuk select dan unselect all item.
Berikut code HTMLnya:

<html>
<head>
<title>Select and Unselect Checkbox</title>
</head>
<script>
        function CheckAll(){
                if(document.form1.chkAll.checked == true){
                    for(var j = 0; j < document.form1.length; j++){
                        if(document.form1.elements[j].name == "chk[]"){
                            document.form1.elements[j].checked = true;
                        }
                    }
                }
                else if(document.form1.chkAll.checked == false){
                    for(var j = 0; j < document.form1.length; j++){
                        if(document.form1.elements[j].name == "chk[]"){
                            document.form1.elements[j].checked = false;
                        }
                    }
                }
            }
        </script>
<body>
<form name="form1" method="post" action="delete-kategory.php">
<table border="1">
    <tr>
       <th width="33"><input name="chkAll" type="checkbox" id="chkAll" value="1" onClick="CheckAll();"></th>
       <th width="100">Nama</th>
       <th width="100">Alamat</th>
       <th width="100">No.Telp</th>
       <th width="100">Tgl.Lahir</th>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 1</td>
       <td width="100" align="center">Alamat 1</td>
       <td width="100" align="center">No.Telp 1</td>
       <td width="100" align="center">Tgl.Lahir 1</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 2</td>
       <td width="100" align="center">Alamat 2</td>
       <td width="100" align="center">No.Telp 2</td>
       <td width="100" align="center">Tgl.Lahir 2</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 3</td>
       <td width="100" align="center">Alamat 3</td>
       <td width="100" align="center">No.Telp 3</td>
       <td width="100" align="center">Tgl.Lahir 3</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 4</td>
       <td width="100" align="center">Alamat 4</td>
       <td width="100" align="center">No.Telp 4</td>
       <td width="100" align="center">Tgl.Lahir 4</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 5</td>
       <td width="100" align="center">Alamat 5</td>
       <td width="100" align="center">No.Telp 5</td>
       <td width="100" align="center">Tgl.Lahir 5</td>
    </tr>
    <tr>
       <td width="33" align="center"><input type="checkbox" name="chk[]"/></td>
       <td width="100" align="center">Nama 6</td>
       <td width="100" align="center">Alamat 6</td>
       <td width="100" align="center">No.Telp 6</td>
       <td width="100" align="center">Tgl.Lahir 6</td>
    </tr>
</table>
</form>
</body>
</html>

Simpan dengan format .html

Tampilannya seperti berikut:

HTML - Select All dan Unselect All Checkbox (Versi 1)

Pada HTML terdapat fungsi checkbox untuk memilih item lebih dari satu. Berbeda dengan radio button yang hanya menentukan satu pilihan item saja.

Jika item yang ada itu berjumlah ratusan, apakah tidak kerepotan jika harus menseleksi semua item tersebut satu-satu. Untuk melakukan tersebut, buatlah fungsi untuk dapat memilih semua item dan meng-unselect semua item.

Fungsi berikut diterapkan dengan menggunakan tombol button.
Berikut code HTMLnya:

<html>
<head>
<title>Select and Unselect Checkbox</title>
</head>
<body>
<script type="text/javascript">
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
    if(!document.forms[FormName])
        return;
    var objCheckBoxes = document.forms[FormName].elements[FieldName];
    if(!objCheckBoxes)
        return;
    var countCheckBoxes = objCheckBoxes.length;
    if(!countCheckBoxes)
        objCheckBoxes.checked = CheckValue;
    else
        // set the check value for all check boxes
        for(var i = 0; i < countCheckBoxes; i++)
            objCheckBoxes[i].checked = CheckValue;
}
</script>

<form method="GET" action="page17.php" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input name="myCheckbox" value="1" id="myCheckbox1" type="checkbox">
Option 1 </label>
<br>
<label for="myCheckbox2"><input name="myCheckbox" value="2" 
id="myCheckbox2" type="checkbox">
Option 2</label>
<br>
<label for="myCheckbox3"><input name="myCheckbox" value="3" 
id="myCheckbox3" type="checkbox">
Option 3</label>
<br><input onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" 
value="Select All Item" type="button">
&nbsp;&nbsp;
<input onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" 
value="Unselect All Item" type="button">
</form>
</body>
</html>

Simpan dengan format .html

Tampilannya adalah seperti berikut ini:

Code HTML Special Character (bagian 2)

Code HTML ini bisa digunakan untuk melakukan posting blog yang mengandung unsur code-code HTML/JavaScript. Karena jika memposting code-code secara langsung pada blog, akan menyebabkan error pada halaman blog. Code HTML special character ini saya posting menjadi 2 bagian. Silahkan lihat bagian pertama

HTML Code	Browser View		HTML Code	Browser View
œ	œ		Ý	Ý
	�		Þ	Þ
ž	ž		ß	ß
Ÿ	Ÿ		à	à
 			á	á
¡	¡		â	â
¢	¢		ã	ã
£	£		ä	ä
¤	¤		å	å
¥	¥		æ	æ
¦	¦		ç	ç
§	§		è	è
¨	¨		é	é
©	©		ê	ê
ª	ª		ë	ë
«	«		ì	ì
¬	¬		í	í
­			î	î
®	®		ï	ï
¯	¯		ð	ð
°	°		ñ	ñ
±	±		ò	ò
²	²		ó	ó
³	³		ô	ô
´	´		õ	õ
µ	µ		ö	ö
¶	¶		÷	÷
·	·		ø	ø
¸	¸		ù	ù
¹	¹		ú	ú
º	º		û	û
»	»		ü	ü
¼	¼		ý	ý
½	½		þ	þ
¾	¾		ÿ	ÿ
¿	¿		"	"
À	À		À	À
Á	Á		Á	Á
Â	Â		Â	Â
Ã	Ã		Ã	Ã
Ä	Ä		Ä	Ä
Å	Å		Å	Å
Æ	Æ		Æ	Æ
Ç	Ç		Ç	Ç
È	È		È	È
É	É		É	É
Ê	?		Ê	Ê
Ë	Ë		Ë	Ë
Ì	Ì		Ì	Ì
Í	Í		Í	Í
Î	Î		Î	Î
Ï	Ï		Ï	Ï
Ð	Ð		Ð	Ð
Ñ	Ñ		Ñ	Ñ
Ò	Ò		Õ	Õ
Ó	Ó		Ö	Ö
Ô	Ô		Ø	Ø
Õ	Õ		Ù	Ù
Ö	Ö		Ú	Ú
×	×		Û	Û
Ø	Ø		Ü	Ü
Ù	Ù		Ý	Ý
Ú	Ú		Þ	Þ
Û	Û	ß	ß
Ü	Ü	à	à

Code HTML Special Character (bagian 1)

Code HTML ini bisa digunakan untuk melakukan posting blog yang mengandung unsur code-code HTML/JavaScript. Karena jika memposting code-code secara langsung pada blog, akan menyebabkan error pada halaman blog. Code HTML special character ini saya posting menjadi 2 bagian. Silahkan lihat bagian kedua

HTML Code	Browser View		HTML Code	Browser View
©	©		[	[
®	®		\	\
 			]	]
"	"		^	^
&	&		_	_
&lt;	<		&#96;	`
&gt;	>		&#97;	a
&#33;	!		&#98;	b
&#34;	"		&#99;	c
&#35;	#		&#100;	d
&#36;	$		&#101;	e
&#37;	%		&#102;	f
&#38;	&		&#103;	g
&#39;	'		&#104;	h
&#40;	(		&#105;	i
&#41;	)		&#106;	j
&#42;	*		&#107;	k
&#43;	+		&#108;	l
&#44;	,		&#109;	m
&#45;	-		&#110;	n
&#46;	.		&#111;	o
&#47;	/		&#112;	p
&#48;	0		&#113;	q
&#49;	1		&#114;	r
&#50;	2		&#115;	s
&#51;	3		&#116;	t
&#52;	4		&#117;	u
&#53;	5		&#118;	v
&#54;	6		&#119;	w
&#55;	7		&#120;	x
&#56;	8		&#121;	y
&#57;	9		&#122;	z
&#58;	:		&#123;	{
&#59;	;		&#124;	|
&#60;	<		&#125;	}
&#61;	=		&#126;	~
&#62;	>		&#127;	?
&#63;	?		&#128;	€
&#64;	@		&#129;	�
&#65;	A		&#130;	‚
&#66;	B		&#131;	ƒ
&#67;	C		&#132;	„
&#68;	D		&#133;	…
&#69;	E		&#134;	†
&#70;	F		&#135;	‡
&#71;	G		&#136;	ˆ
&#72;	H		&#137;	‰
&#73;	I		&#138;	Š
&#74;	J		&#139;	‹
&#75;	K		&#140;	Œ
&#76;	L		&#141;	�
&#77;	M		&#142;	Ž
&#78;	N		&#143;	�
&#79;	O		&#144;	�
&#80;	P		&#145;	‘
&#81;	Q		&#146;	’
&#82;	R		&#147;	“
&#83;	S		&#148;	”
&#84;	T		&#149;	•
&#85;	U		&#150;	–
&#86;	V		&#151;	—
&#87;	W		&#152;	˜
&#88;	X		&#153;	™
&#89;	Y	&#154;	š
&#90;	Z	&#155;	›