Hallo kali ini kenny akan membagikan source kode untuk membuat download box baik untuk anime, movie, film, tv series dan sebagainya.
Source kode download box untuk blogger dan wordpress ini merupakan download box yang terinspirasi dari website meownime.com.
Lihat Juga : Membuat Download Box Anime
Meskipun website download meownime sudah tidak aktip lagi.
Disini kenny menggunakan Jquery untuk memberikan efek hide dan show pada link downloadnya.
Cara membuat download box meownime dengan Jquery hide dan show
1. Siapkan Notepad, dan Browser
2. Copy dan pastekan code dibawah ini pada notepad anda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meow Download Rev</title>
<style type="text/css">
.bungkus-db-kenscripts { width: 100%; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
.tbl-db-kenscripts { color: #250e0e; font-family: verdana; margin: 10px 0; }
.tbl-db-kenscripts table { width: 70%; border-spacing: 0; border-collapse: collapse; margin: 0 auto; background: transparent; }
.tbl-db-kenscripts caption { padding: 10px; background: #070023; color: white; font-weight: bold; font-size: 24px; text-align: center; }
.tbl-db-kenscripts tr:nth-child(odd) { background: #03a9f4; color: white; }
.tbl-db-kenscripts td:first-of-type { width: 25%; }
.tbl-db-kenscripts td { padding: 8px; }
/* Visit https://kenscripts.blogspot.com for more code; */
.tbl-db-kenscripts tr:nth-child(even) { background: #03a9f4; color: white; }
.tbl-db-kenscripts tr { border-top: 1px solid; }
.link-db-kenscripts { margin: 0 auto; width: 70%; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; padding: 2px 0; }
.tombol-db-kenscripts { color: #fff; display: inline-block; cursor: pointer; -moz-border-radius: 3px; background: #070023; width: 100%; padding: 8px 0; line-height: 1.42857143; vertical-align: top; text-align: center; clear: both; }
.link-db-kenscripts .tombol-db-kenscripts:before { content: "\f068"; margin-right: 5px; background: blue; font-family: FontAwesome; display: inline-block; padding: 0px 10px; border-radius: 3px; margin: 0 8px; -moz-border-radius: 3px; float: left; }
.link-db-kenscripts.isi-db-kenscripts .tombol-db-kenscripts:before { content: "\f067"; margin-right: 5px; font-family: FontAwesome; display: inline-block; padding: 0px 10px; margin: 0 8px; border-radius: 3px; -moz-border-radius: 3px; background: #cc0000; float: left; }
.table-hover>tbody>tr:hover { background: #00c1ff; }
.table { width: 100%; border-collapse: separate; max-width: 100%; margin-bottom: 20px; }
.table a{text-decoration: none;color: #fff }
/* Visit https://kenscripts.blogspot.com for more code; */
.table a:hover{text-decoration: none;color: #dddddd }
.table a:focus{text-decoration: none;color: #cc0000 }
.link-db-kenscripts tr:nth-child(odd) { background: #03a9f4; color: white; }
.table td { padding: 8px; }
.isi-db-kenscripts-dl span{color: white}
.link-db-kenscripts.isi-db-kenscripts>.isi-db-kenscripts-dl { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; }
.isi-db-kenscripts{padding: 2px 0}
@media screen and (max-width: 960px) {
.tbl-db-kenscripts,.tbl-db-kenscripts table, .link-db-kenscripts{width: 100%;padding: 2px 0;}
.tbl-db-kenscripts td:first-of-type{width: 30%;}
}
</style>
</head>
<body>
<div class="bungkus-db-kenscripts"> <!-- Bungkus Download box -->
<div class="link-db-kenscripts isi-db-kenscripts"> <!-- Downloada Box 1 -->
<div class="tombol-db-kenscripts">
<b>Link Download #7 —
<span style="color: #03a9f4;">Batch</span>
</b>
</div>
<div class="isi-db-kenscripts-dl">
<table class="table table-hover">
<tbody>
<tr>
<td>
<center>Episode 1 — (<strong>185.89 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
<tr>
<td>
<center>Episode 2 — (<strong>203.25 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
<tr>
<td>
<center>Episode 3 — (<strong>141.73 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
<tr>
<td>
<center>Episode 4 — (<strong>171.89 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- Akhir Download Box 1 -->
<div class="link-db-kenscripts isi-db-kenscripts"> <!-- Downloada Box 2 -->
<div class="tombol-db-kenscripts">
<b>Link Download —
<span style="color: #03a9f4;">Batch</span>
</b>
</div>
<div class="isi-db-kenscripts-dl">
<table class="table table-hover">
<tbody>
<tr>
<td>
<center>Batch 240p | (<strong>185.89 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
<tr>
<td>
<center>Batch 360p | (<strong>203.25 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
<tr>
<td>
<center>Batch 480p | (<strong>141.73 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
<tr>
<td>
<center>Batch 720p | (<strong>171.89 MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<!-- DISINI TEMPAT MENGISI LINK DOWNLOADNYA -->
<!-- CONTOHNYA SEPERTI DIBAWAH -->
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- Akhir Downloada Box 2 -->
</div> <!-- Akhir Bungkus Download Box -->
<!-- Visit https://kenscripts.blogspot.com for more code -->
<!-- Jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() { $("body").on("click", ".tombol-db-kenscripts", function(e) { var a = $(this).parent();
//Visit https://kenscripts.blogspot.com for more code
a.toggleClass("isi-db-kenscripts"), a.parent(".db").children(".link-db-kenscripts").not(a).addClass("isi-db-kenscripts"), e.preventDefault() })});
</script>
</body>
</html>
3. Save dengan format .html dan cobalah jalankan di browser kalian.
Itulah source kode membuat download box seperti meownime dengan jquery hide dan show.
Demo