Membuat Style Button Sederhana di Blogger (Valid AMP)
Membuat Style Button Tanpa Bootstrap di Blogger Valid AMP HTML
Bootstrap merupakan salah satu framework website yang paling banyak digunakan oleh para developer. Bootstrap memang sangat membantu pekerjaan seorang developer website. Cukup memanggil selector class yang tersedia di bootstrap, maka element sudah bisa ditampilkan, tanpa harus repot membuat selector CSS sendiri.
Contoh, ketika saya ingin membuat Button untuk tombol beli, saya cukup memanggil kode HTML dibawah ini.
<button type="button" class="btn btn-primary">BUY</button>Tidak perlu membuat CSS untuk .btn dan .btn-primary, karena saya sudah menggunakan komponen Bootstrap pada blog saya.
Namun sayang sekali, jika anda menggukan template blogger AMP, memasang Bootstrap pada template anda akan membuat template anda menjadi tidak valid AMP.
Oleh karena itu, kali ini saya akan membagikan tutorial membuat Button sederhana dengan menggunakan CSS, dan cara penerapannya pada Blogger.
Silahkan ke tab Edit HTML pada dashboard theme Blogger anda.
Masukan kode CSS berikut ini pada blog diantara
Langkah selanjutnya adalah Memanggil Selector
Other Color
Jika anda menginginkan warna lain, cukup mengganti row background dengan kode hex warna yang anda inginkan. Contoh
Penggunaan button ini sayang disarankan bagi anda yang memiliki Blog Download, maupun Tutorial Blogging.
Semoga berguna :)
Oleh karena itu, kali ini saya akan membagikan tutorial membuat Button sederhana dengan menggunakan CSS, dan cara penerapannya pada Blogger.
Silahkan ke tab Edit HTML pada dashboard theme Blogger anda.
Masukan kode CSS berikut ini pada blog diantara
<b:skin> ... ]]</b:skin> untuk blog non-AMP dan untuk Template AMP diantara <style amp-custom>.
.btn {
padding: 15px 0 17px;
line-height: 1.2em;
color: #fff;
font-weight: 700;
font-size: 17px;
letter-spacing: 1px;
display: block;
width: 75%; /*atur lebar button*/
margin: 5px auto 10px;
text-align: center;
border-radius: 5px;
cursor: pointer;
transition: all .3s
}
.btn.red {background: red} .btn.red:hover {background: #8b0000;color: #fff}
.btn.blue {background: blue} .btn.blue:hover {background: #00008b;color: #fff}
.btn.green {background: green} .btn.green:hover {background: #006400; color: #fff}
.btn.grey { background: grey}.btn.grey:hover {background: darkgrey; color: #fff}
Langkah selanjutnya adalah Memanggil Selector
.btn untuk menampilkan Button. Caranya akan saya jelaskan, anda cukup meng-copy kode HTML di bawah ini, dan tempatkan kode tersebut di tempat yang anda inginkan.<div class="btn red">Text</div>DEMO RED BUTTON
<div class="btn blue">Text</div>DEMO BLUE BUTTON
<div class="btn green">Text</div>DEMO GREEN BUTTON
<div class="btn grey">Text</div>DEMO GREY BUTTON
Other Color
Jika anda menginginkan warna lain, cukup mengganti row background dengan kode hex warna yang anda inginkan. Contoh
{background:#000} untuk mengubah wana menjadi hitam.Penggunaan button ini sayang disarankan bagi anda yang memiliki Blog Download, maupun Tutorial Blogging.
Semoga berguna :)