Cara Pasang Share Button di Postingan Blogger

Cara pasang share button di postingan blog blogger guna memudahkan penulis, pengunjung atau siapapun yang mengunjungi blog/website tersebut, untuk membagikan atau mempromosikan postingan/artikel yang dibacanya kepada pengguna media sosial seperti facebook, twitter, instagram, linkedin, thumblr dan media sosial lainnya tidaklah sulit untuk memasangnya.

Saat ini, sudah banyak sekali artikel yang mengulas tentang cara pasang share button pada berbagai macam blog/website yang dapat Anda temukan melalui mesin pencari google. Dan disetiap artikel yang mengulas tentang memasang share button di postingan/artikel pada blog memiliki desain dan tata letak yang berbeda.

Pasang Share Button Blogger

Disini, Kami akan berbagi cara pasang share button di postingan blog blogger dengan posisi tata letak yang melayang. Berikut dibawah ini, cara pasang share button di postingan menggunakan blog blogger.

Pasang Share Button Melayang di poostingan blogspot.

⥤ Buka Blogger ➧ Tema ➧ Edit HTML,

Pada jendela text editor Edit HTML, gunakan CTRL + F pada keyboard untuk menampilkan kolom isian pencarian, kemudian ketik kode ]]></b:skin> atau </style>. Setelah kode tersebut ditemukan, salin kode css dibawah ini dan letakkan tepat diatas kode tersebut.

.floating-share {
    background: #000;
    bottom: 0;
    box-shadow: 0 0 1px rgba(0,0,0,0.4);
    font: 11px/38px 'Source Sans Pro',sans-serif;
    height: 38px;
    left: 0;
    position: fixed;
    right: 0;
    vertical-align: middle;
    z-index: 98;
}
.share-inner {
    margin: 0 auto;
    max-width: 1300px;
    width: 100%;
}
.floating-share:hover {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.1);
    -o-transition: all 200ms ease-in-out 0s;
    -webkit-transition: all 200ms ease-in-out 0s;
    -moz-transition: all 200ms ease-in-out 0s;
    transition: all 200ms ease-in-out 0s;
}

.share-inner::after,
.share-inner::before {
    content: " ";
    display: table;
}
.share-inner::after {
    clear: both;
}
.floatbtnshare{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
margin-top:3px;
}
.floatbtnshare svg{
width:17px;
height:17px;
vertical-align:-4px;
}
.floatbtnshare svg path{
fill:#fff;
}
.floatbtnshare a{
width:100%;
padding:7px 0px;
text-align:center;
box-shadow:none;
}
.floatbtnshare a:hover{
box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25);
}
.floatbtnshare a.facebook{
background-color:#3a579a;
}
.floatbtnshare a.twitter{
background-color:#00abf0
}
.floatbtnshare a.pinterest{
background-color:#cd1c1f
}
.floatbtnshare a.linkedin{
background-color:#2554BF;
}
.floatbtnshare a.tumblr{
background-color:#314358;
}
.floatbtnshare a.whatsapp{
background-color:#4dc247;
}
}
.truelockeyShare a.pinterest{
background-color:#cd1c1f
}
.truelockeyShare a.linkedin{
background-color:#2554BF;
}
.truelockeyShare a.tumblr{
background-color:#314358;
}
.truelockeyShare a.whatsapp{
background-color:#4dc247;
}

Setelah kode tersebut diletakkan di atas kode ]]></b:skin> atau </style>, lanjutkan dengan mencari kode <data:post.body/> pada kolom pencarian. Kode tersebut biasanya akan ditampilkan lebih dari 1 (satu), cari kode tersebut yang ke 2 (dua) atau ke 3 (tiga). Salin kode dibawah ini dan letakkan tepat dibawah kode yang ke 2 (dua) atau ke 3 (tiga) tersebut.

<div class="floating-share">
    <div class="share-inner">
        <div class='floatbtnshare'>
          <a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;sharer&quot;,&quot;   toolbar=0,status=0,width=626,height=436&quot;);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='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url' onclick='window.open(encodeURI(this.href),&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   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='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @username) &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   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='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   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>
    </div>
</div>

Jika telah selesai, lanjutkan dengan memilih button "Save" pada jendela text editor Edit HTML untuk melakukan perubahan. Untuk melihat hasilnya kurang lebih tampilannya seperti pada gambar di atas dengan caption yang bertuliskan "Pasang Share Button Blogger".

Untuk desain yang lebih baik, Anda bisa melakukan percobaan dengan merubah kode css diatas.