-->

Cara Membuat Download Box Anime Responsive

Apa kabar minnaa-sann!! Yoshh di postingan saya kali ini saya akan membuat tutorial, Cara Membuat Download Box Anime Responsive di Blog.


Kepoin Dikit!

Tampilan nya



Langsung saja tutorial-nya :

1. Buka Template/HTML masukin CSS nya di atas </b:skin> atau </style>


/* Download Box by Designz Chan */
.dchan-box{margin:10px 0;}

.item-dc{
float: left;
text-align: center;
background: #39d;
padding: 3px 5px;
width: 75px;
text-align: center;
border-bottom: 2px solid #fff;
font-weight: 700;
font-size: 12px;
color: #fff;
}

h3.dc-title{
background: #39d;
margin: 0 0 3px;
padding: 6px;
color: #fafafa;
font-size: 0.95em;
}

.dc-item{clear:both;margin-bottom:4px;height:27px;}
.dc-anime{overflow:hidden;line-height:29px;background:#f2f3f4;padding:0 8px;margin:-24px 0px;}
.dc-anime a{font-weight:700;border-right:1px solid #ddd;margin-right:5px;padding-right:10px;color:#000;}
.dc-anime a:hover{color:#39d3ff;text-decoration:underline;transition:all .50s ease-in-out;}
.dc-anime a:last-child{border:0;} 

@media only screen and ( max-width: 580px ) {
.dc-anime {
    text-align: center;
    float: left;
}
.item-dc {
    width: 100%;
}
.dc-anime a {
    line-height: 25px;
}
.dc-anime {
    margin: auto !important;
}
}

2. Jika kalian sudah menyimpannya, sekarang ambil code HTML di bawah ini

<div class="dchan-box">
<h3 class="dc-title">[AWBatch] Hatsukoi Monster Eps 01 Subtitle Indonesia</h3>
<br />
<!-- Download Box 720p -->
<div class="dc-item">
<span class="item-dc">720p</span>
<div class="dc-anime">
<a href="#" target="_blank">Tusfiles</a>
<a href="#" target="_blank">Google Drive</a>
<a href="#" target="_blank">DesignzChan Files</a>
<a href="#" target="_blank">Mirrorcreator</a>
</div>
</div>
<!-- Download Box 480p -->
<div class="dc-item">
<span class="item-dc">480p</span>
<div class="dc-anime">
<a href="#" target="_blank">Tusfiles</a>
<a href="#" target="_blank">Google Drive</a>
<a href="#" target="_blank">DesignzChan Files</a>
<a href="#" target="_blank">Mirrorcreator</a>
</div>
</div></div>

3. Lalu letakan di Post atau juga bisa di Page/Laman kalian..

Selesai, mudah bukan ?? (^o^)

Sekian dari tutorial saya, Cara Membuat Download Box Anime Responsive. Jika ada masalah jangan sungkan ajukan permasalahanmu di kolom komentar bawah.

Terima kasih.
Facebook Comments