Cara bikin footer bergelombang aktif pada template viomagz
Masbrio - Seperti judul di atas kali ini saya admin blog mas brio akan membuatkan tutorial bagai mana caranya membuat footer gelombang aktif, seperti pada blog masbrio ini.
Membuat tampilan Footer Bergelombang
Sebenar nya membuat tampilan footer bergelombang ini tidak lah susah sekali, tergantung kita mendesain dan memasang kode css footer ini pada tempat yang benar.
Banyak di luar sana yang membuatkan tutorial ini juga tetapi salah kasih saran tempat pasang kode css footer ini, dan hingga blog yang memasang footer jadi berantakan.
Bagai kalian yang ingin memasang footer bergelombang seperti pada blog saya silahkan ikuti tutorial yang saya berikan, bilah tidak ikuti tutorial yang saya berikan bisa berantakan dan tidak jadi.
Ok baiklah sekarang Masbrio akan memberikan tutorial nya pada kalian semua, silahkan ikuti tutorial pada blog Masbrio dengan benar ya.
Cara memasang footer gelombang
Sekarang cari kode ini <!-- footer nav menu --> kalau sudah ketemu silahkan copy css di bawah dan paste kan tepat di bawah kode <!-- footer nav menu --> ini
Dan sekarang silahkan save template dan lihat lah asil nya pada blog kalian semua, footer gelombang bergerak udah berhasil di pasang.
Footer Gelombang Bergerak
Di atas ini adalah salah satu cara membuat footer gelombang bergerak pada blog kita, dan saya hanya mencoba pada template viomagz saja belum mencoba pada template lain.
Kalau banyak waktu nanti saya akan membuat kan cara memasang footsr gelombang pada template lain ya, kalau banyak peminat nya nanti bakalan saya nikinin tutorial nya buat kalian semua.
Request Tutorial
Kami juga menerima request tutorial yang anda inginkan, dan bakalan di bikinin di blog ini kalau requet kalian sangat menarik sekali.
Cara membuat footer bergelombang bergerak ini adalah requesan dari seseorang blogger juga loh, dan hingga saya membuatkan sebuah tutorial ini seperti permitaan dia.
Semua requsan yang saya buatkan gratis ya tidak di pungut biayaya, kalau misal nya requsan kalian bagus bakalan kami buatkan ok terimah kasih sudah berkunjung.
Membuat tampilan Footer Bergelombang
Sebenar nya membuat tampilan footer bergelombang ini tidak lah susah sekali, tergantung kita mendesain dan memasang kode css footer ini pada tempat yang benar.
Banyak di luar sana yang membuatkan tutorial ini juga tetapi salah kasih saran tempat pasang kode css footer ini, dan hingga blog yang memasang footer jadi berantakan.
Bagai kalian yang ingin memasang footer bergelombang seperti pada blog saya silahkan ikuti tutorial yang saya berikan, bilah tidak ikuti tutorial yang saya berikan bisa berantakan dan tidak jadi.
Ok baiklah sekarang Masbrio akan memberikan tutorial nya pada kalian semua, silahkan ikuti tutorial pada blog Masbrio dengan benar ya.
Cara memasang footer gelombang
- Silahkan login pada blogger
- Masuk menu template
- dan siap untuk mengedit template
Yang pertama kalian lakukan silahkan cari kode ]]></b:skin> dan salin kode css di bawah ini dan paste kan tepat di atas kode ]]></b:skin>
/* Footer Wave Animations by Masbrio.blogspot.com• MasBrio */
#footer-navmenu .wave-animation{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);bottom:initial;top:0;height:5em}#footer-navmenu{padding-top:50px;background:linear-gradient(to right, #008000, #008000);position:relative}#footer-navmenu-container{max-width:1000px;margin:0 auto;text-align:center}#footer-navmenu ul{list-style:none;margin:0}#footer-navmenu ul li{display:inline-block;margin:6px 0}#footer-navmenu ul li:last-child::after{content:""}#footer-container {background:linear-gradient(to right, #008000, #008000);}
/* Wave Animation */
.wave-animation{display:block;width:100%;height:8em;max-height:100vh;margin:0;position:absolute;bottom:-10px}.wave-bg > use{-webkit-animation:move-forever 20s linear infinite;animation:move-forever 20s linear infinite}.wave-bg > use:nth-child(1){animation-delay:-2s;fill:rgba(232, 174, 199, 0.58);}.wave-bg > use:nth-child(2){animation-delay:-2s;animation-duration:10s;fill:rgba(232, 174, 199, 0.85);}.wave-bg > use:nth-child(3){animation-delay:-4s;animation-duration:8s}@-webkit-keyframes move-forever{0%{transform:translate(-90px,0%)}100%{transform:translate(85px,0%)}}@keyframes move-forever{0%{transform:translate(-90px,0%)}100%{transform:translate(85px,0%)}}.wave-animation{height:3em}.wave-animation{height:4em}Sekarang cari kode ini <!-- footer nav menu --> kalau sudah ketemu silahkan copy css di bawah dan paste kan tepat di bawah kode <!-- footer nav menu --> ini
<div id='footer-navmenu'>
<svg class='wave-animation' preserveAspectRatio='none' viewBox='0 24 150 28' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'/>
</defs>
<g class='wave-bg'>
<use fill='rgba(242,193,78,.5)' x='50' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(242,193,78,.7)' x='50' xlink:href='#gentle-wave' y='3'/>
<use fill='#fff' x='50' xlink:href='#gentle-wave' y='6'/>
</g>
</svg>
</div>Dan sekarang silahkan save template dan lihat lah asil nya pada blog kalian semua, footer gelombang bergerak udah berhasil di pasang.
Footer Gelombang Bergerak
Di atas ini adalah salah satu cara membuat footer gelombang bergerak pada blog kita, dan saya hanya mencoba pada template viomagz saja belum mencoba pada template lain.
Kalau banyak waktu nanti saya akan membuat kan cara memasang footsr gelombang pada template lain ya, kalau banyak peminat nya nanti bakalan saya nikinin tutorial nya buat kalian semua.
Request Tutorial
Kami juga menerima request tutorial yang anda inginkan, dan bakalan di bikinin di blog ini kalau requet kalian sangat menarik sekali.
Cara membuat footer bergelombang bergerak ini adalah requesan dari seseorang blogger juga loh, dan hingga saya membuatkan sebuah tutorial ini seperti permitaan dia.
Semua requsan yang saya buatkan gratis ya tidak di pungut biayaya, kalau misal nya requsan kalian bagus bakalan kami buatkan ok terimah kasih sudah berkunjung.
cara ganti warnanya gimana
BalasHapus