Cara Membuat Efek Bayangan Berjalan Bolak-Balik Menari Pada Logo Blog

ipung.net - Kali ini saya akan membagikan tutorial sederhana dari pertanyaan temen-temen, yakni bagaimana cara membuat kreasi logo menarik pada blok. 

Cara yang akan kita buat kali ini adalah dengan menambahkan efek bayangan yang berjalan bolak-balik pada logo blog.

Tutorial ini tidak memiliki akan memberatkan blog kalian karena hanya memanfaatkan kode CSS saja.


Dengan adanya tampilan efek ini tentu akan menambah blog kalian semakin profesional dan menarik untuk terus dikunjungi para pembaca. 

Bagaimana cara membuatnya? Yuk simak ulasannya di bawah ini.

Cara Membuat Efek Bayangan Berjalan Bolak-Balik Pada Logo Blog
  1. Pertama kalian harus login ke blogger dan masuk ke menu TEMA > Edit HTML
  2. Jangan lupa untuk memback-up dulu template kamu, buat berjaga-jaga kalau seandainya terjadi kesalahan. Semoga saja tidak ya guys.
  3. Langsung saja kalian cari kode ]]></b:skin> yang terdapat dalam template kalian.
  4. Copy dan Paste Kode Berikut ini tepat di atas kode ]]></b:skin>
  5. Jika sudah, langsung saja simpan dan cek hasilnya. Selesai
/* Effect Logo - ipung.net */
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}}


Apabila tutorial ini tidak berfungsi pada tampilan blog kalian. Silahkan sesuaikan kode #header-inner a dengan kode yang sesuai dengan template kalian ya.

Demo hasil tutorial ini bisa kalian lihat seperti pada header blog IPUNG.Net ini guys. Menarik kan?

Demikianlah cara keren membuat efek bayangan berjalan bolak-balik pada logo blog yang siap membuat blog kalian makin kece badai. Apabila ada pertanyaan dan kritik saran bisa langsung komentar di bawah postingan ini ya guys. Atas perhatiannya kami sampaikan terima kasih.

Jangan lupa untuk subscribe ya gan dan tulis komentar kritik saran atau ada pertanyaan.

Update Artikel Gratis?

2 Responses to "Cara Membuat Efek Bayangan Berjalan Bolak-Balik Menari Pada Logo Blog"

  1. Terima kasih tipsnya gan, sangat bermanfaat, inilah yang selama ini saya cari.
    Boleh partneran & follow blog gan.
    Blog saya Tahsin Online
    www.tahsin,id

    ReplyDelete
  2. Saya udh nyoba, tapi kok gak work ya mas?

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Kamu suka artikel di atas? Jika suka silahkan bagikan artikel ini.