Membuat Widget Color Code Generator Sendiri Di Blog

Membuat dan Memasang Widget Color Generator Keren Di Blog. Biasanya para blogger yang tertarik dan sedang mempelajari web design memiliki blog favorit sebagai referensi mencar ilmu design, coding ataupun menerima warta pola baru tentang teknologi dan pembaharuan dalam dunia web design. Pada blog site yang memiliki niche tersebut mereka memiliki 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?

Lihat Demo

Sikabayan Color Generator yaitu sebuah widget yang di desain dan coding khusus untuk anda para blogger pemula ibarat saya yang menggunakan layanan dari Google Blogger. Widget ini berfungsi untuk menerima kode warna hex dan rgba dengan simpel secara pribadi dari interface blog anda. Keuntungannya, selain akan membuat blog anda terlihat lebih kreatif, widget ini juga akan mempermudah bagi para pengunjung untuk menerima 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 kemudian klik tata letak
2) Klik Tambah Gadget kemudian 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='=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';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!

Sumber https://8tutorialandroid.blogspot.com/

Share this post