Cara Membuat Tombol Background Color Switcher

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
5

Hi Web Developer! kembali lagi bersama dengan guru design, kali ini guru design akan berbagi tutorial cara membuat tombol background color switcher. kalian pasti bertanya-tanya buat apa tombol color switcher? pertama kita harus tau dulu apa sih color switcher.

Cara Membuat Tombol Background Color Switcher?

Tombol Background Color Switcher adalah sebuah tombol yang berfungsi untuk mengubah warna suatu element di blog kalian, dan pada kesempatan kali ini kita akan membuat 6 pilihan warna.

Cara Membuat Tombol Background Color Switcher

Tambahkan kode HTML Background Color Switcher

Silahkan ikuti panduan pemasangan tombol background color switcher dengan seksama supaya berhasil.

  1. Pilih menu tema
  2. Pilih edit HTML
  3. Cari code body <body> kemudian copy dan paste code berikut tepat dibawahnya. 
<!-- Styleswitcher -->
<div id="colors-switcher-by-gurudzgn">
    <a id="show-panel" class="hide-panel"><svg style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"><path d="M44,19.09V1h-2v18.09c-2.833,0.478-5,2.942-5,5.91s2.167,5.431,5,5.91V49h2V30.91c2.833-0.478,5-2.942,5-5.91   S46.833,19.569,44,19.09z M43,29c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S45.206,29,43,29z"></path><path d="M6,1v7.09C3.167,8.569,1,11.033,1,14s2.167,5.431,5,5.91V49h2V19.91c2.833-0.478,5-2.942,5-5.91s-2.167-5.431-5-5.91V1H6z    M11,14c0,2.206-1.794,4-4,4s-4-1.794-4-4s1.794-4,4-4S11,11.794,11,14z"></path><path d="M24,1v30.09c-2.833,0.478-5,2.942-5,5.91s2.167,5.431,5,5.91V49h2v-6.09c2.833-0.478,5-2.942,5-5.91s-2.167-5.431-5-5.91V1   H24z M29,37c0,2.206-1.794,4-4,4s-4-1.794-4-4s1.794-4,4-4S29,34.794,29,37z"></path></g><g></g></svg></a>
    <ul class="colors-list">
        <li><a title="Light Red" onClick="data_color('#FF432E')" class="light-red"></a></li>
        <li><a title="Blue" class="blue" onClick="data_color('#28ABE3')"></a></li>
        <li class="no-margin"><a title="Light Blue" onClick="data_color('#69D2E7')" class="light-blue"></a></li>
        <li><a title="Green" class="green" onClick="data_color('#5BB12F');"></a></li>                  
        <li class="no-margin"><a title="light-green" class="light-green" onClick="data_color('#BCCF02')"></a></li>
        <li><a title="Yellow" class="yellow" onClick="data_color('#FED136')"></a></li>
    </ul>
</div>  
<!-- Styleswitcher End -->

Tambahkan style CSS

Silahkan tambahkan style di bawah kedalam template kalian masing-masing, atau cari code head penutup </head> dan paste code style css berikut tepat diatasnya. 

<style type="text/css">
#colors-switcher-by-gurudzgn {
width:100px;
padding:20px 8px 14px 20px;
position:fixed;
z-index:1993;
top:90px;
right:0;
background-color:#fff;
border-radius:2px 0 0 2px;
border:1px solid rgba(0,0,0,.1);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
}
#colors-switcher-by-gurudzgn > p {
font-size: 11px;
line-height: 0;
}
#colors-switcher-by-gurudzgn #show-panel {
position:absolute;
left:-38px;
top:15px;
width:38px;
height:38px;
z-index:1992;
display:block;
background-color:#fff;
border-radius:2px 0 0 2px;
border:1px solid rgba(0,0,0,.1);
border-right:none;
cursor: pointer;
}
#colors-switcher-by-gurudzgn #show-panel svg{width:15px;height: 15px;cursor: pointer;padding: 10px;}
#colors-switcher-by-gurudzgn #show-panel i {
color: #3D3D3D;
font-size: 20px;
line-height: 38px;
margin-left: 15px;
}
#colors-switcher-by-gurudzgn .colors-list {
margin:0;
padding:0;
}
#colors-switcher-by-gurudzgn .colors-list li {
float:left;
display:block;
margin-bottom:2px;
margin-right:6px;
}
#colors-switcher-by-gurudzgn .colors-list li a {
display:inline-block;
width:24px;
height:24px;
border-radius:2px;
transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
cursor: pointer;
}
#colors-switcher-by-gurudzgn .colors-list li a:hover {
box-shadow:inset 0 0 6px rgba(0,0,0,.4);
}
#colors-switcher-by-gurudzgn .colors-list a.light-red {
background-color:#FF432E;
}
#colors-switcher-by-gurudzgn .colors-list a.blue{
background-color:#28ABE3;
}
#colors-switcher-by-gurudzgn .colors-list a.light-blue {
background-color:#69D2E7;
}
#colors-switcher-by-gurudzgn .colors-list a.green {
background-color:#5BB12F;
}
#colors-switcher-by-gurudzgn .colors-list a.light-green {
background-color:#BCCF02;
}
#colors-switcher-by-gurudzgn .colors-list a.yellow {
background-color:#FED136;
}
</style>

Tambahkan kode JavaScript

Silahkan tambahkan kode JavaScript berikut tepat diatas body penutup </body> atau kamu bisa menyesuaikannya sendiri letaknya. 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> 
<script type="text/javascript">
// font color bisa anda ubah sendiri sesuai dengan kebutuhan!
var textcolors='#fff';
jQuery(document).ready(function(){
    // Show Colors Panel
    jQuery('#show-panel').click(function(){
        if(jQuery(this).hasClass('show-panel')) {
            jQuery('#colors-switcher-by-gurudzgn').css({'right': 0});
            jQuery('#show-panel').removeClass('show-panel');
            jQuery('#show-panel').addClass('hide-panel');
        }else if(jQuery(this).hasClass('hide-panel')) {
            jQuery('#colors-switcher-by-gurudzgn').css({'right': '-130px'});
            jQuery('#show-panel').removeClass('hide-panel');
            jQuery('#show-panel').addClass('show-panel');
        }
    });
    
});
// Styles Switcher
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1c(14(p,a,c,k,e,r){e=14(c){15(c<a?\'\':e(1d(c/a)))+((c=c%a)>1e?19.1f(c+29):c.1g(1h))};17(!\'\'.1a(/^/,19)){1b(c--)r[e(c)]=k[c]||e(c);k=[14(e){15 r[e]}];e=14(){15\'\\\\w+\'};c=1};1b(c--)17(k[c])p=p.1a(1i 1j(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);15 p}(\'M N=["\\\\h\\\\8\\\\i\\\\1\\\\0\\\\4\\\\0\\\\2","\\\\8\\\\3\\\\5\\\\z\\\\4\\\\3\\\\j\\\\3\\\\d\\\\5\\\\6\\\\A\\\\l\\\\m\\\\4\\\\7\\\\6\\\\6\\\\r\\\\7\\\\j\\\\3","\\\\B\\\\d\\\\i\\\\1\\\\0\\\\4\\\\0\\\\2","\\\\4\\\\3\\\\d\\\\8\\\\5\\\\f","\\\\h\\\\7\\\\1\\\\O\\\\8\\\\2\\\\0\\\\a\\\\d\\\\e\\\\m\\\\0\\\\4\\\\0\\\\2","\\\\6\\\\5\\\\l\\\\4\\\\3","\\\\1\\\\0\\\\4\\\\0\\\\2","\\\\s\\\\7\\\\4","\\\\P\\\\1\\\\0\\\\4\\\\0\\\\2\\\\6\\\\i\\\\6\\\\b\\\\t\\\\5\\\\1\\\\f\\\\3\\\\2\\\\i\\\\h\\\\l\\\\i\\\\8\\\\a\\\\2\\\\a\\\\e\\\\u\\\\8\\\\d","\\\\f\\\\2\\\\3\\\\B","\\\\4\\\\0\\\\1\\\\7\\\\5\\\\t\\\\0\\\\d","\\\\f\\\\5\\\\5\\\\C\\\\6\\\\Q\\\\v\\\\v\\\\b\\\\b\\\\b\\\\n\\\\8\\\\0\\\\0\\\\8\\\\4\\\\3\\\\n\\\\1\\\\0\\\\j\\\\v\\\\a\\\\2\\\\4\\\\R\\\\6\\\\7\\\\9\\\\5\\\\c\\\\2\\\\1\\\\5\\\\9\\\\o\\\\c\\\\D\\\\9\\\\c\\\\3\\\\6\\\\2\\\\1\\\\9\\\\6\\\\c\\\\6\\\\0\\\\a\\\\2\\\\1\\\\3\\\\9\\\\b\\\\3\\\\h\\\\c\\\\1\\\\e\\\\9\\\\g\\\\c\\\\1\\\\7\\\\e\\\\9\\\\2\\\\o\\\\7\\\\c\\\\a\\\\7\\\\1\\\\5\\\\9\\\\w\\\\c\\\\s\\\\3\\\\e\\\\9\\\\g\\\\7\\\\f\\\\S\\\\E\\\\z\\\\b\\\\t\\\\x\\\\T\\\\w\\\\x\\\\r\\\\F\\\\e\\\\d\\\\0\\\\k\\\\f\\\\G\\\\r\\\\1\\\\d\\\\y\\\\E\\\\H\\\\7\\\\U\\\\I\\\\V\\\\F\\\\1\\\\J\\\\p\\\\o\\\\k\\\\A\\\\3\\\\8\\\\J\\\\W\\\\m\\\\K\\\\k\\\\m\\\\c\\\\a\\\\2\\\\4\\\\9\\\\f\\\\5\\\\5\\\\C\\\\6\\\\q\\\\X\\\\k\\\\q\\\\g\\\\p\\\\q\\\\g\\\\p\\\\b\\\\b\\\\b\\\\n\\\\8\\\\a\\\\2\\\\a\\\\e\\\\u\\\\8\\\\d\\\\n\\\\1\\\\0\\\\j\\\\q\\\\g\\\\p\\\\c\\\\a\\\\6\\\\8\\\\9\\\\k\\\\Y\\\\s\\\\L\\\\7\\\\b\\\\y\\\\j\\\\o\\\\I\\\\1\\\\Z\\\\u\\\\H\\\\K\\\\g\\\\h\\\\g\\\\e\\\\f\\\\10\\\\y\\\\L\\\\D\\\\w\\\\G\\\\x\\\\11","\\\\2\\\\3\\\\7\\\\e\\\\l"]\',1k,1l,\'1m|1n|1o|1p|1q|1r|1s|1t|1u|1v|1w|1x|1y|1z|1A|1B|1C|1D|1E|1F|1G|1H|1I|1J|1K|1L|1M|1N|1O|1P|1Q|1R|1S|1T|1U|1V|1W|1X|1Y|1Z|20|21|22|23|24|25|26|27|16|13|28|2a|2b|2c|2d|2e|2f|2g|2h|2i|2j|2k|2l|2m\'.2n(\'|\'),0,{}));14 2o(a){16 b=18[13[1]](13[0]);16 c=18[13[1]](13[2]);2p(i=0;i<b[13[3]];i++){b[i][13[5]][13[4]]=a;c[i][13[5]][13[6]]=2q}}$(18)[13[12]](14(){16 a=$(13[8])[13[7]]();17(a==2r){2s[13[10]][13[9]]=13[11]}})',62,153,'|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||_0x82c1|function|return|var|if|document|String|replace|while|eval|parseInt|35|fromCharCode|toString|36|new|RegExp|62|64|x6F|x63|x72|x65|x6C|x74|x73|x61|x67|x3D|x75|x77|x26|x6E|x64|x68|x32|x62|x2D|x6D|x41|x79|x43|x2E|x6A|x46|x25|x4E|x76|x69|x7A|x2F|x38|x50|x30|x45|x42|x66|x70|x71|x4B|x78|x58|x48|x5F|x51|x52|x56|x6B||x23|x3A|x3F|x55|x34|x39|x44|x49|x33|x4F|x35|x53|x36|split|data_color|for|textcolors|null|window'.split('|'),0,{}));
</script>

Cara Setting Tombol Background Color Switcher 

Setelah tombol background color switcher terpasang, sekarang kita tinggal mengatur element atau clas mana yang ikin dirubah warnanya, berikut tutorialnya:

Tentukan element yang akan di rubah

Silahkan tentukan bagian mana yang akan di ubah warnanya. 

contoh : 

<div class="postingan">
    <h4 class="judul">Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur ...
    <span class="post-labels">Label: JavaScript
    </span>
</div>

disini saya akan ambil contoh mengubah warna pada class postingan.

Tambahkan kode pada setiap element

Setelah menentukan bagian yang akan di rubah warnanya, sekarang tinggal menambahkan code pada setiap class yang ingin dirubah, code-nya yaitu:

  1. bg-color (untuk mengubah warna background)
  2. fn-color (untuk mengubah warna text)

Cara menerapkannya seperti ini (perhatikan text yang saya blok warna merah, itu lah code yang telah ditambahkan)

<div class="postingan bg-color fn-color">
    <h4 class="judul">Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur ...
    <span class="post-labels">Label: JavaScript
    </span>
</div>
Atau seperti ini
<div class="postingan bg-color">
    <h4 class="judul fn-color">Lorem Ipsum</h4>
Lorem ipsum dolor sit amet consectetur ...
    <span class="post-labels fn-color">Label: JavaScript
    </span>
</div> 

Caranya hanya seperti itu silahkan ulangi cara diatas untuk mengubah  warna pada class-class lainnya.

Jika ada yang kurang jelas, jangan sungkan tanyakan di kolom komentar.

Result

Sekian tutorial Cara Membuat Tombol Background Color Switcher semoga bermanfaat, terimakasih.

 

Rafiqi, S.Kom.