SMP Negeri 1 Nanga Mahap

Cara membuat scrolling menu menggunakan HTML di elementor

Untuk mempercantik tampilan website namun tanpa mengabaikan kebergunaan dapat dilakukan dengan berbagai cara, termasuk dengan membuat scrolling menu menggunakan HTML.

Membuat scrolling menu menggunakan HTML di elementor tidak sulit, cukup dengan beberapa langkah mudah ada dapat segera membuat scrolling menu di website anda. 

Pada postingan kali ini, kami akan membuat tutorial step per step membuat scrolling menu menggunakan HTML di elementor, dan akan menggunakan elementor gratis.

Langkah – langkah membuat scrolling menu menggunakan HTML di elementor akan lebih ringkas dibanding tutorial Membuat custom sticky button di header menggunakan Elementor gratis dan Cara membuat Sticky Footer mengambang menggunakan Elementor.

Oke langsung saja kita mulai langkah – langkah membuat scrolling menu menggunakan HTML di elementor :

  • Pertama login ke wordpress sebagai admin
  • Kemudian laman yang akan di tambahkan scrolling menu (Siswa bisa menempatkan scrolling menu di header, footer ataupun home page
  • Edit laman menggunakan elementor
  • setelah di elementor editor, tambahkan sebuah section untuk menambahkan widget yang akan kita jadikan scrolling menu
  • setelah berhasil membuat section, tambahkan widget HTML di section tersebut.
  • Copy kode HTML Berikut ke widget HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
  background-color: #3264FF;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: whitesmoke;
  text-align: center;
  padding: 5px;
  margin-top: 5px
  margin-bottom: 5px;
  text-decoration: none;
  }
div.scrollmenu a:hover {
  background-color: #777;
}
</style>
</head>
<body>

<div class="scrollmenu">
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>
  <a href="https://namadomain.com/menu/">nama menu</a>

  
</div>
  • Edit kode HTML scrolling menu pada bagian link href dengan link yang hendak arahkan dan ganti nama menu dengan nama yang sobat inginkan sebagai nama link.
  • Setelah selesai mengedit kode HTML scrolling menu, save kode HTML
  • Selesai, scrolling menu sobat Idemudah sudah dapat ditampilkan.

Tutorial membuat scrolling menu menggunakan HTML di elementor  ini sudah kami buat untuk mudah dipahami dan diimplementasikan oleh siswa.

Contoh implementasi dari scrolling menu menggunakan HTML ini dapat dilihat pada website Idemudah.comserbahits.com, kioslokal.my.id dan bursajasa.my.id

Semoga saja tutorial membuat scrolling menu menggunakan HTML di elementor gratis ini dapat bermanfaat bagi siswa semua dalam sebagai bahan pembelajaran dan mempercantik Website.

Sumber : Web Idemudah.com

Link Tulisan Asli : Cara membuat scrolling menu menggunakan HTML di elementor gratis

Tinggalkan komentar