Home / Tutorial Blogger / Mengganti Warna Teks dan Ukuran Teks Sesuai Keinginan Pengunjung Blog : Pasang widget di blog anda

Mengganti Warna Teks dan Ukuran Teks Sesuai Keinginan Pengunjung Blog : Pasang widget di blog anda

Posted by Rezqy Dwikara Goratama 26 Januari 2012






Setelah dulu saya pernah memposting Memberi Widget " Mengganti Warna Teks Sesuai Keinginan Pengunjung Blog "
Sekarang saya akan membuat yang lebih baru dengan tambahan warna dan ukuran Huruf Teks.






Banyak Pengunjung yang mengeluh karena warna teks dan ukuran teks tidak sesuai yang diinginkan. Mungkin ini juga termasuk penyebab pengunjung yang pergi begitu saja. Dengan adanya Widget ini maka pengunjung dapat memilih warna teks tersebut.


 Widget ini juga cukup simple dan juga tidak terlalu berat.


Langsung saja ikuti langkah - langkah berikut :


1. Login ke Blogger
2. Masuk ke Template --->>> Edit HTML
3. Cari Code </head>  Agar mudah gunakan "ctrl + F"
4. Pastekan Code di Bawah ini.. Di atas code </head>


<script type="text/javascript"  src="http://code.jquery.com/jquery-latest.js"></script>


Memasang Widgetnya :


1. Buka Tata Letak -->> Tambah Widget / Gadget
2. Pilih yang " Html/javascript
3. Isikin Dengan Code Html ini :
<!-- Code Begins -->

<!-- http://TheUnnecessaryWorld.co.cc -->

<style type="text/css">

/** TUW Font Color and Size Change widget begins **/

#tuw-font-change-widget {width: auto;}

#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#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-red { background: #FF0000 !important; } #fcw-orange { background: #ffa500 !important; } #fcw-yellow { background: #FFFF00 !important; } #fcw-white { background: #088A08 !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-red ").click(function() {
$(" .post-body ").css({ color: "#FF0000" });
return false;
});

$(" #fcw-color #fcw-orange ").click(function() {
$(" .post-body ").css({ color: "#ffa500" });
return false;
});

$(" #fcw-color #fcw-yellow ").click(function() {
$(" .post-body ").css({ color: "#FFFF00" });
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;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});

$(" #fcw-size #fcw-20 ").click(function() {
$(" .post-body ").css({ fontSize: "20px" });
return false;
});

$(" #fcw-size #fcw-24 ").click(function() {
$(" .post-body ").css({ fontSize: "24px" });
return false;
});

$(" #fcw-size #fcw-30 ").click(function() {
$(" .post-body ").css({ fontSize: "30px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<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-red" href="#">Red</a> </li>
<li> <a id="fcw-orange" href="#">Orange</a> </li>
<li> <a id="fcw-yellow" href="#">yellow</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>
</ul>
</div>

<div class="tuw-fcw">
<h2> Ganti ukuran tulisan </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
<li> <a id="fcw-20" href="#">20</a> </li>
<li> <a id="fcw-24" href="#">24</a> </li>
<li> <a id="fcw-30" href="#">30</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->



4. KOSONGKAN JUDUL
5. Simpan


Description: Mengganti Warna Teks dan Ukuran Teks Sesuai Keinginan Pengunjung Blog : Pasang widget di blog anda
Rating: 5
Reviewer: 98827 ulasan
Item Reviewed: Mengganti Warna Teks dan Ukuran Teks Sesuai Keinginan Pengunjung Blog : Pasang widget di blog anda 		Peluang Bisnis Online

Baca Juga Artikel Ini :

Categories:

If You Like This Post, Share it With Your Friends

Copyright © Habluez Share | Created by Blog Bamz | Edit by Habluez Share