switch bouton pour changement du langue du blogger

Je souhaite ajouter un bouton bascule pour changer la langue de mon blog à l'aide d'un script de traduction Google. J'ai trouvé ce code et il fonctionne bien. J'ai trouvé ce bouton bascule, mais je ne sais pas comment les mélanger avec JavaScript pour que le code fonctionne correctement.
le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id='google_translate_element'> </div>
<div class='menu-traslate-header'>
 
 <ul>
 
  <li><a href='#googtrans/fr'>FR</a></li>
  <li><a href='#googtrans/ar'>Ar</a></li>
</ul>
 
</div>
 <script type='text/javascript'>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr',
    includedLanguages: 'ar,fr-CN' ,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    multilanguagePage: true,
    gaTrack: true,
  }, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/>
 <script type='text/javascript'>
jQuery(document).ready(function($) {
  $('.menu-traslate-header ul li a' ).click(function(event) {
      window.location = $(this).attr('href');
      location.reload();
  });
});
</script>

le bouton switch

Code:

1
2
3
4
<div class="on-off-toggle">
  <input class="on-off-toggle__input" type="checkbox" id="bopis" />
  <label for="bopis" class="on-off-toggle__slider"></label>
</div>

css du bouton

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@use postcss-preset-env {
  stage: 0;
}
 
/** BEGIN CSS NEEDED FOR SWITCH **/
.on-off-toggle {
  width: 56px;
  height: 24px;
  position: relative;
  display: inline-block;
}
 
.on-off-toggle__slider {
  width: 56px;
  height: 24px;
  display: block;
  border-radius: 34px;
  background-color: #d8d8d8;
  transition: background-color 0.4s;
 
  &:before {
    content: '';
    display: block;
    background-color: #fff;
    box-shadow: 0 0 0 1px #949494;
    bottom: 3px;
    height: 18px;
    left: 3px;
    position: absolute;
    transition: .4s;
    width: 18px;
    z-index: 5;
    border-radius: 100%;
  }
 
  &:after {
    display: block;
    line-height: 24px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    content: 'fr';
    color: #484848;
    padding-left: 26px;
    transition: all 0.4s;
  }
 
}
 
.on-off-toggle__input {
  /*
    This way of hiding the default input is better
    for accessibility than using display: none;
  */
  position: absolute;
  opacity: 0;
}
 
.on-off-toggle__input:checked +
.on-off-toggle__slider {
  background-color: #000;
 
  &:before {
    transform: translateX(32px);
  }
  &:after {
    content: 'ar';
    color: #FFFFFF;
    padding-left: 8px;
  }
}
 
/*** END CSS NEEDED FOR SWITCH **/
 
 
 
/*** DEMO STYLES ONLY ***/
 
* {
  box-sizing: border-box;
}
 
body {
  font-family: OpenSans, sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}