Cara Membuat Download Box Seperti Situs Anime di Blog

Cara Membuat Download Box Seperti Anime di Blog - Jika sobat pernah berkunjung ke situs download film seperti salah satunya samehadaku dan situs anime lainnya pasti sobat akan menjumpai kotak yang berisikan link download dengan tampilan yang cukup menarik.

Widget download link atau download box di postingan blogger ini akan membuat tampilan link download tersusun rapi sesuai keinginan sobat dan tentu saja widget ini tidak akan mempengaruhi loading blog ketika sedang di aksse. Karena download box untuk blog download film, anime dan aplikasi ini tidak di sertakan fontawesome dan lainnya.

Kotak download yang dibagikan ini memiliki tampilan sederhana dengan prataan warna ala material color dan beraturan. Untuk mengetahui tampilannya silahkan sobat cek di link berikut

Demo

Untuk menerapkan download box di dalam postingan blog ini, sobat hanya perlu meletakkan kode css pada Edit html template dan kemudian sobat bisa langsung memanggilnya di dalam artikel ataupun post yang sedang sobat tulis.

Membuat Download Box di Postingan Blog

Pertama, Silahkan sobat login ke Blogger - Template - Edit HTML

Kedua, Silahkan simpan css berikut sebelum kode ]]></b:skin atau </style>

.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

}

}

Selanjutnya untuk membuat download box di dalam post silahkan pilih tab HTML (bukan compose) dan salin semua kode berikut.

<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>

Silahkan atur title dan link sesuai kebutuhan sobat dan Publish.

Demikian tutorial singkat kali ini semoga bermanfaat. Selamat Mencoba dan Salam Luar Biasa.

Berbagi :