Cara Membuat Download Box di Blogger

Cara Membuat Download Box di Blogger - Jika Teman-teman 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 akses. 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

Untuk menerapkan Download Box di Blogger ini, Teman-teman hanya perlu meletakkan kode css pada Edit html template dan kemudian sobat bisa langsung memanggilnya di dalam artikel ataupun post yang sedang sobat tulis.

Cara Membuat Download Box di Blogger

Pertama

Silahkan sobat login ke Blogger - Template - Edit HTML

Kedua

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

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #f1f1f1 none repeat scroll top left;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.container {
  max-width: 768px;
  margin: 1% auto;
  padding: 30px;
  background: #fff;
  color: #95a5a6;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: normal;
}

.container h1,
.container h2 {
  display: block;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2em;
  font-weight: 700;
  color: #336699;
}

.container h2 {
  margin-top: 30px;
}

/* CSS Download Box by caramanual.com */
.dbox-title {
    padding: 8px 10px;
    margin: 8px 0 3px;
    color: #FFF;
    background: #3498db;
}
.dbox-wrap {
font-size: 11px;
font-weight: bold;
background: #F5F5F5;
padding: 10px;
margin: 10px 0;
}
.dbox {
margin: 0;
padding: 0;
list-style: none;
}
.dbox-list {
background: #E4E4E4;
margin-bottom: 2px;
line-height: 26px;
padding: 0 5px;
}
.dbox-list strong {
background: #3498db;
border-right: 2px solid #F5F5F5;
width: 65px;
display: block;
float: left;
margin-left: -5px;
margin-right: 5px;
color: #FFF;
padding: 0 5px;
text-align: center;
}
.dbox-list a {
color: #6d6d6d;
}
.dbox-list a:hover {
color: #222;
}
@media only screen and (max-width: 360px) {
  .dbox-list strong {width:100%}
  .dbox-title {text-align:center}
}
</style>

Setelah Itu save atau simpan.

Ketiga

Silahkan simpan Kode Dibawah ini di Postingan Teman-teman dan tingal merubah Link dan Server mengunakan punya teman-teman

<div class="dbox-wrap">
<div class="dbox">
<div class="dbox-title">Judul Film</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>
</div>
<div class="dbox">
<div class="dbox-title">Nama Software</div>
<div class="dbox-list">
<strong>Part1</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>Part2</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>Part3</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>
</div>

Terakhir jika ingin merubah warna bisa di edit di tahap ke 2 di kode CCS.

Baikalah semoga cara ini berguna dan bermanfaat teman.