Cara Memasang Slide Button pada Blog

Pada tutorial kali ini, kami telah mencoba Slide Button ini pada blog kami. Seperti diatas adalah Contoh Button dalam Tulisan " Kunjungi Website ". Tutorial kali ini, kalian hanya perlu memasukan CSS dan HTML yang cukup Simple. Button ini menggunakan Efek seperti "Hover" dan "Inset" yang sederhana, sehingga tidak akan membuat blog menjadi berat dan membebani kinerja blog. Ok, Cukup singkat saja , Mari kita lakukan Tutorial mudah kali ini.

1. Buka Blogger - Template - Edit HTML, Simpan kode berikut diatas kode </style>

#wrap {margin:20px auto;text-align:center;}a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

2. Lalu Simpan Template dan Menuju ke Laman / Pos, Untuk penggunaan HTML kode kalian bisa menaruh kode berikut di dalam mode HTML bukan Compose.

<div id="wrap"><a class="btn" href="#">Button</a></div><div id="wrap"><a class="btn warn" href="#">Button</a></div>

3. Lanjutkan Artikel yang anda buat dan Publikasikan. Kalian bisa melihat contohnya dibawah ini.

Tes1

Tes2

Kalian bisa mengatur CSS agar terlihat lebih menarik dan seperti yang kalian inginkan, Cukup sekian, dan apabila ada kesalahan silahkan komentar. Semoga Bermanfaat.

Author : Anonymous

Share this

Related Posts