Cara Membuat Profil Card Di Blog

Ingin buat sendiri foto profil di blog WordPress dengan format profile card yang simple tapi cantik. Berikut Blogkudewe akan kasih tau cara beserta kode-nya.

Tidak terlalu paham kode? jangan kuatir, disini saya akan terangkan sedikit fungsi kode kode tersebut. Yang nantinya kamu bisa sesuaikan dengan tampilan tema blog kamu.

Memang kadang profile card bawa’an tema tidak sesuai dengan selera kita. Jadi mudah mudahan artikel ini bisa berguna 🙂

Disini untuk sekedar contoh, saya membuat tutorial untuk cara memasangnya di blog WordPress.

Meskipun begitu, kode sederhana berikut bisa Anda terapkan di platform blog yang lain seperti di blogger blogspot dll. Ya! seperti contoh di bawah ini.

Tentang Admin

Hai! Selamat datang di Blogkudewe, Nama saya Hermansyah Filani, penulis dan juga admin di sini

Selengkapnya

Jika kamu suka, maka tanpa basa basi lagi mari kita langsung lanjut ke praktiknya.

Membuat Sendiri Foto Profil Card Widget Menggunakan HTML dan CSS Sederhana

Pertama tama login dulu ke dashboard blog kamu. Terus pergi ke ‘Tampilan’ > ‘Widget’ kalau di WordPress. Kalau di blogger blogspot, pergi ke ‘Tampilan’ > ‘Tambah Gadget’ pastinya kamu sudah tau lah 🙂

Pilih tambahkan Text Widget/gadget. Dan rubah dari Visual ke Texts.

Untuk lebih mudahnya kamu bisa menggunakan Notepad atau TextEdit dulu sebelum memasangnya di gadget/widget blog kamu. Di bawah ini adalah sampel kode yang tampilanya nanti persis seperti profil card admin Blogkudewe. Foto profil kamu nanti bisa bergerak sendiri jika pointer  mouse berada di atas foto kamu (Hover).

Ok! di bawah ini adalah sampel kode HTML da CSS-nya;

<div class="mycontainer"><div class="card"><div class="container"><h5>Tentang admin</h5><img style="width: 50%; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.19);" src="#" alt="Hermansyah"/><p><a href="#" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a><a href="#" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a><a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></p><p class="title">Hai! Selamat datang di Blogkudewe, Nama saya Hermansyah Filani, penulis dan juga admin di sini</p><a class="button-red" href="#">Selengkapnya <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></div></div><style>	/*Card --------------------------*/.card {  width: 100%;  margin: 0;  text-align: center;  background-color: #f5f5f5;  padding: 30px 8px;}.mycontainer {  padding: 0;  width: 100%;  position: relative;}.title {  color: #666;  font-size: 18px;  text-align: center;}@media only screen and (max-width: 768px) {.card img {  width: 30%;}}	@media only screen and (max-width: 414px) {.card img {  width: 40%;}}	.card img:hover {  animation: shake 0.5s;   animation-iteration-count: infinite; }@keyframes shake {    0% { transform: translate(1px, 1px) rotate(0deg); }    10% { transform: translate(-1px, -2px) rotate(-1deg); }    20% { transform: translate(-3px, 0px) rotate(1deg); }    30% { transform: translate(3px, 2px) rotate(0deg); }    40% { transform: translate(1px, -1px) rotate(1deg); }    50% { transform: translate(-1px, 2px) rotate(-1deg); }    60% { transform: translate(-3px, 1px) rotate(0deg); }    70% { transform: translate(3px, 1px) rotate(-1deg); }    80% { transform: translate(-1px, -1px) rotate(1deg); }    90% { transform: translate(1px, 2px) rotate(0deg); }    100% { transform: translate(1px, -2px) rotate(-1deg); }}</style>

Agar sesuai dengan tampilan blog kamu, rubah beberapa baris kode berikut:
Ganti simbol # di src=”#” dengan alamat url foto kamu dan simbol # di alt=“#” dengan nama kamu.
Dan di bagian profil sosial media juga ganti semua simbol # di bagian href=”#” dengan alamat profil sosial media kamu.

Penting! Kalau memasang dan edit kode di WordPress jangan di di WP Customizer tapi di laman ‘Widget’ untuk mencegah WP Error. Sekali lagi Penting!

Sebagai contoh di bagian baris kode  href=”#” untuk Facebook misalnya, ganti simbol # dengan alamat profil Facebook kamu. Begitu seterusnya untuk profil sosial media yang lain. Jika kamu tidak punya profil LinkedIn misalnya, kamu bisa biarkan seperti adanya.

Dan di bagian “button” ganti simbol # di href=”#” dengan alamat url halaman About blog kamu.

Jika ingin merubah warna background, misalnya jadi hitam bisa ganti style css-nya di bagian card > background-color dengan #000 untuk ganti warna background jadi putih #fff. Di contoh ini defaultnya adalah #ddd. Untuk warna lain bisa cari codenya di sini.

Terakhir, di bagian baris “tittle” ganti kalimat: Hai! Selamat datang di Blogkudewe, Nama saya Hermansyah Filani, penulis dan juga admin di sini dengan kalimat kamu sendiri.

Dan Selesai!

Gampang kan? jika kamu bingung bisa di tanyakan di komen saya akan coba bantu dengan screenshot atau apalah.

Selamat mencoba 🙂