Download box adalah sebutan untuk sebuah area postingan yang berisi link download. Download box atau download area biasanya dipergunkaan untuk menempatkan link-link download sebuah film, movie, anime, manga hingga dokumen.
Kali ini aku mau membuat download box area untuk blog anime atau manga yang mana jika kalian memiliki blog anime dan manga sangat cocok untuk menggunakan source kode download box anime berikut.
Source kode download box area anime dan manga Hide show HTML, CSS dan Javascript.
Biasanya download area anime dan manga tampil dengan begitu-begitu saja, nah disini kalian bisa mencoba download box dengan beberapa perpaduan javascript agar memiliki efek hide show. Cara kerjanya sama dengan download area anime dan manga lainnya, namun dengan tampilan yang berbeda.
Link download box blog anime dan manga disini akan disembunyikan, jadi jika ingin memunculkan link download, pengunjung diharuskan mengklik tombol yang disediakan. Berikut ini souce kode dan pemasangan download box area anime atau manga untuk blogger dan wordpress.
Setting download box blogger anime dan manga
- Masuk ke blogger.com
- Klik menu Thema > Edit HTML
- Cari kode </head> dan pastekan kode berikut ini diatasnya.
<style type="text/css">
/* Download area blogger anime dan manga source by bloggerxcode
============================ */
#db-area{margin:0 auto;margin-bottom:5px;position:relative;padding:2px;border:1px solid #ddd;background:#eee}
#db-area button{background-color: red;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:#F59F3D}
#db-area .db-ini ul li:nth-child(odd) b{background-color:#69A9F2}
</style>
<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>
Sampai sini kita sudah selesai setting tema blogger agar support membuat download box anime dan manga. Selanjutnya, kalian pilih ingin memasang download box anime atau manga? berikut ini source kode untuk postingan blogger anime dan manga dengan hide show javascript.
Membuat postingan download blog anime.
- Buat postingan baru.
- Berikan judul artikel dan berbagai info atau sinopsis anime yang akan di publish.
- Dibagian paling bawah post, kalian copas kode berikut.
- Publish.
<div id="db-area">
<button id="db-toggle"><span>Download - <Strong>Nama Anime</Strong></span></button>
<div id="db-isi" style="display: none">
<div class="db-ini">
<h2>Episode 1</h2>
<ul>
<li><b>720p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>480p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>360p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>240p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
</ul>
</div>
<div class="db-ini">
<h2>Episode 2</h2>
<ul>
<li><b>720p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>480p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>360p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>240p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
</ul>
</div>
<div class="db-ini">
<h2>Episode 3</h2>
<ul>
<li><b>720p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>480p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>360p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>240p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
</ul>
</div>
</div>
</div>
Membuat postingan download blog mang.
- Buat postingan untuk manga.
- Isikan judul dan berbagai informasi manga.
- Dibagian paling bawah kalian letakkan kode berikut untuk download area atau download boxnya.
- Publish artikel.
<div id="db-area">
<button id="db-toggle"><span>Download - <Strong>Nama Manga</Strong></span></button>
<div id="db-isi" style="display: none">
<div class="db-ini">
<h2>Volume 1</h2>
<ul>
<li><b>PDF</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>EPUB</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>RAR</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>240p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
</ul>
</div>
<div class="db-ini">
<h2>Volume 2</h2>
<ul>
<li><b>PDF</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>EPUB</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>RAR</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>ZIP</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
</ul>
</div>
<div class="db-ini">
<h2>Volume 3</h2>
<ul>
<li><b>PDF</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>EPUB</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>RAR</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
<li><b>240p</b> <a href="#">Link Download 1</a> <a href="#">Link Download 2</a> <a href="#">Link Download 3</a></li>
</ul>
</div>
</div>
</div>
Kelebihan download box dengan javascript.
Untuk kelebihan dan kekurangan dari download box dengan javacript kami tuliskan sebagai berikut.
- Lebih ringan, karena biasanya efek hide show menggunakan jquery.
- Simple
- Elegan
- Penempatan link yang mudah
- Sangat bagus jika blog kalian memasang iklan PPC.
Kelebihan
- Cukup sulit jika kalian tidak teliti pemasangannya
- Kadang pengunjung akan kesal jika tidak tahu dimana link downloadnya berada, jadi dianjurkan kalian membuat notif alert ke pengunjung dimana letak link downloadnya
Kekurangan
Penutup.
Begitulah cara membuat postingan download box anime dan manga di blogger. Kode HTML, CSS dan javascript download box anime dan manga kami buat untuk kalian yang mencari source kode download box blogger dan wordpress. Sekian untuk artikel kali ini.