Membuat Download Box seperti Meownime

Membuat Download Box seperti Meownime

Codepelajar.com - Selamat malam sobat codepelajar, malam-malam begini admin dapat salah satu kiriman tutorial menarik nih seputar HTML dan CSS. Kiriman tutorial ini adalah Cara Membuat Download Box seperti Meownime. Tutorial ini dikirim oleh akun seseorang dengan akun facebook Kazushiki-Kun yang sebelumnya memberikan tutorial membuat Download Box Nekopoi juga pada beberapa waktu lalu yang sempat kami post. Kiriman ini sudah agak lama sekitar 5 hari lalu dan baru bisa saya posting disini sekarang.

Seperti yang kita tahu, banyak sekali situs Fansub dan Fanshare Anime di internet, salah satunya situs fanshare yang terkenal akan kemudahan download Animenya yaitu Meownime - Situs Download Anime Bahasa Indonesia. Bagi kamu seorang otaku yang gemar download anime "GRATISAN" tentunya tidak asing dengan situs ini. Entah kenapa dengan tampilan website yang sederhana dan biasa saja, situs Meownime ini bisa se-famous sekarang ini. Usut punya usut banyak sekali feedback positif yang salah satunya dalam hal kelengkapan downloadnya. Sehingga banyak sekali website yang meniru mulai dari nama yang sama, template sampai download boxnya.


Pada kali ini, saya akan membagikan tutorial download box meownime yang terbaru, untuk gambaran hasilnya seperti gambar di bawah ini:


Membuat Download Box seperti Meownime


Cara Membuat Download Box seperti Meownime

Berikut kode HTML untuk Download Boxnya:

<!-- CODEPELAJAR.COM | HTML -->
<div class="Meownime-downloadbox-wrapper" dir="ltr" style="text-align:left" trbidi="on">
<table class="RubyKurosawa_LoveLiveTeamB7" style="width:100%">
<tbody>
<tr>
<td class="RubyKurosawa_LoveLiveTeamB8" bgcolor="#33363b">
<center>
<span style="color:#ffffff;"><b>Link Download #1 — </b></span><b><span style="color:#da4453;">Episode 000 – 000</span></b>
</center>
</td>
</tr>
</tbody>
</table>
<div class="RubyKurosawa_LoveLiveTeamB5 RubyKurosawa_LoveLiveTeamB6 ">Episode 00 Dan 00 Hanya Episode Recap, Sengaja Tidak Disertakan Pada Link Download Di Bawah Ini</div>
<div id="RubyKurosawa_LoveLiveTeamB">
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB3" target="_blank" href="#">240p</a>
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB4" target="_blank" href="#">360p</a>
</div>
<div id="RubyKurosawa_LoveLiveTeamB">
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB4" target="_blank" href="#">480p</a>
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB3" target="_blank" href="#">720p</a>
</div>
<div id="RubyKurosawa_LoveLiveTeamB">
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB4" target="_blank" href="#">Mkv 480p</a>
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB3" target="_blank" href="#">Mkv 720p</a>
</div>
<div id="RubyKurosawa_LoveLiveTeamB">
<a class="RubyKurosawa_LoveLiveTeamB2 RubyKurosawa_LoveLiveTeamB1" target="_blank" href="#">BATCH</a>
</div>
</div>


Berikut ini CSS untuk Download Box Meownime:

<!-- CODEPELAJAR.COM | CSS -->
<style type='text/css'>
/* CSS Download Box Meownime v3 ala Kazushiki aka Abrian T. */
.Meownime-downloadbox-wrapper * {box-sizing: border-box;}
#RubyKurosawa_LoveLiveTeamB {text-align:center}
#RubyKurosawa_LoveLiveTeamB a {text-align:center;font-weight:650;color:#ffffff;margin-bottom:10px}
.RubyKurosawa_LoveLiveTeamB1 {width:99%}
.RubyKurosawa_LoveLiveTeamB2 {background-color:#1e73be;border-color:#1e73be;display:inline-block;padding:6px 12px;color:#ffffff;text-transform:uppercase;font-size:14px;font-weight:650;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;background-image:none;border:2px solid transparent;border-radius:9px;-ms-touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.RubyKurosawa_LoveLiveTeamB2:hover {background-color:#363636;border-color:#363636;color:#ffffff}
.RubyKurosawa_LoveLiveTeamB3 {width:49%;float:left}
.RubyKurosawa_LoveLiveTeamB4 {width:49%;float:right}
.RubyKurosawa_LoveLiveTeamB5 {padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}
.RubyKurosawa_LoveLiveTeamB6 {text-align:center;color:#31708f;background-color:#d9edf7;border:2px solid #31708f}
.RubyKurosawa_LoveLiveTeamB7 {width:100%;max-width:100%;margin-bottom:20px}
.RubyKurosawa_LoveLiveTeamB8 {padding:8px;line-height:1.42857143;vertical-align:top}
</style>


Sesuaikan konten dari download box seperti isi url dan nama downloadnya!

Demikian tutorial Download Box yang saya berikan, mengingat saya juga pernah membuat Modal Download Box pada postingan sebelumnya. Jadi jika ada kesusahan dan request jangan sungkan untuk bertanya pada kolom komentar. Nantikan tutorial anti mainstream berikutnya cuma di Codepelajar.com.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel