Membuat Download Box Responsive Nekopoi v2

Membuat Download Box Responsive Nekopoi v2

Codepelajar - Diinternet banyak sekali situs fansub dan fanshare Anime dan Film Dorama yang menyediakan tampilan menarik serta kemudahaan akses di setiap situsnya. Mulai dari pengaturan navigasi, List genre, Feature Post dan Juga yang tidak kalah penting adalah mendesain Download Box. Kalau sobat perhatikan, kebanyakan situs memiliki download box yang hampir mirips semuanya. Ya mungkin ada juga yang berbeda, namun kebanyakan desainnya membosankan dan juga tidak menarik. Widih.. sombong sekali kau. Haha ya setidaknya saya menulis artikel ini untuk merubah cara desain mereka dengan desain yang lebih powerfull lagi.


Malah melenceng pembahasannya. Oke kali ini saya akan membagikan tutorial membuat download box seperti situs portal H*ntai yang terkenal di Nusantara, Nekopoi. Wadoo terciduk nih sering jalan-jalan. Ya kali ini admin jalan-jalan hanya untuk melihat desain download boxnya saja. Tetapi,belum juga saya membuat tutorial ada seseorang relawan baik secara cuma-cuma memberikan kode HTML dan CSS downloadn box Nekopoi melalui pesan facebook. Kalau sobat penasaran dengan demonstrasinya sobat bisa dengan melihatnya dengan menekan tombol berikut ini.

Kode CSS Download Box ini kiriman dari akun facebook Kazushiki-kun dan telah saya rapihkan agar lebih responsive lagi dan siap pakai tentunya. Tanpa berlama-lama inilah dia cara membuat download box Nekopoi v2:


CSS | Download Box Nekopoi Resposive

Kotak unduhan ini benar-benar responsive,dan inilah kodeCSS-nya yang bisa coba tempel di sebelum tag </head>

<style type='text/css'>/*<![CDATA[*/
/* CSS Download Box Nekopoi v2 ala Kazushiki aka Abrian T. */
.Shi_NyankoDays {overflow:hidden;clear:both;margin:10px auto;font:14px Pleasewritemeasong,arial}
.Shi_NyankoDays1 {width:50%;margin-bottom:5}
.Shi_NyankoDays2 {float:left;}
.Shi_NyankoDays3 {float:left;}
.Shi_NyankoDays4 {background-color:#e10b80;border-left:2px solid #ffffff;border-right:2px solid #ffffff;border-top:2px solid #ffffff;padding:8px 10px;color:#ffffff;text-align:center;font-weight:650}
.Shi_NyankoDays5 {border-bottom:2px solid #ffffff;border-left:2px solid #ffffff;border-right:2px solid #ffffff;border-top:2px solid #ffffff;margin-bottom:5;padding:10px 10px 5px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(0,0,0,.1)}
.Shi_NyankoDays5 p{margin:auto;padding:0}
.Shi_NyankoDays5 p a{border-bottom-right-radius:9px;border-top-left-radius:9px;border:3px solid #ffffff;transition:all .4s;display:block;float:left;margin:0 5px 5px 0;color:#ffffff;text-decoration:none;background-color:rgba(0,0,0,.1);padding:6.5px 10px;font-size:12px}
.Shi_NyankoDays5 p a:hover{border-bottom-right-radius:9px;border-top-left-radius:9px;border:3px solid #ffffff;transition:all .4s;color:#ffffff;background-color:#e10b80;text-decoration:none}
/*]]>*/
</style>

Jika sudah meletakannya jangan lupa untuk menyimpannya supaya CSS bekerja lebih baik. Selanjutnya sobat hanya perlu membuat kodeHTML-nya seperti berikut ini pada artikel yang ingin dipasangi dengan download box.


<div dir="ltr" style="text-align:left" trbidi="on">
<div class='Shi_NyankoDays'>
<div class="Shi_NyankoDays1 Shi_NyankoDays2">
<div class="Shi_NyankoDays4">1080p</div>
<div class="Shi_NyankoDays5">
<p>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
</p>
</div>
</div>
<div class="Shi_NyankoDays1 Shi_NyankoDays3">
<div class="Shi_NyankoDays4">720p</div>
<div class="Shi_NyankoDays5">
<p>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
</p>
</div>
</div>
<div class="Shi_NyankoDays1 Shi_NyankoDays2">
<div class="Shi_NyankoDays4">480p</div>
<div class="Shi_NyankoDays5">
<p>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
</p>
</div>
</div>
<div class="Shi_NyankoDays1 Shi_NyankoDays3">
<div class="Shi_NyankoDays4">360p</div>
<div class="Shi_NyankoDays5">
<p>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
</p>
</div>
</div>
<div class="Shi_NyankoDays1 Shi_NyankoDays2">
<div class="Shi_NyankoDays4">240p</div>
<div class="Shi_NyankoDays5">
<p>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
<a href="#">EMPTY</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>


Jangan lupa sebelum menyimpan, periksa dulu apabila ada kesalahan tulis. ganti juga tulisan EMPTY dengan link download sobat.

Walaupun download box berbeda dengan yang aslinya, namun creator sudah memberi tahu bahwa ini adalah versi keduanya.

Baiklah sekian dulu saya memberi petunjuk membuat kotak download ala nekopoi yang responsive. terima kasih sudah membaca dan menerapkan artikelnya langsung di tempat. Jangan lupa untuk ikut berkomentar jika ada kesulitan sobat. Nantikan tutorial dari Code Pelajar selanjutnya atau bisa lihat jelajahi situsnya ada postingan popular.



Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel