HRMlblCMFqqInfU78c3NMJxDetM02ycHTU9BqBl9

Cara Membuat Menu Navigasi Footer LinkMagz Seperti VioMagz

Cara Membuat Menu Navigasi Footer LinkMagz Seperti VioMagz

hobingoding.com - LinkMagz merupakan sebuah template baru yang dibuat oleh Mas Sugeng, blogger senior Indonesia yang sudah menciptakan beberapa template premium seperti EvoMagz yang digunakan pada blog ini dan VioMagz yang sudah banyak digunakan oleh banyak sekali blogger Indonesia.

Template LinkMagz yang baru dikeluarkan oleh Mas Sugeng ini kalau menurut saya merupakan perkembangan dari VioMagz namun dengan banyak sekali penambahan fitur-fitur baru yang penampilan dari template LinkMagz ini bisa kamu lihat pada blog pribadi saya berikut ini: fandipres BLOG

Sesuai dengan judul pembahasan kita kali ini, saya disini akan memberikan tutorial cara membuat menu navigasi footer LinkMagz menjadi seperti VioMagz dimana menu-menu navigasi seperti about, disclaimer, dan sebagainya ditempatkan pada bagian footer dari template VioMagz ini.

Cara Membuat Menu Navigasi Footer LinkMagz Seperti VioMagz

1. Masuk ke dashboard Blogger, pilih menu Tata Letak > pilih edit Footer.

Edit Menu Navigasi Footer LinkMagz Seperti VioMagz

2. Salin kode yang ada di bawah ini, lalu tempelkan ke bagian widget Footer. Untuk posisinya sendiri terserah apakah kamu mau menempatkannya di bawah atau di atas link copyright.

<ul>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
  <li><a href='#'>Sitemap</a></li>
</ul>

3. Klik Simpan.

Sampai saat ini menu navigasi yang kita buat akan memiliki tampilan seperti di bawah yaitu susunan menunya berderet ke bawah bukan ke samping. Untuk membuatnya agar tersusun ke samping seperti pada VioMagz, kita akan menambahkan CSS.

Membuat Menu Navigasi Footer LinkMagz Seperti VioMagz
Tampilan navigasi sementara sebelum ditambahkan CSS.

CSS untuk Membuat Menu Navigasi Footer LinkMagz Seperti VioMagz:

1. Masuk ke dashboard Blogger lagi, pilih menu Tema > pilih Edit HTML.

2. Cari kode ]]></b:skin>, gunakan Ctrl + F untuk mempermudah pencarian.

3. Salin kode berikut lalu tempelkan di atas kode ]]></b:skin> tadi.

/* Navigasi Footer VioMagz */
#footer-content ul {
 list-style: none;
 margin: 0;
 }
#footer-content ul li {
 display: inline-block;
 margin: 6px 0;
 }
#footer-content ul li::after {
 content:" \00B7";
 }
#footer-content ul li:last-child::after {
 content:"";
 }
#footer-content ul li a {
 font-size:14px;
 font-weight:bold;
 margin: 0 15px;
 }
@media only screen and (max-width:1080px){
 .footer-widget, #footer-content-container {
  max-width: 100%;
  }
 }
@media only screen and (max-width:480px){
 #footer-content ul li a {
  margin: 0px 8px;
  }
 }

4. Terakhir klik simpan.

Untuk penampilannya menu navigasinya sendiri bisa kamu lihat pada blog pribadi saya yang ada di atas dimana tampilannya sudah mirip dengan menu navigasi pada VioMagz yang menu-menunya tersusun ke samping.

UPDATE:
Cara di atas berlaku untuk LinkMagz versi 1.3 ke bawah karena pada versi 1.3 sendiri sudah terdapat widget khusus yang dapat digunakan untuk membuat menu navigasi pada bagian footer.

Demikianlah Cara Membuat Menu Navigasi Footer LinkMagz Seperti VioMagz, jika kamu masih bingung silahkan tanyakan bagian mana yang membuatmu  bingung pada kolom komentar yang ada di bawah. Terima kasih.

Related Posts
Fandi Presly Simamora
Lecturer, code lover, technology enthusiast, enjoys sharing various things through writing, and of course, just a regular human being. Hello world :)

Related Posts

8 komentar

  1. Sangat bermanfaat 👍🏻👍🏻

    BalasHapus
  2. Ada yang tahu kenapa LinkMagz kalo dipasang circle animasi pada header/footer jadi gk bisa klik apa2 ?

    BalasHapus
  3. Kasih foto dong kan saya gatau dimana dimana nya

    BalasHapus
  4. kalau pakai widget custom css di menu tata letak bagaimana bang?

    BalasHapus
  5. lho kalau CSSnya gak terhubung ke class, ID atau Classnya di letakan dimana ya Mas?

    BalasHapus