Cara Memasang Widget Flipped Text di Blog

Kali ini Saya akan membahas cara memasang widget atau menyediakan fitur Flip text untuk para visitor.
 
 Langsung saja langkah-langkah membuat widget Flip text pada blog berikut :

 

Jika Anda ingin memasang pada sidebar widget atau main widget.

• Login ke blogger.com, jika sudah, 
• Pilih Tata Letak → Tambah Gadget → pilih HTML/JavaScript
• Lalu masukkan script 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>

• Simpan dan lihat hasilnya.

Jika Anda ingin memasang fitur ini pada posting blog, ikuti langkah berikut ini :

• Login ke blogger.com, jika sudah,
• Buat Entri Baru → Pilih HTML bukan compose
• Masukan judul dan beberapa kalimat pembuka atau penjelasan untuk lebih menarik. Dan setelah itu masukan kode berikut ini tepat di bawah judul tersebut.

<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 blog Anda.

CONTOH SEPERTI DI BAWAH INI :

Membuat Tulisan Terbalik

Tulisan Asli

Tulisan Terbalik

Selamat Mencoba !