✔ Menciptakan 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, dikala aku ingin menciptakan Button untuk tombol beli, aku cukup memanggil aba-aba HTML dibawah ini.
<button type="button" class="btn btn-primary">BUY</button> Tidak perlu menciptakan CSS untuk .btn dan .btn-primary, alasannya yakni aku sudah memakai komponen Bootstrap pada blog saya.
Namun sayang sekali, kalau anda menggukan template blogger AMP, memasang Bootstrap pada template anda akan menciptakan template anda menjadi tidak valid AMP.
Oleh alasannya yakni 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 aba-aba CSS berikut ini pada blog diantara
Langkah selanjutnya yakni Memanggil Selector
Other Color
Jika anda menginginkan warna lain, cukup mengganti row background dengan aba-aba hex warna yang anda inginkan. Contoh
Penggunaan button ini sayang disarankan bagi anda yang mempunyai Blog Download, maupun Tutorial Blogging.
Semoga berkhasiat :)
Sumber http://ampidn.blogspot.com
Oleh alasannya yakni 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 aba-aba 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 yakni Memanggil Selector
.btn untuk menampilkan Button. Caranya akan aku jelaskan, anda cukup meng-copy aba-aba HTML di bawah ini, dan tempatkan aba-aba tersebut di kawasan 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 aba-aba 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 :)
0 Response to "✔ Menciptakan Style Button Sederhana Di Blogger (Valid Amp)"
Posting Komentar