Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog

Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog. Tutorial kali ini saya mendapatkan dari blog anazdzgn pastinya keren. Efek ini tidak memberatkan blog kamu karena tutor ini hanya menggunakan CSS saja.


Fungsi dari Efek ini adalah membuat blog kamu menjadi profesional dan membuat pengunjung menjadi nyaman pastinya, serta keren jadinya blog kamu.

Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Effect Logo */
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}}

4. Kalau sudah silahkan klik SIMPAN dan Selesai.

Untuk kamu yang tidak berfungsi dengan kode diatas, kamu bisa menyesuaikan dengan template kamu dengan mengganti #header-inner a dengan template kamu.


Bagaimana keren kan Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog bagi kamu yang memiliki masalah atau pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Efek Bayangan Berjalan Bolak- Balik di Logo Blog"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel