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>

Ok klo sudah ketemu , Letakkan kode CSS berikut ini
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>

8. Save tema /simpan template blogger
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

ok sekarang sudah selesai , semoga artikel bermanfaat untuk anda , jangan sungkan untuk bertanya di kolom komentar , insyaallah saya bales komentar-nya ! Terimakasih

Belum ada Komentar untuk "Cara membuat efek lampu bolak balik header Blog / logo Blogspot"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel