Cara Membuat Button Download And Demo Simple di Blogger
December 11, 2021
Add Comment
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
Cukup mudah bukan, silakan dikreasikan kembali dan selamat mencoba.
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.sudarblogger.web.id. Terima kasih.
0 Response to "Cara Membuat Button Download And Demo Simple di Blogger"
Post a Comment