Minggu, 22 Maret 2009

Membuat Font Style Setting

Apakah kawan tahu tentang widget font style setting ?Nah, dalam posting kali ini saya akan menjelaskannya. Widget tersebut dapat mengganti bentuk dan ukuran font
sesuai keinginan kawan, ini contoh dari widget tersebut.
[Fonts.PNG]

Nah, jika kawan berminat untuk membuatnya silahkan ikuti lankah-lankah berikut :


  • Klik Tata Letak
  • Klik Elemen Halaman
  • Klik Tambah Gadget
  • Tambahkan elemen Html/Javascript
  • Lalu masukkan kode ini ke dalam form tersebut

    <center>
    <script>
    function go1(){
    if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none") {
    document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value

    }
    }

    function go2(){
    if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none") {
    document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value

    }
    }
    </script>
    <form id="forma" name="selecter2" method="POST">

    <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
    <option value="Times New Roman"/>Times New Roman
    <option value="Arial"/>Arial
    <option selected value="Book Antiqua"/>Book Antiqua
    <option value="Bookman Old Style"/>Bookman Old Style
    <option value="Century Gothic"/>Century Gothic
    <option value="Comic Sans Ms"/>Comic Sans Ms
    <option value="Tahoma"/>Tahoma
    <option selected value="Trebuchet Ms"//>Trebuchet Ms
    <option value="Verdana"/>Verdana
    </select>
    <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
    <option value="8px"/>8
    <option value="9px"/>9
    <option value="10px"/>10
    <option value="11px"/>11
    <option selected value="12px"/>12
    <option value="14px"/>14
    <option value="16px"/>16
    <option value="18px"/>18
    </select>
    </form>
    </center>

  • Klik Simpan

Jika widget tersebut tidak berfungsi silahkan ikuti langkah-langkah berikut :

  • Klik Tata Letak
  • Klik Edit Html
  • Silahkan kawan cari kode ini

    .post {
    margin:0 0 10px 0;
    font-family: Arial;
    background: #FFF;
    padding:10px;
    text-align:justify;
    border:1px solid #C0C0C0;
    }

  • Kode font-family: Arial; atau yang mirip seperti itu font-family: Verdana; atau font-family: Times New Roman; harus dihapus
  • Jika tidak berfungsi memang mau tidak mau harus dihapus
  • Klik Simpan
Aduh selesai juga, sekarang kawan lihat dan di tes, apakah berfungsi atau tidak...

Agar tidak penasaran tentang bentuk aslinya, silahkan coba wdget tersebut yang ada dibawah ini







Maap klo ga' berfungsi.....

3 komentar:

  1. ade koko makasih ya..dah mampir..kayanya blog kaka kalah deh jauh ma blog koko..salam kenal yaa..makasih dah kunjung.....

    BalasHapus
  2. belon bisa Bro....ajarin dunk

    BalasHapus

Sialahkan kawan berkomentar tentang artikelnya...karena komentar kawan sangat berarti bagi blog ini...^_^ salam Blogger