Mudah Banget Cara Buat Efek Bayangan Bolak-balik Di Logo Blog [Header]

 
Bayangan Logo Blog Bolak-balik

Pernah lihat situs seseorang yang memiliki header atau logo blognya memiliki efek bayangan terus-menerus bolak-balik ke kanan dan kiri. Mengapa bisa logo situs web memiliki efek bayangan bolak-balik, apakah tidak memberatkan loading halaman situs tersebut?,, Jawabannya bisa iya bisa tidak.

Alasan mengapa saya memberi jawaban iya efek bayangan bolak-balik di logo blog bisa memberatkan loading halaman situs

Karena dalam penerapan efek bayangan bolak-balik di header atau logo situs web tentunya kalian harus melakukan penambahan CSS ataupun JavaScript, biasanya blog yang memiliki banyak sekali CSS maupun JS akan lebih berat dimuat dibandingkan dengan situs yang memiliki sedikit CSS maupun JS (JavaScript).

Alasan kenapa saya memberi jawaban tidak efek bayangan bolak-balik di logo blog bisa memberatkan loading halaman situs

Di jaman sekarang, perubahan teknologi yang semakin terus maju pastinya setiap orang hampir rata-rata memiliki koneksi internet yang cepat apalagi dengan rencana perubahan koneksi jaringan 4G ke 5G, tentunya sangat seimbang dengan situs web milik kalian yang hanya memberikan tambahan sedikit CSS maupun JS JavaScript, sedangkan banyak aplikasi diluar sana memiliki update setiap bulan ke versi terbaru dengan penambahan fitur-fitur terbaru, jadi gak perlu bingung lagi jika kalian ingin memodifikasi situs web milik kalian.

Cara membuat efek bayangan bolak-balik di logo blog
  1. Masuk ke Blogger.com
  2. Pergi ke pengaturan tema blog kalian
  3. Pilih edit html tema blog kalian
  4. Cari kode ]]> </ b: skin>
  5. Tempelkan kode CSS di bawah ini tepat di atas kode ]]> </ b: skin>

/* Header Effect Bolak Balik Blog Shinobi */

header #header-inner a{position:relative}

header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}

header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}

header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}

@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}

@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}

Jika sudah kalian tinggal simpan tema blog kalian lalu coba lihat hasilnya, jika penerapannya benar akan seperti contoh di bawah sini.

0 Response to "Mudah Banget Cara Buat Efek Bayangan Bolak-balik Di Logo Blog [Header]"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel