Cara Membuat Tombol Share Melayang Atau Sticky Blog

Share Button Sticky

Share button atau bahasa indonesianya tombol share, adalah tombol yang terdapat di situs maupun blog yang berfungsi untuk membagikan artikel. Tombol ini biasanya terdapat di bawah artikel. Tetapi ada juga yang disamping, diatas dan ada juga yang melayang atau sticky.

Keberadaan share button dalam sebuah situs dan blog sangatlah penting, agar artikel yang kita buat dapat diketahui orang lain dan juga share button dapat meningkatkan traffic blog kita.

Untuk membuat share button ini sangatlah mudah, tetapi kali ini saya ingin membagikan tutorial membuat tombol share yang berbeda dengan yang lainnya.

Share button kali ini yaitu Tombol Share Melayang Atau Sticky Pada Blog, jadi tombol share akan melayang ketika kita sedang men-scroll, yang pastinya tampilan tombol share ini sangatlah cantik dan mudah dibuat.

Jika kalian tertarik menerapkan tombol share sticky ini, silahkan simak tutorial berikut.

Tutorial Membuat Tombol Share Sticky

• Pertama kalian masuk ke menu tema dan klik edit HTML.
• Setelah itu, kalian hapus dahulu script share button kalian.
• Lalu, cari kode dibawah. Jika tidak ada silahkan cari kode yang mirip seperti dibawah.

/* WRAPPER */
#wrapper {
background:$(posts.background.color);
max-width:1000px; 
margin:0 auto; 
padding:70px 30px 30px; 
overflow:hidden; 
}

• Jika sudah, ubah kode overflow:hidden; menjadi overflow: unset;.
• Selanjutnya, tambahkan CSS berikut di atas kode ]]></b:skin>.

/* Igniel Share Button */
.ignielshare{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#fff;color:#fff;padding:10px 0;border-top:7px dotted #ddd;z-index:1;transition:all .3s ease}
.ignielshare.show{position:sticky;position:-webkit-sticky;bottom:0}
.ignielshare svg{width:17px;height:17px;margin:auto;text-align:center}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:0}
.ignielshare svg path{fill:#fff}
.ignielshare .count{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;font-weight:500;color:#7bbefa;font-size:1.5em;margin-right:20px}
.ignielshare .count svg path{fill:#7bbefa}
.ignielshare i{font-style:normal;margin:0 3px;line-height:0}
.ignielshare a{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:100%;color:#fff;padding:7px;border-radius:25px;box-shadow:none;transition:all .3s ease}
.ignielshare a:not(:last-child){margin-right:7px}
.ignielshare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
.ignielshare a.facebook{background-color:#3a579a}
.ignielshare a.twitter{background-color:#00abf0}
.ignielshare a.pinterest{background-color:#cd1c1f}
.ignielshare a.linkedin{background-color:#2554BF}
.ignielshare a.tumblr{background-color:#314358}
.ignielshare a.whatsapp{background-color:#4dc247}
.ignielshare a.messenger{background-color:#448aff}
.ignielshare i{display:none}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
@media screen and (max-width:900px){
.ignielshare i{display:block}
.ignielshare .facebook svg,
.ignielshare .pinterest svg,
.ignielshare .tumblr svg{margin:0}
}
@media screen and (max-width:680px){
.ignielshare{justify-content:space-between}
.ignielshare a i{display:none}
.ignielshare a{justify-content:center}
.ignielshare a:not(:last-child){margin-right:5px}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
}
@media screen and (max-width:480px){
.ignielshare a:not(:last-child){margin-right:3px}
.ignielshare .count{margin-right:15px}
}
/* Igniel Share Button Dark Mode */
.Night .ignielshare{background-color:#292e38}

• Lalu, kalian cari kode /* Share button */ dan ubah semua kode dibawah seperti ini.

  /* Share button */
.share-this-pleaseeeee {
 display: inline-block;
 margin: 0;
 color: $(label.color);;
 text-transform: uppercase;
 font-size: 16px;
 background: $(label.bg.color);
 z-index: 1;
 position: relative;
 padding: 0 10px;
 font-weight: bold;
}
#share-container {
   margin: 20px auto 30px;
 overflow: hidden;
}
#share {
 width: 100%;
   text-align: center;
}
#share a {
    width: 25%;
    height: 40px;
    display: block;
    font-size: 24px;
    color: #fff;
    transition: opacity 0.15s linear;
    float: left;
}
#share a:hover {
 opacity: 0.8;
}
#share i {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}
.facebook {
  background: #3b5998;
}
.twitter {
   background: #55acee;
}
.linkedin {
   background: #0077b5;
}
.pinterest {
   background: #cb2027;
}
.whatsapp {
   background: #25d366;
}

• Menjadi seperti ini.

#share-container {
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
background-color: transparent;
margin-top: 10px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

• Cari kode berikut <div id='share-container'> dan ubah menjadi seperti ini.

<div id='share-container'>
<div class="ignielshare"> 
<span class="count"> 
<svg viewbox="0 0 24 24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"></path>
</svg> <i>SHARE</i> </span> 
<a class="facebook" expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.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"></path>
</svg><i>Share</i></a> 
<a class="whatsapp" expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&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"></path>
</svg></a> 
<a class="messenger" href='fb-messenger://share?link= data:post.url'  rel="nofollow" title="Share to WhatsApp">
<svg viewbox="0 0 24 24">
<path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z"></path>
</svg></a> 
<a class="twitter" expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&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 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"></path>
</svg></a> 
<a class="pinterest" data-pin-config="beside" expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &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"></path>
</svg><i>Pin</i></a> 
<a class="linkedin" expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' 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"></path>
</svg></a> 
<a class="tumblr" data-notes="right" expr:href='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' 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"></path>
</svg><i><i>Share</i></i></a> 
</div> 
</div>

• Terakhir, klik simpan tema dan lihat perubahan blog kalian.

Demo

Akhir Kata

Mungkin itu saja tutorial kali ini dari saya. Semoga bermanfaat.

Jika kalian punya saran atau pertanyaan, silahkan komen dibawah.