Download Box

---

Tutorial Blog: Cara Membuat Download Box

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

/* CSS Download Box */
.udl-wrap {
font-size: 11px;
font-weight: bold;
background: #F5F5F5;
padding: 10px;
margin: 10px 0;
}
.udl-box {
margin: 0;
padding: 0;
list-style: none;
}
.udl-item {
background: #E4E4E4;
margin-bottom: 2px;
line-height: 26px;
padding: 0 5px;
}
.udl-item strong {
background: #23B95D;
border-right: 2px solid #F5F5F5;
width: 65px;
display: block;
float: left;
margin-left: -5px;
margin-right: 5px;
color: #FFF;
padding: 0 5px;
text-align: left;
}
.udl-item a {
color: #857979;
}
.udl-item a:hover {
color: #222;
}

Simpan Tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian Compose HTML

<div class="udl-wrap">
<div class="udl-box">
<div class="udl-item">
<strong>480p</strong><a href="#url" rel="nofollow" target="_blank">Server 1</a> |
<a href="#url" rel="nofollow" target="_blank">Server 2</a> |
<a href="#url" rel="nofollow" target="_blank">Server 3</a> |
<a href="#url" rel="nofollow" target="_blank">Server 4</a> |
<a href="#url" rel="nofollow" target="_blank">Server 5</a>
</div>
<div class="udl-item">
<strong>720p</strong><a href="#url" rel="nofollow" target="_blank">Server 1</a> |
<a href="#url" rel="nofollow" target="_blank">Server 2</a> |
<a href="#url" rel="nofollow" target="_blank">Server 3</a> |
<a href="#url" rel="nofollow" target="_blank">Server 4</a> |
<a href="#url" rel="nofollow" target="_blank">Server 5</a>
</div>
</div>
</div>

#url Link tautan


   DEMO