Cyber Impossible Blog kali ini akan berbagi
Cara Membuat Tombol Download Dengan CSS keren, Bagi sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini
1. Sepeti biasa login dulu ke akun blog sobat.
2. Pilih Template > Edit HTML,kemudian centang Expand Widget Templates
3. Cari kode
[[></b:skin> dan letakan kode di bawah tepat di atas kode
]]></b:skin>
.SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.SRB a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.SRB a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.SRB a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.SRB a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.SRB a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.SRB a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.SRB a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
.SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }
4. Kemudian save.
Untuk penggunaan dalam postingan bisa sobat gunakan kode kode di bawah.
Button Text
<span class="SRB"><a class="green" href="#" rel="nofollow" target="_blank"> Button Text </a></span>
<span class="SRB"><a class="orange" href="#" rel="nofollow" target="_blank"> Button Text </a></span>
<span class="SRB"><a class="red" href="#" rel="nofollow" target="_blank"> Button Text </a></span>
<span class="SRB"><a class="gray" href="#" rel="nofollow" target="_blank"> Button Text </a></span>
<span class="SRB"><a class="dark" href="#" rel="nofollow" target="_blank"> Button Text </a></span>
<span class="SRB"><a class="blue" href="#" rel="nofollow" target="_blank"> Button Text </a></span>
Keterangan :
Untuk tulisan berwarna
merah menunjukan tempat URL
Untuk tulisan berwarna
hijau menunjukan nama button
Memang
ada banyak cara untuk mempercantik atau merapikan kode tersebut, tapi
dipostingan kali ini saya mau share Kotak Script warna warni yang bisa sobat pakai sesuai selera, langkahnya tinggal Copy Kode Script nya dan
Pastekan di bagian HTML bukan di Compose saat kita membuat posting yang
mau nempelin kode script, langsung aja liat penampakannya:
