Membuat Profile Card dengan Desain Html Dan Css
Minggu, 27 Januari 2019
Awalnya saya ragu untuk mengangkat tutorial ini dan mempublikasikannya. Tetapi setelah saya pikir-pikir dengan penuh pertimbangan, apa salahnya jika kita ingin berbagi walaupun hanya sekedar tutorial sederhana.
Seperti yang saya katakan diatas, kali ini saya akan mengajak kalian kembali untuk berjalan-jalan dalam dunia perkodingan atau pemrograman.
Sedikit flashback tentang saya, yang tidak dapat di pungkiri sama halnya dengan para pemula. Pada awalnya pun saya sendiri tidak mengerti tentang bahasa koding, html dan lain sebagainnya.
Sebagai contoh jika kalian bertanya, ketika pertama kali anda melihat isi koding tersebut, apakah anda merasakan setres atau gimana? Saya jawab dengan jujur, bukan setres lagi melainkan lieur kalau kata orang sunda bilang.
Dengan bermodalkan sedikit pengetahuan, dan mencoba memberanikan diri untuk terjun bebas dalam dunia perkodingan yang pada awalnya lebih cenderung tidak paham, akan tetapi dengan rasa penasaran saya yang tinggi dan rasa ingin mempelajarinnya, akhirnya saya pun nekat untuk mempelajarinya secara otodidak dengan bantuan guru saya, yang tidak lain yaitu Google.
Itulah sedikit tentang saya yang awalnya tidak mengerti namun pada akhirnya alhamdulillah sudah dapat memahami tentang koding atau bahasa pemrograman, itupun tidak instant langsung paham ada tingkatan-tingkatannya.
Lanjut pada artikel yang akan saya bahas, tentang cara membuat profile card dengan desain html dan css.
Bagaimanakah Cara Pembuatan Profile Card Ini?
Cara pembuatannya cukup mudah kalau menurut saya, nah jika kalian penasaran mari kita langsung saja masuk ke tahapan-tahapannya dan apa saja yang dibutuhkan untuk membuat profile card ini.
Untuk cara yang pertama, jika kalian menggunakan hosting maka buatlah sebuah file index.html atau sejenisnya. Setelah itu copy kode html dibawah ini:
<div class="profilecard">
<img src="img_avatar2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Virm Aditya</b></h4>
<p>Webs Html Design</p>
</div>
</div>
Jika sudah, kalian pastekan kedalam file index yang telah dibuat tadi dan klik simpan file.
Langkah selanjutnya yaitu, buat lagi sebuah file dan beri nama style.css atau yang lainnya lalu copy kembali kode css berikut ini:
.profilecard {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
}
.profilecard:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
Sama seperti langkah pertama, pastekan kedalam file css tersebut dan klik simpan file. Setelah itu coba kalian lihat bagaimana hasilnya. Apabila berhasil saya ucapkan selamat, praktek kalian telah sukses.
Adapun Jika digabungkan dari kode keseluruhannya, akan terlihat seperti contoh dibawah:
/* By Seo Techman */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.profilecard {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
}
.profilecard:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<div class="profilecard">
<img src="img_avatar2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Virm Aditya</b></h4>
<p>Webs Html Design</p>
</div>
</div>
</body>
</html>
Bagaimana Jika Kita Ingin Menerapkannya Di Blogger?
Ikuti langkah-langkah berikut ini:
1. Seperti biasa, masuk ke dashboard Blogger kalian.
2. Klik Tema/Template -> Lalu klik Edit Html.
3. Cari kode ]]></b:skin> atau bisa juga </style>.
4. Kemudian copy paste kode css dibawah dan tempatkan tepat diatas ]]></b:skin> tersebut.
.profilecard {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
}
.profilecard:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
5. Jika sudah, kalian langsung klik simpan tema.
Langkah berikutnya adalah, buat html seperti langkah sebelumnya dengan cara pergi ke menu halaman dan buatlah sebuah halaman baru. Ingat bukan edit dibagian compose melainkan pada bagian html. Copy paste lagi kode html dibawah ini dan tempatkan didalam halam baru tersebut.
<div class="profilecard">
<img src="img_avatar2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Virm Aditya</b></h4>
<p>Webs Html Design</p>
</div>
</div>
Pratinjau terlebih dahulu setelah itu baru klik publish.
Mungkin dengan profile card ini bisa kalian manfaatkan untuk membuat halaman seperti About Me, agar terlihat lebih menarik dan keren.
Untuk contoh live demonya bisa dilihat Dibawa ini:
Live Demo
Nah itulah sedikit perbincangan kita pada hari dan kesempatan ini. Apabila ada kode yang eror, bisa kalian sampaikan melalui kolom komentar dibawah.
Mungkin cukup sekian pembahasan mengenai cara membuat profile card. Tidak kurang tidak lebih, hanya itu yang bisa saya sharing pada tutorial kali ini.
Semoga dapat bermanfaat, dan akhir kata dari saya, wassalammuallaikum, wr, wb.
