Cara Membuat Share Button Sticky Bisa Melayang — Cara Membuat Share Button Sticky

Cara Membuat Share Button Sticky Oke pada kesempatan kali ini saya akan memberikan sedikit tutorial, yang kepada anda semua sekalian agar tutorial Share Button di template blogger jika anda ingin menganti penampilan agar terlihat menarik dan enak dipandang dan berbeda dari yang lain Cara Membuat Share Button Sticky.

Caranya ini sangat mudah untuk di terapkan sendiri saya terapkan di template Viomagz. atau lainnya juga bisa, untuk template yang lain bisa obat sesuaikan sendiri sampai benar-benar bisa berhasil.

Perlu diketahui ini yang paling utama terpenting share button merupakan salah satu cara mencari sumber tambahan traffic pada blog kita dan seorang pengujung juga bisa share kepada teman atau kerabat terdekat dia.

Cara Membuat Share Button Sticky usahakan anda memberikan informasi yang sajikan di blog kita itu menarik, maka pengunjung tidak akan segan untuk membagikan blog kita ke sosial medianya dan lainnya.

Cara Membuat Share Button Sticky Pada tutorial kali ini, saya terinspirasi dari blog legendaris yaitu igniplex karya mbak igniel yang super wow lah wkwk.

Saat pertama kali mengunjungi blog tersebut, tertarik saja begitu dengan Share Buttonnya yang melayang dan apik. Dan untuk tutorial kali ini, kita hanya perlu menambah dan merombak sedikit pada bagian CSS sharenya saja.

simak berikut ini tutorialnya Cara Membuat Share Button Sticky buttom Sticky.

Silahkan sobat login ke akun blog kalian.

Masuk pada menu Dashboard Blogger kemudian klik Edit template html.
hapus terlebih dahulu kode CSS Share Button.
Pastekan kode CSS.

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

Ganti kode overflow: hidden; diatas menjadi overflow: unset; seperti dibawah ini.

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

Hapus terlebih dahulu kode CSS Share Button bawaan template.
Berikutnya copy kode CSS dibawah ini lalu pastekan di atas kode ]]></b:skin>

/* Share Buttom */
.jejakpintarShare {width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#f9f9f9;margin-top:30px;padding:10px 0 0;position:sticky;position:-webkit-sticky;bottom:0;z-index:1}.jejakpintarShare svg{width:17px;height:17px;vertical-align:-4px}.jejakpintarShare svg path{fill:#757575;transition:all .3s ease}.jejakpintarShare .total{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;font-size:16px;font-weight:500;color:#009688;padding:10px 0;border-top:3px solid #009688;cursor:not-allowed}.jejakpintarShare .total i{font-style:normal;white-space:nowrap}.jejakpintarShare .total svg{margin-right:15px}.jejakpintarShare .total svg path{fill:#009688}.jejakpintarShare a{width:100%;padding:10px 0;border-top-width:3px;border-top-style:solid;text-align:center;box-shadow:none;transition:all .3s ease}.jejakpintarShare a:hover svg path{fill:#fff!important}.jejakpintarShare a.facebook{border-color:#3a579a}.jejakpintarShare a.facebook:hover{background-color:#3a579a}.jejakpintarShare a.facebook svg path{fill:#3a579a}.jejakpintarShare a.twitter{border-color:#00abf0}.jejakpintarShare a.twitter:hover{background-color:#00abf0}.jejakpintarShare a.twitter svg path{fill:#00abf0}.jejakpintarShare a.pinterest{border-color:#cd1c1f}.jejakpintarShare a.pinterest:hover{background-color:#cd1c1f}.jejakpintarShare a.pinterest svg path{fill:#cd1c1f}.jejakpintarShare a.linkedin{border-color:#2554BF}.jejakpintarShare a.linkedin:hover{background-color:#2554BF}.jejakpintarShare a.linkedin svg path{fill:#2554BF}.jejakpintarShare a.tumblr{border-color:#314358}.jejakpintarShare a.tumblr:hover{background-color:#314358}.jejakpintarShare a.tumblr svg path{fill:#314358}.jejakpintarShare a.whatsapp{border-color:#4dc247}.jejakpintarShare a.whatsapp:hover{background-color:#4dc247}.jejakpintarShare a.whatsapp svg path{fill:#4dc247}.jejakpintarShare a.messenger{border-color:#448AFF}.jejakpintarShare a.messenger:hover{background-color:#448AFF}.jejakpintarShare a.messenger svg path{fill:#448AFF}.jejakpintarShare a.telegram{border-color:#448AFF}.jejakpintarShare a.telegram:hover{background-color:#4B97D1}.jejakpintarShare a.telegram svg path{fill:#54A9EB}.jejakpintarShare a.gmail{border-color:#d93025}.jejakpintarShare a.gmail:hover{background-color:#d93025}.jejakpintarShare a.gmail svg path{fill:#d93025}.jejakpintarShare a.line{border-color:#25D366}.jejakpintarShare a.line:hover{background-color:#25D366}.jejakpintarShare a.line svg path{fill:#25D366}@media only screen and (max-width:480px){.jejakpintarShare .total{display:block;text-align:center}.jejakpintarShare .total svg{margin-right:0}.jejakpintarShare .total i{display:none}}

Kemudian cari kode kemudian ganti dengan kode dibawah ini. <b:includable id=’postsharebutton’ var=’post’> kemudian ganti dengan kode dibawah ini.

<b:includable id='postsharebutton' var='post'>
<div class='Share'>
<span class='total'><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'/></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'/></svg></a>
<a class='twitter' expr:href='&quot;https://twitter.com/share?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'/></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;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;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/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&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 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='whatsapp' data-notes='right' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; &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 Whatsapp'>
<svg aria-hidden='true' class='svg-inline--fa fa-whatsapp fa-w-14' data-icon='whatsapp' data-prefix='fab' focusable='false' role='img' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z' fill='currentColor'/></svg></a>
<a class='telegram' expr:href='&quot;https://telegram.me/share/url?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share to Telegram'><svg viewBox='0 0 24 24'><path d='M.707 8.475C.275 8.64 0 9.508 0 9.508s.284.867.718 1.03l5.09 1.897 1.986 6.38a1.102 1.102 0 0 0 1.75.527l2.96-2.41a.405.405 0 0 1 .494-.013l5.34 3.87a1.1 1.1 0 0 0 1.046.135 1.1 1.1 0 0 0 .682-.803l3.91-18.795A1.102 1.102 0 0 0 22.5.075L.706 8.475z'/></svg></a>
<a class='line' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Line'><svg viewBox='0 0 24 24'><path d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/></svg></a>
<a class='gmail' expr:href='&quot;https://mail.google.com/mail/u/0/?view=cm&amp;ui=2&amp;tf=0&amp;fs=1&amp;su=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Gmail'><svg viewBox='0 0 24 24'><path d='M20,18H18V9.25L12,13L6,9.25V18H4V6H5.2L12,10.25L18.8,6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/></svg></a>
</div>
</b:includable>

Kalau sudah, silahkan klik SIMPAN dan selesai

Bagaimana, mudah bukan? Itulah sedikit tutorial Cara Membuat Share Button Sticky atau melayang seperti Igniplex yang dapat berikan Cara Membuat Share Button Sticky.

Untuk sobat yang ingin melihat demonya bisa dilihat pada tampilan Share Button blog ini. Apabila ada pertanyaan, silahkan penuhi kolom komentar.
Jangan lupa dishare yaa, dan dukung blog ini agar terus dapat berkembang. Terima kasih:) Cara Membuat Share Button Sticky