Mengubah Warna Font pada Blog

Posted by Gani Mugni Minggu, 08 Januari 2012 0 komentar
Bagi teman-teman yang tidak puas dengan pengaturan default, Sebenarnya blogger juga menyediakan beberapa fasilitas ini. Salah satunya, agar tampilan tulisan pada posting terlihat lebih menarik, kita bisa merubah warnanya sesuka kita. Untuk kali ini teman-teman bisa mengubah warna font pada postingan dengan cara memasang widget tambahan. Dengan widget ini yang dapat mengubah warna font bukan hanya admin pengunjung pun bisa merubah warna sesuka mereka, demi kenyamanan dalam membaca artikel.

Seperti biasa sebelum teman-teman mencoba mending lihat dulu demonya dari pada menyesal kemudian,hehee
Gimana apa kah teman-teman tertarik ingin mencobanya, bila tertarik langsung di coba aja berikut langkah-langkah membuatnya :
  • Masuk ke Edit HTML kemudian copas script di bawah ini di atas </head>
  •  
     

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     
     
    • Setelah itu simpan template lanjutakan ke Elemen Laman.
    • Tambahkan gadget HTML/JavaScript, copas script dibawah ini kedalamnya.


    <!-- Code Begins -->

    <!-- http://amcied-logica.blogspot.com -->

    <style type="text/css">

    #tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}

    #tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}

    #tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}

    #fcw-black { background: #000000 !important; }

    #fcw-white { background: #088A08 !important; }

    #fcw-blue { background: #0066CC !important; }

    #fcw-gray { background: #666666 !important; }

    #fcw-red { background: #ed1c24 !important; }

    #fcw-yellow { background: #ffff00 !important; }

    #fcw-color a { text-indent: -999px !important; }

    #fcw-size a { text-indent: 0 !important; background: #333333 !important; }

    </style>


    <script type="text/javascript">

    $(document).ready(function(){

    $(" #fcw-color #fcw-black ").click(function() {

    $(" .post-body ").css({ color: "#000000" });

    return false;

    });

    $(" #fcw-color #fcw-white ").click(function() {

    $(" .post-body ").css({ color: "#088A08" });

    return false;

    });

    $(" #fcw-color #fcw-blue ").click(function() {

    $(" .post-body ").css({ color: "#0066CC" });

    return false;

    });

    $(" #fcw-color #fcw-gray ").click(function() {

    $(" .post-body ").css({ color: "#666666" });

    return false;

    });

    $(" #fcw-color #fcw-red ").click(function() {

    $(" .post-body ").css({ color: "#ed1c24" });

    return false;

    });

    $(" #fcw-color #fcw-yellow ").click(function() {

    $(" .post-body ").css({ color: "#ffff00" });

    return false;

    });

    });

    </script>


    <div id="tuw-font-change-widget">

    <div class="tuw-fcw">

    <h2> Ganti warna tulisan </h2>

    <ul id="fcw-color">

    <li> <a id="fcw-black" href="#">black</a> </li>

    <li> <a id="fcw-white" href="#">green</a> </li>

    <li> <a id="fcw-blue" href="#">blue</a> </li>

    <li> <a id="fcw-gray" href="#">gray</a> </li>

    <li> <a id="fcw-red" href="#">red</a> </li>

    <li> <a id="fcw-yellow" href="#">yellow</a> </li>

    </ul>

    </div>

    </div>
    <!-- Code ends -->
      • Selesai deh, tinggal di lihat hasilnya.
      Semoga Bermanfaat..!!! selamat berkreasi.. :)
      TERIMA KASIH ATAS KUNJUNGAN SAUDARA
      Judul: Mengubah Warna Font pada Blog
      Ditulis oleh Gani Mugni
      Rating Blog 5 dari 5
      Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/01/mengubah-warna-font-pada-blog.html. Terima kasih sudah singgah membaca artikel ini.

      0 komentar:

      Posting Komentar

      Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.