{"id":20767,"date":"2024-06-25T06:31:55","date_gmt":"2024-06-25T06:31:55","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=20767"},"modified":"2024-06-25T06:31:55","modified_gmt":"2024-06-25T06:31:55","slug":"cara-membuat-tombol-share-di-website","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website","title":{"rendered":"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website"},"content":{"rendered":"

Berbagi atau share mungkin merupakan tindakan yang sering kamu lakukan ketika menemukan konten-konten menarik di media sosial. Harapannya kamu dapat berbagi dengan kolega dan kerabat kamu.<\/p>\n

Namun, tahukah kamu cara membuat tombol share di website? Jika kamu sedang membuat blog atau website berita, membuat fitur tombol share ini adalah salah satu hal penting yang harus kamu buat.<\/p>\n

Mengapa Tombol Share Itu Penting?<\/span><\/h2>\n

Boleh dikatakan, saat ini kita sedang berada pada era surplus akan informasi. Tentu saja hal ini tidak berbahaya jika ditangani dengan bijak. Artinya, kita semua perlu menjadi kurator atas informasi yang kita terima. Salah satu kemudahan di zaman modern ini adalah internet. Ya, itulah penyebab utama terjadinya surplus informasi tersebut.<\/p>\n

Ketika kamu membaca informasi di sebuah website, khususnya pada portal berita, kamu akan melihat fitur yang memudahkan untuk berbagi informasi dengan pengguna lain. Fitur tersebut adalah tombol share.<\/p>\n

Oiya, sebagai pembaca, kita harus bijak dalam meng-kurasi konten sebelum membagikannya kepada banyak orang. Tentu saja berbagi informasi positif itu baik. Itulah fungsi dan manfaat tombol share. Ya, tentunya memudahkan dalam berbagi informasi dan harus informasi yang positif.<\/p>\n

Cara Membuat Tombol Share Di Website<\/span><\/h2>\n

Jika kamu ingin membuat portal berita, blog, atau bahkan website yang lebih kompleks. Jangan lupa untuk membuat fitur share. Tombol share ini tidak hanya berfungsi sebagai media menyebarkan dan berbagi informasi positif, namun dalam perhitungan bisnis juga dapat meningkatkan lead untuk website.<\/p>\n

Kamu bisa memanfaatkannya sebagai konten referral <\/i> atau sebagai salah satu syarat dan ketentuan kontes atau giveaway. Jika pengunjung membagikan konten website kamu maka teman mereka secara tidak langsung akan melihat konten tersebut.<\/p>\n

Nah, jika teman-teman mereka tertarik, kamu sebagai pemilik website tentu akan mendapatkan keuntungan dari trafik yang masuk. Lalu bagaimana cara membuat tombol share di website?<\/p>\n

Seperti halnya membuat website pribadi atau website lainnya, ada dua cara bagi developer untuk membuat tombol share. Yang pertama menggunakan murni code atau yang dikenal sebagai coding, dan yang kedua menggunakan web builder <\/i>atau Content Management System<\/i> (CMS). Tentunya hal ini tergantung pada kebutuhan kamu dan bagaimana perkembangan website kedepannya.<\/p>\n

Oke, langsung saja, berikut cara membuat tombol share di website:<\/p>\n

1. Menggunakan HTML<\/span><\/h3>\n

Cara membuat tombol share di website yang pertama adalah dengan menggunakan kode HTML. HTML adalah singkatan dari HyperText Markup Language. HTML adalah bahasa markup standar untuk membuat halaman web.<\/p>\n

Kamu dapat menggunakan elemen HTML (blok penyusun halaman web), seperti tag dan atribut untuk pembuatan dan struktur bagian, paragraf, dan tautan. Namun, untuk mendapatkan hasil yang baik, kamu tidak hanya perlu menyiapkan kode HTML saja, tetapi juga mengkombinasikannya dengan CSS dan JS.<\/p>\n

CSS adalah bahasa pemrograman yang memungkinkan kamu mengontrol tampilan website. Sedangkan, JS adalah bahasa pemrograman berbasis teks yang memungkinkan kamu membuat elemen interaktif di halaman website dengan membuat fungsi-fungsi yang dapat dijalankan.<\/p>\n

Nah, pada kesempatan kali ini kita akan berlajar membuat tombol share yang anti-mainstream dengan desain yang menarik. Di bawah ini adalah contoh tombol share yang akan dibuat.<\/p>\n

\"\"<\/p>\n

Buat Code HTML<\/span><\/h4>\n

Berikut ini adalah kode HTML yang bisa kamu gunakan untuk membuat tombol share di website:<\/p>\n

<<\/span>!<\/span>DOCTYPE <\/span>html<\/span>><\/span>\r\n\r\n<<\/span>html <\/span>lang<\/span>=<\/span>\"en\"<\/span>><\/span><\/pre>\n
\n
\r\n\r\n<<\/span>head<\/span>><\/span>\r\n\r\n <<\/span>link<\/span> rel<\/span>=<\/span>\"stylesheet\"<\/span> href<\/span>=<\/span>\"style.css\"<\/span>> \r\n\r\n<\/span>\r\n\r\n<script <\/span>src<\/span>=<\/span>\"https:\/\/kit.fontawesome.com\/704ff50790.js\"<\/span>\r\n\r\ncrossorigin<\/span>=<\/span>\"anonymous\"<\/span>><\/span>\r\n\r\n<\/script><\/span>\r\n\r\n\r\n\r\n<script <\/span>src<\/span>=<\/span>\"index.js\"<\/span>><\/span><\/script><\/span>\r\n\r\n <<\/span>\/<\/span>head<\/span>><\/span>\r\n\r\n\r\n\r\n<<\/span>body<\/span>><\/span>\r\n\r\n <<\/span>div <\/span>class<\/span>=<\/span>\"main_box\"<\/span>><\/span>\r\n\r\n <<\/span>input <\/span>type<\/span>=<\/span>\"checkbox\"<\/span> id<\/span>=<\/span>\"share_button\"<\/span>><\/span>\r\n\r\n <<\/span>label <\/span>for<\/span>=<\/span>\"share_button\"<\/span>><\/span>\r\n\r\n <<\/span>span <\/span>class<\/span>=<\/span>\"sharebtn\"<\/span> ><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"far fa-share-square\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>span<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>label<\/span>\r\n\r\n\r\n\r\n <<\/span>div <\/span>class<\/span>=<\/span>\"sm_list\"<\/span>><\/span>\r\n\r\n <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span> class<\/span>=<\/span>\"facebook\"<\/span>><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"fab fa-facebook-f\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>a<\/span>><\/span>\r\n\r\n <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span> class<\/span>=<\/span>\"instagram\"<\/span>><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"fab fa-instagram\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>a<\/span>><\/span>\r\n\r\n <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span> class<\/span>=<\/span>\"linkedin\"<\/span>><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"fab fa-linkedin-in\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>a<\/span>><\/span>\r\n\r\n <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span> class<\/span>=<\/span>\"discord\"<\/span>><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"fab fa-discord\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>a<\/span>><\/span>\r\n\r\n <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span> class<\/span>=<\/span>\"whatsapp\"<\/span>><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"fab fa-whatsapp\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>a<\/span>><\/span>\r\n\r\n <<\/span>a<\/span> href<\/span>=<\/span>\"#\"<\/span> class<\/span>=<\/span>\"slack\"<\/span>><\/span>\r\n\r\n <<\/span>i<\/span> class<\/span>=<\/span>\"fab fa-slack\"<\/span>><\/span><<\/span>\/<\/span>i<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>a<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>div<\/span>><\/span>\r\n\r\n <<\/span>\/<\/span>div<\/span>><\/span>\r\n\r\n<<\/span>\/<\/span>body<\/span>><\/span>\r\n\r\n\r\n\r\n<<\/span>\/<\/span>html<\/span>><\/span><\/pre>\n
\n
Buat Style CSS<\/span><\/h4>\n
Berikut ini adalah style CSS yang bisa kamu gunakan untuk membuat tombol share di website:<\/p>\n
\/<\/span>*<\/span> Restoring<\/span> browsering<\/span> effects<\/span> *<\/span>\/<\/span>\r\n\r\n*<\/span>{<\/span>\r\n\r\n margin<\/span>:<\/span>0<\/span>;<\/span>\r\n\r\n padding<\/span>:<\/span> 0<\/span>;<\/span>\r\n\r\n box<\/span>-<\/span>sizing<\/span>:<\/span> border<\/span>-<\/span>box<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\nbody<\/span>{<\/span>\r\n\r\n height<\/span>:<\/span> 100vh<\/span>;<\/span>\r\n\r\n display<\/span>:<\/span> flex<\/span>;<\/span>\r\n\r\n justify<\/span>-<\/span>content<\/span>:<\/span> center<\/span>;<\/span>\r\n\r\n align<\/span>-<\/span>items<\/span>:<\/span> center<\/span>;<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #000;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n .main_box<\/span>{<\/span>\r\n\r\n width<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n height<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n position<\/span>:<\/span> relative<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button{<\/span>\r\n\r\n display<\/span>:<\/span> none<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\nspan<\/span>,<\/span>a<\/span>{<\/span>\r\n\r\n position<\/span>:<\/span> absolute<\/span>;<\/span>\r\n\r\n display<\/span>:<\/span> flex<\/span>;<\/span>\r\n\r\n justify<\/span>-<\/span>content<\/span>:<\/span> center<\/span>;<\/span>\r\n\r\n align<\/span>-<\/span>items<\/span>:<\/span> center<\/span>;<\/span>\r\n\r\n border<\/span>-<\/span>radius<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\nspan<\/span>{<\/span>\r\n\r\n width<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n height<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n top<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\r\n\r\n left<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translate<\/span>(<\/span>-<\/span>50<\/span>%<\/span>,<\/span>-<\/span>50<\/span>%<\/span>)<\/span>;<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #eee;<\/span>\r\n\r\n color<\/span>:<\/span> #333;<\/span>\r\n\r\n font<\/span>-<\/span>size<\/span>:<\/span> 2em<\/span>;<\/span>\r\n\r\n z<\/span>-<\/span>index<\/span>:<\/span> 1<\/span>;<\/span>\r\n\r\n cursor<\/span>:<\/span> pointer<\/span>;<\/span>\r\n\r\n \/<\/span>*<\/span> border<\/span>-<\/span>radius<\/span>:<\/span> 30<\/span>%<\/span>;<\/span> *<\/span>\/<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n .sm_list<\/span>{<\/span>\r\n\r\n width<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n height<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n position<\/span>:<\/span> absolute<\/span>;<\/span>\r\n\r\n top<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\r\n\r\n left<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translate<\/span>(<\/span>-<\/span>50<\/span>%<\/span>,<\/span>-<\/span>50<\/span>%<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n \r\n\r\n .sm_list<\/span> a<\/span>{<\/span>\r\n\r\n  width<\/span>:<\/span> 4em<\/span>;<\/span>\r\n\r\n  height<\/span>:<\/span> 4em<\/span>;<\/span>\r\n \r\n  border<\/span>-<\/span>radius<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\r\n \r\n  text<\/span>-<\/span>decoration<\/span>:<\/span> none<\/span>;<\/span>\r\n\r\n  color<\/span>:<\/span> #fff;<\/span>\r\n\r\n  transition<\/span>:<\/span> all<\/span> .<\/span>3s<\/span>;<\/span>\r\n\r\n  font<\/span>-<\/span>size<\/span>:<\/span> 1.5em<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(1){<\/span>\r\n\r\nbackground<\/span>-<\/span>color<\/span>:<\/span> #3B5998;<\/span>\r\n\r\ntransition<\/span>-<\/span>delay<\/span>:<\/span> 0.2s<\/span>;<\/span>\r\n\r\ntransform<\/span>:<\/span> translateX<\/span>(<\/span>-<\/span>6em<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(2){<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #dd2553;<\/span>\r\n\r\n transition<\/span>-<\/span>delay<\/span>:<\/span> 0.2s<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translateX<\/span>(<\/span>6em<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(3){<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #000f94;<\/span>\r\n\r\n transition<\/span>-<\/span>delay<\/span>:<\/span> 0.3s<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translateX<\/span>(<\/span>12em<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(4){<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #1077ec;<\/span>\r\n\r\n transition<\/span>-<\/span>delay<\/span>:<\/span> 0.3s<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translateX<\/span>(<\/span>-<\/span>12em<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(5){<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> rgb<\/span>(<\/span>10<\/span>,<\/span> 63<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>\r\n\r\n transition<\/span>-<\/span>delay<\/span>:<\/span> 0.4s<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translateX<\/span>(<\/span>18em<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(6){<\/span>\r\n\r\n background<\/span>:<\/span> linear<\/span>-<\/span>gradient<\/span>(<\/span>70deg<\/span>,<\/span>blue<\/span>,<\/span>green<\/span>,<\/span>red<\/span>,<\/span>yellow<\/span>)<\/span>;<\/span>\r\n\r\n transition<\/span>-<\/span>delay<\/span>:<\/span> 0.4s<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translateX<\/span>(<\/span>-<\/span>18em<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n\/<\/span>*<\/span> Hovering <\/span>Effects<\/span> *<\/span>\/<\/span>\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(1):hover{<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #ffffff;<\/span>\r\n\r\n color<\/span>:<\/span> #3B5998;<\/span>\r\n\r\n \/<\/span>*<\/span> transition<\/span>-<\/span>delay<\/span>:<\/span> 0.2s<\/span>;<\/span>\r\n\r\n transform<\/span>:<\/span> translateX<\/span>(<\/span>-<\/span>6em<\/span>)<\/span>;<\/span> *<\/span>\/<\/span>\r\n \r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(2):hover{<\/span>\r\n\r\n color<\/span>:<\/span> #dd2553;<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #fff;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(3):hover{<\/span>\r\n\r\n color<\/span>:<\/span> #000f94;<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #fff;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(4):hover{<\/span>\r\n\r\n color<\/span>:<\/span> #1077ec;<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #fff;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(5):hover{<\/span>\r\n\r\n color<\/span>:<\/span> rgb<\/span>(<\/span>10<\/span>,<\/span> 63<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #fff;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\n\r\n#share_button:checked ~ .sm_list a:nth-child(6):hover{<\/span>\r\n\r\n color<\/span>:<\/span> black<\/span>;<\/span>\r\n\r\n background<\/span>-<\/span>image<\/span>:<\/span> linear<\/span>-<\/span>gradient<\/span>(<\/span>90deg<\/span>,<\/span>white<\/span>,<\/span>grey<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n\r\nspan<\/span>:<\/span>visited<\/span>{<\/span>\r\n\r\n background<\/span>-<\/span>color<\/span>:<\/span> #000f94;<\/span>\r\n\r\n}<\/span><\/pre>\n
\n
\n
Buat Script JS<\/span><\/h4>\n
Berikut ini adalah script JS yang bisa kamu gunakan untuk membuat tombol share di website:<\/p>\n
<script><\/span>\r\n\r\n\r\n\r\n\/\/ Selecting the html class and<\/span>\r\n\r\n\/\/ convert it to an object<\/span>\r\n\r\n\r\n\r\nconst<\/span> sharebtn<\/span> =<\/span>\r\n\r\n document<\/span>.<\/span>querySelector<\/span>(<\/span>'.sharebtn'<\/span>)<\/span>\r\n\r\n\r\n\r\n\/\/ Creating a bool variable for changing<\/span>\r\n\r\n\/\/ the image of share button<\/span>\r\n\r\nvar<\/span> bool<\/span> =<\/span> 0<\/span>\r\n\r\n\r\n\r\n\/\/ Adding an event listener<\/span>\r\n\r\nsharebtn<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> (<\/span>)<\/span> =<\/span>><\/span> {<\/span>\r\n\r\n\r\n\r\n \/\/ As we clicked the mouse over<\/span>\r\n\r\n \/\/ the share button the bool value.<\/span>\r\n\r\n \/\/ get flipped and then working of<\/span>\r\n\r\n \/\/ if-else loop get starts<\/span>\r\n\r\n bool<\/span> =<\/span> !<\/span>bool<\/span>\r\n\r\n\r\n\r\n if<\/span> (<\/span>bool<\/span> ==<\/span> 0<\/span>)<\/span> {<\/span>\r\n\r\n sharebtn<\/span>.<\/span>innerHTML<\/span> =<\/span>\r\n\r\n '<i class=\"far fa-share-square\"><\/i>'<\/span>\r\n\r\n }<\/span> else<\/span> {<\/span>\r\n\r\n sharebtn<\/span>.<\/span>innerHTML<\/span> =<\/span>\r\n\r\n '<i class=\"fas fa-times\"><\/i>'<\/span>\r\n\r\n }<\/span>\r\n\r\n}<\/span>)<\/span>\r\n\r\n\r\n\r\n\r\n\r\n<\/script><\/span><\/pre>\n
\n
\n
2. Menggunakan WordPress<\/span><\/h3>\n
Cara membuat tombol share di website WordPress selanjutnya adalah dengan menggunakan CMS WordPress. Membuat tombol share di website WordPress tentu lebih mudah dibandingkan coding.<\/p>\n
WordPress adalah Content Management System (CMS) open source, ini adalah alat yang populer untuk orang-orang tanpa pengalaman pemrograman yang ingin membuat website atau blog. Tidak ada biaya untuk perangkat lunak ini. Siapa pun dapat menginstal, menggunakan, dan memodifikasinya secara gratis.<\/p>\n
WordPress awalnya digunakan untuk membuat blog. Namun, kini WordPress sudah berkembang dan kini kamu bisa membuat segala jenis website dengan menggunakan WordPress. Kamu dapat membangun blog hobi atau gaya hidup, portofolio profesional, website bisnis, toko online, atau website lainnya.<\/p>\n
Nah, berikut ini adalah cara membuat tombol share di website WordPress:<\/p>\n
Install Plugin<\/i><\/span><\/h4>\n
\"\"<\/p>\n
Pertama, kamu perlu mencari plugin yang kamu butuhkan. Ada beberapa plugin yang bisa kamu gunakan, seperti “Add to Any”. Setelah ketemu, langsung saja install dan aktifkan seperti pada gambar di atas.<\/p>\n
Atur Penempatan<\/span><\/h4>\n
\"\"<\/p>\n
Selanjutnya, pilih “Add to Any” dari menu “Settings” untuk melakukan pengaturan. Pengaturan ini memungkinkan kamu memilih bentuk tombol, memilih saluran mana yang akan ditampilkan, dan memposisikan tombol.<\/p>\n
Nah, itulah cara membuat tombol share di website. Semoga bermanfaat!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n
\n            \n
\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n    \n
\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n            
\n            \n\n
<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
\n            5\/5 - (2 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
Berbagi atau share mungkin merupakan tindakan yang sering kamu lakukan ketika menemukan konten-konten menarik di media sosial. Harapannya kamu dapat berbagi dengan kolega dan kerabat kamu. Namun, tahukah kamu cara membuat tombol share di website? Jika kamu sedang membuat blog atau website berita, membuat fitur tombol share ini adalah salah satu hal penting yang harus […]<\/p>\n","protected":false},"author":10,"featured_media":20769,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[8891,8890,8889,8892,8893,8888,8887],"class_list":["post-20767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cara-membuat-tombol-share","tag-cara-membuat-tombol-share-di-website","tag-membuat-tombol-share","tag-membuat-tombol-share-menggunakan-html","tag-membuat-tombol-share-menggunakan-wordpress","tag-pentingnya-tombol-share","tag-tombol-share"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png",1366,768,false]},"yoast_head":"\nRugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Berbagi atau share mungkin merupakan tindakan yang sering kamu lakukan ketika menemukan konten-konten menarik di media sosial. Harapannya kamu dapat berbagi dengan kolega dan kerabat kamu. Namun, tahukah kamu cara membuat tombol share di website? Jika kamu sedang membuat blog atau website berita, membuat fitur tombol share ini adalah salah satu hal penting yang harus […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-25T06:31:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dwi H\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dwi H\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\"},\"author\":{\"name\":\"Dwi H\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979\"},\"headline\":\"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website\",\"datePublished\":\"2024-06-25T06:31:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\"},\"wordCount\":729,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png\",\"keywords\":[\"Cara Membuat Tombol Share\",\"Cara Membuat Tombol Share di Website\",\"Membuat Tombol Share\",\"Membuat Tombol Share Menggunakan HTML\",\"Membuat Tombol Share Menggunakan WordPress\",\"Pentingnya Tombol Share\",\"Tombol Share\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\",\"url\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\",\"name\":\"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png\",\"datePublished\":\"2024-06-25T06:31:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979\",\"name\":\"Dwi H\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g\",\"caption\":\"Dwi H\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website","og_locale":"en_US","og_type":"article","og_title":"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website - Hosteko Blog","og_description":"Berbagi atau share mungkin merupakan tindakan yang sering kamu lakukan ketika menemukan konten-konten menarik di media sosial. Harapannya kamu dapat berbagi dengan kolega dan kerabat kamu. Namun, tahukah kamu cara membuat tombol share di website? Jika kamu sedang membuat blog atau website berita, membuat fitur tombol share ini adalah salah satu hal penting yang harus […]","og_url":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website","og_site_name":"Hosteko Blog","article_published_time":"2024-06-25T06:31:55+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png","type":"image\/png"}],"author":"Dwi H","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dwi H","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website"},"author":{"name":"Dwi H","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979"},"headline":"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website","datePublished":"2024-06-25T06:31:55+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website"},"wordCount":729,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png","keywords":["Cara Membuat Tombol Share","Cara Membuat Tombol Share di Website","Membuat Tombol Share","Membuat Tombol Share Menggunakan HTML","Membuat Tombol Share Menggunakan WordPress","Pentingnya Tombol Share","Tombol Share"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website","url":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website","name":"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png","datePublished":"2024-06-25T06:31:55+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/cara-membuat-tombol-share-di-website#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979","name":"Dwi H","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g","caption":"Dwi H"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2024\/06\/Rugi-Kalau-Kamu-Ga-Tahu-Begini-Cara-Membuat-Tombol-Share-Di-Website.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/20767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=20767"}],"version-history":[{"count":2,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/20767\/revisions"}],"predecessor-version":[{"id":20779,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/20767\/revisions\/20779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/20769"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=20767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=20767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=20767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}