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.
Post a Comment for "Cara Membuat Button Download And Demo Simple di Blogger"