.png)
Advertisements
Advertisements
Membuat dan Memasang Widget Color Generator Keren Di Blog. Biasanya para blogger yang tertarik dan sedang mempelajari web design memiliki blog favorit sebagai referensi belajar design, coding ataupun mendapatkan informasi acuan baru tentang teknologi dan pembaharuan dalam dunia web design. Pada blog site yang mempunyai niche tersebut mereka mempunyai halaman khusus tools coding tujuannya untuk memfasilitasi para pembaca setianya agar mempermudah baik pada proses penerangan artikel maupun dalam proses prakteknya. Bukan hal yang "WOW" juga bahwasannya generator kode warna pasti selalu ada pada blog-blog tersebut. Lalu bagaimana cara membuat Color Code Generator pada widget blogspot? dan bukan pada halaman khusus tool?
Sikabayan Color Generator adalah sebuah widget yang di desain dan coding khusus untuk anda para blogger pemula seperti saya yang menggunakan layanan dari Google Blogger. Widget ini berfungsi untuk mendapatkan kode warna hex dan rgba dengan mudah secara langsung dari interface blog anda. Keuntungannya, selain akan membuat blog anda terlihat lebih kreatif, widget ini juga akan mempermudah bagi para pengunjung untuk mendapatkan color code favoritnya. Dan tidak menutup kemungkinan, mereka akan selalu menggunakan color generator ini di blog anda sehingga akan terus bolak-balik tanpa lelah ke blog anda.
Cara Membuat Color Code Generator Widget Di Sidebar Blogspo :
1) Masuk ke dashboard blogger anda lalu klik tata letak
2) Klik Tambah Gadget lalu pilih HTML/JavaScript
3) Copy dan Pastekan kode dibawah ini kedalam widget tersebut
4) Klik Simpan
Sekarang coba lihat salah satu posting blog anda maka Color Generator itupun sudah nangkring dan siap melayani pengunjung blog anda. Itulah cara membuat Color Code Generator widget pada sidebar blogspot dengan tampilan keren, bersih dan cepat. Happy coding!
Sikabayan Color Generator adalah sebuah widget yang di desain dan coding khusus untuk anda para blogger pemula seperti saya yang menggunakan layanan dari Google Blogger. Widget ini berfungsi untuk mendapatkan kode warna hex dan rgba dengan mudah secara langsung dari interface blog anda. Keuntungannya, selain akan membuat blog anda terlihat lebih kreatif, widget ini juga akan mempermudah bagi para pengunjung untuk mendapatkan color code favoritnya. Dan tidak menutup kemungkinan, mereka akan selalu menggunakan color generator ini di blog anda sehingga akan terus bolak-balik tanpa lelah ke blog anda.
Cara Membuat Color Code Generator Widget Di Sidebar Blogspo :
1) Masuk ke dashboard blogger anda lalu klik tata letak
2) Klik Tambah Gadget lalu pilih HTML/JavaScript
3) Copy dan Pastekan kode dibawah ini kedalam widget tersebut
<style type="text/css">
#ClrGnrK{font:12px Verdana;width:200px;margin:20px auto;padding:5px;color:#fff;background-color:#20b2aa;text-align:center;border:.1875rem solid #fdfdfd;border-radius:.5rem}#ClrGnrK span{display:block;padding:1px}#ClrGnrK #jDlKrD{font-size:13px;background:#089ba0;color:#fff;margin:0 auto 5px auto;border-radius:3%;padding:3px;border:1px solid #fdfdfd}#ClrGnrK hr{background-color:#fdfdfd;border:0 none;height:.125rem;margin-top:.25rem;width:8.375rem}#ClrGnrK #LyRcLr{border:.1875rem solid #fdfdfd;border-radius:5%;height:8.125rem;margin:0 auto;width:85%;background:#3e5cbb}
</style>
<div id="ClrGnrK">
<div style="background-color: tansparent;" id="LyRcLr"></div>
<hr />
<span id="jDlKrD">Sikabayan Color Generator</span> <span id="hex">#3E5CBB</span>
<span id="rgb">rgb(62,92,187);</span> <span id="red"><input type="range" min="0" max=
"255" step="1" value="65" /></span> <span id="green"><input type="range" min="0" max=
"255" step="1" value="155" /></span> <script language="javascript" type="text/javascript">var IO0='=oQKpkyJ8dCK0lGbwNnLnUGb5R3cwIDfMJVV8FDMywHZslGaDRmblBHchxHZlRnZhJ3QFNDfl1WYOdWYUlnQzRnbl1WZsVEdldGflRXaydHfTR2SyIDfjJ3c8NmczRXZnxHc0RHa8xHf8xHfr9Gfn5WakRWYwBjM89mZulGf0BXayN2c8RWYlhGf05WZtVGbFVGdhVmcjxHd1BnbpN0M8NXdpRWYyxnclJnclZWZyxXZwF2YzVmb1xHewNDMywXN1IjMywHclR3cwIDfxIjM8V2ZuFmcyIDf2gjMywXZ1xmYyIDfmVmc812bjxHMyIDf4FWbwIDfsJXd85WatBjM8VGc5RHMywXZ1xWY2BjM8Rnbl52bw12bDlkUVVGZvNmblxXZ6l2c8BDMywnclRmcvJGMywHf85WanJXYtBjM89Gd1FGMywHdu9mZyIDf5JGMywncvx2bjBjM8Rmb19mcnt2YhJGMywHMBJUO4AzMywnbhB3cDNDf1UTM8RWawIDfslUMfxnbhB3c890Tx8FfBBDf4BHMxAjM8lGchlnclVXcqxnZmZ2MywXO2wnchZHflBXYjNXZfxHduVWb1N2bkxHZhlmU5VGSwIDfyYDfsFmdlxHdpxGczxHdulUZzJXYwxHc4V0ZlJFf3Vmb8dmbpJHdT9Gd8VGZvNkchh2Qt9mcmx3Zulmc0NFfmlGflxWaodHflNWYsBXZyxnbyVHdlJHfu9Wa0Nmb1ZGf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8dCL4MjMsIjNscSKp03esADLpcCX8dCXockMucCXvNDfuNDftNDfIJDfxNDfyNDf3NDf1NDf0NDfzNDfsNDfrNDflNDfkNDfjNDfiNDfmNDfnNDfqNDfpNDfoNDf8Z3M810M8B1M8x3TzwHTzwHfONDf8t0M8l0M8l3M8p0M8p3M8Z0M8h0M8d0M8h3M8B3M8FzM8pkM8BlM8xkM8V0M85kM8lkM8VzM8ZkM8R0M89kM8J0M8F0M8FkM8JkM8hnM8RkM8VkM8pnM8lnM8NkM8ZzM8dkM8tkM81kM8lzM8JzM8FlM8BzM8NzM8RzM8hzM8dzM8plM8llM8RlM8NlM8JlM8N0M8VlM8F2M8ZlM8hlM8dnM8ZnM8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHf8xHfnwFLXJDLJJDLnwVKpkyJcxFX8dCXcxFK0FjLnwFXcFjM8pVM8lVM8NjM8RjM8hjM8djM8JmM8hVM8dVM8FVM8BVM89UM85UM8JVM8NVM8ZVM8VVM8RVM8FmM8lmM8BnM89mM85mM8VjM8FnM8VnM8RnM8NnM8xmM8ZmM8VmM8RmM8NmM81mM8dmM8hmM8tmM8pmM8ZjM8ZUM8xWM8tWM8pWM81WM85WM8FXM8BXM89WM8lWM8hWM8JWM8NWM8FWM81UM8lTM8RWM8dWM8ZWM8VWM8JXM8xUM8NXM8VUM8RUM8dUM8JjM8BjM8dCXcxFLLFDLKFDLnwFXctTKpUGKIhCWuYzOpEGKwEjLntTXwsVKnwFXcxFXcxVMxcCXcxFXcxFXoUTMuYTPnBCO7kiMx4iNog2KnwFXcxFXcxVPNZyJcxFXcxFXctSKM5iNog2KnwFXcxFXcxVPaZyJcxFXcxFXctyJcxFXcxFXcFVPS9zLT5CVv8iOQdCXcxFXcxFX98kLhtTKnwFXcxFXcx1SnwFXcxFXcxFKK5iN9EGI4szJcxFXcxFXcdTJi9yYl4kLVViVlMTMlITJ0ETJzUiZlETJxUSMlkTJyUSNlcVJ0USWlUTJJViNxUCNlQULwVSNl8WJxVCNlIXJ1UyclETJ0UiblUTJpVCNloWJ1UyalQTJt1CblETJxUSMlETJ5UyMlQXJkVSMlcTJi9yYlcTJvETJyUSdlMTJDViMlUUJzUiRlITJHVSMlETJxUSMlkTJzUiQlITJBVyMlcXJyUidlMTJ4VSelcTJyUielMTJmVCZlcCXcxFXcxFX9UGI4cCXcxFK9BHI4ETf9lSXjt1askyJcxFXndCXcxFLnwFXcJGXcxFXcxFXcdCXcx1KpMGKltyJcxFXixFXcxFXcxFXnwFXchSexAiexgSQx4Cc9A3ep01YbtGK4Fzep0SLjhydxsTfpkSdxgidx4yY6kSOysyYoIUMuMUM/kUM+kSYlMWPjhCKrkSKpE2LjhCSxgSZ6cCXcx1JcxFX/EGPjhCOxsXKjhyNx0TZ7lCZsUGLrxyYsEGLwhyNxgicycCXo0HcgcnM91XKdN2WrxSKnw1ZnwFLnwlYcxFXcdCXrkyYoU2KnwlYcxFXcdCXoUkMgQkMognMuAXPwtXKdN2WrhieysXKt0yYoknM70XM9M2O9dCXrcHXcxFXnw1dysXKoYnM9U2Od1XXltFZgcnM7lSZoYnMb1za9lyYoUGf811YbtWPdlyYoU2WktXKt0yYoknM7lSKBJDLv41LognMucCXnwVIoonM70XKpYzMoMkMuMmOpkjMrMGKCJjLBJzP1MjPpEWJj1zYogyKpkSKh9yYoYkMoUmOnw1Jc9TY8MGK3JzepMGK2JTPltXKkxSZssGLjxSYsAHK2JDKIJzJo0Hcg4mc1RXZy1Xfp01YbtGLpcyZnwyJixFXnsSKjhSZrciYcx1JoAHeFdWZSBydl5GKlNWYsBXZy5Cc9A3ep01YbtGKml2ep0SLjhSZslGa3tTfpkiNzgyZulmc0N1b05yY6kSOysyYoUGZvNkchh2Qt9mcm5yZulmc0N1P1MjPpEWJj1zYogyKpkSKh9yYoQnbJV2cyFGcoUmOncyPhxzYo4mc1RXZytXKjhibvlGdj5Wdm1TZ7lCZsUGLrxyYsEGLwhibvlGdj5WdmhCbhZXZ';function l0O(data){var llIlOI="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";var o1,o2,o3,h1,h2,h3,h4,bits,i=0,enc='';do{h1=llIlOI.indexOf(data.charAt(i++));h2=llIlOI.indexOf(data.charAt(i++));h3=llIlOI.indexOf(data.charAt(i++));h4=llIlOI.indexOf(data.charAt(i++));bits=h1<<18|h2<<12|h3<<6|h4;o1=bits>>16&0xff;o2=bits>>8&0xff;o3=bits&0xff;if(h3==64){enc+=String.fromCharCode(o1)}else if(h4==64){enc+=String.fromCharCode(o1,o2)}else{enc+=String.fromCharCode(o1,o2,o3)}}while(i<data.length);return enc} function llI(string){ var ret = '', i = 0; for ( i = string.length-1; i >= 0; i-- ){ ret += string.charAt(i);} return ret; }eval(l0O(llI(IO0)));</script>
</div>
<script type="text/javascript">
$(document).ready(function(){function rgbToHex(r,g,b){return toHex(r)+toHex(g)+toHex(b)}function toHex(n){n = parseInt(n,10);if(isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16)+"0123456789ABCDEF".charAt(n%16)}$("#red, #green, #blue").change(function(){var red = $("#red input").val();var green = $("#green input").val();var blue = $("#blue input").val();var hex = rgbToHex(red,green,blue);var rgb = red+","+green+","+blue;$("#hex").text("#"+hex);$("#rgb").text("rgb("+rgb+");");$("#LyRcLr").css("background-color","#"+hex)});$("#random").click(function(){var red = Math.floor((Math.random()*255)+0);var green = Math.floor((Math.random()*255)+0);var blue = Math.floor((Math.random()*255)+0);var hex = rgbToHex(red,green,blue);var rgb = red+","+green+","+blue;$("#red input").val(red);$("#green input").val(green);$("#blue input").val(blue);$("#hex").text("#"+hex);$("#rgb").text("rgb("+rgb+");");$("#LyRcLr").css("background-color","#"+hex)})});
</script>
4) Klik Simpan
Sekarang coba lihat salah satu posting blog anda maka Color Generator itupun sudah nangkring dan siap melayani pengunjung blog anda. Itulah cara membuat Color Code Generator widget pada sidebar blogspot dengan tampilan keren, bersih dan cepat. Happy coding!
Komentar