بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
TOMBOL Button bentuk love atau buah hati adalah button menuju link yang dimodifikasi menyerupai buah hati berwarna merah muda atau pink. Kreasi ini menjadi unik karena tidak seperti umumnya bentuk button yang sering dipasang pada postingan di kebanyakan blog.
Button ini biasanya berisi Link menuju ke URL artikel ke blog kita atau kita sering sebut Internal Link, tapi bisa juga menuju ke URL artikel atau URL blog lain dan bisa kita sebut dengan eksternal link. Dengan bentuk button love ini semakin kreatif anchor link yang dipergunakan pada artikel blog.
Baca Juga :
Perpaduan warna cerah antara merah muda dan merah hati membuat button ini sangat menarik untuk dipasang dan dikreasikan di blog. Terlebih lagi bila dipasang pada artikel yang menyangkut tentang kasih sayang, mungkin ikon button ini semakin menarik lagi. Coba kalian nanti praktekkan yang sudah saya buat tutorialnya ini.
Pada button bentuk lain seperti oval juga sering dipasang pada postingan blog. Seperti yang kalian lihat pada blog ini pada 'DEMO'. Button berbentuk oval memanjang horizontal dengan warna merah muda atau hati. Lumayan stylish untuk ukuran sebuah button bukan?
Terus bagaimana mengaplikasikan bentuk button ini ke postingan blog. Saya akan membantu menerapkan beberapa kode CSS dan HTML untuk dipadukan pada postingan guna menampilkan button yang sangat indah ini. Langsung saja ya ke tutorialnya.
Modifikasi Tombol Button Bentuk Love Buah Hati
1. Seperti biasa masuk saja ke Tema
2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan dibawa menuju ke template
3. Lalu cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
body{background-color:#DEB887;padding:0;margin:0;}
input[type="checkbox"]{-webkit-appearance:none;appearance:none;height:120px;width:120px;background:linear-gradient(
to top,#fafafa,#d0d3d8);position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;border-radius:50%;cursor:pointer;outline:none;}
input[type="checkbox"]:before{position:absolute;content:"";height:180px;width:180px;background:linear-gradient(
to bottom,#fafafa,#d0d3d8
);border-radius:50%;z-index:-1;bottom:-30px;left:-30px;box-shadow:0 10px 15px rgba(0,0,0,0.1);}
input[type="checkbox"]:after{position:absolute;content:"";height:210px;width:210px;background:#d6dce3;bottom:-45px;left:-45px;z-index:-2;border-radius:50%;box-shadow:inset 0 0 8px rgba(0,0,0,0.2);}
label{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}
label >.fas{font-size:50px;color:#a8aaba;}
input[type="checkbox"]:checked + label >.fas{color:#fe5190;}
input[type="checkbox"]:checked:after{background:linear-gradient(-135deg,#fcace3,#fe5190);}
4. Pilih Tata Letak yang ada di Dashboard Blogger dan masukkan kode dibawah ini di konten Tambah HTML/Javascript disitu. Ini kodenya
<input type="checkbox"id="checkbox"><label for="checkbox"><i class="fas fa-heart"></i></label>Dan setelah itu semua dilakukan, saatnya save pekerjaan kamu ya. Supaya itu tampil sempurna, teliti lagi kodenya jangan sampai ada yang salah atau keliru taruh. Karena tidak akan tampil bila itu terjadi. Inilah penjelasan dari tutorial membuat Tombol Button Bentuk Love Buah Hati . Lumayan mudah bukan, tinggal copas saja itu kode dan taruh di blog kamu. Terima kasih untuk kalian semua yang sudah mau mampir kesini dan membaca artikel Modifikasi Tombol Button Bentuk Love Buah Hati. Seperti kata orang tua jaman dahulu ya, bahwa teori tanpa praktek adalah hal yang mustahil. Jadi tetaplah semangat. Dan jangan lupa tetap berkreasi apapun yang menjadi inspirasi, karena esok hari akan menanti. Salam.
