Memberi Widget " Mengganti tulisan blog sesuai keinginan Pengunjung "

**rezqy_dwikara** Fri Dec 30, 2011 7:24 am

rezqy_dwikara: Hansip; Lokasi : Klaten
Join date : 28.12.11
Posting : 96

Post n°1

Memberi Widget " Mengganti tulisan blog sesuai keinginan Pengunjung "

rezqy_dwikara Fri Dec 30, 2011 7:24 am

[You must be registered and logged in to see this image.]

Banyak Pengunjung yang mengeluh karena warna 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 :

  <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> Pilih warna </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> <div style="text-align: justify;"> <span style="color: black; font-family: Verdana,Arial,Helvetica,Georgia; font-size: 8px;">
<a href="http://habluezshare.blogspot.com/2011/12/memberi-widget-mengganti-warna-text.html ">Habluez Share</a></span>

4. KOSONGKAN JUDUL
5. Simpan

Sumber : [Only admins are allowed to see this link]
[You must be registered and logged in to see this image.]