Membuat Tombol Share Blogger

Funsi tombol share halaman blog

Secara umum sudah jelas fungsi tombol share adalah untuk mempermudah membagikan suatu artikel atau postingan dihalaman blog.

Dari pemanfaatannya, tombol share disediakan pada setiap halaman postingan adalah ditargetkan kepada pengunjung, siapa tahu pengunjung merasa perlu untuk membagikan halaman tersebut.

Tapi bagaimana jika artikel postingan tersebut baru saja dipublikasikan, belum ada yang mengunjungi ?

Nah, disinilah tugas admin blog menggunakannya untuk pertama kali, membagikan postingan yang baru saja dipublikasi ke media sosial sebagai langkah awal mempromosikan atau mempopulerkan halaman blognya.

Tombol grup

Membuat tombol grup berbagi biasanya berjumlah minimal 4 atau 5 tombol.
akan lebih mudah diatur dengan menggunakan elemen block seperti ul li

Target untuk membagikan halaman umumnya adalah media sosial ataupun platform perpesanan yang populer antara lain :

1. Facebook
2. Twitter
3. Pinterest
4. Linkedin
5. Whatsapp
6. Telegram
7. Messenger
8. Email
9. dll

Pertama buat list HTMLnya dulu dan berikan class pada masing-masing listnya seperti ini.

HTML tombol share

HTML :

<ul>
<li class='facebook'><a href='https://'>Facebook</a></li>
<li class='twitter'><a href='https://'>Twitter</a></li>
<li class='linkedin'><a href='https://'>Linkedin</a></li>
<li class='pinterest'><a href='https://'>Pinterest</a></li>
<li class='whatsapp'><a href='https://'>Whatsapp</a></li>
</ul>

Tampilan :

• Facebook
• Twitter
• Linkedin
• Pinterest
• Whatsapp

Untuk URL tombol berbagi lihat di halaman Platform Sharing Blogger

CSS tombol

Setelah kode HTML tombol sudah siap, tahap selanjutnya adalah mengatur tampilan visual atau gaya pada tombol

Mengatur tampilan list / daftar tombol : <li> dengan CSS.

CSS :

ul li {list-style:none;
display:inline-block;}

Tampilan :

• Facebook
• Twitter
• Linkedin
• Pinterest
• Whatsapp

Border

Beri bingkai atau border pada list <li>

CSS :

border:1px solid #ccc

Tampilan :

• Facebook
• Twitter
• Linkedin
• Pinterest
• Whatsapp

Padding

Atur jarak border dengan teks menggunakan padding

CSS :

padding:4px 10px

Tampilan :

• Facebook
• Twitter
• Linkedin
• Pinterest
• Whatsapp

Background color

Terakhir, atur warna latar belakang sesuai classnya.

Teks #fff putih color:#fff
Facebook #3b5999 .facebook {background:#3b5999}
Twitter #00acee .twitter {background:#00acee}
Linkedin #0077b5 .linkedin {background:#0077b5}
Pinterest #ca2127 .pinterest {background:#ca2127}
Whatsapp #3fbb50 .whatsapp {background:#3fbb50}

Tampilan :

• Facebook
• Twitter
• Linkedin
• Pinterest
• Whatsapp

Tombol bulat

Untuk membuat tombol menjadi bulat, bisa langsung menggunakan CSS. Dengan HTML yang sama dengan diatas.

Penambahan CSSnya hanya untuk menyesuaikan jarak border dari teks (padding) kemudian membuat border melengkung lingkaran dengan border-radius:50% misal seperti ini :

padding 10px; border-radius:50%;

Tampilan :

Icon & URL

Untuk ikon atau logo media sosial ada banyak pilihan misalnya Font Awesome ada beberapa versi dari v4 sampai v6 yang terbaru. Tersedia juga ikon jenis SVG yang lebih ringan. Google Material Icons juga ada meskipun ikon sosial medianya terbatas.

Saran

Rekomendasi postingan terkait pilihan ikon lihat di kategori Font icon
Untuk url tombol lihat dihalaman Platform Sharing Blogger