√ Menciptakan Goresan Pena Berkedip Di Blogger (Hanya Css)

Dalam pembuatan sebuah halaman web, tidak lepas dari pentingnya desain web, interface dan kesesuaian dengan tema. Banyak jenis desain web yang membutuhkan banyak sekali style untuk menunjang web tersebut tampil sesuai kebutuhan dan lebih gampang dipahami oleh pengunjungnya.

Tidak jarang diharapkan style goresan pena berkedip pada desain sebuah halaman web. Biasanya style goresan pena berkedip dibentuk untuk membantu menonjolkan sebuah teks supaya gampang dilihat oleh pengunjung. Digunakan pada web penjualan yang menampilkan iklan, promosi, dan sebagainya.

Agar menciptakan teks di halaman web sanggup berkedip-kedip, ada beberapa cara yang sanggup digunakan, memakai Javascript ataupun tanpa memakai Javascript. Namun sangat disarankan untuk memakai yang tanpa Javascript supaya pemuatan halaman web sanggup lebih efisien dan lebih cepat. Simak pembahasan di bawah ini.

Membuat Teks Berkedip Tanpa Javascript

Cara ini tergolong direkomendasikan untuk kau gunakan alasannya yakni cara ini tidak perlu memakai Javascript sehingga lebih optimal pada proses indeks oleh mesin pencari jadi lebih SEO Friendly. Berikut ini pola teks berkedip memakai arahan CSS saja.

CONTOH TEKS BERKEDIP

Memasang style

Untuk menciptakan teks berkedip di Blogger, kau sanggup mengikut langkah-langkah di bawah:

1. Buka Blogger
2. Pada bab Tema klik tombol Edit HTML
3. Temukan ]]></b:skin>, dan letakkan arahan berikut di atasnya

.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;   } }

4. Kamu sanggup mengganti 1s sesuai durasi jeda yang kau inginkan, 1s berarti jeda 1 detik (1 second)
5. Klik tombol Simpan

Menggunakan goresan pena berkedip

Untuk memakai goresan pena berkedip pada postingan atau halaman web/blog kau gunakan arahan <span class="blink">Teks di sini</span>. Serta kau sanggup memakai class="blink" di mana saja kau perlukan untuk memasang teks berkedip tersebut. Contohnya yakni sebagai berikut:

<div class="blink">Ini yakni teks berkedip</div>

Penjelasa kode

Terdapat beberapa bab pada arahan CSS di atas, supaya sanggup memahaminya berikut klarifikasi singkat mengenai arti dan makna dari arahan CSS di atas sehingga sanggup menciptakan teks berkedip-kedip.

.blink merupakan nama class yang disisipkan pada arahan HTML. Mungkin tidak perlu dijelaskan panjang. animation merupakan "nama properti" yang berfungsi untuk menunjukkan perintah animasi pada class blink.

Pada bab animation terdapat beberapa bab yaitu blink-animation 1s steps(5,start) infinite;. blink-animation merupakan nama animasinya, sanggup diubah sesuai keinginan. 1s merupakan waktu delay, yaitu animasi dimulai sehabis 1 detik. steps(5,start) merupakan fungsi timing.

Beberapa fungsi waktu (timing function) yang sanggup kau gunakan yakni ease, linear, ease-in, ease-out, ease-in-out, dan cubic-bezier(n,n,n,n). Kemudian bab terakhir yakni infinite yang merupakan durasi animasi tersebut.

Pada bab @keyframes dipakai untuk mendefinisikan animasi apa yang terjadi/ perubahan apa yang terjadi.

Membuat Teks Berkedip Menggunakan Javascript

Jika kau ingin memakai j4vascript, kau sanggup memakai langkah ini. Terlebih dahulu perlu dipasang sintaks Javascript berikut ini.

1. Buka Blogger
2. Pada bab Tema klik tombol Edit HTML
3. Temukan arahan </body> dan letakkan arahan berikut di atasnya

<script src="https://code.jquery.com/jquery-latest.js" type="text/j4vascript"></script> <script>setInterval(function(){$(".berkedip").toggle();},300);</script>

4. Klik tombol Simpan

Untuk memakai di halaman postingan kamu, gunakan arahan <span class="berkedip">TEKS BERKEDIP</span>. Sebagai pola klik di sini.

Penutup

Itulah langkah-langkah yang sanggup kau gunakan untuk memasang dan memakai teks berkedip di Blogger. Semoga artikel ini sanggup bermanfaat untuk kamu, jikalau ada hal-hal yang kurang jelas, maka jangan sungkan untuk menunjukkan komentar kau di bawah atau melalui halaman contact blog ini. Terima kasih dan hingga jumpa!

Sumber http://www.maringngerrang.com/