21 Mar 2012

Pasang Widget Flipped Text di Blogger

Tentunya diantara Anda sudah tidak asing lagi dengan yang dimaksud dengan Flip text atau penulisan text secara terbalik. Flip text bisanya sering kali kita temui dibeberapa status facebook, komentar forum, bahkan digunakan untuk memberikan tingkat kerumitan password dan masih banyak lagi kegunaan flip text tersebut. Sedangkan untuk fasilitas Flip text sudah banyak kita jumpai dibeberapa situs ternama dan dapat diakses secara gratis.

Dalam kesempatan kali ini IdblogDesign akan memberikan beberapa tutorial agar blog kesayangan kita, khususnya bagi para pengguna fasilitas blogger atau blogspot dapat memasang widget atau menyediakan fitur Flip text untuk para visitor. Langsung saja langkah-langkah membuat widget Flip text pada blogger adalah:

Jika Anda ingin memasang pada sidebar widget atau main widget.

1. Masuk ke akun blogger Anda.
2. Pilih menu rancangan pada menu tab blogger.
3. Tambah Gadget dan plih HTML/JavaScript, lalu pasang kode berikut ini.
<style type="text/css">
#box{border:1px solid #ccc;padding:5px;margin:0;width:100%;}
</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">
<h2>
Tulisan Asli</h2>
<textarea rows="6" cols="50" name="original" onkeyup="flip()" id="box"></textarea>
<h2>
Tulisan Terbalik</h2>
<textarea rows="6" cols="50" name="flipped" id="box"></textarea>
</form>
Setelah itu simpan dan lihat hasilnya.

Jika Anda ingin memasang fitur ini pada halaman blogger Anda bisa ikuti langkah berikut ini:

1. Masuk ke akun blogger Anda.
2. Pilih Edit Entri -> Edit Laman -> Laman Baru
3. Masukan judul dan beberapa kalimat pembuka atau penjelasan untuk lebih menarik. Dan setelah itu masukan kode berikut ini tepat dibawahnya.
<style type="text/css">
#box{border:1px solid #ccc;padding:5px;margin:0;}
</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">
<h2>
Tulisan Asli</h2>
<textarea rows="6" cols="50" name="original" onkeyup="flip()" id="box"></textarea>
<h2>
Tulisan Terbalik</h2>
<textarea rows="6" cols="50" name="flipped" id="box"></textarea>
</form>

Setelah itu terbitkan laman blogger Anda.

Tentunya dengan adanya penambahan fitur Flip text pada blog kita akan menambah nilai tersendiri bagi blog kita dimata para visitor blog kita. Selamat mencoba !
2 comments:
  1. Hehee,, postingan ganda mastah...

    Cek lagi coba..

    BalasHapus
    Balasan