Cara Menciptakan Download Box Part 2

Cara Membuat Download Box Part 2 - Artikel hari ini aku akan menciptakan Download Box namun berbeda dengan tutorial Cara Membuat Download Box Part 1, bedanya dibuat atau designnya saja.

Blog download anime diindonesia baik itu fansub atau fanshare, sering kita lihat ada download boxnya, nah ditutorial kali ini aku akan membahasnya bagaimana cara menciptakan download box tersebut, ok kita mulai saja tutorial kali ini.

Cara Membuat Download Box Part 2

1. Bukalah Blogger kalian > Tema > Edit HTML, lalu simpan CSS ini diatas </style>

/* Download Box Part 2 - Arlethdesign */ .dl-wraps-dl{text-align:center;font-size:13px;padding-top:15px} .dl-wraps-item{font-size:13px;border:1px solid #ddd;padding:10px;width:100%} .dl-wraps-item>b{display:block;text-align:center;background:#24272c;padding:6px 10px;margin:-10px -10px 10px;border-bottom:1px solid #FFF;color:#fff} .dl-wraps-item>b:hover{left:0;transform:none;-webkit-transform:none} .dl-wraps-item br{display:none} .dl-wraps-item a{margin:1px 1px 5px;display:inline-block;text-align:center;border:1px solid;padding:0 10px;line-height:2;border-radius:3px;width:28.5%;white-space:nowrap;text-overflow:ellipsis;background:#24272c;color:#fc4f3f} .dl-wraps-item a:hover{color:#FFF;background:#ff1493} .cl:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} @media only screen and (max-width: 640px){.dl-wraps-item a{display:block;width:100%;}}



2. Jika sudah save tema
3. Langkah berikutnya gunakan HTML berikut dipostingan blog kamu

<div class="dl-wraps-dl cl"> <div class="dl-wraps-item"> <b>720p 10bit</b> <br> <a href="#">MEGA</a>  <a href="#">Solidfiles</a>  <a href="#">Userscloud</a>  <a href="#">FilesCDN</a>  <a href="#">FileFenix</a>  <a href="#">Mediafire</a> <br> </div></div>

Demo

Tag	Keterangan
width:32.5%	Silahkan Sesuaikan jikalau tidak rapih
background:#24272c	Ganti warna Background
color:#fc4f3f	Ganti warna Text sesuai Yang diinginkan

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

Bagikan Artikel ini