Seringkali saat membaca sebuah postingan kita merasa bosan
melihat tulisan, bentuk, warna itu” aja dan mungkin ingin suasana yang
baru,, terkadang juga jika tulisan
terlalu kecil bias membuat mata kita sakit denganterus”an membaca tulisan
dengan ukuran yang kecil.
Nah sekarang saya akan memberikan solusi untuk keluhan”an
seperti itu,, langsung saja lihat cara’y :
1. Login ke akun Blogger
2. Pilih Rancangan, kemudian Elemen Laman
3. Klik Tambah Gadget
4. Kemudian pilih HTML/Java Script
5. Copypas kode di bawah ini
<!-- Code Begins -->
<!-- Ferryxz Yamato -->
<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 -->
6. Setelah selesai mengCopypas kode diatas kemudian Simpan
7. Selesai, mudah kan??
0 komentar:
Tell us what you're thinking... !