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 dipakai oleh para developer. Bootstrap memang sangat membantu pekerjaan seorang developer website. Cukup memanggil selector class yang tersedia di bootstrap, maka element sudah dapat ditampilkan, tanpa harus repot menciptakan selector CSS sendiri.
Contoh, saat aku ingin menciptakan Button untuk tombol beli, aku cukup memanggil instruksi HTML dibawah ini.
<button type="button" class="btn btn-primary">BUY</button> Tidak perlu menciptakan CSS untuk .btn dan .btn-primary, alasannya ialah aku sudah memakai komponen Bootstrap pada blog saya.
Namun sayang sekali, bila anda menggukan template blogger AMP, memasang Bootstrap pada template anda akan menciptakan template anda menjadi tidak valid AMP.
Oleh alasannya ialah itu, kali ini aku akan membagikan tutorial membuat Button sederhana dengan memakai CSS, dan cara penerapannya pada Blogger.
Silahkan ke tab Edit HTML pada dashboard theme Blogger anda.
Masukan instruksi CSS berikut ini pada blog diantara
Langkah selanjutnya ialah Memanggil Selector
Other Color
Jika anda menginginkan warna lain, cukup mengganti row background dengan instruksi hex warna yang anda inginkan. Contoh
Penggunaan button ini sayang disarankan bagi anda yang mempunyai Blog Download, maupun Tutorial Blogging.
Semoga berkhasiat :)
Oleh alasannya ialah itu, kali ini aku akan membagikan tutorial membuat Button sederhana dengan memakai CSS, dan cara penerapannya pada Blogger.
Silahkan ke tab Edit HTML pada dashboard theme Blogger anda.
Masukan instruksi 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 ialah Memanggil Selector
.btn untuk menampilkan Button. Caranya akan aku jelaskan, anda cukup meng-copy instruksi HTML di bawah ini, dan tempatkan instruksi tersebut di daerah 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 instruksi hex warna yang anda inginkan. Contoh
{background:#000} untuk mengubah wana menjadi hitam.Penggunaan button ini sayang disarankan bagi anda yang mempunyai Blog Download, maupun Tutorial Blogging.
Semoga berkhasiat :)
){kind=link}