Cara Membuat Download Box Anime Seperti Moekun

Kembali lagi nih :D pada kali ini saya akan membuat Tutorial Download Box untuk Blogger Anime pasti donk harus ada Download Box supaya menambah menarik lagi bagi blognya, sepertinya saya ngak perlu menjelaskan panjang lebar tentang Download Box ini. Coba saja kamu masuk ke web Awsubs atau Oploverz dan Samehadaku pasti nya akan terdapat Download Box.

Cara Membuat Download Box Anime Seperti Moekun

Nah saya membuat yang cukup berbeda dengan tampilan 4 Box maupun lebih dengan tambahan float Left agar menjadi 4 saat menampilkan Download Box seperti gambar diatas. Download Box diatas saya buat untuk blog anime yang saya bikin sendiri karena harus mempunyai ciri khas :D

Cara Membuat Download Box Moekun


Untuk yang pertama yaitu membuat dulu CSS nya kamu enggak perlu membuat dari awal cukup dengan copy css dibawah ini dan simpan ke <b:skin> dibawahnya maupun diatas </style> . Untuk menyimpannya cukup kamu Klik Tema > Edit HTML > dan pastekan di atas kode </b:skin> dan </style>

/* Moekun Box */
.boxanime{background:#fff;}.boxanime span{font-weight:bold;display:block;margin-bottom:5px;}.boxanime .boxdownload{overflow:hidden;}.boxanime .boxdownload .moekun{width:40%;float:left;margin:0px 7.1px 15px;}.boxanime .boxdownload .moekun .topbox{background:#2980B9;padding:8px 10px;color:#fff;}.boxanime .boxdownload .moekun .listmoe{padding:10px 10px 5px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,0.09);}.boxanime .boxdownload .moekun .listmoe b{margin-right:5px;float:left;color:#fff;font-size:11px;line-height:19px;padding:5px 5px;background:#333;display:none;}.boxanime .boxdownload .moekun .listmoe p{}.boxanime .boxdownload .moekun .listmoe a{display:block;float:left;margin:0px 5px 5px 0px;color:#fff;background:#3498DB;padding:6.5px 10px;border:1px solid #3498DB;border-radius:2px;}.boxanime .boxdownload .moekun .listmoe a:hover{color:#ffffff;background:#2980B9;text-decoration:none;border:1px solid #2980B9;}
@media only screen and (max-width:640px){.boxanime{padding: 0;}.boxanime.boxdownload .moekun {width: 100%;margin: 0;}}

Sekarang adalah membuat pemanggilan CSS diatas menggunakan HTML cukup kamu gunakan kode dibawah ini saja, untuk menampilkan di dalam postingan kamu klik HTML bukan Compose

<div class="boxanime">
<div class="boxdownload">
<div class="moekun">
<div class="topbox">
Youkoso Jitsuryoku Shijou Shugi no Kyoushitsu e 1 Subtitle Indonesia [720p]</div>
<div class="listmoe">
<b>LINK</b><br />
<a href="http://coeg.in/hCk9C">UF</a> <a href="http://coeg.in/jgZzd">CU</a> <a href="http://coeg.in/LpJKF">GD</a> <a href="http://coeg.in/heAJv">ZS</a> <a href="http://coeg.in/wKjIk">SC</a> </div>
</div>
<div class="moekun">
<div class="topbox">
Youkoso Jitsuryoku Shijou Shugi no Kyoushitsu e 1 Subtitle Indonesia [480p]</div>
<div class="listmoe">
<b>LINK</b><br />
<a href="http://coeg.in/pe32Y">UF</a> <a href="http://coeg.in/9hePm">CU</a> <a href="http://coeg.in/OWtfD">GD</a> <a href="http://coeg.in/D8ian">ZS</a> <a href="http://coeg.in/hev6l">SC</a></div>
</div>
<div class="moekun">
<div class="topbox">
Youkoso Jitsuryoku Shijou Shugi no Kyoushitsu e 1 Subtitle Indonesia [360p]</div>
<div class="listmoe">
<b>LINK</b><br />
<a href="http://coeg.in/WY91z">UF</a> <a href="http://coeg.in/8mzN3">CU</a> <a href="http://coeg.in/sxFAv">GD</a> <a href="http://coeg.in/Nh4eu">ZS</a> <a href="http://coeg.in/TRhls">SC</a> </div>
</div>
<div class="moekun">
<div class="topbox">
Youkoso Jitsuryoku Shijou Shugi no Kyoushitsu e 1 Subtitle Indonesia [240p]</div>
<div class="listmoe">
<b>LINK</b><br />
<a href="http://www.telondasmu.com/6Vwnd">UF</a> <a href="http://www.telondasmu.com/AwM3i">CU</a> <a href="http://www.telondasmu.com/s01Pe">GD</a> <a href="http://www.telondasmu.com/bUfIl">ZS</a> <a href="http://www.telondasmu.com/Ten3x">SC</a> </div>
</div>
</div>
</div>

Mau melihat Demonya seperti apa? coba kamu klik link ini Demo
 Kamu bisa atur ukuran lebar sesuai keinginan kamu dengan cara menggedit .Moekun{width:40}
Nah sekian dulu aja Tutorial Kali ini mungkin ini bisa jadi inspirasi buat kamu yang ingin mencoba bikin Download Box.
Show comments
Hide comments

16 Responses to "Cara Membuat Download Box Anime Seperti Moekun"

  1. Keren sob. Kapan2 ane coba di blog saya http://animelaw.net

    ReplyDelete
    Replies
    1. makasih sob :D sering mampir juga sob kita saling silaturahmi

      Delete
  2. Makasih gan untuk web download saya bisa memakai ini

    ReplyDelete
  3. Wah kurang cocok buat blog saya. Bkan blog download

    ReplyDelete
    Replies
    1. hahaah iya kalau bukan blog download agak kurang cocok

      Delete
  4. biar pengunjung ada pilihan yang tidak terlalu menyulitkan di segi tampilan

    ReplyDelete
    Replies
    1. iya terkadang banyak pengunjung yang disulitkan saat mau mengunduh

      Delete
  5. Mantab banget.. tinggal copy paste aja nih script... makasih ya mas bro...

    ReplyDelete
    Replies
    1. iya kang, moga bisa dicobain scriptnya :D

      Delete
  6. mantap mantap teruskan berkarya :v

    ReplyDelete
    Replies
    1. siap, pastinya terus berkarya um :3

      Delete

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ