Cara Membuat Download Box Ala Wardhanime untuk Blogger
Lagi-lagi ala wardhanime wkwk, ngga apa-apa lah kan kita disini mau sharing gimana caranya buat download box kaya wardhanime. Tujuan postingan ini adalah untuk edukasi saja, jadi kalian yang sedang belajar CSS dan HTML. Postingan ini sangat berguna untuk di gunakan sebagai latihan kalian.
Oke langsung saja kita ke cara pemasangannya.
Yang Pertama, masuk ke blogger > Template editor > dan masukkan CSS di bawah ini tepat di bawah </style> untuk sebagian template ada yang mempunyai html </style> lebih dari satu, kalian coba aja satu2 :).
/*CSS Download Box */.dl-box {
background-color: #F5F5F5;
border: 1px solid #E5E5E5;
float: left;
font-family: Arial,Tahoma,"Lucida Sans Unicode","Lucida Grande";
font-size: 12px;
line-height: 12px;
margin: 0px 0px 20px;
outline: 0px none;
overflow: hidden;
padding: 20px;
vertical-align: baseline;
width: 578px;
}
.dl-title {
background-color: #000;
background-position: 7px 6px;
background-repeat: no-repeat no-repeat;
border: 1px none;
color: #FFF;
float: left;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
margin: 0px 0px 3px;
outline: 0px none;
padding: 10px 0px 10px 35px;
vertical-align: baseline;
width: 543px;
}
.dl-item {
background-color: #FFF;
background-position: 7px 6px;
background-repeat: no-repeat no-repeat;
border: 0px none;
float: left;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
margin: 0px 0px 2px;
outline: 0px none;
padding: 10px 0px 10px 35px;
vertical-align: baseline;
width: 543px;
}Oke, setelah kalian memasukkan CSS nya save template kalian. Dan buatlah postingan baru jika kalian ingin membuat Download Box nya, copykan HTML di bawah ini dan kalian ganti sendiri judul dan link download nya.
<div class="dl-box" >
<div class="dl-title">Masukan Judul Disini</div>
<div class="dl-item"> LINK1 | LINK2 | LINK3 | LINK4 | LINK5 </div>
<div class="dl-title">Masukan Judul Disini</div>
<div class="dl-item"> LINK1 | LINK2 | LINK3 | LINK4 | LINK5 </div>
<div class="dl-title">Masukan Judul Disini</div>
<div class="dl-item"> LINK1 | LINK2 | LINK3 | LINK4 | LINK5 </div>
</div>Sampai disini sudah selesai. Untuk kalian yang ingin melihat hasilnya, bisa lihat di bawah ini.
