Cara Membuat Made with Love di Footer

Akhir-akhir ini banyak kita temukan sebuah blog dengan tulisan "Made by ❤", "Created by ❤", dan tulisan-tulisan semacamnya di bagian bawah atau footer. Intinya, menambahkan icon love ( ❤ ) ke dalam tulisan. Lalu bagaimana cara membuat Made with Love ini? Yuk, kita pelajari bersama.

Penambahan tulisan "Made by ❤" dan semacamnya memang hanya sebuah hiasan belaka. Tapi banyak orang memasangnya agar tampak keren, elegan, atau sekedar mengikuti tren yang sedang hits.

Secara umum, ada 3 cara menambahkan tulisan "Made by ❤" ini ke dalam blog. Kamu bisa menggunakan salah satu cara yang dianggap paling mudah.

Cara Pertama - Icon Font Awesome

Cara pertama untuk membuat tulisan ini adalah dengan menambahkan icon love dari Font Awesome. Pertama-tama, pastikan template blog kamu sudah memasang script dari Font Awesome. Carilah kode berikut ini:

<link href='/...../css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

URL tidak harus mirip, tapi selalu berupa font-awesome.min.css. Jika belum, tambahkan script di bawah ini sebelum </body> :

<link href='//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Kemudian cari bagian footer template blog kamu. Biasanya ada tulisan Copyright, All right reserved, Design by, Template by, dan semacamnya. Jika sudah ketemu, tambahkan script berikut ini:

Made with <i class="fa fa-heart" aria-hidden="true" style="color:#be1931"/>

Kamu bisa mengubah tulisan "Made with" menjadi apapun sesuai keinginan. Untuk mengubah warna icon love, ubah kode warna hex #be1931 dengan warna lain yang kamu mau. Klik tombol Save untuk melihat hasilnya.

Cara Kedua - Icon SVG

Jika blog kamu belum ada script dari Font Awesome atau kamu memang tidak mau menggunakannya, kamu bisa menambahkan icon love dalam bentuk SVG ke dalam footer. Icon love versi SVG ini lebih ringan karena tidak memakai Javascript dan juga bukan berupa gambar bitmap biasa.

Cara memasukkannya sama dengan cara pertama. Carilah bagian footer blog kamu lalu tambahkan script di bawah ini:

Made with <svg height="20" viewBox="0 0 24 24" width="20"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" fill="#B71C1C"></path></svg>

Seperti cara pertama, kamu bisa mengganti tulisan "Made with" sesuai keinginan. Untuk mengubah warnanya, ganti kode hexa pada atribut fill di atas.

Cara Ketiga - Icon HTML Unicode

Cara ini adalah cara paling mudah. Tidak memakai Javascript, dan bukan merupakan gambar vektor atau bitmap. Cara ini memanfaatkan simbol HTML Unicode yang secara default sudah disediakan dan kompatibel dengan beragam jenis web browser terbaru.

Untuk membuatnya sangat mudah. Seperti kedua cara di atas, carilah kode pada bagian footer di blog kamu lalu tambahkan script di bawah ini:

Made with <span style="color: #e25555;">&#9829;</span>

Dan seperti biasa, tulisan "Made with" bisa kamu ubah sesuka hati. Sedangkan untuk mengubah warnanya bisa dengan mengganti kode hexadecimal pada atribut color.

Selain script di atas, kamu juga bisa memakai script di bawah ini. Hasilnya sama saja, hanya beda kode HTML untuk icon Love-nya saja.

Made with <span style="color: #f57d00;">&#10084;</span>

Bagaimana? Cukup mudah, bukan? Jika kamu masih merasa kesulitan, jangan segan untuk tinggalkan komentar pada kolom yang tersedia.