Membuat Efek Tulisan Berkedip di Blogger dengan CSS
Membuat Efek Tulisan Berkedip di Blogger dengan CSS ― Cara membuat efek tulisan berkedip di Blogger ― Saat ini, perkembangan web designer sudah menjadi hal yang cukup penting, dalam pembuatan sebuah halaman web, tidak lepas dari pentingnya desain web, interface dan kesesuaian dengan tema demi menunjang sebuah halaman situs bisa tampil dengan lebih baik di mata pengunjung. Banyak jenis desain web yang membutuhkan berbagai style untuk menunjang web tersebut tampil sesuai kebutuhan dan lebih mudah dipahami oleh pengunjungnya.
Berbagai jenis style digunakan untuk mengatur tampilan halaman situs, termasuk juga blog seperti Blogger ini. Tidak jarang diperlukan style tulisan berkedip pada desain sebuah halaman web. Biasanya style tulisan berkedip dibuat untuk membantu menonjolkan sebuah teks agar mudah dilihat oleh pengunjung. Digunakan pada web penjualan yang menampilkan iklan, promosi, dan sebagainya.
Agar membuat teks di halaman web bisa berkedip-kedip, ada beberapa cara yang dapat digunakan, menggunakan Javascript ataupun tanpa menggunakan Javascript. Namun sangat disarankan untuk menggunakan yang tanpa Javascript agar pemuatan halaman web bisa lebih efisien dan lebih cepat. Simak pembahasan di bawah ini.
Membuat Teks Berkedip Tanpa Javascript
Cara ini tergolong direkomendasikan untuk kamu gunakan karena cara ini tidak perlu menggunakan Javascript sehingga lebih optimal pada proses indeks oleh mesin pencari jadi lebih SEO Friendly. Berikut ini contoh teks berkedip menggunakan kode CSS saja.CONTOH TEKS BERKEDIP
Memasang style
Untuk membuat teks berkedip di Blogger, kamu bisa mengikut langkah-langkah di bawah:- Buka Blogger
- Pada bagian Tema klik tombol Edit HTML
- Temukan
]]></b:skin>
, dan letakkan kode berikut di atasnya - Kamu bisa mengganti
1s
sesuai durasi jeda yang kamu inginkan, 1s berarti jeda 1 detik (1 second) - Klik tombol Simpan
.blink {
animation: blink-animation 1s steps(5,start) infinite;
-webkit-animation: blink-animation 1s steps(5,start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
Menggunakan tulisan berkedip
Untuk menggunakan tulisan berkedip pada postingan atau halaman web/blog kamu gunakan kode<span class="blink">Teks di sini</span>
. Serta kamu bisa menggunakan class="blink"
di mana saja kamu perlukan untuk memasang teks berkedip tersebut. Contohnya adalah sebagai berikut:<div class="blink">Ini adalah teks berkedip</div>
Penjelasa kode
Terdapat beberapa bagian pada kode CSS di atas, agar bisa memahaminya berikut penjelasan singkat mengenai arti dan makna dari kode CSS di atas sehingga bisa membuat teks berkedip-kedip..blink
merupakan nama class yang disisipkan pada kode HTML. Mungkin tidak perlu dijelaskan panjang. animation
merupakan "nama properti" yang berfungsi untuk memberikan perintah animasi pada class blink.Pada bagian animation terdapat beberapa bagian yaitu
blink-animation 1s steps(5,start) infinite;
. blink-animation merupakan nama animasinya, dapat diubah sesuai keinginan. 1s merupakan waktu delay, yaitu animasi dimulai setelah 1 detik. steps(5,start) merupakan fungsi timing.Beberapa fungsi waktu (timing function) yang bisa kamu gunakan adalah
ease
, linear
, ease-in
, ease-out
, ease-in-out
, dan cubic-bezier(n,n,n,n)
. Kemudian bagian terakhir adalah infinite yang merupakan durasi animasi tersebut.Pada bagian
@keyframes
digunakan untuk mendefinisikan animasi apa yang terjadi/ perubahan apa yang terjadi.Membuat Teks Berkedip Menggunakan Javascript
Selain menggunakan kode CSS seperti langkah-langkah di atas, kamu juga bisa membuat efek tulisan berkedip pada blog kamu menggunakan kode JS atau Javascript. Jika kamu ingin menggunakan javascript, kamu bisa menggunakan langkah-langkah yang akan dijelaskan di bawah. Terlebih dahulu perlu dipasang sintaks Javascript dengan mengikuti cara berikut ini:- Buka Blogger
- Sebelum mulai mengubah bagian dari blog kamu, sebaiknya lakukan backup terlebih dahulu biar blog kamu tetap aman, baca cara mudah backup blog di sini.
- Kemudian pada bagian Tema pilih Edit HTML.
- Temukan kode
</body>
dan letakkan kode berikut di atasnya - Kamu bisa mengatur kecepatan berkedip dengan mengubah angka 600 pada kode di atas, kode tersebut menunjukkan interval waktu dalam milidetik, jadi 1000 artinya 1 detik. Setelah selesai klik tombol Simpan
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script>setInterval(function(){$(".berkedip").toggle();},600);</script>
Untuk menggunakan efek tulisan berkedip dengan javascript kamu perlu menuliskan atau memasang kode
<span class="berkedip">TEKS BERKEDIP</span>
, di mana kelas berkedip diambil dari nama kelas yang telah ditetapkan pada kode Javascript yang dipasang sebelumnya di atas. Intinya kamu bisa menempatkan class="berkedip"
di manapun kamu ingin efek berkedip tersebut aktif.Sebenarnya kode di atas langsung aktif tanpa perlu klik apapun, ini hanya demo kalau kamu mau lihat contohnya, klik link di demo untuk mengaktifkan. Untuk melihat contohnya tulisan ini akan berkedip kalau kamu klik di sini.
Posting Komentar untuk "Membuat Efek Tulisan Berkedip di Blogger dengan CSS"
Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan <i rel="code">Text here</i> untuk komentar yang berisi kode singkat.
Gunakan <i rel="pre">Text here</i> untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya <b>cetak tebal</b> maupun <i>cetak miring</i>. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.