Bagaimana Mempresentasikan Vcard di Website
VCard adalah kartu bisnis digital yang dirancang untuk ditafsirkan oleh klien email Anda atau program lain yang mengimpor data kontak, seperti Outlook, Thunderbird atau Buku Alamat. Dengan menyertakan vCard di situs web Anda, Anda memudahkan pengunjung untuk mengunduh informasi Anda dan dengan mudah menghubungi Anda di masa mendatang. Namun, vCard tidak memiliki komponen visual, jadi mendesain halaman untuk itu sepenuhnya atas kebijaksanaan Anda. Anda bisa menjadi liar atau sesederhana yang Anda inginkan. Jika Anda hanya menginginkan tampilan dasar yang meniru tampilan kartu nama tradisional, Anda dapat melakukannya dengan elemen div dan beberapa gaya CSS sederhana.
1
Unggah file vCard Anda ke situs web Anda. Pastikan vCard hanya berisi data profesional yang Anda sukai untuk didistribusikan secara online.
2
Buat elemen div yang Anda inginkan untuk mewakili kartu bisnis Anda. Berikan ID unik, seperti "vcard", dan isi detail yang ingin Anda tampilkan di kartu. Kartu dasar harus menyertakan nama, situs web, dan alamat email Anda. Anda juga dapat menautkan ke halaman Facebook, akun Twitter Anda, atau situs jejaring sosial lainnya. Jangan lupa untuk menyertakan tautan untuk mengunduh vCard Anda. Div dasar bisa terlihat seperti ini:
(555) 555-5555
//www.situs webanda.com
Unduh vCard
3
Tambahkan ID vcard ke stylesheet Anda untuk mengubah tampilan div. Jika Anda menginginkan presentasi kartu yang relatif besar, menggunakan latar belakang putih dan bingkai hitam, ID bisa terlihat seperti ini:
div # vcard {width: 400px; tinggi: 200px; overflow: tersembunyi; latar belakang: #FFFFFF; batas: 1 piksel solid # 000000; }
"Overflow: hidden;" menghentikan kartu agar tidak meluas dalam lebar atau tinggi jika konten melebihi ukurannya. Anda juga dapat menentukan ukuran dan warna font. Misalnya, jika Anda ingin semuanya menggunakan font Times New Roman abu-abu tua pada 14 poin, ID Anda akan terlihat seperti:
div # vcard {width: 400px; tinggi: 200px; overflow: tersembunyi; latar belakang: #FFFFFF; batas: 1 piksel solid # 000000; font-family: 'Times New Roman'; ukuran font: 14pt; warna: # 3B3131; }
4
Buat nama Anda lebih besar dan lebih menonjol dengan menambahkan elemen div # vcard h1; ini hanya mengubah tag H1 dalam div vCard Anda. Jika Anda ingin menggunakan font 22 titik dan menambahkan bayangan abu-abu kecil, CSS Anda akan terlihat seperti ini:
div # vcard h1 {ukuran font: 22pt; text-shadow: 1px 1px #CCCCCC; }
Elemen teks-bayangan ditentukan oleh offset sumbu x, offset sumbu y, dan warna. Jika Anda menginginkan bayangan yang sedikit kabur, Anda akan menambahkan nilai ketiga dalam piksel untuk menentukan keburaman, mis
text-shadow: 1px 1px 4px #CCCCCC;
5
Tambahkan elemen visual atau dekoratif lainnya yang Anda inginkan untuk menonjolkan elemen vCard Anda. Anda dapat menambahkan gambar, mengubah tinggi garis dan kesejajaran paragraf, mengubah warna - jadi liar! Semakin menarik desain Anda secara visual, semakin menonjol.
6
Uji tautan unduhan vCard Anda di situs web Anda untuk memastikan tautannya akurat.
