Rabu, 11 Desember 2024

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.

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 …

About Info Menarik

Berbagi Info & Tips Trik Menarik tentang Android, EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

45 comments

  1. Ini model tombol yang gimana, yang ada angka-angka gitu

    • InfoMenarik

      Bukan mas, tombol seperti yg terlihat di web ini …

    • dicoba aja dengan jsfiddle dha…bisa dilihat hasilnya di sana.

  2. wah kayanya tutorialnya cuman bisa dilakukan oleh wordpress selfhosted ya gan….

    • InfoMenarik

      Iya gan, untuk WordPress.com bisa juga dengan cara manual tanpa menyisipkan kode di style.css …

  3. kebetulan saya pakainya masih blogspot.. tak bookmark dulu aja,nanti klo kapan2 butuh bisa langsung dicoba :)

    • InfoMenarik

      Bisa digunakan juga di blogspot mas …

  4. menarik juga hasilnya…dan tidak kalah ma tombol sosial media lainnya. saya ikut nyimak ya gan…sambil belajar juga.

    • InfoMenarik

      tombol yang simple saja mas …

  5. sayangnya hanya bisa diterapkan di WP ya mas, keren banget mas tombil sosmednya, jadi kepengen , haha

    • InfoMenarik

      diblogspot juga bisa mas diaplikasikan …

  6. Saya masih awam dengan wordpress, namun setelah baca informasi menarik di atas, saya rasa cara membuat tombol social media diatas juga bisa diterapkan di blogger karena hanya menggunakan CSS dan kode HTML doang ya mas. :D

    • InfoMenarik

      sangat tepat sekali prediksinya mas … :)

  7. Ternyata caranya hampir sama yah sama blogger hehe, makasih trik nya mas

    • InfoMenarik

      Betul mas, pada dasarnya untuk HTML dan CSS antara WordPress dan Blogspot masih sama …

  8. Tapi lebih nyaman pake blogspot iya mas hehe dan aku juga pake blogspot :D

    • InfoMenarik

      masing-masing mempunyai kelebihan dan kekurangan, jadi tergantung usernya mau pilih CMS WordPress atau Blogspot …

  9. sayang ga bisa diterapkan pada wp(dot)com ya mas.

    • InfoMenarik

      WordPress Free hanya bisa menerapkan kode HTML dan digabung dengan CSSnya di Widget Text mas.

  10. AFhuk

    Ini dia yang saya cari-cari, saya baru terjun ke dunia blogger disini saya bisa mendapatkan pelajaran yang menarik, terima kasih admin, mungkin kedepannya saya akan sering berkunjung ke blog ini.

    • InfoMenarik

      Ok ditunggu saja gan sesering mungkin ya … :)

  11. thanks atas share nya..
    view nya ngga ada ya?
    hehehe

    • InfoMenarik

      Iya mas dulu ketika membuat artikel ini saya menggunakan tombol share dengan kode ini. Jadi demonya bisa langsung dilihat. Namun sekarang saya sudah tidak menggunakannya lagi. Tapi untuk sekedar mencoba, cicipi saja dulu mas … hehehe

  12. kiki amalia

    mas itu kode nya simpan di widget,trus widgetnya taro di mana? biar share buton nya ada di bawah postingan diman naro nya?

    • InfoMenarik

      Yang disimpan di Widget Text agar tombol sosial media tampil di sidebar. Kalau mau tampil di postingan harus disimpan di dalam file single.php.

  13. Lombok Developer

    Terima kasih gan.. tipsnya boleh di coba nih.. :D ijin comot ya..! kebetulan lagi buat blog pake wordpress…..

  14. terima kasih gan, saya memang lagi nyari tutorial cara menambah social, like sharing buttong di wordpress.. tanpa harus menggunakan plugin….

  15. Kalau yang menggunakan plugin tapi yang paling ringan apa Gan untuk wordpress?
    Selama ini saya menggunakan plugin share namun memiliki dampak loading blog yang berat sebab akan merender skript terlebih dahulu.
    Terimakasih.

    • InfoMenarik

      Hmmm apa ya? Pada dasarnya semua plugin akan menambah beban load server mba. Kecuali kalau blognya sudah tidak menggunakan shared hosting lagi, misal VPS. Jadi sangat disarankan untuk hal-hal kecil sebaiknya menggunakan tanpa plugin saja.

      • Justru karena banyak plugins blognya jadi berat Kang. Jadi nyari cara yang enteng seperti yang di artikel ini. Terimakasih ya

  16. bagus gan infonya,nih yang mau cari” Chord lagu untuk gitar dan yang suka mendownload software” Nih webnya : fazecostant.web.id Tolong di support & Like yaa..

  17. Hasilnya keren kang, dan ini bisa mengurangi penggunaan plugin di WP yang bisa mengurai beban pada website ya.

  18. mas, buat kolom komentar seperti yang ada diweb ini bagaimana ya?, soalnya saya lihat cukup bagus kolom komentarnya. bisa di share kan mas?

    • InfoMenarik

      Ok Insya Allah nanti saya share caranya pada artikel khusus saja agar yang lain juga bisa mengetahuinya. Terima kasih ….

  19. Akhirnya ketemu juga, setelah merasa terganggu dengan tombol share button menggunakan plugin yang terasa berat pada laoding blog karena biasanya tombol share dari plugin terlalu banyak memuat tombol sosial media, meskipun tidak semuanya ditampilkan. Mohon untuk menggunakan scriptnya. Salam kenal

  20. Bung Rudhy

    Ternyata tombol sosial media yah, makanya heran juga kenapa ditempatkan di widget, kalau tombol share button sosial media, adak gak tutorialnya mas?

  21. Uda saya coba di webset saya, tpi kok tidak muncul ya pak ?

    Kalo cara untuk menampilkan tombol share sosmed di akhir postingan caranya gimana ya pak ?
    Maaf banyak nanya, newbi ingin blajar web.

  22. kok di website say kagak nongol ya ? mohon kejelsan nya gan kalo pake plug in pake plug in apa ya ?
    saya pake themes gratisan kalo yang berbayar yagn bagus dimana ya ?
    owh ya kunjungi ya web saya

  23. Itu kenapa gk work ya? di blog saya work kok! ada tanggapan mode? itu pada tanya tuh :D hehe, btw template nya bagus responsif juga

  24. Terimkasih atsa tutorial nya sangat membantu.!! goodJo0b. apakah ada plugin yang geratis tapi tampilanya bagus???

  25. Enakan langsung pakai plugin, tapi pengaruh juga ke loading blog. Btw, mau tanya donk mas, kalau membuat tombol share button sosial medianya gimana ya? Seperti tombol share di web nya mas ini.

  26. kalo bikin tombol share gimana mas?
    soalnya masih bingung cara bikinya. yang tanpa plugin.
    sekalian tombol chat langsung menggunakan whatsapp ya mas.

  27. Artikel yang sangat bagus dan tanpa perlu install plugin, Kalo dibuat tombol share dibuat melayang, caranya gimana ya

  28. thank you gan, membantu saya ini

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *