Nah buat para blogger yang sangat suka dengan view blog yang responsive, disini KTS akan memberikan recommended button atau tombol responsive yang mudah digunakan dan tidak sangat mempengaruhi dari pada kecepatan blog tersebut agar blog atau website anda tidak lemot atau lambat.
Bukan hanya tampilan dan fungsinya yang keren, dan disertakan animasi keatas dan kebawah. Sistem animasi yang diberikan oleh KTS disini adalah saat ketika cursor yang digunakan oleh pengguna atau visitor mengarah kearah tombol maka animasi dari tombol ini akan muncul seperti animasi tampilan kebawah sehingga warnanya akan berubah sesuai dengan yang anda terapkan di kode CSS. Langsung saja di praktekan dan terapkan di blog atau website anda masing - masing. Sebelum dipraktekan dan diterapkan di blog alangkah baiknya anda backup terlebih dahulu templatenya, jadi karna kalau ada kesalahan fatal anda bisa mengembalikan template blog anda seperti semula dengan mengimport template blog yang barusan anda backup.
Cara Membuat Tombol atau Button Responsive
- Masuk ke menu tema atau template yang ada di samping blog
- Lalu klik edit html.
- Karena KTS memakai font awesome maka anda harus memasukan script font awesomenya dulu diatas </head>, Jika anda sudah mempunyai script ini di template blog anda maka lewati langkah ini.
- Terapkan kode dibawah ini di atas kode </style> atau ]]></b:skin>
- Sekarang tinggal mengaplikasikan kode css tadi ke kode html.
- Masukan kode ini ke postingan anda, pilih tab HTML. Ingat HTML bukan Compose
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
/* KTS Button */
#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'PT Sans Narrow',text-decoration:none;font-weight:700;background:#dc143c;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #fff;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#fff;color:#dc143c;box-shadow:inset 0px -50px 0px #fff;}
a.btn:active {color:#fff;box-shadow:inset 0px -50px 0px #fff;}
lihat contoh gambar dibawah ini
<div id="wrap">
<a class="btn" href="#">Button</a></div>
Ganti # dengan link tautan yang anda inginkan
Hasilnya akan seperti ini
Oke sekian tutorial yang KTS bagikan untuk anda para blogger, semoga anda yang sedang mencoba tutorial ini berhasil diterapkan di blog anda dengan lancar.