Selasa, 12 Juli 2016

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.

 
Info Blog!!
Terima Kasih Atas Kunjungan diblog Baru Saya, karena Blog "Tenyom Erectus" Sedang Bermasalah, Kini Saya Mengambil Tindakan Yaitu Pindah Keblog "ARBlogzs", Terima Kasih Atas Partisipasinya
close