Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah.
Cara ini sangat gampang untuk kalian lakukan karena pada tutorial ini kalian cukup menambahkan CSS ke dalam template kalian dan langsung jadi. Efek bayangan ini yang nantinya akan berjalan bolak - balik di logo header blog saja, jadi efeknya tidak akan bertaburan kemana - mana.
Mungkin tidak sedikit dari kalian yang masih belum tahu tentang Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah, cara ini sebenarnya ialah cara lama tapi karena sekarang sudah banyak di pergunakan lagi maka saya sendiri langsung membuatkan tutorialnya buat kalian.
Dengan menggunakan cara ini blog kalian menjadi lebih profesional dan lebih cantik, tapi fungsi utama dari cara ini adalah memberikan rasa nyaman kepada pengunjung.
Nah jika kalian mau membuat efek bayangan yang bisa berjalan bolak- balik di logo header blog kalian bisa ikuti tutorialnya di bawah ini.
Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah
- Buka Blog kalian.
- Pilih Tema lalu pilih Edit HTML.
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>.
/* Header Logo Effect Blog telatngoding.com */
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}}- Simpan template kalian dan selesai.
Jika CSS tersebut tidak berfungsi pada template kalian, silahkan ganti pemanggilnya #header-inner a dengan kode pemanggil pada template kalian.
bagaimana sangat mudah sekali bukan untuk tutorial tentang Cara Terbaru Membuat Efek Bayangan Berjalan Bolak Balik Di Logo Header Blog Dengan Mudah, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini.
Terimakasih sudah berkunjung dan semoga tutorial ini bermanfaat buat kalian semua.