Cara Membuat Tombol Share Sosial Media

Script tombol share atau berbagi berguna agar pengunjung blog dapat membagikan artikel ke sosial media seperti facebook, whatsapp, twitter dan lainnya.

Tombol kode html ini bisa dipasang dimana saja baik di blogger maupun situs lainnya dengan sedikit penyesuaian, dapat diletakkan diatas atau dibawah postingan dan otomatis dapat langsung digunakan serta modelnya biasanya didominasi warna biru, hijau, ala warna situs sosmed tersebut.

Meskipun mungkin dijaman sekarang pada Browser sudah tersedia fitur ini namun kelebihannya jika dipasang langsung ke blog akan lebih praktis karena begitu di klik share langsung mengarah ke sosial media tujuan, berbeda dengan fitur yang ada di Browser jika di klik menggunakan Smartphone akan masuk ke halaman khusus dan jika tidak ada App dari sosmed terkait diponsel kita maka tidak bisa dibagikan. Jadi lebih praktis jika dipasang di Blog dibanding fitur dari Browser.

Cara Pasang Kedalam Template:

1. Salin kedua kode dibawah. Baca selengkapnya tentang Cara Tambahkan CSS dan HTML di Template Blogger

2. Pasang css dibawah ke bagian skin/css.

.sosmed{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;margin-top:20px}

.sosmed svg{width:17px;height:17px;vertical-align:-4px}

.sosmed svg path{fill:#fff}

.sosmed a{width:100%;padding:7px 0;text-align:center;box-shadow:none}

.sosmed a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}

.sosmed a.facebook{background-color:#3a579a}

.sosmed a.twitter{background-color:#00abf0}

.sosmed a.pinterest{background-color:#cd1c1f}

.sosmed a.linkedin{background-color:#2554bf}

.sosmed a.tumblr{background-color:#314358}

.sosmed a.whatsapp{background-color:#4dc247}

3. Pasang html dibawah kebagian seperti gambar diatas.

<b:if cond='data:view.isSingleItem'>

<div class='sosmed'>

<a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href,"sharer"," toolbar=0,status=0,width=626,height=436");return false;' rel='nofollow' title='Share to Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>

<a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " - " + data:post.url' onclick='window.open(encodeURI(this.href)," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to WhatsApp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>

<a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " (by: @sufyan331) "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow' title='Share to Twitter'><svg viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>

<a class='pinterest' data-pin-config='beside' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow' title='Share to Pinterest'><svg viewBox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>

<a class='linkedin' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Linkedin'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg></a>

<a class='tumblr' data-notes='right' expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url' onclick='window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;' rel='nofollow' title='Share to Tumblr'><svg viewBox='0 0 24 24'><path d='M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17'/></svg></a>

</div>

</b:if>

4. Selesai. Kode oleh @sufyan331

Baca juga: Cara Menampilkan Berbagai Jenis Icon dengan Font Awesome

Komentar