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

click to zoom

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

Tulisan Asli:




Tulisan Terbalik:

Design by Budak Nakal^^


camat mencuba...
Ranking: 5

Comments:6

22 July, 2010 16:06

ıuısıp lɐʞɐuǝɯ ɐʎɐs

22 July, 2010 16:55

˙˙˙ıʞıʞıʞ ƃuɐɹɐʞǝs ɥɐp lɐʞɐu x ɐʎɐs

22 July, 2010 19:56

koz! nak tnye, camner wat yg kotak pink tuh???

13 August, 2010 16:07

˙ɐɐɐʎɐɾɹǝq puɐ (¡) ʎʎɹʇ ɥɐp ɐʎɐs

30 November, 2011 08:24

tengs

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net