Membuat FONT STYLE SETTING

2.18.2009
Ketika blogwalking siulsaya menemukan ada yang beda di blog mas abgamal.
Terdapat beberapa macam widget yang tidak pernah , saya lihat di blog manapunhah
Lebih jelasnya lihat di sidebar saya ada widget FONT STYLE SETTING.

Ikuti langkah-langkahnya :
  • login ke blogger.com
  • Klik Tata Letak/Layout
  • Klik Elemen Halaman/Page Elements
  • Klik Tambah Gadget/Add Gadget
  • Pilih HTML/Javascript
  • Copy-Paste script ini :

    <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/Save sengihnampakgigi

Bila Widgetnya tidak berfungsi ikuti langkah-langkah berikut :
  • Dari menu blogger klik Tata Letak/Layout-->Edit HTML
  • Cari kode :

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

  • Hapus kode yang ini font-family: Arial; atau semua template beda ada yang font-family: Verdana; atau font-family: Times New Roman;
  • Pokoknya kode yang itu harus dihapus.
  • Simpan templatepenat

24 komentar:

  • SandiasA

    keren bos, berjalan dengan baik :D

  • Atca

    kerennn...
    boleh nanti kucoba...
    padahal yang kemaren belom berhasilllll
    jadi tambah puyeng:@

  • Hangga Nuarta

    Weh.... begitu toh caranya... Mantab2...

  • sandy

    nice mantab nui mas... coba dicoba..

  • awan_clickerz

    wah...keren..bs milih milih ya kita(pengunjung/kawan)..
    aku save dulu ah..:(

    -salam persaHabatan all-

    Yup !

  • abdgamal

    sebenarnya, bagusnya font style setting tersebut menggunakan cookie jadi saat refresh tidak kembali ke font default. Kalau ada yang bisa modifikasi ulang menggunakan cookie jauh lebih bagus lagi

  • Lyla

    horeee.... langsung bisa jalan tuh di blogku.... thx banget ya infonya tp yang kotak komentar dipostingan kamu sebelumnya gak bisa2 huhuhu...bantuin donggg....:((

  • david

    keren ne Rid..mencuri Kode lagi ya..he...he.....x(

  • LAZUARDI R.YAMIN

    wah, kren nih, klo kecilin/besarin font bisa juga pake cara kyak gni, tekan tombol Ctrl trus naik/turunkan scroll pada mouse kalau scroll dinaikan, maka fontnya akan bertambah besar dan sebaliknya

  • J O N K

    wah keren tuh. sip lah mas ... :)

  • Harry Seenthings

    wah tambah cool aja nih blognya kang....mantabbbb

  • Ruli Saputri

    Halo salam kenal, tipsnya keren euy, dapat insipirasi dari mana ?

    Ruli Saputri

  • aR_eRos

    canggih euy
    tutor instan
    langsung jadi

  • jafar

    canggih banget..!!
    makan apa seh mas..??

  • BlaGaBloGer

    Pinter.........
    makasih yah....... :s

  • Cupu^_^Kisruh

    kerenn oms.. :)
    udahh berhasil
    thank om :)

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)