Cara Membuat Box Download Keren Seperti Situs Anime di Blog

April 07, 2020

Blog

Hai teman teman, balik lagi bareng gw. Pada artikel kali ini gw bakal ngeshare lagi cara buat box download keren seperti di situs-situs download anime. Hasilnya akan seperti ini :

Oke langsung aja kita mulai tutorialnya.

1. Silahkan kalian masuk ke blog kalian lalu pilih Tema - Edit HTML
2. Cari tag ]]></b:skin atau </style> kemudian pastekan kode ini di atasnya


.dbox-title {
background:#3b3b4f;
color:#fff;
margin-bottom: 1px;
border-radius:2px;
padding:10px 15px;
text-align:center;
vertical-align:top;
font-size:1.3rem
}

.dbox-list {
background: #e2e2e2;
font-size:15px;
margin-bottom: 1px;
line-height: 30px;
padding: 0 5px;
text-align:center;
border-radius:2px
}

.dbox-list strong {
background:#777;
border-right:2px solid #F5F5F5;
width:100px;
display:block;
float:left;
margin-left:-5px;
margin-right:2px;
color:#FFF;
padding:0 15px;
text-align:center;
font-weight:400
}

.dbox-list a {
color: #000;
}
.dbox-list a:hover {
color: #555;
}
@media only screen and (max-width: 360px) {
.dbox-list strong {
width:90%
}
.dbox-title {
text-align:center
}
}

3. Setelah itu save.

Baca Juga : Cara Membuat Kotak untuk Tempat HTML pada Postingan Blog

4. Untuk menggunakannya kalian bisa buat Post/Entri Baru dan kemudian ubah ke mode HTML lalu pastekan kode ini di bawahnya.


<div class="dbox-title">Your Title</div>
<div class="dbox-list">
    <strong>480p</strong>
    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
    <strong>720p</strong>
    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
    <strong>1080p=""></strong>
    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>

Note.

Ganti Your Title dengan nama dari file download kalian.
Ganti 480p, 720p, 1080p dengan resolusi video
Ganti # dengan url link download kalian
Ganti Server 1, .. Server 5 dengan nama situs/server downloadnya.

Untuk mengurangi jumlah server download kalian bisa menghapus 1 line dari server tersebut
Contoh

 <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>

Untuk menambah tab resolusi kalian bisa tambahkan code ini di paling bawah setelah </div> pada postingan kalian

<div class="dbox-list">
    <strong>4K =""></strong>
    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>

Oke sekian tutorial dari gw kali ini. Jika ada pertanyaan silahkan tanyakan di kolom komentar. Semoga bermanfaat dan jika berkenan silahkan share ke teman teman yang perlu info ini. Thanks!