Membuat Kontak Mail, LinkedIn, Facebook, BBM, Whatsapp dan Line Keren di Blog

Kontak Mail, Whatsapp, Line dan yang lain-lainnya merupakan pilihan lain bagi pengunjung blog yang ingin berkomunikasi secara langsung kepada penulis blog. Kontak tersebut bisa juga sebagai tanda keseriusan akan keterbukaan penulis jika pembaca ingin menanyakan tentang hal-hal yang ingin diketahui atau semacamnya.

Kontak tersebut juga bisa ditambahkan sebagai halaman data diri Blogger supaya terlihat profesional.

Berikut langkah-langkah pembuatannya:

1. Dapat dibuatkan tabel terlebih dahulu, supaya ruang di halaman blog dapat dimanfaatkan secara maksimal, serta kontak yang akan ditambahkan terlihat rapi karena data kontak yang ditampilkan berbentuk kolom-kolom.

Cara membuat tabel.

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
<tr><td>Cell 1 - Baris 1 Kolom 1</td>
<td>Cell 2 - Baris 1 Kolom 2</td></tr>
<tr> <td>Cell 3 - Baris 2 Kolom 1</td>
<td>Cell 4 - Baris 2 Kolom 2</td> </tr>
<tr> <td>Cell 5 - Baris 3 Kolom 1</td>
<td>Cell 6 - Baris 3 Kolom 2</td></tr>
</table>

hasilnya:

Cell 1 - Baris 1 Kolom 1	Cell 2 - Baris 1 Kolom 2
Cell 3 - Baris 2 Kolom 1	Cell 4 - Baris 2 Kolom 2
Cell 5 - Baris 3 Kolom 1	Cell 6 - Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar, tinggi, dan jarak kolom pada table

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.

Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell, Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

Berikut adalah contoh tabel dengan lebar 100% dari lebar dokumen dan lebar kolom pertama 50%.

<table border="1" width="75%" cellpadding="8"> <tr> <td style="width:50%;">Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr> <tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr> </table>

Hasilnya:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

teman-teman bisa melakukan custom pada sintax HTML diatas supaya didapatkan tabel yang diinginkan.

2. Selanjutnya dari tabel tersebut dapat dimasukkan data kontak kita ataupun yang diperlukan. contohnya dapat dilihat pada

DEMO

dengan sintax HTML lengkapnya adalah

<table border="0" cellspacing="8" style="width: 100%px;"> <tbody>
<tr> <td style="width: 30%;"><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVwa19mT045YKQ-2848an7Kgks2S1QpcEHYRtczePzxfeOCv1IMy3qSE08-IePQLAtyCBFMThOz5NGdN4Bg0pibWpp7-h5727Aabq_P7TUmdGS2z8QpZQqKMafeQmcn-YlIGGCOA9cddg/s1600/1466161084_Gmail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVwa19mT045YKQ-2848an7Kgks2S1QpcEHYRtczePzxfeOCv1IMy3qSE08-IePQLAtyCBFMThOz5NGdN4Bg0pibWpp7-h5727Aabq_P7TUmdGS2z8QpZQqKMafeQmcn-YlIGGCOA9cddg/s1600/1466161084_Gmail.png" /></a></div>
<span style="white-space: pre;"></span><br />
<strong>E-MAIL</strong><br />
<strong>anditia.nr@gmail.com</strong></div>
</td> <td><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BT_1dp1_bdatXekNn4DRxGmBV1QPM01xNgJKCQeln6NEpjWaP2CSg-s50o_kAjm_6_PaG-LcAaVsTtKqZFGhb5ZvNnogCJO8VhY2uF2uw18GcNXYsFDZxVG91hm_DNHba43mnGIDXuo/s1600/1466160914_LinkedIn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BT_1dp1_bdatXekNn4DRxGmBV1QPM01xNgJKCQeln6NEpjWaP2CSg-s50o_kAjm_6_PaG-LcAaVsTtKqZFGhb5ZvNnogCJO8VhY2uF2uw18GcNXYsFDZxVG91hm_DNHba43mnGIDXuo/s1600/1466160914_LinkedIn.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="white-space: pre;"></span><br />
<b>LinkedIn ID</b><br />
<b>anditia-nr</b></div>
</td> <td><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd8WsgCfH-Gboa1Q60qdiXQGx4qpuw2fDE1p3ccQ85XxyKUFQ0VSyPX9o5N7VVhEx5JIF_whk7tCV5FAYyrhBEjbgI6LRkXtQF_3XzyZkIFLHPbwUUlQYQUTNyvCuMMSRUtrcMnj8hT-M/s1600/1466161274_Facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd8WsgCfH-Gboa1Q60qdiXQGx4qpuw2fDE1p3ccQ85XxyKUFQ0VSyPX9o5N7VVhEx5JIF_whk7tCV5FAYyrhBEjbgI6LRkXtQF_3XzyZkIFLHPbwUUlQYQUTNyvCuMMSRUtrcMnj8hT-M/s1600/1466161274_Facebook.png" /></a></div>
<span style="white-space: pre;"></span><br />
<b>Facebook ID</b><br />
<b>/anditia.nr</b></div>
</td> </tr>
<tr> <td><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZHxdXKYk_92sMEpVZhIhnD0Av_DMj5LH4wlve39Jmj-E3U6yC14vmeJChFyllQU9djxJdz3VkOQq2JJhcALCNU7YNISD9Pp7vHxcYbfAxalV_dcOC7kinAwcKJ0kHSa7e4CYImK2tE-M/s1600/1466161456_BBM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZHxdXKYk_92sMEpVZhIhnD0Av_DMj5LH4wlve39Jmj-E3U6yC14vmeJChFyllQU9djxJdz3VkOQq2JJhcALCNU7YNISD9Pp7vHxcYbfAxalV_dcOC7kinAwcKJ0kHSa7e4CYImK2tE-M/s1600/1466161456_BBM.png" /></a></div>
<span style="white-space: pre;"></span><br />
<strong>BLACKBERRY</strong><br />
<strong>75B2991B</strong></div>
</td> <td><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjar9mHHIJy-lMdyRfTtTLICow00TgRHS7_kme_NUTy9BgwTs8N6qSRLQVplyDRgS5JyMtIKF5lz7FiwPU3V_TIlzp_fkhDXZ1Y69Ro211_iNhphMduD-mRATvQaqbZDw5jXozblbeYO-Q/s1600/1466161826_WhatsApp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjar9mHHIJy-lMdyRfTtTLICow00TgRHS7_kme_NUTy9BgwTs8N6qSRLQVplyDRgS5JyMtIKF5lz7FiwPU3V_TIlzp_fkhDXZ1Y69Ro211_iNhphMduD-mRATvQaqbZDw5jXozblbeYO-Q/s1600/1466161826_WhatsApp.png" /></a></div>
<span style="white-space: pre;"></span><br />
<strong>Telp, SMS & WhatsApp</strong><br />
<strong>No: </strong><strong style="line-height: 150%;">083 838 806 988</strong></div>
</td> <td><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvaBmpGichTVGl8HM3xEQVHqyBqewByN76RQBiN_ADU5yoWIE3XN3nn49K0M3h7kem024ZrsF8Y2lb-4zKyUkNWZCGOD3kmGZO8LYEktdPhq9VdwJajVtTIJe9HVnWG41gAhl9ybnz-Y/s1600/1466161946_LINE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvaBmpGichTVGl8HM3xEQVHqyBqewByN76RQBiN_ADU5yoWIE3XN3nn49K0M3h7kem024ZrsF8Y2lb-4zKyUkNWZCGOD3kmGZO8LYEktdPhq9VdwJajVtTIJe9HVnWG41gAhl9ybnz-Y/s1600/1466161946_LINE.png" /></a></div>
<span style="white-space: pre;"></span><br />
<strong>Line ID</strong><br />
<b>anditia.nr</b></div>
</td></tr>
</tbody>

sekian dulu tutorial dari saya, mudah-mudahan bermanfaat dan terima kasih.