Widget Tombol Toggle Listrik Beranimasi Untuk Blogger

Tombol toggle checkbox ini adalah hasil dari menggabungkan html dan css tanpa javascript. Itu sebabnya ia memuat lebih cepat dibandingkan dengan tombol lainnya. Berikut adalah beberapa Tombol profesional lainnya untuk blogger. 

Sepertinya plug yang kita gunakan untuk menghidupkan dan mematikan. Ini adalah alasan mengapa diberi nama tombol toggle listrik beranimasi. Instalasi juga sangat mudah. Anda harus menyalin kode dan menempel di tempat yang Anda inginkan. 
Widget oleh By Rohan

• LIVE DEMO

LANGKAH 1) - Buka Dasbor Blogger> Tata Letak> Tambah Gadget> Pilih HTML / Javascript LANGKAH 2) - Salin & Tempel kode di bawah ini ke dalamnya. 

<style type = "text / css">
.avdhootbutton {
posisi: relatif;
display: inline-block;
lebar: 40px;
tinggi: 60px;
warna latar: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
batas-jari-jari: 4px;
perataan teks: tengah;
}
input .avdhootbutton {
lebar: 100%;
tinggi: 100%;
margin: 0 0;
bantalan: 0 0;
posisi: absolut;
atas: 0;
kanan: 0;
bawah: 0;
kiri: 0;
z-index: 2;
kursor: pointer;
opacity: 0;
}
label .avdhootbutton {
display: blok;
posisi: absolut;
atas: 1px;
kanan: 1px;
bawah: 1px;
kiri: 1px;
background-image: -webkit-linear-gradient (atas, # fff 0%, # ddd 50%, # fff 50%, # eee 100%);
background-image: -moz-linear-gradient (atas, # fff 0%, # ddd 50%, # fff 50%, # eee 100%);
background-image: -ms-linear-gradient (atas, # fff 0%, # ddd 50%, # fff 50%, # eee 100%);
background-image: -o-linear-gradient (atas, # fff 0%, # ddd 50%, # fff 50%, # eee 100%);
background-image: linear-gradient (atas, # fff 0%, # ddd 50%, # fff 50%, # eee 100%);
-webkit-box-shadow: 0 2px 3px rgba (0,0,0,0,4),
inset 0 -1px 1px # 888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 putih;
-moz-box-shadow: 0 2px 3px rgba (0,0,0,0,4),
inset 0 -1px 1px # 888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 putih;
box-shadow: 0 2px 3px rgba (0,0,0,0,4),
inset 0 -1px 1px # 888,
inset 0 -5px 1px #bbb,
inset 0 -6px 0 putih;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
batas-jari-jari: 3px;
font: normal 11px Arial, Sans-Serif;
warna: # 666;
text-shadow: 0 1px 0 putih;
kursor: teks;
}
label .avdhootbutton: before {
konten: attr (data-off);
posisi: absolut;
atas: 6px;
kanan: 0;
kiri: 0;
z-index: 4;
}
label .avdhootbutton: after {
konten: attr (data-on);
posisi: absolut;
kanan: 0;
bawah: 11px;
kiri: 0;
warna: # 666;
text-shadow: 0 -1px 0 #eee;
}
Input .avdhootbutton: dicentang + label {
background-image: -webkit-linear-gradient (atas, # eee 0%, # ccc 50%, # fff 50%, # eee 100%);
background-image: -moz-linear-gradient (atas, # eee 0%, # ccc 50%, # fff 50%, # eee 100%);
background-image: -ms-linear-gradient (atas, # eee 0%, # ccc 50%, # fff 50%, # eee 100%);
background-image: -o-linear-gradient (atas, # eee 0%, # ccc 50%, # fff 50%, # eee 100%);
background-image: linear-gradient (atas, # eee 0%, # ccc 50%, # fff 50%, # eee 100%);
-webkit-box-shadow: 0 0 1px rgba (0,0,0,0,4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 putih;
-moz-box-shadow: 0 0 1px rgba (0,0,0,0,4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 putih;
box-shadow: 0 0 1px rgba (0,0,0,0,4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 putih;
}
Input .avdhootbutton: dicentang: hover + label {
-webkit-box-shadow: 0 1px 3px rgba (0,0,0,0,4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 putih;
-moz-box-shadow: 0 1px 3px rgba (0,0,0,0,4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 putih;
box-shadow: 0 1px 3px rgba (0,0,0,0,4),
inset 0 1px 7px -1px #ccc,
inset 0 5px 1px #fafafa,
inset 0 6px 0 putih;
}
Input .avdhootbutton: dicentang + label: sebelum {
z-index: 1;
atas: 11px;
}
Input .avdhootbutton: dicentang + label: setelah {
bawah: 9px;
warna: #aaa;
text-shadow: tidak ada;
z-index: 4;
}
</style>
<span class = "avdhootbutton">
<input type = "checkbox" />
<label data-off = "✖" data-on = "✔"> </label>
</span>
<span class = "avdhootbutton">
<input type = "checkbox" />
<label data-off = "◼" data-on = "▶"> </label>
</span>
<span class = "avdhootbutton">
<input type = "checkbox" />
<label data-off = "Stop" data-on = "Play"> </label>
</span>

Simpan Template dan hanya itu. Sekarang Widget Tombol Toggle Elektrik Animasi akan muncul di mana-mana. Nikmati, bagikan, komentar! Terima kasih