Tutorial Cara Buat Widget Tulisan Terbalik Di Blog (Flip Text)

Posted by

Hai all..Camat kembali ke tutorial berikutnya.Hari ini koz akan mengajar korang cara bagaimana hendak membuat widget tulisan terbalik atau lebih sesuai di sebut sebagai flip text.Kegunaan widget ini adalah untuk mengedit tulisan yang di convert menjadi terbalik dalam kedudukan kebawah, lebih kurang jadi macam shadow gambar la.Sebagai contoh:-

Tulisan Asal:-
Tutorial...( Cara Buat Widget Tulisan Terbalik Di Blog(Flip Text))

Tulisan selepas di covertkan:-
((ʇxǝʇ dılɟ)ƃolq ıp ʞılɐqɹǝʇ uɐsılnʇ ʇǝƃpıʍ ʇɐnq ɐɹɐɔ )˙˙˙lɐıɹoʇnʇ

Macam mana?rasa-rasa teringin tak nak letak dekat blog korang.Kalau nak ikuti langkah-langkah di bawah...

Langkah 1

Log in blog>Dashboard>Posting>Edit Page>New Page>Edit HTML

Atau

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Kemudian copy dan paste code di bawah

<center><style type="text/css">
textarea { font-family: "Arial Unicode MS", terbalik }
</style>
<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>

<h1>Membuat Tulisan Terbalik</h1>
<form name="f">
Tulisan Asli: <br />
<textarea rows="6" cols="50" name="original" onkeyup="flip()"></textarea>
<br />
Tulisan Terbalik: <br />
<textarea rows="6" cols="50" name="flipped"></textarea>
</form>
Design by <a href="http://kozumiro.blogspot.com/">Budak Nakal^^</a></center>