Cara Membuat Button Download And Demo Simple di Blogger

Pada kesempatan kali ini saya akan share tutorial Cara Membuat Button Download And Demo Simple di Blogger, cara nya sangatlah mudah dimana hanya menggunakan CSS serta HTML.

Nah langsung aja ya sobat berikut ini adalah tutorial dibawah ini, simak baik-baik ya gaes tutorial nya. 

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.

Share :