{"id":8271,"date":"2020-11-06T07:07:58","date_gmt":"2020-11-06T07:07:58","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=8271"},"modified":"2025-01-24T14:23:02","modified_gmt":"2025-01-24T07:23:02","slug":"logo-sosmed-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/logo-sosmed-wordpress","title":{"rendered":"Cara menambahkan logo sosmed (media sosial) di WordPress"},"content":{"rendered":"<p>Selain website, apakah Anda juga aktif di Internet menggunakan media sosial lainnya? Jika demikian, tak ada salahnya untuk memperkenalkan akun Anda kepada para pengunjung situs. Menunjukkan akun media sosial kepada pengunjung bisa membantu menambah <em>followers<\/em>, dan salah satu cara efektif untuk melakukannya adalah dengan menambahkan logo sosmed di website.<\/p><p>Ukurannya yang kecil memungkinkan Anda meletakkan logo medsos di mana saja tanpa khawatir tata letak halaman atau website akan terganggu. Dalam artikel ini, kami akan menunjukkan cara menambahkan logo sosmed ke WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-menambahkan-logo-sosmed\"><strong>Cara Menambahkan Logo Sosmed<\/strong><\/h2><p>Ada dua cara memasang widget sosial media di WordPress, yaitu dengan menambahkannya ke situs tanpa tool apa pun atau menggunakan plugin pihak ketiga.<\/p><p>Jika ingin menggunakan plugin, berikut rekomendasi plugin favorit kami yang bisa Anda coba:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/simple-social-icons\/\" target=\"_blank\" rel=\"noopener\">Simple Social Icons<\/a> (antarmuka rapi dan ringkas)<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/social-media-button\/\" target=\"_blank\" rel=\"noopener\">Social Media Buttons<\/a> (warna ikon bisa diganti)<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/social-icons-widget-by-wpzoom\/\" target=\"_blank\" rel=\"noopener\">Social Icons Widget by WPZOOM<\/a> (ukuran dan <em>padding <\/em>bisa diubah, ikon bisa dicari menggunakan kata kunci, menyediakan banyak <em>style<\/em>, dll.)<\/li>\n<\/ul><p>Jika baru memulai, ada baiknya Anda menggunakan plugin karena cara ini tidak mengharuskan Anda memiliki pengetahuan teknis terlebih dulu. Sayangnya, sebagian besar plugin tidak menyediakan ikon media sosial yang kurang populer. Anda harus menambahkannya secara manual jika tidak ada opsi untuk menambahkan profil media sosial tertentu.<\/p><p>Walaupun nantinya Anda akan menjumpai sedikit <em>coding<\/em>, proses ini sebenarnya tidak begitu rumit. Berikut cara memasang widget sosial media di WordPress:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-pilih-logo-media-sosial\">1. Pilih Logo Media Sosial<\/h3><p>Sangat mudah untuk mencari logo sosmed di Internet. Google bisa membantu Anda menemukan berbagai pilihan ikon sosial media.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p> <strong>Protip:<\/strong> Ingat, jangan sembarangan menggunakan gambar ikon yang memiliki hak cipta. Anda mungkin akan dianggap melanggar undang-undang hak cipta. <\/p>\n                <\/div>\n\n\n\n<\/p><p>Untuk menghindari permasalahan hak cipta, filter hasil pencarian gambar di Google berdasarkan hak penggunaan. Caranya, buka <strong>Images <\/strong>&gt;<strong> Tools <\/strong>&gt;<strong> Usage rights <\/strong>&gt;<strong> Labeled for reuse<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"366\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/google-search-usage-right.jpg\/public\" alt=\"cuplikan bagaimana memfilter gambar google\" class=\"wp-image-8272\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/google-search-usage-right.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/google-search-usage-right.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/google-search-usage-right.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/google-search-usage-right.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Setelahnya, Google hanya akan menampilkan gambar yang boleh digunakan secara bebas. Anda bisa mencari satu per satu gambar logo sosmed yang diinginkan atau mengunduhnya sekaligus dalam satu paket.<\/p><p>Situs seperti <a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"noopener\">Iconfinder<\/a> menyediakan paket logo medsos gratis yang menyertakan berbagai varian ikon media sosial.<\/p><p>Jika sudah menemukan logo sosmed yang tepat, unduh dan unggah ke WordPress media library. Buka <strong>Media <\/strong>&gt; <strong>Add New<\/strong>, lalu unggah ikon sosial media yang baru.<\/p><p>Sebaiknya gunakan tool multi-uploader untuk mengunggah semua ikon sekaligus.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-tambahkan-widget-dan-konfigurasikan-html\"><strong>2. Tambahkan Widget dan Konfigurasikan HTML<\/strong><\/h3><p>Tambahkan widget untuk memuat logo sosmed ke situs Anda.<\/p><p>Buka <strong>Customizer <\/strong>&gt; <strong>Widgets <\/strong>melalui dashboard WordPress. Tambahkan &ldquo;Custom HTML&rdquo; dengan menyeretnya ke header, sidebar, atau footer.<\/p><p>Berikan judul untuknya, misalnya &ldquo;Social Media&rdquo;, kemudian copy-paste kode berikut ini.<\/p><pre class=\"wp-block-preformatted\">&lt;div&gt;&lt;a href=\"http:\/\/instagram.com\/username\"&gt;&lt;img style=\"margin:5px\" src=\"[path to your icon]\" width=\"30\" height=\"30\" alt=\"Instagram\"&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/facebook.com\/username\"&gt;&lt;img style=\"margin:5px\" src=\"[path to your icon]\" width=\"30\" height=\"30\" alt=\"Facebook\"&gt;&lt;\/a&gt;&lt;a href=\"http:\/\/youtube.com\/user\/username\" &gt;&lt;img style=\"margin:5px\" src=\"[path to your icon]\" width=\"30\" height=\"30\" alt=\"YouTube\"&gt;&lt;\/a&gt;&lt;\/div&gt;<\/pre><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p> <strong>Protip:<\/strong> Perhatikan username dan tanda kurung dalam kode di atas. Ganti <strong>username<\/strong> dengan profil media sosial Anda dan arahkan URL gambar ke logo medsos Anda. <\/p>\n                <\/div>\n\n\n<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1302\" height=\"549\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/public\" alt=\"lokasi url pada ikon sosial media\" class=\"wp-image-8273\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/w=1302,fit=scale-down 1302w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/social-media-icon-url-location.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1302px) 100vw, 1302px\" \/><\/figure><\/div><p>Buka <strong>Media <\/strong>&gt; <strong>Library <\/strong>dan klik ikon yang sudah diunggah. Lihat kolom URL. URL tersebut merupakan <em>direct link <\/em>yang perlu Anda gunakan untuk menggantikan tanda kurung yang ditunjukkan pada kode di atas.<\/p><p>Tampilan akhir kode akan terlihat seperti di bawah ini.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"482\" height=\"554\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/custom-html-widget-page.png\/public\" alt=\"halaman kustomisasi widget\" class=\"wp-image-8274\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/custom-html-widget-page.png\/w=482,fit=scale-down 482w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/custom-html-widget-page.png\/w=131,fit=scale-down 131w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/custom-html-widget-page.png\/w=261,fit=scale-down 261w\" sizes=\"(max-width: 482px) 100vw, 482px\" \/><\/figure><\/div><p>Pastikan URL <em>direct<\/em> gambar diakhiri dengan ekstensi file, seperti <strong>.png <\/strong>atau <strong>.jpg<\/strong>. Jika tidak ada ekstensi tersebut, artinya kode yang Anda masukkan salah dan nantinya logo sosmed tidak akan muncul.<\/p><p>Setelah mengedit kode, klik <strong>Save<\/strong>. Buka situs Anda dan lihat tampilan widget yang baru.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"776\" height=\"417\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/ikon-sosmed-yang-sudah-jadi.png\/public\" alt=\"ikon sosmed yang sudah berada pada halaman website\" class=\"wp-image-8275\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/ikon-sosmed-yang-sudah-jadi.png\/w=776,fit=scale-down 776w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/ikon-sosmed-yang-sudah-jadi.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/ikon-sosmed-yang-sudah-jadi.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2019\/06\/ikon-sosmed-yang-sudah-jadi.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 776px) 100vw, 776px\" \/><\/figure><\/div><p>Nah, setelah berhasil menambahkan ikon media sosial di WordPress, Anda boleh mengulangi setiap langkah di atas untuk menambahkan logo medsos lainnya. Prosesnya mudah dan tidak memakan banyak waktu. Dengan menambahkan ikon sosial media, <em>engagement<\/em> situs dan media sosial Anda pun akan meningkat.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/id\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-37614\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\"><strong>Kesimpulan<\/strong><\/h2><p>Menambahkan logo sosmed ke website bisa menjadi cara yang sangat efektif untuk menambah <em>followers<\/em> dan memperluas <em>brand visibility<\/em> Anda secara keseluruhan.<\/p><p>Setelah membaca artikel ini, Anda pun sudah tahu cara menambahkan ikon media sosial di WordPress. Jika masih punya pertanyaan, jangan sungkan untuk menyampaikannya kepada kami. Selamat mencoba!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selain website, apakah Anda juga aktif di Internet menggunakan media sosial lainnya? Jika demikian, tak ada salahnya untuk memperkenalkan akun Anda kepada para pengunjung situs. Menunjukkan akun media sosial kepada pengunjung bisa membantu menambah followers, dan salah satu cara efektif untuk melakukannya adalah dengan menambahkan logo sosmed di website. Ukurannya yang kecil memungkinkan Anda meletakkan [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/logo-sosmed-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":27120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cara Menambahkan Logo Sosmed (Media Sosial) di WordPress","rank_math_description":"Menambahkan logo sosmed di website bisa meningkatkan engagement situs dan menambah followers. Cari tahu caranya dalam artikel ini.","rank_math_focus_keyword":"logo sosmed, logo medsos, ikon media sosial, ikon sosial media, logo sosial media","footnotes":""},"categories":[4859],"tags":[7430,4860],"class_list":["post-8271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-plugin","tag-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/adicionar-icones-redes-sociais","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/logo-sosmed-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/iconos-redes-sociales-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/adicionar-icones-redes-sociais","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/social-media-icons-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/social-media-icons-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=8271"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8271\/revisions"}],"predecessor-version":[{"id":29290,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/8271\/revisions\/29290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media\/27120"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=8271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=8271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=8271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}