Hướng Dẫn Tạo Split Button Download Cho Blogspot Đơn Giản

Tạo Split Button Download Cho Blogspot

Bài viết hôm nay mình sẽ hướng dẫn cho các bạn cách tạo Split Button Download Trên Blogspot một cách nhanh chóng và đơn giản. Hãy cùng làm theo Mách Dạo nhé.

CÁCH TẠO SPLIT BUTTON DOWNLOAD CHO BLOGSPOT

Split Button có những lợi ích gì?
  • Gộp các link download khác nhau vào chung 1 button 
  • Tiện lợi lựa chọn bằng dropdowns 
Các bước tạo Split Button Download 

Bước 1 : Các bạn copy code này và đặt vào cặp lệnh <style></style>

/* Dropdown Button */
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: absolute;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover, .dropdown:hover .btn  {

  background-color: #0b7dda;

}

Bước 2 : Copy dòng code này vào nơi mà bạn muốn hiển thị -> Done !

<button class="btn">Download</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid navy">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="machdao.online">Link 1</a>
    <a href="machdao.online">Link 2</a>
    <a href="machdao.online">Link 3</a>
  </div>
</div>

**Note : machdao.online : bạn thay đổi thành link của bạn

TẠM KẾT 

Qua bài viết cách tạo Split Button Download khá đơn giản. Nếu mọi người thấy hữu ích hãy để lại bình luận gì đó ở phía dưới nhé. Cảm ơn các bạn đã đọc!

Post a Comment

Previous Post Next Post