Tombol Share Social Media, E-mail dan Whatsapp Untuk Blogger

Membuat Tombol Share Social Media dan Whatsapp Untuk Blogger atau Blogspot. Cara pasangnya mudah dan Sederhana

Tutorial sicklon 2018-02-22 10.21.4121255.0 / 1

Perkiraan artikel ini membutuhkan Menit dengan membaca 508 Kata.

Tombol share hanya untuk mempermudah visitor untuk membagikan konten atau artikel ke social medianya atau lewat chat whatsapp. Script ini untuk web yang menggunakan layanan blogger.

Silahkan Simak langkah Cara membuat tombol share social media dan whatsapp:

1. Hal pertama menaruh link stylesheet di antara <head> .... </head>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2. Kemudian masukan kode CSS di bawah <style> atau <style type="text/css"> sesuai thema anda atau di atas </style>. Silahkan Pilih salah satu tampilan tombol yang sesuai dengan thema anda:

Tombol Bentuk Rounded:

.icon i{width:40px!important;height:40px!important;line-height:39px!important;font-size:16px;display:block;text-align:center}
.sosmedbtn{margin:10px auto 15px}
.sosmedbtn a{text-decoration:none;display:inline-block;margin:0 5px 5px;border-radius:3px}
.sosmedbtn a:hover{opacity:.8}
.facebook-bg{background-color:#3b5998;color:#FFF;border:solid 1px #3b5998}
.twitter-bg{background-color:#4099ff;color:#FFF;border:solid 1px #4099ff}
.google-bg{background-color:#d34836;color:#FFF;border:solid 1px #d34836}
.whatsapp-bg{background-color:#34AF23;color:#FFF;border:solid 1px #34AF23}
.mail-bg{background-color:#3498db;color:#FFF;border:solid 1px #3498db}
.bookmark-bg{background-color:#2C3D52;color:#FFF;border:solid 1px #2C3D52}

Tombol Bentuk Circle:

.icon i{width:40px!important;height:40px!important;line-height:39px!important;font-size:16px;display:block;text-align:center}
.sosmedbtn{margin:10px auto 15px}
.sosmedbtn a{text-decoration:none;display:inline-block;margin:0 5px 5px;border-radius:100%}
.sosmedbtn a:hover{opacity:.8}
.facebook-bg{background-color:#3b5998;color:#FFF;border:solid 1px #3b5998}
.twitter-bg{background-color:#4099ff;color:#FFF;border:solid 1px #4099ff}
.google-bg{background-color:#d34836;color:#FFF;border:solid 1px #d34836}
.whatsapp-bg{background-color:#34AF23;color:#FFF;border:solid 1px #34AF23}
.mail-bg{background-color:#3498db;color:#FFF;border:solid 1px #3498db}
.bookmark-bg{background-color:#2C3D52;color:#FFF;border:solid 1px #2C3D52}

Tombol 3D:

.icon i{width:40px!important;height:40px!important;line-height:39px!important;font-size:16px;display:block;text-align:center}
.sosmedbtn{margin:10px auto 15px}
.sosmedbtn a{text-decoration:none;display:inline-block;margin:0 5px 5px;border-radius:3px}
.sosmedbtn a:hover{opacity:.8}
.facebook-bg{background-color:#4A89DC;color:#FFF;border:solid 1px #4A89DC;border-bottom:solid 5px #3a71b9}
.twitter-bg{background-color:#4FC1E9;color:#FFF;border:solid 1px #4FC1E9;border-bottom:solid 5px #3ba3c9!important}
.google-bg{background-color:#FF5836;color:#FFF;border:solid 1px #FF5836;border-bottom:solid 5px #c6442f!important}
.whatsapp-bg{background-color:#8CC152;color:#FFF;border:solid 1px #8CC152;border-bottom:solid 5px #77a346!important}
.mail-bg{background-color:#3498db;color:#FFF;border:solid 1px #3498db;border-bottom:solid 5px #2a8cce!important}
.bookmark-bg{background-color:#3C3B3D;color:#FFF;border:solid 1px #3C3B3D;border-bottom:solid 5px #000!important}

Tombol + Text:

.icon i{text-align:center;font-size:16px;height:40px!important;width:40px!important;line-height:40px!important;background-color:rgba(0,0,0,0.1)}
.sosmedbtn{margin:10px auto 15px}
.sosmedbtn a{text-decoration:none;display:inline-block;line-height:40px!important;border:none!important;margin:0 10px 10px 0;padding:0 20px 0 0}
.sosmedbtn a:hover{opacity:.8}
.facebook-bg{background-color:#3b5998;color:#FFF;border:solid 1px #3b5998}
.twitter-bg{background-color:#4099ff;color:#FFF;border:solid 1px #4099ff}
.google-bg{background-color:#d34836;color:#FFF;border:solid 1px #d34836}
.whatsapp-bg{background-color:#34AF23;color:#FFF;border:solid 1px #34AF23}
.mail-bg{background-color:#3498db;color:#FFF;border:solid 1px #3498db}
.bookmark-bg{background-color:#2C3D52;color:#FFF;border:solid 1px #2C3D52}

3. Apabila sudah dipilih salah satu kode tampilan sekarang menambahkan bagian kode HTML di bagian body template. Saya Rekomendasikan taruh tombol share di bagian bawah artikel atau di bawah cover gambar.

Disini ada 2 Kode HTML untuk tombol karena untuk Tombol + Text kodenya beda dengan Rounded, circle maupun 3D.

Kode HTML untuk Rounded, Circle dan 3D:

<div class="sosmedbtn">
<a rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook" class="icon facebook-bg"><i class="fa fa-facebook"></i></a>
<a rel="nofollow" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&hashtags=populer" target="_blank" title="Share to Twitter" class="icon twitter-bg"><i class="fa fa-twitter"></i></a>
<a rel="nofollow" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+" class="icon google-bg"><i class="fa fa-google"></i></a>
<a target="_blank" href="https://web.whatsapp.com/send?text=Halo%0ASaya%20ingin%20berbagi%20artikel:%0A%2A'+encodeURIComponent(document.title)+'%2A%0A' + siteurl + '&phone=" data-text="Check this out!" data-href="' + siteurl + '" class="icon whatsapp-bg"><i class="fa fa-whatsapp"></i></a>
<a href="mailto:name@domain.com?subject=Check%20this%20'+encodeURIComponent(document.title)+'&body=' + siteurl + '" class="icon mail-bg"><i class="fa fa-envelope-o"></i> </a>
<a rel="sidebar" data-item="bookmarks" href="#" class="icon bookmark-bg"><i class="fa fa-bookmark"></i></a>
</div>

Kode HTML untuk Tombol + Text :

<div class="sosmedbtn">
<a rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook" class="icon facebook-bg"><i class="fa fa-facebook"></i> Facebook</a>
<a rel="nofollow" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&hashtags=populer" target="_blank" title="Share to Twitter" class="icon twitter-bg"><i class="fa fa-twitter"></i> Twitter</a>
<a rel="nofollow" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+" class="icon google-bg"><i class="fa fa-google"></i> Google</a>
<a target="_blank" href="https://web.whatsapp.com/send?text=Halo%0ASaya%20ingin%20berbagi%20artikel:%0A%2A'+encodeURIComponent(document.title)+'%2A%0A' + siteurl + '&phone=" data-text="Check this out!" data-href="' + siteurl + '" class="icon whatsapp-bg"><i class="fa fa-whatsapp"></i> WhatsApp</a>
<a href="mailto:name@domain.com?subject=Check%20this%20'+encodeURIComponent(document.title)+'&body=' + siteurl + '" class="icon mail-bg"><i class="fa fa-envelope-o"></i> E-Mail</a>
<a rel="sidebar" data-item="bookmarks" href="#" class="icon bookmark-bg"><i class="fa fa-bookmark-o"></i> Bookmark</a>
</div>

Maka Hasilnya akan seperti ini :

Untuk Memaksimalkan saat share ke social media facebook dan Whatsapp agar saat share muncul thumbnail silahkan baca artikel berikut: Mengatasi permasalahan Share blog di facebook (Meta Open Graph)

Demikianlah Script CSS dan HTML untuk menambah tombol share social media, E-mail dan whatsapp. Semoga bermanfaat