Blog

Rugi Kalau Kamu Ga Tahu! Begini Cara Membuat Tombol Share Di Website

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 kamu buat.

Mengapa Tombol Share Itu Penting?

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.

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.

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.

Cara Membuat Tombol Share Di Website

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.

Kamu bisa memanfaatkannya sebagai konten referral 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.

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?

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 atau Content Management System (CMS). Tentunya hal ini tergantung pada kebutuhan kamu dan bagaimana perkembangan website kedepannya.

Oke, langsung saja, berikut cara membuat tombol share di website:

1. Menggunakan HTML

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.

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.

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.

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.

Buat Code HTML

Berikut ini adalah kode HTML yang bisa kamu gunakan untuk membuat tombol share di website:

<!DOCTYPE html>

<html lang="en">



<head>

 <link rel="stylesheet" href="style.css"> 



<script src="https://kit.fontawesome.com/704ff50790.js"

crossorigin="anonymous">

</script>



<script src="index.js"></script>

 </head>



<body>

 <div class="main_box">

 <input type="checkbox" id="share_button">

 <label for="share_button">

 <span class="sharebtn" >

 <i class="far fa-share-square"></i>

 </span>

 </label



 <div class="sm_list">

 <a href="#" class="facebook">

 <i class="fab fa-facebook-f"></i>

 </a>

 <a href="#" class="instagram">

 <i class="fab fa-instagram"></i>

 </a>

 <a href="#" class="linkedin">

 <i class="fab fa-linkedin-in"></i>

 </a>

 <a href="#" class="discord">

 <i class="fab fa-discord"></i>

 </a>

 <a href="#" class="whatsapp">

 <i class="fab fa-whatsapp"></i>

 </a>

 <a href="#" class="slack">

 <i class="fab fa-slack"></i>

 </a>

 </div>

 </div>

</body>



</html>

Buat Style CSS

Berikut ini adalah style CSS yang bisa kamu gunakan untuk membuat tombol share di website:

/* Restoring browsering effects */

*{

 margin:0;

 padding: 0;

 box-sizing: border-box;

}



body{

 height: 100vh;

 display: flex;

 justify-content: center;

 align-items: center;

 background-color: #000;

}



 .main_box{

 width: 4em;

 height: 4em;

 position: relative;

}



#share_button{

 display: none;

}



span,a{

 position: absolute;

 display: flex;

 justify-content: center;

 align-items: center;

 border-radius: 50%;

}



span{

 width: 4em;

 height: 4em;

 top: 50%;

 left: 50%;

 transform: translate(-50%,-50%);

 background-color: #eee;

 color: #333;

 font-size: 2em;

 z-index: 1;

 cursor: pointer;

 /* border-radius: 30%; */

}



 .sm_list{

 width: 4em;

 height: 4em;

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%,-50%);

}


 

 .sm_list a{

  width: 4em;

  height: 4em;
 
  border-radius: 50%;
 
  text-decoration: none;

  color: #fff;

  transition: all .3s;

  font-size: 1.5em;

}



#share_button:checked ~ .sm_list a:nth-child(1){

background-color: #3B5998;

transition-delay: 0.2s;

transform: translateX(-6em);

}



#share_button:checked ~ .sm_list a:nth-child(2){

 background-color: #dd2553;

 transition-delay: 0.2s;

 transform: translateX(6em);

}



#share_button:checked ~ .sm_list a:nth-child(3){

 background-color: #000f94;

 transition-delay: 0.3s;

 transform: translateX(12em);

}



#share_button:checked ~ .sm_list a:nth-child(4){

 background-color: #1077ec;

 transition-delay: 0.3s;

 transform: translateX(-12em);

}



#share_button:checked ~ .sm_list a:nth-child(5){

 background-color: rgb(10, 63, 0);

 transition-delay: 0.4s;

 transform: translateX(18em);

}



#share_button:checked ~ .sm_list a:nth-child(6){

 background: linear-gradient(70deg,blue,green,red,yellow);

 transition-delay: 0.4s;

 transform: translateX(-18em);

}



/* Hovering Effects */

#share_button:checked ~ .sm_list a:nth-child(1):hover{

 background-color: #ffffff;

 color: #3B5998;

 /* transition-delay: 0.2s;

 transform: translateX(-6em); */
 
}



#share_button:checked ~ .sm_list a:nth-child(2):hover{

 color: #dd2553;

 background-color: #fff;

}



#share_button:checked ~ .sm_list a:nth-child(3):hover{

 color: #000f94;

 background-color: #fff;

}



#share_button:checked ~ .sm_list a:nth-child(4):hover{

 color: #1077ec;

 background-color: #fff;

}



#share_button:checked ~ .sm_list a:nth-child(5):hover{

 color: rgb(10, 63, 0);

 background-color: #fff;

}



#share_button:checked ~ .sm_list a:nth-child(6):hover{

 color: black;

 background-image: linear-gradient(90deg,white,grey);

}


span:visited{

 background-color: #000f94;

}

Buat Script JS

Berikut ini adalah script JS yang bisa kamu gunakan untuk membuat tombol share di website:

<script>



// Selecting the html class and

// convert it to an object



const sharebtn =

 document.querySelector('.sharebtn')



// Creating a bool variable for changing

// the image of share button

var bool = 0



// Adding an event listener

sharebtn.addEventListener('click', () => {



 // As we clicked the mouse over

 // the share button the bool value.

 // get flipped and then working of

 // if-else loop get starts

 bool = !bool



 if (bool == 0) {

 sharebtn.innerHTML =

 '<i class="far fa-share-square"></i>'

 } else {

 sharebtn.innerHTML =

 '<i class="fas fa-times"></i>'

 }

})





</script>

2. Menggunakan WordPress

Cara membuat tombol share di website WordPress selanjutnya adalah dengan menggunakan CMS WordPress. Membuat tombol share di website WordPress tentu lebih mudah dibandingkan coding.

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.

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.

Nah, berikut ini adalah cara membuat tombol share di website WordPress:

Install Plugin

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.

Atur Penempatan

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.

Nah, itulah cara membuat tombol share di website. Semoga bermanfaat!