Cara membuat efek lampu bolak balik header Blog / logo Blogspot
Memper cantik tampilan blog, bagi saya suatu kepuasan pribadi, Blog tekno ayo kerja akan memberikan tentang seputar
- Cara Mendesain Template Blogger
- Cara Menambahkan Efek di Blogger maupun Website.
Untuk di artikel ini saya akan berbagi cara menambahkan efek bayangan putih di logo /judul Blog , waktu itu saya ingin tau bagaimana membuat tampilan Blog saya agar tidak mudah bosan di kunjungi pengunjung , secara berjalan hari demi hari Blog atau blogspot saya , saya desain sedemikan rupa !!
Saat ini banyak sekali Blog yang tersedia di Google penelusuran terkait tampilan yang lebih menarik dari blog yg sudah saya miliki, setelah melihat blog kawan semua blogger hati saya sangat terpacu untuk cara membuat blog sebagus-bagusnya wik-wik-wik
Cara membuat efek di blog dengan kode CSS sebenarnya penerapannya sangat mudah , asal tau cara penempatan kode CSS-nya ?!
Seperti apa kode CSS dan pasangannya ?
Setiap kode dalam Template Blogger , memiliki kode CSS berdasarkan berikut jenis-jenis kode CSS dan pasangannya !
<b:skin> .... ]]<b:skin>Terkadang bisa juga kode CSS seperti berikut ini , setiap Template Blogger , terkadang berbeda jenis kode CSS
<style> ....</style>Jika anda sudah paham yang di jelaskan tentang kode CSS , setelah itu coba anda praktekan
Cara membuat efek lampu bolak-balik di logo Blogspot
Berikut ini langkah cara membuat efek dengan kode CSS
Cara penerapan kode CSS di Template Blogger
1. Login Dashboard Blogger
2. Buka bagian navigasi Blogger
3. Cari tema
4. Scroll tanda panah kebawah
5. Edit html
6. Cari kode di template seperti berikut
]]></skin> ..atau bisa juga.. </style>7. Kode CSS
kode css
/* Header Logo Effect Blog */
header #header-inner a{position:relative}
header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:2px;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{{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}}Di tepatnya di atas kode berikut
]]></skin> .. atau di.. </style>Sebelum kode
</head> .. dan.. <body>9. Jangan lupa di tinjau hasilnya
cara ubah ukuran efek bayangan putih di logo /judul Blog
Cara merubah ukuran kecil maupun besar untuk efeknya di blog , anda bisa cari di bagian kode CSS seperti berikut
width:2px... ganti nomor sesuai kebutuhan sendiri