Cara Menambahkan Ikon Media Sosial di Sidebar WordPress Anda

Diterbitkan: 2023-11-29

Apakah Anda bertanya-tanya bagaimana cara menambahkan ikon media sosial ke sidebar WordPress Anda?

Menambahkan ikon sosial ke situs web Anda adalah cara mudah untuk memberi tahu audiens tentang kehadiran media sosial Anda. Dengan begitu, mereka dapat dengan mudah mengunjungi profil sosial Anda dan mengikuti Anda secara online.

Pada artikel ini, kami akan menunjukkan cara menambahkan ikon media sosial ke sidebar WordPress Anda.

How to Add Social Media Icons in Your WordPress Sidebar

Mengapa Menambahkan Ikon Media Sosial ke Sidebar WordPress Anda?

Sidebar WordPress adalah area di situs web Anda yang bukan merupakan bagian dari konten utama Anda. Di sinilah Anda dapat menampilkan informasi tambahan yang mungkin menarik bagi pembaca, seperti postingan blog terbaru Anda dan tautan ke profil sosial Anda.

Menambahkan tautan sosial ke sidebar WordPress Anda adalah ide bagus karena ini memberi tahu pengguna tentang akun media sosial Anda. Hasilnya, mereka dapat memeriksanya, mengikuti Anda, dan membantu Anda mengembangkan pengikut media sosial Anda.

Terlebih lagi, menampilkan akun media sosial Anda dapat membangun kredibilitas dan menjadi bukti sosial. Ketika pengunjung melihat Anda aktif di media sosial, ini menunjukkan bahwa bisnis Anda responsif dan dapat dipercaya.

Banyak blog WordPress populer menampilkan ikon media sosial di sidebarnya, seperti WPBeginner:

WPBeginner's social media icons on the sidebar

Catatan: Ikon media sosial berbeda dengan tombol berbagi sosial di postingan WordPress. Jika Anda ingin menambahkan tombol berbagi, Anda dapat melihat panduan pemula kami tentang cara menambahkan ikon berbagi sosial di WordPress.

Karena itu, mari kita lihat cara menambahkan ikon ikuti media sosial ke sidebar WordPress Anda. Metode yang harus Anda gunakan bergantung pada tema dan editor WordPress yang Anda gunakan. Jika Anda ingin melompat ke bagian tertentu, Anda dapat menggunakan tautan cepat berikut:

  • Metode 1: Menambahkan Ikon Sosial Dengan Editor Situs Lengkap (Blokir Tema)
  • Metode 2: Menambahkan Ikon Media Sosial Dengan Widget WordPress (Tema Klasik)
  • Metode 3: Menambahkan Ikon Media Sosial Khusus Dengan SeedProd (Tema Khusus)

Metode 1: Menambahkan Ikon Sosial Dengan Editor Situs Lengkap (Blokir Tema)

Jika Anda adalah pengguna tema blok, Anda dapat menambahkan tombol media sosial ke sidebar WordPress Anda menggunakan blok Ikon Sosial.

Perhatikan bahwa prosesnya berbeda-beda tergantung tema yang Anda gunakan. Beberapa tema blok mungkin menyertakan sidebar secara default, yang kemudian dapat Anda tambahkan blok Ikon Sosial. Beberapa mungkin juga memiliki pola header yang berfungsi seperti sidebar, dan beberapa mungkin tidak memiliki sidebar sama sekali.

Dalam contoh ini, kami akan menggunakan tema blok WordPress default dan menunjukkan cara membuat sidebar untuk semua halaman atau postingan Anda tempat Anda dapat menambahkan blok Ikon Sosial.

Pertama, buka Penampilan » Editor di panel admin WordPress Anda.

Selecting the Full-Site Editor from the WordPress admin panel

Selanjutnya, Anda perlu memilih 'Templat'.

Ini akan membawa Anda ke halaman tempat Anda dapat mengedit template halaman dan postingan Anda.

Choosing the Templates menu on WordPress Editor

Di sini, Anda dapat memilih salah satu templat halaman. Bisa berupa 'Halaman' atau 'Postingan Tunggal', bergantung pada lokasi sidebar yang Anda inginkan.

Jika Anda ingin sidebar ditampilkan di halaman statis dan postingan, Anda dapat mengedit keduanya nanti. Anda juga dapat menyesuaikan templat beranda jika Anda memerlukan sidebar untuk muncul di sana juga.

Dalam hal ini, kita akan memilih 'Halaman'.

Selecting Pages on the WordPress Editor Templates page

Setelah itu klik tombol pensil di panel kiri sebelah tombol titik tiga.

Ini akan membuka editor WordPress.

Clicking the pencil edit button on Pages inside the WordPress editor

Seperti yang Anda lihat, tema default belum memiliki sidebar di template Pages, jadi kita perlu membuatnya untuk itu.

Untuk melakukan ini, Anda dapat mengarahkan kursor ke tempat Anda ingin menambahkan sidebar dan klik tombol tambahkan blok '+' ketika muncul. Lalu, cari dan pilih 'Kolom'.

Selecting the Columns block on WordPress editor

Akan ada beberapa variasi untuk dipilih.

Dalam contoh ini, kita akan menggunakan opsi '66/33' untuk meniru tampilan standar sidebar kanan.

Choosing one of the variations of the Columns block in WordPress editor

Setelah selesai, Anda dapat menarik dan melepas blok Konten Posting di sebelah kiri blok Kolom.

Templat Halaman Anda akan terlihat seperti gambar di bawah, dengan kolom kanan kosong.

Moving the Post Content block to the left side of the Columns block

Sekarang, klik pada kolom kanan dan pilih tombol tambahkan blok '+'.

Kemudian, cari blok Ikon Sosial.

Searching for the Social Icons block to add to the Columns block

Anda sekarang dapat mulai menambahkan platform media sosial Anda ke blok tersebut. Cukup klik lagi tombol '+' dan tambahkan tombol media sosial Anda satu per satu.

Jangan ragu untuk menggunakan fitur pencarian untuk menelusuri semua opsi jejaring sosial.

Adding a social profile to the Social Icons block

Setelah Anda menambahkan semua tombol, Anda dapat mulai menambahkan tautan ke profil sosial Anda.

Yang perlu Anda lakukan hanyalah mengeklik ikon sosial dan memasukkan URL profil Anda.

Entering an Instagram account link to the Social Icons block

Pada tahap ini, Anda dapat menyesuaikan tampilan ikon.

Jika ukuran tombolnya kurang besar atau kecil, Anda dapat menggunakan opsi 'Ukuran' di toolbar blok.

Customizing the buttons' sizes using the Social Icons block toolbar

Di Pengaturan Blokir di sebelah kiri, Anda dapat menyesuaikan pembenaran, orientasi, pengaturan tautan, dan label ikon.

Kami menyarankan agar tautan terbuka di tab baru sehingga pengguna tidak perlu meninggalkan situs web Anda untuk mengunjungi profil sosial Anda.

Social Icons Block Settings

Jika Anda beralih ke tab Block Styles, Anda dapat mengubah gaya dan warna ikon agar sesuai dengan desain situs WordPress Anda.

Tergantung pada preferensi Anda, Anda dapat membuat semua ikon memiliki warna berbeda atau sama, seperti di bawah ini.

Configuring the Social Icons color and styles in the Block Styles tab

Menggulir ke bawah tab yang sama, Anda akan menemukan pengaturan Dimensi untuk menyesuaikan margin dan spasi blok.

Pengaturan ini dapat berguna jika Anda ingin menyesuaikan jarak antara blok Ikon Sosial dan blok lain di sidebar.

Configuring the Dimensions settings of the Social Icons block

Sebaiknya tambahkan teks ajakan bertindak di atas blok Ikon Sosial untuk menyorot lokasi tombol dan menarik perhatian pengunjung situs web.

Untuk melakukan ini, lanjutkan dan tambahkan blok Paragraf menggunakan tombol '+'. Pastikan itu berada di atas ikon sosial.

Adding a Paragraph block on top of the Social Icons block

Beberapa contoh ajakan bertindak yang mungkin Anda gunakan adalah 'Ikuti Kami, 'Bergabunglah dengan X Pembaca', atau 'Dapatkan Pembaruan Terkini'.

Jika Anda belum melakukannya, Anda juga dapat menambahkan lebih banyak elemen ke sidebar, seperti postingan unggulan dan komentar terbaru.

Sekarang, cukup klik tombol 'Simpan' di sudut kanan atas halaman.

Clicking the Save button on the WordPress editor

Dan itu saja!

Saat Anda membuka situs WordPress, Anda sekarang akan melihat sidebar dengan beberapa tautan sosial.

Example of what the Social Icons block looks like on the front end

Jika Anda ingin membuat sidebar unik untuk halaman atau postingan berbeda, yang semuanya menyertakan blok Ikon Sosial, kami sarankan untuk membuat pola WordPress atau blok yang dapat digunakan kembali untuk sidebar Anda.

Untuk mempelajari lebih lanjut, Anda dapat melihat panduan pemula kami tentang cara menggunakan pola blok WordPress dan cara menambahkan blok yang dapat digunakan kembali.

Metode 2: Menambahkan Ikon Media Sosial Dengan Widget WordPress (Tema Klasik)

Metode berikutnya adalah untuk orang yang menggunakan tema WordPress klasik dengan area sidebar yang siap widget.

Untuk menambahkan tombol media sosial ke sidebar Anda, cukup buka Penampilan »Widget dari dashboard WordPress Anda.

Kemudian, navigasikan ke area widget WordPress tempat Anda ingin menambahkan widget Ikon Sosial. Dalam contoh kita, kita akan memilih 'Sidebar', namun namanya mungkin berbeda tergantung pada tema yang Anda gunakan.

Navigating to the Appearance Widgets menu and selecting Sidebar on WordPress admin panel

Sekarang, klik tombol tambahkan blok '+' di kiri atas, di samping 'Widget'.

Di sini, Anda dapat mencari blok Ikon Sosial.

Choosing the Social Icons block in the WordPress Widgets settings

Setelah itu, Anda perlu mengklik widget sidebar ini atau menarik dan melepasnya di mana saja di area pengeditan.

Secara umum, yang terbaik adalah menambahkan ikon jejaring sosial Anda di dekat bagian atas area widget. Dengan cara ini, mereka dapat menarik perhatian pengunjung Anda langsung dari saat mereka membuka halaman tersebut.

Kemudian, mirip dengan cara sebelumnya, Anda dapat mengklik tombol '+' untuk menambahkan tombol media sosial baru satu per satu ke widget.

Pada contoh di bawah, kami telah menempatkan blok Ikon Sosial di bawah blok Pencarian. Kami juga menambahkan ikon WhatsApp.

Placing the Social Icons widget below the Search widget and adding the WhatsApp icon

Pada titik ini, Anda dapat mulai menambahkan tautan sosial Anda.

Untuk WhatsApp, Anda dapat mengetik 'wa.me/' dan menulis nomor WhatsApp Anda di sebelahnya. Tidak perlu menggunakan simbol +, tapi pastikan untuk menambahkan kode panggilan negara Anda, seperti pada tangkapan layar ini.

Adding a WhatsApp number in the Social Icons block

Anda juga memiliki akses ke opsi Blokir Pengaturan dan Gaya di panel kanan.

Untuk membuka opsi tersebut, Anda dapat mengklik ikon 'Pengaturan' di pojok kanan atas.

Selecting the Settings icon on the Widgets page

Selain itu, jangan ragu untuk menambahkan blok Paragraf di atas widget media sosial untuk teks ajakan bertindak Anda.

Sebaiknya buat blok Paragraf dan Ikon Sosial menjadi Grup agar tidak terlihat terpisah di sidebar.

Untuk melakukan ini, cukup pilih Paragraf dan Ikon Sosial secara bersamaan. Setelah itu, klik ikon 'Transformasi' di toolbar blok dan pilih 'Grup'.

Grouping the Social Icons and Paragraph blocks

Setelah selesai, lanjutkan dan klik tombol 'Perbarui' untuk menjadikan perubahan resmi di semua sidebar Anda.

Inilah hasil akhirnya yang akan terlihat:

An example of what the Social Icons widget looks like on the website

Metode 3: Menambahkan Ikon Media Sosial Khusus Dengan SeedProd (Tema Khusus)

Jika Anda menggunakan SeedProd, Anda akan memiliki kontrol lebih besar atas tampilan tombol media sosial di sidebar Anda. Misalnya, jika Anda menggunakan platform media sosial yang ikonnya tidak dimiliki oleh WordPress, maka Anda dapat membuat sendiri tombolnya.

Selain itu, Anda dapat menyesuaikan jarak ikon khusus untuk perangkat seluler.

Jika Anda baru mengenal SeedProd dan ingin menggunakannya, maka Anda perlu menginstal dan mengaktifkan pluginnya terlebih dahulu. Anda memerlukan versi Pro untuk dapat mengakses fitur Profil Sosial.

Untuk informasi lebih lanjut tentang cara memasang plugin, lihat panduan kami tentang cara memasang plugin WordPress.

Kemudian, Anda dapat mengikuti tutorial ini untuk mengatur tema Anda dengan SeedProd.

Sekarang, untuk menambahkan ikon sosial ke sidebar, Anda harus pergi ke SeedProd »Pembuat Tema . Lalu, arahkan kursor ke template 'Sidebar' dan klik 'Edit Desain'.

Clicking Edit Design on the Sidebar template inside SeedProd

Anda sekarang berada di dalam pembuat halaman SeedProd. Blok Profil Sosial seharusnya ditambahkan secara default ke templat tema.

Namun jika belum, Anda dapat menggunakan bilah pencarian di panel kiri dan mengetik 'Profil Sosial'. Setelah itu, cukup drag dan drop blok tersebut ke mana saja yang sesuai untuk Anda.

Selecting the Social Profiles block on SeedProd

Jangan lupa menambahkan blok Teks di atas tombol dan menulis beberapa teks ajakan bertindak.

Dengan cara ini, Anda mengarahkan perhatian pengunjung ke tombol media sosial di sidebar.

Creating a Follow Us text on top of the Social Profiles block on SeedProd

Untuk menyesuaikan tampilan ikon profil media sosial, cukup klik elemen 'Profil Sosial'. Di sini, Anda akan melihat tab berbeda untuk menyesuaikan tombol.

Di tab 'Konten', Anda dapat menambahkan lebih banyak ikon dan mengubah gaya ikon, ukuran ikon, dan perataan.

Configuring the Content tab of the Social Profiles block in SeedProd

Selain opsi standar seperti Instagram dan Facebook, SeedProd juga memiliki tombol untuk Slack, Telegram, Github, dan banyak lagi.

Untuk menambahkan ikon media sosial baru yang tidak dimiliki SeedProd secara default, Anda perlu mengklik tombol '+ Tambahkan Bagikan Baru'.

Setelah itu, pilih 'Kustom' dari menu tarik-turun.

Creating a Custom social media button on SeedProd

Untuk mengedit tombol, silakan klik simbol pengaturan roda gigi di sebelah tombol panah.

Setelah Anda selesai melakukannya, cukup pilih 'Pilih Ikon'.

Clicking the Choose Icon for the custom social media button on SeedProd

Sekarang, Anda akan diarahkan ke Perpustakaan Ikon, di mana terdapat ratusan ikon merek yang dapat dipilih, berkat ikon Font Awesome.

Dalam contoh ini, kami akan menggunakan Airbnb.

Choosing the Airbnb icon on SeedProd

Setelah Anda memilih ikon, Anda dapat menyesuaikan warnanya dan menambahkan tautan ke halaman media sosial.

Di sini, kami memutuskan untuk tetap menggunakan warna merek Airbnb. Saat memasukkan link akun sosial, pastikan untuk menyertakan 'https://' juga.

Configuring the Airbnb icon design on Social Profiles block inside SeedProd

Berikutnya adalah tab 'Template'.

Jika Anda beralih ke tab ini, Anda dapat menyesuaikan desain ikon. Anda dapat membuatnya lebih persegi, melingkar, dan/atau monokromatik, tergantung preferensi Anda.

Editing the Templates setting for the Social Profiles block in SeedProd

Terakhir, tab 'Lanjutan' menawarkan lebih banyak cara untuk menyesuaikan tombol media sosial Anda.

Bagian Gaya adalah tempat Anda dapat mengubah gaya ikon, warna, ukuran, jarak di antaranya, dan efek bayangan.

The Styles tab in the Social Profiles block settings in SeedProd

Di Spacing, Anda dapat mengedit margin dan padding blok. Apa yang hebat tentang SeedProd adalah memungkinkan Anda membuat margin dan padding berbeda untuk desktop dan perangkat seluler.

Untuk mengedit margin dan padding, cukup pilih salah satu ikon perangkat dan masukkan ukuran margin dan padding Anda seperti ini:

Configuring the Social Profiles block spacing in SeedProd

Gulir ke bawah, Anda akan menemukan Visibilitas Perangkat dan Efek Animasi.

Pada pengaturan pertama, Anda dapat memilih untuk menyembunyikan blokir di desktop atau seluler. Ini mungkin diperlukan jika Anda memilih untuk menggunakan blok Profil Sosial di bagian lain situs web Anda dan tidak ingin duplikat ikon profil sosial.

Dengan Efek Animasi, Anda dapat memilih gaya animasi untuk blok saat ikon dimuat di halaman web. Efek ini tidak diperlukan jika Anda tidak ingin terlalu mengalihkan perhatian pengunjung dari konten utama.

SeedProd's Device Visibility and Animation Effect settings for the Social Profiles block

Setelah Anda mengonfigurasi blok Profil Sosial sesuai keinginan Anda, cukup klik tombol 'Simpan' di sudut kanan atas.

Atau, klik tombol 'Pratinjau' untuk melihat tampilan sidebar terlebih dahulu.

Clicking the Save button on SeedProd

Dan itu saja! Anda telah berhasil menambahkan blok profil sosial menggunakan SeedProd.

Berikut hasil akhirnya:

Example of what the social media icons in the sidebar look like if made with SeedProd

Kami harap panduan langkah demi langkah ini membantu Anda mempelajari cara menambahkan ikon media sosial ke sidebar WordPress Anda. Anda mungkin juga ingin melihat cara menampilkan sidebar yang berbeda untuk setiap posting dan halaman di WordPress dan daftar plugin WordPress yang harus dimiliki untuk situs bisnis.

Jika Anda menyukai artikel ini, silakan berlangganan Saluran YouTube kami untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.