Snippet, Tips Blogger

Cara Membuat Simple Button Demo dan Download

Kali ini saya akan berbagi tips dan mencoba menjawab dari pertanyaan teman di blog ini, oke langsung saja.

Memasang Simple Button Demo dan Download ini cukuplah mudah, anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :

Sebelumnya anda sudah memasang fontawesome pada template, jika belum silakan tambahkan link dibawah ini sebelum </head>

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Buka Template > Edit HTML > Terapkan kode di bawah ini sebelum </style>

.whitebutton{margin:20px auto;padding:20px 0;width:200px}
.whitebutton a{background:#fff;color:#666;display:block;font-size:17px;font-weight:700;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2}
.whitebutton a:before{content:'\f019';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.whitebutton span{background:#444;color:#fff;display:block;font-size:12px;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.whitebutton .up{background:#e25734;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.whitebutton .down{margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform:translate(0,-50px);transition:350ms}
.whitebutton .down:before{content:'\f14a';font-family:FontAwesome;font-weight:normal;margin-right:6px;color:#aaa}
.whitebutton:hover .up{opacity:1;transform:translate(0,0)}
.whitebutton:hover .down{opacity:1;transform:translate(0,-90px)}
.whitebuttondemo{margin:20px auto;padding:20px 0;width:200px}
.whitebuttondemo a{background:#e25734;color:#fff;display:block;font-size:17px;font-weight:700;height:50px;line-height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;transition:350ms}
.whitebuttondemo a:before{content:'\f002';font-family:FontAwesome;font-weight:normal;padding:8px;margin-left:-12px;margin-right:6px}
.whitebuttondemo a:hover{color:#fff}
.whitebuttondemo span{background:#444;color:#fff;display:block;font-size:12px;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;font-weight:bold}
.whitebuttondemo .up{background:#444;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform:translate(0,-50px);transition:350ms}
.whitebuttondemo:hover .up{opacity:1;transform:translate(0,0)}

1. Bagi yang menggunakan Gunakan tag <br>

Terapkan HTML berikut di postingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6MB .rar</span></div>

2. Bagi yang menggunakan Tekan “Enter” untuk baris baru

Terapkan HTML berikut di postingan pada tab HTML (bukan compose)

<div class="whitebuttondemo">
<a href="#">Demo</a>
<span class="up">click to begin</span>
</div>
<div class="whitebutton">
<a href="#">Download</a>
<span class="up">click to begin</span>
<span class="down">1.6MB .rar</span>
</div>

Kemudian isikan link tautan anda pada kode yang saya tandai #, selesai.

Hasilnya akan tampil seperti di bawah ini

Demo
click to view
Download
click to begin
1.6MB .rar

Cukup mudah bukan, silakan dikreasikan kembali dan selamat mencoba.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *