Cara Menciptakan Download Box Part 1

Cara Membuat Download Box Part 1 - Tutorial kali ini aku akan menciptakan Download Box Part 1, download box ini sering kita jumpai diblog atau web-web download anime baik itu fanshare ataupun fansub diindonesia.

Sebelum tutorial ini aku buat aku juga sudah membahas wacana Cara Membuat Recent Post Image With Tooltip By Label, kalau tertarik silahkan dibaca. Ok kita mulai saja tutorial kali ini.

Cara Membuat Download Box Part 1

1. Silahkan buka Blogger > Tema > Edit HTML, lalu simpan CSS berikut ini di atas </style>

/* Download Box Part 1 - Arlethdesign */ .dl ul{margin:5px 0;list-style:none;background:#FAFAFA;border:1px solid #F0F0F0;padding:3px} .dl ul h3{margin:0;background:#333333;color:#ffffff;font:normal 700 13px sans-serif;padding:8px;margin-bottom:1px;box-shadow:none} .dl ul li{background:#EEEFF0;margin:0 0 1px;padding:0 5px;line-height:25px;color:#1B1B1B;font-size:13px;font-weight:bold} .dl ul li b,.dl ul li strong{font-weight:600;background:#0072BB;color:#FFF;line-height:25px;font-size:13px;display:block;padding:0 6px;margin-right:6px;float:left;min-width:75px;border-right:2px solid #FAFAFA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-5px} @media (max-width: 640px) {.dl ul li b,.dl ul li strong{display:inline-block;float:none;width:98%}.dl ul li{text-align:center}}



2. Jika sudah Save Tema
3. Berikutnya buatlah Postingan atau artikel memakai Metode HTML bukan Compose, lalu masukkan HTML dibawah ini

<div class="dl"> <ul> <h3> Episode Anime</h3> <li><b>3gp</b> <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">ZippyShare</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Tusfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Solidfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Mirror</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Upload</a> </li>  <li><b>Mp4</b> <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">ZippyShare</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Tusfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Solidfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Mirror</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Upload</a> </li>  <li><b>480p</b>   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">ZippyShare</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Tusfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Solidfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Mirror</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Upload</a> </li>  <li><b>720p</b>  <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">ZippyShare</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Tusfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Solidfiles</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Mirror</a>  \   <a href="Link Download" rel="nofollow" target="_blank" title="Cara Membuat Download Box Part 1">Upload</a> </li> </ul> </div>

Demo

Tag	Keterangan
href="Link Download"	Ganti Link Download sesuai dengan hostingnya
title="Cara Membuat Download Box Part 1"	Ganti Judul Anime

Download Box Ini sudah aku buat responsive jadi tidak perlu khawatir dengan tampilan mobile versionnya lagi.

Bagikan Artikel ini