Cara Membuat Tombol Background Color Switcher

Q: Cara Membuat Tombol Background Color Switcher?

1. Tambahkan kode HTML Background Color Switcher 2. Tambahkan style CSS Background Color Switcher 3. Tambahkan kode JavaScript Background Color Switcher

Q: Cara Setting Tombol Background Color Switcher?

1. Tentukan element yang akan di rubah 2. Tambahkan kode pada setiap element

Rafiqi, S.Kom.

September 12, 2022

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.

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

Pilih menu tema
Pilih edit HTML
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>

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:

bg-color (untuk mengubah warna background)
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.

5 komentar

IRE

Makasih ilmu nya kak 🙏
- Rafiqi, S.Kom.
  
  iya sama sama,
Balas
Balas
wisnoeadhie

Keren mas blognya, terimakasih tutorialnya
- Rafiqi, S.Kom.
  
  Trimakasih kak, Sama-sama.
Balas
Balas
Ehsaaan

keren tutorialnya. tp buat kustom warna yg dipilih gimana mas? sy mau ganti warna-warnanya

Balas

To insert a code use code_here
To insert a quote use your_qoute
To insert a picture use url_image_here