Home / WordPress / Cara Membuat Tombol Social Media Di WordPress Tanpa Plugin

Cara Membuat Tombol Social Media Di WordPress Tanpa Plugin

Cara Membuat Tombol Social Media Di WordPress Tanpa Plugin – Salah satu kewajiban pengelola WordPress untuk mengakrabkan dan saling mengenal lebih jauh lagi antara pengunjung dan pengelola WordPress adalah, blognya dipasang tombol social media. Dengan dipasangnya tombol social media seperti : Facebook, Twitter, Google+, Tumblr, Pinterest, dan lain-lain maka pengunjung WordPress dapat dengan mudah untuk melakukan sharing atau sekedar silaturahmi dengan pengelola WordPress yang dikunjunginya.

Baca Juga : Cara Merubah Tombol Submit Contact Form 7 Di WordPress

Dalam Membuat Tombol Social Media Di WordPress terdapat dua cara, membuat tombol social media dengan bantuan Plugin dan membuat tombol social media tanpa menggunakan Plugin. Bagi Anda yang suka menggunakan Plugin karena tidak mau direpotkan dengan pengaturan kode, silakan gunakan Plugin yang bisa dicari dikotak pencarian menu Plugin dengan kata kunci “Social Media”. Anda tinggal memilih Plugin mana yang cocok dengan selera Anda atau sesuai dengan tema yang Anda gunakan saat ini. Namun jika Anda ingin mencoba membuat tombol social media tanpa plugin, maka pada tulisan ini saya akan mencoba berbagi ilmu sedikit tentang kebutuhan tersebut.

Cara-Membuat-Tombol-Social-Media-Di-WordPress-Tanpa-Plugin

Baca Juga : Cara Membuat Tombol Share Artikel Ke Sosial Media

Sebagai contoh, Anda bisa lihat di Sidebar WEB Info-Menarik. Tombol social media tersebut saya buat tanpa menggunakan Plugin dan diberi background gambar social media format .png.

Berikut Cara Membuat Tombol Social Media Di WordPress Tanpa Plugin

Tempatkan kode berikut di menu Appearance > Widgets > Text melalui wp-admin Dashboard WordPress Anda. Rubah masing-masing URL Social Media dengan URL Social Media Anda. Simpan kode tersebut.

<div id="social-icons">
 <ul>
 <li><a class="icon facebook" href="https://www.facebook.com/NamaFacebookAnda" target="_blank" title="Facebook" rel="nofollow"></a></li>
 <li><a class="icon twitter" href="http://twitter.com/NamaTwitterAnda/" target="_blank" title="Twitter" rel="nofollow"></a></li>
 <li><a class="icon googleplus" href="https://plus.google.com/u/0/IDNomorGoogle+Anda" target="_blank" title="Google+" rel="nofollow"></a></li>
 <li><a class="icon pinterest" href="http://www.pinterest.com/NamaPinterestAnda/" target="_blank" title="Pinterest" rel="nofollow"></a></li>
 <li><a class="icon tumblr" href="http://NamaTumblrAnda.tumblr.com/" target="_blank" title="Tumblr" rel="nofollow"></a></li>
 </ul>
 </div>

Agar tampilannya lebih menarik lagi, copy dan paste kode berikut dan tempatkan di style.css tema yang gunakan. Bisa melalui CPanel Hosting atau wp-admin Dashboard WordPress Anda.

/*-[ Social Icons ]-------------------*/
 #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, .googleplus, .pinterest, .tumblr, .twitter{
 z-index:5;
 display:block;
 border-radius:10px;
 background: url(images/ganti-dengan-nama-file-gambar-social-media-Anda.png) 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:2px 3px;
 }
 #social-icons .twitter{
 width:39px;
 height:39px;
 background-color:rgba(64,153,255,0.42);
 background-position:-32px 3px;
 }
 #social-icons .googleplus{
 width:39px;
 height:39px;
 background-color:rgba(228,69,36,0.42);
 background-position:-67px 3px;
 }
 #social-icons .pinterest{
 width:39px;
 height:39px;
 background-color:rgba(174,45,39,0.42);
 background-position:-104px 2px;
 }
 #social-icons .tumblr{
 width:39px;
 height:39px;
 background-color:rgba(47,73,97,0.42);
 background-position:-138px 2px;
 }
 .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 .googleplus, #social-icons li:hover .googleplus{
 background-color:rgba(228,69,36,1);
 }
 .touch #social-icons li .pinterest, #social-icons li:hover .pinterest{
 background-color:rgba(174,45,39,1);
 }
 .touch #social-icons li .tumblr, #social-icons li:hover .tumblr{
 background-color:rgba(47,73,97,1);
 }

Untuk background :

background: url(images/ganti-dengan-nama-file-gambar-social-media-Anda.png) no-repeat;

Silahkan ganti dengan URL gambar social media yang Anda upload. Sebaiknya gunakan gambar social media format .png. Upload gambar social media di root public_html > wp-content >themes > [nama tema yang Anda gunakan] > images. Caranya bisa Anda lihat pada tulisan : Cara Merubah Gambar Default Avatar WordPress Tanpa Plugin. Sebagai contoh, saya menggunakan gambar social media format .png seperti ini : Social Media Info-Menarik Format .png.

Anda bisa berkreasi yang lebih menarik lagi, baik kode CSS ataupun gambar social media format .png. Dalam membuat gambar format .png, Anda bisa menggunakan program pengolah gambar Photoshop.

About InfoMenarik

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

36 comments

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

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

    • 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 :)

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

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

  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

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

    • 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

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

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

  10. 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.

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

    • 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. mas itu kode nya simpan di widget,trus widgetnya taro di mana? biar share buton nya ada di bawah postingan diman naro nya?

    • 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.

    • 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.

  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?

    • 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. Ternyata tombol sosial media yah, makanya heran juga kenapa ditempatkan di widget, kalau tombol share button sosial media, adak gak tutorialnya mas?

Leave a Reply

Your email address will not be published. Required fields are marked *