Cara Membuat Widget Ganti Warna Teks Kesukaan Sendiri

Kali ini Saya akan membahas cara merubah warna tampilan tulisan pada posting terlihat lebih menarik, kita bisa merubah warnanya sesuka kita 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.

Tanpa berlama-lama Saya akan memberitahu cara membuatnya seperti di bawah ini ↓

• Login ke blogger.com, jika sudah, 
• Pilih Template → Edit HTML → Expand Widget Template 
• Cari Kode </head> agar mudah mencari tekan (ctrl+f) 
• Kemudian copas script di bawah ini di atas kode </head> 

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

• Setelah itu simpan template lanjutakan ke Elemen Laman. 
• Pilih Tata Letak → Tambah gadget → pilih HTML/JavaScript 
• Copas script di bawah ini ke dalamnya. 

<!-- 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 --> 

• Simpan dan lihat hasilnya. 

Selamat Mencoba !