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>
Save dan lihat hasilnya...
Contoh hasilnya seperti berikut:-
Membuat Tulisan Terbalik
Design by Budak Nakal^^camat mencuba...