Hộp download Anime và Manga là gì? Ờ thì nó là hộp để link download Anime và Manga??? 🤨 Với một số bạn nào thường dùng blog để làm nơi lưu trữ phim, anime, manga các kiểu thì bạn đặt link tải kiểu gì nè?
Đa số các mẫu blog không có code hỗ trợ sẵn, do vậy chúng ta chỉ có cách tạo link trực tiếp luôn trên bài viết, trông thì đơn giản nhanh gọn nhưng không đẹp mắt cho lắm, nhất là với các blog làm về nội dung mà hay chèn link tải chia thành nhiều tập, độ phân giải cùng vô số server để dự phòng.
Vậy phải làm như nào? Bên dưới đây chính là cách tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript.
• Ưu điểm: Code nhẹ không gây nặng trang, trông đẹp mắt và chuyên nghiệp hơn nhiều.
• Bạn có thể xem demo từ ảnh trên hoặc click vào Download: Tên Anime: Ẩn/Hiện ở bên dưới. 👇
Bước 1: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Chèn CSS dưới đây, nhớ là dán trước thẻ đóng </head> xong lưu lại.
<style type='text/css'>
/* Tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript
============================ */
#db-area{margin:0 auto;margin-bottom:5px;position:relative;padding:2px;border:1px solid #ddd;background:#eee}
#db-area button{background-color: #3399FF;padding: 10px 12px; border-radius: 3px;border: none;color: #fff;width: 50%;}
#db-area .db-ini h2{margin:auto;font-size:15px;background-color:#333;display:block;color:white;padding:5px;border-radius:1px}
#db-area .db-ini ul{list-style:none;padding:5px;margin:auto}
#db-area .db-ini ul li{margin:3px auto}
#db-area .db-ini ul li b,#db-area .db-ini ul li a{display:inline-block;padding:3px 5px;border-radius:3px;text-decoration:none;color:white}
#db-area .db-ini ul li a{background-color:#7e8392}
#db-area .db-ini ul li a:hover{text-decoration:underline}
#db-area .db-ini ul li:nth-child(even) b{background-color:#df5b5b}
#db-area .db-ini ul li:nth-child(odd) b{background-color:#339999}
</style>
Bước 2: Thêm đoạn JavaScript dưới đây vào trước thẻ đóng </body> và lưu lại.
<script type="text/javascript">
const targetDiv = document.getElementById("db-isi");
const btn = document.getElementById("db-toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
};
</script>Bước 3: Vào bài viết Blogspot > Chuyển sang Chế độ xem HTML > copy và dán đoạn code dưới này vào trong bài viết của bạn.
<div id="db-area">
<span style="font-family: Mali; font-size: medium;"><button id="db-toggle"><span><strong>Download: </strong>Tên Anime: Ẩn/Hiện</span></button>
<div id="db-isi" style="display: none;">
<div class="db-ini">
<h2>Episode 1</h2>
<ul>
<li><b>360p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>480p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>720p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>1080p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
</ul>
</div>
<div class="db-ini">
<h2>Episode 2</h2>
<ul>
<li><b>360p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>480p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>720p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>1080p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
</ul>
</div>
<div class="db-ini">
<h2>Episode 3</h2>
<ul>
<li><b>360p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>480p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>720p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
<li><b>1080p</b> <a href="#">Server: Google Drive</a> <a href="#">Server: 2</a> <a href="#">Server: 3</a></li>
</ul>
</div>
</div>
</span></div>Lưu ý: Trước khi dùng đoạn code này, hãy viết bài nội dung quần văn què gì đó rồi chuyển sang chế độ xem HTML > Copy code trên dán vào cuối bài viết của bạn. Chủ yếu là để trông chuyên nghiệp và đẹp mắt hơn ấy mà. 🙄
Đây là code lụm bên trang indo, nguồn code.ruidrive nhé!
Hashtag: Tạo hộp download Anime và Manga với chức năng Ẩn/Hiện Javascript
Không có nhận xét nào
Đăng nhận xét