Cara Mudah Membuat Menu Pada Footer Blog Keren

Cara Mudah Membuat Menu Pada Footer Blog Keren – Pada dasarnya kebanyakan menu diletakan pada bagian atas template blog. Akan tetapi ada juga yang sengaja membuat menu navigasi pada bagian bawah template atau di bagian footer. Seperti yang kita ketahui bahwa fungsi dari menu ialah untuk mempermudah navigasi pengunjung.

baca juga:

Selain itu dengan membuat menu pada footer blog akam membuat desain menjadi lebih bagus. Menu yang ditempatkan di bagian bawah ini sangat cocok digugunakan untuk dipasangi link yang menuju halaman statis. Misal halaman tentang, kontak, privasi dan juga cocok untuk membuat link sosial media.

Jadi tidak ada salahnya anda mencoba untuk memasang menu footer ini. Sebagai Contoh anda bisa melihat gambar di bawah ini.membuat menu pada footer blog

Gambar di atas merupakan contoh dari menu footer., jadi anda tidak perlu kuwatir, karena menu ini responsive dan bisa digunakan untuk semua jenis template blogspot.

 

Cara Mudah Membuat Menu Pada Footer Blog Keren dan Responsive

  • Pertama buka terlebih dahulu dashboard blogger anda.
  • Klik template dan pilih Edit HTML.
  • Selanjutnya cari kode ]]></b:skin>
  • Agar lebih mudah Klik CTRL+F lalu copy kode ]]></b:skin> pada kotak pencarian teks, kemudian klik Enter.
  • Setelah ketemu copy CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> .
    .ct-wrapper-footer {position: relative;margin: 0 auto;width: 100%;}
    .footer-nav { position: relative;width: 100%;z-index: 1000;overflow: hidden;background:#f0f0f0;}
    .footer-nav ul {margin: 0 auto;padding: 1em 0;text-align: center;width: 100%;}
    .footer-nav li { list-style-type: none; display: inline-block; padding: 0; }
    .footer-nav li a { color: #333; display: inline-block; font-style: normal !important; margin: 0 0 0 1em; padding: 0; text-decoration: none; }
    .footer-nav li a:after { content: “”; display: inline-block; margin: 0 0 0 1em; color: #777; }
    .footer-nav li:last-child a:after { display: none; }
    .footer-nav ul li a:hover, .footer-nav ul li a:active { text-decoration: none; color: #0D78A5; }
  • Lalu cari kode <div class=’footer’>
  • Setelah ketemu kemudian copy kode di bawah ini dan paste tepat di bawah kode <div class=’footer’>

    <div class=’footer-nav’>
    <div class=’ct-wrapper-footer’>
    <ul>
    <li><a href=’/’>Beranda</a></li>
    <li><a href=’#’>Tentang</a></li>
    <li><a href=’#’>Privacy</a></li>
    <li><a href=’#’>Contact</a></li>
    <li><a href=’#’>Disclaimer</a></li>
    </ul>
    </div>
    </div>
  • Jika tidak ketemu silahkan paste script tersebut di bagian bawah <footer .
  • Silahkan ganti judul menu dan tanda # dengan judul menu dan link yang anda inginkan.
  • Jangan lupa untuk klik Simpan.

Apakah anda masih bingung? jika iya maka anda bisa melihat contohnya pada gambar di bawah ini.

Gambar 1, contoh penempatan CSScss-menu-footer

Gambar 2, contoh penempatan script menu footer script menu footer

Nah, pastinya dengan contoh gambar di atas akan mempermudah anda untuk membuat menu pada footer blog keren dan responsive. akhir kata dari saya, semoga artikel ini bisa bermanfaat bagi rekan-rekan bloger sekalian.

 

(Visited 218 times, 1 visits today)

2 thoughts on “Cara Mudah Membuat Menu Pada Footer Blog Keren

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *