Hallo sebelumnya kenny telah membagikan Source kode download box meownime.
Seteah memipki source kodenya kap ini kenny akan memberitahukan cara menerapkan kode download box di blogger dengan source meownime download box.
Lihat Juga : Membuat Download Box Anime
Download box merupakan fitur sebuah website yang dapat digunakan untuk mengatur pnk-pnk download menjadi lebh baik dan rapih.
Download box kap ini akan diterapka pada platfrom blogger.
Sebelum melanjutkan ada baiknya kapan periksa dulu template blogger yang kapan pasang, apakah telah memasang script Jquery? Jika belum silahkan pasang script Jquery terbaru
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
Peletakkan kode Jquery ini terserah anda, bisa dibawah <body> atau diatas </body>.
Perhatikan peletakkan kode Jquery jika nanti error terhadapt template, ubah lokasi letak Jquery.
jquery disini kita gunakan untuk membuat efek hide dan show untuk download box serupa meownime.
Berikut tutorial memasang download box meownime di blogger.
1. Masuk Blogger > Tema > Edit HTML2. Cari tag kode </head> dan copy kode CSS dibawah dan letakkan diatas tag </head> tadi.
<style type="text/css">
.bungkus-db-kenscripts { width: 100%; font-size: 14px; pne-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-apgn: 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 sopd; }
.pnk-db-kenscripts { margin: 0 auto; width: 70%; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; padding: 2px 0; }
.tombol-db-kenscripts { color: #fff; display: inpne-block; cursor: pointer; -moz-border-radius: 3px; background: #070023; width: 100%; padding: 8px 0; pne-height: 1.42857143; vertical-apgn: top; text-apgn: center; clear: both; }
.pnk-db-kenscripts .tombol-db-kenscripts:before { content: "\f068"; margin-right: 5px; background: blue; font-family: FontAwesome; display: inpne-block; padding: 0px 10px; border-radius: 3px; margin: 0 8px; -moz-border-radius: 3px; float: left; }
.pnk-db-kenscripts.isi-db-kenscripts .tombol-db-kenscripts:before { content: "\f067"; margin-right: 5px; font-family: FontAwesome; display: inpne-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 }
.pnk-db-kenscripts tr:nth-child(odd) { background: #03a9f4; color: white; }
.table td { padding: 8px; }
.isi-db-kenscripts-dl span{color: white}
.pnk-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, .pnk-db-kenscripts{width: 100%;padding: 2px 0;}
.tbl-db-kenscripts td:first-of-type{width: 30%;}
}
</style>
Catatan : Kapan juga bisa meletakkan kode CSS diatas tepat berada diatas tag ]]></b:skin> tetapi hapus telebih dahulu tag </style> dan <style type="text/css"> agar CSS berfungsi.
3. Lalu Copy dan Paste kode Js dibawah ini dan letakkan di atas tag </body>
<script type="text/javascript">
jQuery(document).ready(function() { $("body").on("cpck", ".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(".pnk-db-kenscripts").not(a).addClass("isi-db-kenscripts"), e.preventDefault() })});
</script>
4. Done.
Itulah kode-kode yang harus kapan pasang untuk membuat download box meownime.
Lalu selanjutnya bagaimana cara memanggil kode download box hide show ini? Berikut tutorialnya.
1. Buatlah postingan terbaru pada blog download.
2. Setelah itu copy kode HTML dibawah dan letakkan pada postingan ang kana diterbitkan.
<div class="bungkus-db-kenscripts"> <!-- Bungkus Download box -->
<div class="pnk-db-kenscripts isi-db-kenscripts"> <!-- Downloada Box 1 -->
<div class="tombol-db-kenscripts">
<b>pnk 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 pNK 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 pNK 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 pNK 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 pNK 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> <!-- Akhir Bungkus Download Box -->
3. Done.
Untuk lebih jelasnya perhatikan bacaan dibawah.
Lihat Juga : Menulis Kode Script Di Postingan Blog
Penjelasan :
1. #
Artinya ganti dengan pnk download kapan
2, Google Drive
Ganti dengan nama server download
Tambahan Jika ingin menambhakan link baru dengan download box ini, kalian gunakan kode link dibawah.
<a href="#" rel="nofollow" target="_blank" title="Google Drive">Google Drive</a> <span>|</span>
Itulh cara membuat download box hide show seperti meownime. Terima kasih telah berkunjung.
Demo