Hallo kawan..
Selamat datang di situs GRAD Information, pada kesempatan kali ini saya akan
memberikan tips seputar blog kawan.
Tipsnya adalah membuat tombol download dan demo dengan gaya
ala bootstrap 3, lumayan lah untuk memudahkan pengunjung blog saat mencari
link untuk mendownload file ataupun link demo agar memudahkan
redirect ke hasil project.
Dan disini saya telah memberikan 5 tipe warna pada cssnya dan
penggunaannya mirip-mirip dengan bootstrap 3 yaitu ada
btn-info,
btn-warning,
btn-danger,
btn-success, dan
btn-primary
tinggal pilih saja sesuai selera.
Ok, daripada kelamaan dan malah buang-buang waktu mending simak
langkah-langkahnya sebagai berikut:
1. Masuk ke akun blogger kalian.
2. Pilih menu 'tema' dan klik tanda '▼' lalu pilih 'edit html'
3. Dan jangan lupa kopi kode 'css' berikut:
.btn-group-sm>.btn,.btn-sm{padding:5px
10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-default:hover{background:#e6e6e6}.btn-danger:hover,.btn-info:hover,.btn-primary:hover,.btn-success:hover,.btn-warning:hover{opacity:.7}.btn-default{color:#333;background-color:#fff;border-color:#ccc!important;opacity:1}.btn-primary{color:#fff;background-color:#286090;border-color:#286090;opacity:1}.btn-danger{color:#fff;background-color:#c9302c;border-color:#c9302c;opacity:1}.btn-warning{color:#fff;background-color:#ec971f;border-color:#ec971f;opacity:1}.btn-info{color:#fff;background-color:#31b0d5;border-color:#31b0d5;opacity:1}.btn-success{color:#fff;background-color:#449d44;border-color:#449d44;opacity:1}.btn{text-decoration: none;display:inline-block;margin-bottom:0;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px
solid transparent;padding:6px
12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.btn-info,.btn-danger,.btn-primary,.btn-warning,.btn-success{color: #fff
!important;} .btn-group-xs>.btn,.btn-xs{padding:1px
5px;font-size:12px;line-height:1.5;border-radius:3px}
.btn-group-ps>.btn,.btn-ps{padding:2px
6px;font-size:14px;line-height:1.5;border-radius:3px}
4. Selanjutnya letakkan di atas tag '</style>' atau
'</b:skin>'
![]()
5. Ok, kita telah menyelesaikan fiturnya. Dan sekarang mulai penerapannya.
6. Penerapannya kalian cukup membuat tag
<a href='#'> Download </a>
7. Kemudian masukkan class yang telah dibuat tadi, contoh sebagai berikut:
![]()
8. Untuk classnya ada success, warning, primary,
info dan danger.
9. Dan apabila sudah kalian berikan class, maka hasilnya bisa seperti
berikut:
![]()
10. Dan selesai.
Apabila kalian masih bingung, kalian bisa memberikan komentar dibawah ini. Dan saya biasanya fastrespon.
Ok, itu adalah akhir cerita saya pada hari ini. Dan sebelum kalian meninggalkan artikel ini, saya ingin kalian untuk 'follow' akun sosial media saya serta jangan lupa klik 'like', 'subscribe' dan 'share' kawan.
Sekian dari saya dan terima kasih J.
