Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tombol Download Keren Ala Panduanajib

Cara Membuat Tombol Download Keren di Artikel -  Jika kamu mempunyai blog dengan niche download sepertinya kamu wajib baca artikel saya ini. Dalam artikel ini saya akan bagikan bagaimana cara membuat tombol download keren di blog.

Selain keren tombol download yang saya share kali ini juga mempunyai nilai plus lainnya seperti responsive, tidak membenani loading blog dan juga akan memudahkan para pengunjung untuk mengetahui mana link download yang sebenarnya.

Yuk langsung saja simak artikel berikut ini.

Langkah Membuat Tombol Download Keren di Blogger

1. Silahkan Buka Dashboard Blogger kamu

2. Lalu masuk ke menu Tema kemudian Edit HTML

3. Salin kode css dibawah ini dan letakkan tepat diatas </b:skin>


.box-panduanajib{
border:1px solid #ddd;
Padding:20px;
Overflow:auto;
Border-radius:3px;
}
.info-panduanajib{
Overflow:auto;
Margin:0 0 20px 0;
}
.img-panduanajib{
Width:70px;
Height:70px;
Background:#eee;
Margin:0 20px 0 0;
Float:left;
}
.judul-panduanajib{
White-space:nowrap;
Overflow:hidden;
Font-size:20px;
Font-weight:bold;
}
.judul-panduanajib span{
Color:#989898;
Font-weight:normal;
}
.label-panduanajib{
White-space:nowrap;
Overflow:hidden;
}
.label-panduanajib a{
Color:#a9a9a9!important;
}
.label-panduanajib a:hover{
Color: #ce0c45!important;
}
.label-panduanajib a:after{
Content:" - ";
Padding:0 5px;
}
.label-panduanajib a:last-child:after{
Content:"";
}
.btn-panduanajib 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-panduanajib 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-panduanajib">
<div class="info-panduanajib">
<div class="img-panduanajib">
<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-panduanajib">
Brawl Stars
<span>
16.176
</span>
</div>
<div class="label-panduanajib">
<a href="https://play.panduanajib-aku.com/search/label/Aksi" rel="nofollow" target="_blank">
Aksi</a>
<a href="https://play.panduanajib-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-panduanajib">
<a href="#">
Download
</a>
</div>
</div>

7. DONE

Untuk hasilnya sendiri kamu bisa lihat gambar dibawah ini.


Itulah Cara Membuat Tombol Download Keren Ala Panduanajib, semoga bermanfaat.

Ricky
Ricky Halo gan nama saya Ricky. Saya adalah seorang pemuda kampung yang sangat minat mengikuti perkembangan teknologi.

Posting Komentar untuk "Cara Membuat Tombol Download Keren Ala Panduanajib"