Membuat Footer Blog Gaya Gelombang Wave - Susah Tidur

Membuat Footer Blog Gaya Gelombang Wave

Membuat Footer Blog Gaya Gelombang Wave
Membuat Footer Blog Gaya Gelombang Wave - SusahTidur - Pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang Cara Membuat Footer Blog Gaya Gelombang Wave. Yang saya maksud mungkin sobat sudah tahu ya bentuk dari Gelombang Wave seperti apa? belum? lihat footer blog saya di bawah nah seperti itu tertarik? Baik tanpa basa basi lagi mari langsung esekusi

Membuat Footer Blog Gaya Gelombang Wave

  1. Masuk ke dashboard blogger sobat
  2. Kemudian masuk ke menu Tema > Edit HTML
  3. Kemudian cari kode </b:skin> dan masukkan kode di bawah ini tepat di atas kode </b:skin>
    #fancy-shape{clear:both;max-width:100%;display:block;position:relative;margin:15% auto 0;justify-content:center;z-index:2;box-sizing:border-box;}.footer-fancy-shape{clear:both;overflow:hidden;position:absolute;left:0;bottom:100%;width:100%;margin-bottom:-2px;direction:ltr;}.footer-fancy-shape[data-negative=false].footer-fancy-shape-bottom,.footer-fancy-shape[data-negative=true].footer-fancy-shape-top{transform:rotate(180deg);}@media screen and (max-width:992px){.footer-fancy-shape-bottom svg{height:105px;}}.footer-fancy-shape-bottom svg{width:calc(130% + 2.5px);height:100px;}.footer-fancy-shape .footer-fancy-shape-fill{fill:#7bbefa;width:calc(100% + 2.5px);transform:rotateY(0);-webkit-transform-origin:center;transform-origin:center;transition:all .5s ease;}.footer-fancy-shape svg{z-index:-1;display:block;position:relative;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);}@media screen and (max-width:992px){.footer-fancy-shape-bottom svg{height:100px;}}@media screen and (max-width:768px){.footer-fancy-shape-bottom svg{height:150px;}}@media screen and (max-width:480px){.footer-fancy-shape-bottom svg{height:80px;}}
    Dan lihat CSS yang saya blok warna biru di atas, itu adalah warna dari Gelombang Wave nya. Silahkan sobat ganti dengan kode warna sesuai keinginan sobat.
  4. Berhubung saya menggunakan template VIOMAGZ, saya menempatkan kode di bawah ini tepat di atas   <div id='footer-container'> untuk template lainnya, silahkan sesuaikan sendiri ya. Yang jelas tetap di atas <footer>
    <!--Gelombang Wave by susahtidur.my.id -->
      <div id='fancy-shape'>
      <section class='footer-fancy-shape footer-fancy-shape-bottom' data-negative='false'>
      <svg preserveAspectRatio='none' viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg'>
      <path class='fancy-shape1 footer-fancy-shape-fill' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z' opacity='0.33'/>
      <path class='fancy-shape2 footer-fancy-shape-fill' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z' opacity='0.66'/>
      <path class='fancy-shape3 footer-fancy-shape-fill' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/>
      </svg>
      </section>
      <div id='bf-fancy-icon'>
      <div class='footer-shape footer-fancy-logo' data-negative='false'>
      </div>
      </div>
      </div>
  5. Kemudian Simpan Tema

Nah mungkin cukup dulu tutorial tentang Cara Membuat Footer Blog Gaya Gelombang Wave. Jika sobat masih kebingungan dalam penempatan atau pemasangan cara di atas silahkan bertanya di kolom komentar yang tersedia.


Sekian dan terimakasih telah berkunjung ke Susah Tidur
"Membuat Footer Blog Gaya Gelombang Wave"
Tampilkan Komentar
Sembunyikan Komentar

3 Komentar untuk "Membuat Footer Blog Gaya Gelombang Wave"

  1. Mantap tutorialnya.
    Sudah di coba work 100%

    Thanks infonya kang ☺️

    BalasHapus
    Balasan
    1. Wah bagus lah mas😁

      Terimakasih telah berkunjung ke SusahTidur awas jadi ikutan Susah Tidur berat lho hihi

      Hapus
  2. Thanks Work, namun supaya wavenya bergerak gimana yah?

    BalasHapus

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel