Cara Membuat Efek Pelangi di Footer Blogger

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat efek pelangi di footer blogger , Keuntungan Ini akan memberikan tampilan keren pada situs blogger sobat dan pengunjung blog sobat mungkin akan menyukai efek pelangi ini. 

efek animasi pelangi Ini akan berfungsi pada perangkat desktop dan seluler. efek Ini akan menampilkan garis pelangi melekat di footer situs web sobat. perlu sobat ketahui efek ini dibuat menggunakan css dan tidak akan mempengaruhi kecepatan blog sobat.

untuk melihat demonya silakan klik tombol demo di bawah ini.

demo

Membuat effek pelangi melekat di footer Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Silahkan sobat cari kode berikut ini ]]></b:skin>  atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

.DutaRainbow,.DutaBlurRainbow{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.DutaBlurRainbow{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

4. Selanjutnya cari kode </footer> atau </body> dan tambahkan kode html dibawah ini tepat DIATAS kode tersebut

<div class='DutaRainbow'>
  <div class='DutaBlurRainbow'>
  </div>
</div>

5. Silahkan Sobat SIMPAN TEMA.

Nah, itulah tutorial Cara Membuat Efek Pelangi di Footer Blogger atau Web Menggunakan css. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Pin Share