Friday, November 22, 2019

Cara Membuat Tombol Download Seperti Jalantikus

Cara Membuat Tombol Download Seperti Jalantikus

HobbyTekno - Pada Postingan kali ini, Admin akan memberikan tutorial cara membuat tombol download seperti di website jalantikus, Tombol ini sangat keren jika dipakai kedalam website karena memudahkan pengunjung untuk mengetahui detail sebuah aplikasi yang ingin diunduh dan juga menunya yang keren untuk dilihat. Langsung saja ikuti langkah-langkahnya.

Langkah-Langkah Membuat Tombol Download Seperti Jalantikus


1. Buka Dashboard Blogger anda

2. Masuk ke menu Tema lalu Edit HTML

3. Salin kode css dibawah ini dan letakkan diatas </b:skin>
.box-hobbytekno{
border:1px solid #ddd;
Padding:20px;
Overflow:auto;
Border-radius:3px;
}
.info-hobbytekno{
Overflow:auto;
Margin:0 0 20px 0;
}
.img-hobbytekno{
Width:70px;
Height:70px;
Background:#eee;
Margin:0 20px 0 0;
Float:left;
}
.judul-hobbytekno{
White-space:nowrap;
Overflow:hidden;
Font-size:20px;
Font-weight:bold;
}
.judul-hobbytekno span{
Color:#989898;
Font-weight:normal;
}
.label-hobbytekno{
White-space:nowrap;
Overflow:hidden;
}
.label-hobbytekno a{
Color:#a9a9a9!important;
}
.label-hobbytekno a:hover{
Color: #ce0c45!important;
}
.label-hobbytekno a:after{
Content:" - ";
Padding:0 5px;
}
.label-hobbytekno a:last-child:after{
Content:"";
}
.btn-hobbytekno a{
Display:block;
Background:#008efa;
Text-align:center;
Font-size:12px;
Font-weight:bold;
text-transform: uppercase;
Padding:8px;
Color:#fff!important;
Border-radius:3px;
Border:1px solid #1f71b0;
Box-shadow:0 1px rgba(255, 255, 255, 0.60) inset;
}
.btn-hobbytekno a:hover{
Color:#fff;
Background:#1c7ec7;
}
4. Nah, Untuk Style nya sudah selesai, sekarang tinggal mengaplikasikannya ke halaman yang diinginkan.

5. Buka Postingan lalu Entri Baru

6. Salin Kode HTML dibawah pada Mode HTML
<div class="box-hobbytekno">
<div class="info-hobbytekno">
<div class="img-hobbytekno">
<img src="https://1.bp.blogspot.com/-nNcTiVHl0_I/XKYy-6_g2tI/AAAAAAAABqM/Ns5WPjoLVN0AnyMZvlpzkPnEeQoXQyeZACLcBGAs/w300-h300-p-k-no-nu/Brawl-Stars.png" />
</div>
<div class="judul-hobbytekno">
Brawl Stars
<span>
16.176
</span>
</div>
<div class="label-hobbytekno">
<a href="https://play.hobbytekno-aku.com/search/label/Aksi" rel="nofollow" target="_blank">
Aksi</a>
<a href="https://play.hobbytekno-aku.com/search/label/Permainan" rel="nofollow" target="_blank">
Permainan</a>
<a href="http://supercell.com/" rel="nofollow" target="_blank">
Supercell</a>
</div>
</div>
<div class="btn-hobbytekno">
<a href="#">
Download
</a>
</div>
</div>
7. Dan lihat hasilnya 100% sama seperti yang digunakan pada Website Jalantikus

Hasilnya akan seperti berikut.


Sekian Cara Membuat Tombol Download Seperti Jalantikus, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

Komentar


EmoticonEmoticon