Skip to main content

Cara Membuat "Split Button Dropdowns" Dengan Sangat Mudah

Split Button Dropdowns merupakan suatu style dari HTML yang dapat kita utak utik sebagaimana kita mau atau dapat kita seseaikan dengan tampilan Blog kita masing-masing.
Cara Membuat "Split Button Dropdowns" dengan Sangat Mudah
Kali ini saya akan memabahas tentang Cara Membuat "Split Button Dropdowns" dengan Sangat Mudah dengan tujuan mempercantik tampilan Blog kalian. bagaimana cara melakukanya? simak berikut ini:

Cara Membuat "Split Button Dropdowns" dengan Sangat Mudah

Untuk membuat "Split Button Dropdowns" perhatikan langkah-langkah berikut ini.
  1. Login blogger.
  2. Copas kode di bawah ini dan letakan sebelum kode </style> pada Tema edit HTML.
    .btn {
      background-color: #2196F3;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      outline: none;
    }
    
    .dropdown {
      position: absolute;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {background-color: #ddd}
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .btn:hover, .dropdown:hover .btn {
      background-color: #0b7dda;
    }
    
  3. Simpan template.
Cara untuk menjalan kode di atas sebagai berikut:

Menjalankan Split Button Dropdowns

  1. Buat postingan dengan menekan Entri baru pada Postingan.
  2. Masuk dalam mode HTML.
  3. Copas code di bawah ini dan sesuaikan isi text didalamnya sesuai dengan keinginan.
    <button class="btn">Button</button><div class="dropdown"><button class="btn" style="border-left:1px solid #0d8bf2">></button>
    <div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></div>
    
Untuk Contoh atau Demo dari kode di atas, dapat Anda lihat di bawah ini: Itulah Cara Membuat "Split Button Dropdowns" dengan Sangat Mudah, semoga bermanfaat.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar