Cara Membuat Tombol Media Sosial di WordPress Tanpa Menggunakan Plugin

Info Menarik – Media sosial merupakan salah satu bagian penting yang harus kita tampilkan di website WordPress. Hal ini tentu saja tujuan utamanya adalah agar pengunjung dapat dengan mudah ketika ingin berinteraksi lebih lanjut dengan pemilik website. Kemudian agar tampilan media sosial di website lebih menarik, kita buat tampilannya dengan tombol dan juga ikon. Ketika pengunjung ingin berinteraksi dengan Kamu maka cukup klik tombol-tombol tersebut dan otomatis akan mengarah ke media sosial yang dimaksud. Jika tertarik dan ingin menerapkannya di website Kamu, silakan simak artikel ini sampai selesai. Karena pada artikel ini saya akan coba berbagi cara membuat tombol media sosial di WordPress.

Khusus untuk website WordPress, menampilkan media sosial itu bisa menggunakan plugin. Namun menurut saya kita harus menghindari penggunaan terlalu banyak plugin. Karena dengan banyaknya plugin yang terpasang di WordPress maka akan mempengaruhi kinerja website Kamu. Kalau sekedar menampilkan media sosial di website, tidak perlu menggunakan plugin.

Baca Juga: Cara Membuat Tombol Share Artikel ke Sosial Media di WordPress Tanpa Plugin

Kemudian biasanya fitur media sosial ini akan tersedia otomatis pada tema yang kita gunakan. Terlebih lagi jika tema yang kita gunakan adalah tema berbayar atau premium. Lalu bagaimana jika ternyata tema kita tidak memiliki fitur tersebut, apakah harus menggunakan plugin? Jawabannya tentu saja tidak perlu …

Cara Membuat Tombol Media Sosial di WordPress Tanpa Plugin

Solusi untuk Kamu yang menggunakan tema tidak memiliki fitur tombol yang mengarah ke media sosial, silakan lakukan cara yang akan saya bahas pada artikel ini.

Coba perhatikan contoh gambar berikut:

Jika tertarik silakan lanjut membaca artikelnya sampai selesai …

Syarat Utama Membuat Tombol Media Sosial

Sebelum menuju ke langkah pembuatan, ada dua hal yang harus Kamu persiapkan, yaitu:

1. Ikon media sosial format PNG;
2. Link yang mengarah ke media sosial.

Untuk ikon media sosial bisa kita buat sendiri di program pengolah gambar seperti Photoshop atau CorelDRAW. Kemudian agar ikon transfaran silakan Kamu simpan ke dalam file format PNG. Atau bisa juga dengan download ikon dari internet. Saat ini banyak website yang menyediakan ikon media sosial yang dapat kita download secara gratis, seperti: Freepik, Flaticon, dan sebagainya.

Atau alternatif lain Kamu bisa download ikon media sosial yang sudah saya siapkan di bawah ini:

Download Ikon Media Sosial

Kemudian upload ikon tersebut ke website dan ambil atau copy URL atau linknya.

Pasang Kode HTML dan CSS

Tombol media sosial akan kita tampilkan di sidebar WordPress. Maka oleh karena itu kita tempatkan kode pada Widget dan tempatkan kode pada Widget Text atau HTML. Tentu saja untuk melakukan praktik ini sebelumnya Kamu harus sudah login di Dashboard WordPress.

1. Kode HTML

Silakan Kamu ubah atau tentukan setiap URL media sosial berikut dengan URL atau link media sosial yang Kamu miliki.

<div id="social-icons">
<ul>
<li><a class="icon facebook" href="https://www.facebook.com/URL-Facebook" target="_blank" title="Facebook" rel="nofollow"></a></li>
<li><a class="icon twitter" href="https://twitter.com/URL-Twitter/" target="_blank" title="Twitter" rel="nofollow"></a></li>
<li><a class="icon youtube" href="https://www.youtube.com/channel/Channel-YouTube" target="_blank" title="YouTube" rel="nofollow"></a></li>
<li><a class="icon instagram" href="https://www.instagram.com/URL-Instagram" target="_blank" title="Instagram" rel="nofollow"></a></li>
<li><a class="icon whatsapp" href="https://api.whatsapp.com/send?phone=62Nomor-WhatsApp" target="_blank" title="WhatsApp" rel="nofollow"></a></li>
</ul>
</div>

2. Kode CSS

Selanjutnya agar tampilan tombol media sosial lebih menarik lagi, tempatkan kode css berikut pada style.css tema yang Kamu gunakan. Jangan lupa tentukan URL atau link ikon media sosial format PNG yang sudah Kamu upload ke website.

#social-icons{
text-decoration:none;
}
#social-icons li{
list-style:none;
position:relative;
width: auto;
padding:0px;
float:left;
margin:0px 15px 7px 0px;
}
#social-icons .facebook, .twitter, .youtube, .instagram, .whatsapp{
z-index:5;
display:block;
border-radius:10px;
background: url(URL-atau-link-ikon-media-sosial) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#social-icons .icon{
overflow:hidden;
}
#social-icons .facebook{
width:39px;
height:39px;
background-color:rgba(59,89,152,0.42);
background-position:-1px 0px;
}
#social-icons .twitter{
width:39px;
height:39px;
background-color:rgba(64,153,255,0.42);
background-position:-40px 0px;
}
#social-icons .youtube{
width:39px;
height:39px;
background-color:rgba(254,0,0,0.42);
background-position:-80px -1px;
}
#social-icons .instagram{
width:39px;
height:39px;
background-color:rgba(121,73,255,0.42);
background-position:-120px -1px;
}
#social-icons .whatsapp{
width:39px;
height:39px;
background-color:rgba(29,207,65,0.42);
background-position:-160px -1px;
}
.touch #social-icons li .facebook, #social-icons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #social-icons li .twitter, #social-icons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #social-icons li .youtube, #social-icons li:hover .youtube{
background-color:rgba(254,0,0,1);
}
.touch #social-icons li .instagram, #social-icons li:hover .instagram{
background-color:rgba(121,73,255,1);
}
.touch #social-icons li .whatsapp, #social-icons li:hover .whatsapp{
background-color:rgba(29,207,65,1);
}

Simpan dan lihat hasilnya! Semoga sukses dan bermanfaat. Dan jika ada pertanyaan, silakan bisa Kamu sampaikan pada kolom komentar. Terima kasih sudah berkunjung dan salam sukses selalu …