Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat formulir order menuju whatsapp dengan mudah.
Fitur ini merupakan fitur yang sangat unik sekali karena jarang sekali para blogger menerapkan fitur ini. Jika kalian pertama melihat fitur ini mungkin kalian merasa sedikit aneh dan kurang tertarik karena ini merupakan fitur baru yang kurang familiar.
Pertama kali saya melihat fitur ini pada template Textrim, setelah saya cari kode CSSnya dan saya terapkan di blog saya akhirnya Work juga. Sebelum lanjut ke tutorial saya jelaskan sedikit tentang Glitch. Glitch ialah sebuah gangguan software yang di sebabkan oleh signal rusak yang menjadikan monitor kalian berubah dan sulit di lihat.
Perlu kalian ketahui Efect Glitch ini hanya menggunakan CSS saja, jadi tidak berpengaruh pada kecepatan loading blog kalian, Efect Glitch ini tidak menggunakan kode Javascript atau semacamnya yang bisa membuat loading blog kalian terasa berat dan lama.
Efect Glitch ini juga sudah support buat kalian pengguna template AMP, yang pasti setelah memasang Efect Glitch ini blog kalian akan terlihat menarik dan membuat tampilan blog kalian menjadi baru, karena fitur ini masih jarang sekali di pakai oleh kalangan blogger.
Cara Gampang Membuat Efek Glitch Animasi Hanya Dengan CSS Di Blogger
Disini saya akan membuat 2 jenis Efek Glitch yaitu :- Langsung default ( Otomatis )
- Saat di sorot dengan mouse
1. Langsung default ( Otomatis )
- Buka Blog kalian.
- Pilih Tema lalu pilih Edit HTML.
- Salin kode di bawah ini dan letakan tepat di atas kode </style>.
/* Text Glitch (Grunge) Effect */
.ignielGlitch {
color: #000;
position: relative;
animation: ignielGlitch1 2.5s infinite;
-moz-animation: ignielGlitch1 2.5s infinite;
-webkit-animation: ignielGlitch1 2.5s infinite;
-o-animation: ignielGlitch1 2.5s infinite;
}
.ignielGlitch:before, .ignielGlitch:after {
content: attr(data-text);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.ignielGlitch:before {
color: #000;
animation: ignielGlitch2 2.5s infinite;
-moz-animation: ignielGlitch2 2.5s infinite;
-webkit-animation: ignielGlitch2 2.5s infinite;
-o-animation: ignielGlitch2 2.5s infinite;
}
.ignielGlitch:after {
color: #000;
animation: ignielGlitch3 2.5s infinite;
-moz-animation: ignielGlitch3 2.5s infinite;
-webkit-animation: ignielGlitch3 2.5s infinite;
-o-animation: ignielGlitch3 2.5s infinite;
}
@keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}- Simpan template.
- Untuk memanggil efek glitch tersebut saya akan membuat element HTML, kalian bisa menambahkan IgnielGlitch ke dalamnya. Contohnya seperti kode yang ada di bawah ini.
<!-- Text Glitch (Grunge) Effect -->
<div class="ignielGlitch" data-text="Telatngoding">
Telatngoding</div>2. Saat di sorot dengan mouse
Efek Glitch ini akan keluar ketika kalian menyoroti dengan mouse ( ketika mouse menyentuh teks tersebut, maka efek Glitch tersebut akan bekerja / aktif ), berikut ini langkahnya untuk bisa membuat efek Glicth saat di sorot dengan mouse.- Buka Blog kalian.
- Pilih Tema lalu pilih Edit HTML.
- Salin kode di bawah ini dan letakan tepat di atas kode </style>.
/* Text Glitch (Grunge) Effect on Hover */
.ignielGlitch:hover {
color: #000;
position: relative;
animation: ignielGlitch1 2.5s infinite;
-moz-animation: ignielGlitch1 2.5s infinite;
-webkit-animation: ignielGlitch1 2.5s infinite;
-o-animation: ignielGlitch1 2.5s infinite;
}
.ignielGlitch:hover::before, .ignielGlitch:hover::after {
content: attr(data-text);
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.ignielGlitch:hover::before {
color: #000;
animation: ignielGlitch2 2.5s infinite;
-moz-animation: ignielGlitch2 2.5s infinite;
-webkit-animation: ignielGlitch2 2.5s infinite;
-o-animation: ignielGlitch2 2.5s infinite;
}
.ignielGlitch:hover::after {
color: #000;
animation: ignielGlitch3 2.5s infinite;
-moz-animation: ignielGlitch3 2.5s infinite;
-webkit-animation: ignielGlitch3 2.5s infinite;
-o-animation: ignielGlitch3 2.5s infinite;
}
@keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@-webkit-keyframes ignielGlitch1{0% {transform: none;opacity: 1;}7% {transform: skew(-0.5deg, -0.9deg);opacity: 0.75;}10% {transform: none;opacity: 1;}27% {transform: none;opacity: 1;}30% {transform: skew(0.8deg, -0.1deg);opacity: 0.75;}35% {transform: none;opacity: 1;}52% {transform: none;opacity: 1;}55% {transform: skew(-1deg, 0.2deg);opacity: 0.75;}50% {transform: none;opacity: 1;}72% {transform: none;opacity: 1;}75% {transform: skew(0.4deg, 1deg);opacity: 0.75;}80% {transform: none;opacity: 1;}100% {transform: none;opacity: 1;}}
@keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch2{0% {transform: none;opacity: 0.25;}7% {transform: translate(-2px, -3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(-5px, -2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(-5px, -1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(-2px, -6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch3{0% {transform: none;opacity: 0.25;}7% {transform: translate(2px, 3px);opacity: 0.5;}10% {transform: none;opacity: 0.25;}27% {transform: none;opacity: 0.25;}30% {transform: translate(5px, 2px);opacity: 0.5;}35% {transform: none;opacity: 0.25;}52% {transform: none;opacity: 0.25;}55% {transform: translate(5px, 1px);opacity: 0.5;}50% {transform: none;opacity: 0.25;}72% {transform: none;opacity: 0.25;}75% {transform: translate(2px, 6px);opacity: 0.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}- Simpan template kalian.
- Untuk kode pemanggilnya kalian bisa gunakan kode di bawah ini.
<!-- Text Glitch (Grunge) Effect on Hover -->
<div class="ignielGlitch" data-text="Textrim">Textrim</div>
Untuk yang saya tandai dengan warna Aqua ( 2.5s ) ialah kecepatan dari efek glitch, semakin kecil angkanya semakin cepat gerakan efeknya. Silahkan kalian rubah angka tersebut sesuai kebutuhan kalian.
Yang saya tandai dengan warna Orange data-text="Lapakinfo itu harus ada, karena valuenya harus sama persis dengan teks yang akan di tampilkan. Jika isi valuenya Lapakinfo maka isi element div juga harus Lapakinfo.
Contoh : data-text="Textrim">Textrim</div> Coba kalian perhatikan pada teks yang saya tandai dengan warna Ungu ( Textrim ), kedua text tersebut harus sama jangan sampai beda.
Untuk yang saya warnai dengan warna Biru ( #000 ) ialah warna teks dan ketiganya bisa di atur dengan warna yang berbeda - beda agar nanti ketika bayangan tersebut tampil lebih berwarna - warni.
Sekian dulu untuk tutorial tentang Cara Membuat Efek Glitch Animasi Hanya Dengan CSS Di Blogger, sekiranya itu saja yang bisa saya sampaikan. Jika kalian masih bingung atau ada pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih atas kunjungannya.