Download box sudah tidak asing lagi jika kalian sering mengunjungi website download film atau anime. Download box bisa kita pasang diblogger. Salah satu download box yang saya sukai adalah miliknya web meownime tempat download anime yang udah kandas webnya.
Membuat download box diblogger sangatlah mudah, silahkan simak artikel ini.
Baca : Pasang download box responsif pada blogger
Membuat download box anime seperti meownime.
Dibawah ini akan saya jelaskan bagaimana membuat link download seperti meownime sama persis. Tapi sebelum itu kita harus menambahkan beberapa kode CSS3, jquery dan javascript pada template blogger. Beriku cara pasang kode CSS3 download box meownime.
- Masuk blogger > tema > edit tema.
- Gunakan CTRL + F untuk mencari tag </head>.
- Copy dan pastekan kode CSS dibawah ini tepat diatas tag </head>.
- Lalu gunakan lagi CTRL + B untuk mencari tag </body>.
- Copy dan pastekan kode Jquery dan Javascript untuk hide show tombol download tepat diatas tag </body>.
- Simpan dan selesai.
<!-- START DOWNLOAD BOX by KENSCRIPTS -->
<style type="text/css">
.wrap-db { width: 100%; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
.tbl-db { color: #250e0e; font-family: verdana; margin: 10px 0; }
.tbl-db table { width: 100%; border-spacing: 0; border-collapse: collapse; margin: 0 auto; background: transparent; }
.tbl-db caption { font-style: unset !important;padding: 10px; background: #070023; color: white; font-weight: bold; font-size: 24px; text-align: center; }
.tbl-db tr:nth-child(odd) { background: #03a9f4; color: white; }
.tbl-db td:first-of-type { width: 25%; }
.tbl-db td { padding: 8px; }
.tbl-db tr:nth-child(even) { background: #03a9f4; color: white; }
.tbl-db tr { border-top: 1px solid; }
.sum-db { color: #333; width: 100%; padding: 20px 0; text-align: center; margin: 0 auto; background: #f1f1f1; }
.db-link { margin: 0 auto; width: 70%; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; padding: 2px 0; }
.tombol { 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; }
.db-link .tombol: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; }
.db-link.isi-dl-hide .tombol: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 }
.table a:hover{text-decoration: none;color: #dddddd }
.table a:focus{text-decoration: none;color: #cc0000 }
.db-link tr:nth-child(odd) { background: #03a9f4; color: white; }
.db-link tr:nth-child(even) { background: #00c1ff; color: white; }
.table td { padding: 8px; border-bottom:2px solid white;}
.db-link.isi-dl-hide>.isi-dl { height: 0; margin: 0; padding: 0; overflow: hidden; border: none; opacity: 0; }
.isi-dl-hide{padding: 2px 0}
@media screen and (max-width: 960px) {
.tbl-db,.tbl-db table, .db-link,.sum-db{width: 100%;padding: 2px 0;}
.tbl-db td:first-of-type{width: 30%;}
</style>
<!-- END DOWNLOAD BOX KENSCRIPTS -->
<!-- JQUERY KENSCRIPTS -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- END JQUERY KENSCRIPTS -->
<!-- START DOWNLOAD BOX JAVASCRIPTS KENSCRIPTS -->
<script type="text/javascript">
jQuery(document).ready(function() { $("body").on("click", ".tombol", function(e) { var a = $(this).parent();
a.toggleClass("isi-dl-hide"), a.parent(".db").children(".db-link").not(a).addClass("isi-dl-hide"), e.preventDefault() })});
</script>
<!-- END DOWNLOAD BOX JAVASCRIPTS KENSCRIPTS -->
Baca : Membuat marjup artikel download lagu lengkap
Nah jika telah selesai memasang kode css dan script-nya, kita lanjut untuk memasang markup HTML download box pada postingan artikel blog.
- Buatlah postingan yang akan akan ditambahkan markup download box.
- Copy dan pastekan kode HTML berikut ini pada postingan blog, ingat harus dalam mode HTML agar kode HTML berjalan dengan baik.
- Publish dan selesai.
<div class="tbl-db">
<table>
<caption>Link Download</caption>
</table>
<div class="db-link isi-dl-hide">
<div class="tombol">
<b>JUDUL ANIME —
<span style="color: #03a9f4;">Mp3</span>
</b>
</div>
<div class="isi-dl">
<table class="table table-hover">
<tbody>
<tr>
<td>
<center>EPISODE BERAPA — (<strong>UKURAN FILE</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<a href="#LINK" rel="nofollow" target="_blank" title="Download Anime">Google Drive</a> |
<a href="#LINK" rel="nofollow" target="_blank" title="Download Anime">Solidfile</a> |
<a href="#LINK" rel="nofollow" target="_blank" title="Download Anime">Zippyshare</a> |
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="db-link isi-dl-hide">
<div class="tombol">
<b>Afterglow [Instrumental] —
<span style="color: #03a9f4;">Mp3</span>
</b>
</div>
<div class="isi-dl">
<table class="table table-hover">
<tbody>
<tr>
<td>
<center>Rumbling Memory [Instrumental] — (<strong>9MB</strong>)</center>
</td>
</tr>
<tr bgcolor="#00c1ff">
<td>
<center>
<a href="#LINK" rel="nofollow" target="_blank" title="Download Anime">Google Drive</a> |
<a href="#LINK" rel="nofollow" target="_blank" title="Download Anime">Solidfile</a> |
<a href="#LINK" rel="nofollow" target="_blank" title="Download Anime">Zippyshare</a> |
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Baca : Source kode download box meownime lengkap
Itulah Cara memasang download box sangat mirip dengan meownime. Silahkan praktekkan untuk melihat hasilnya. Sekian dari saya.