CARA MEMBUAT FOOTER BLOG BERGELOMBANG DAN BERANIMASI

Jika sebelumnya aku telah memberikan trik bagaimana membuat header bergelombang dan beranimasi, kali ini tanpa di mintapun akan kuberikan trik membuat footer bergelombang dan beranimasi yang dapat di terapkan terhadap template template terbaru blogger blogspot.

Klik DEMO

Prinsip kerjanya adalah sama: Memanfaatkan dan memanipulasi kode kode CSS/SVG agar kita dapat membentuk, membungkus, melapis dan memberikan efek warna beranimasi ke bagian bagian elemen template yang ingin kita 'make over' tampilannya.

Dan jangan kuatir, sama saja dengan trik membuat header bergelombang dan beranimasi, kita akan menggunakan trik CSS dan SVG, tidak ada Javascript yang dilibatkan. Dan template yang aku pilih tetap saja Essential dan atau Contempo karena keduanya identik.

1. Langkah pertama 

• Masuk ke pengaturan blogger 
• Pilih tema
• Pilih edit HTML

Di halaman edditor HTML cari kode </head> dan letakan kode CSS berikut di atasnya:

<style>:root
{
--color: #4973ff;
}

footer
{
font-size: 16px;
font-family: &#39;Montserrat&#39;, sans-serif;
margin: 0;
padding: 0;
}
.content
{
max-width: 300px;
margin: 0 auto;
padding: 0 20px;
}
.hero
{
position: relative;
background: #990000;
color: white;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero h2
{
position: relative;
z-index: 1;
font-size: 4.5rem;
margin: 0 0 10px;
line-height: 1;
color: rgba(255, 255, 255, 0.9);
}
.hero p
{
position: relative;
z-index: 1;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.4;
}
/*==============================*/
.waves
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 500px;
background-color: var(--color);
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
transition: 500ms;
}
.waves::before,
.waves::after
{
content: &#39;&#39;;
position: absolute;
width: 300vw;
height: 300vw;
top: -65vw;
left: 50%;
transform: translate(-50%, -75%);
}
.waves::before
{
border-radius: 44%;
background: rgba(51, 51, 51, 1);
animation: waves 8s linear infinite;
}
.waves::after
{
border-radius: 44%;
background: rgba(51, 51, 51, 0.5);
animation: waves 15s linear infinite;
}
@keyframes waves
{
0%
{transform: translate(-50%, -75%) rotate(0deg);}
50%
{transform: translate(-50%, -75%) rotate(180deg);}
100%
{transform: translate(-50%, -75%) rotate(360deg);}
}</style>

Terserah setelahnya kalian mau merobah warna (aku sorot kuning) sekar kita lanjutkan ke langkah berikut:

2. langkah kedua 

Masih di dalam pengaturan halaman editor HTML cari kode :

<b:template-script async='true' name='strm' version='1.0.0'/> (gaya aliran desain yang di anut oleh template Essential)

atau

<b:template-script async='true' name='indie' version='1.0.0'/> (gaya indie template contempo)

atau

<b:template-script async='true' name='fancy' version='1.0.0'/> (gaya fancy template Soho)

atau

 <b:template-script async='true' name='vegeclub' version='1.0.0'/> (gaya vegeclub template Emporio)

atau

<b:template-script async='true' name='rockpool' version='1.0.0'/> (gaya rockpool template Notable)

Tergantung template yang kalian pergunakan di antara 5 varian template terbaru blogger ya...letakan kode berikut tepat di atas kode yang telah aku sebutkan satu persatu di atas tadi:

<section class='hero'>
<div class='content'>
<p>Copyright: Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script><a expr:href='data:blog.homepageUrl'> <font color='white'><data:blog.title/></font> </a></p>
<p><font color='yellow'><a href=''>Privacy</a> || <a href=''>Perihal</a> || <a href=''>Sitemap</a></font></p>
</div>
<div class='waves'/>
</section>

Save template.

Kesimpulan:

Jangan remehkan style di atas lho, disamping sumber kodenya sudah aku 'make over' dari sumber kode WP (templat wordpress) dalam bentuk plugin, ia dapat merobah sebuah template dari kepala sampai ke kaki menjadi lebih 'eye catching' dan sudah barang tentu kalian juga bisa melakukannya dengan belajar hal hal baru tanpa henti.

Ingin header berikut footernya bergelombang dan beranimasi tanpa memberatkan loading? Lihat Demo berikut:

DEMO

Salam dari tim kami..

Kunjungi instagram Official kami: Editblogsite

Kunjungi Youtube : Editblogtema Channel

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: