Cara Untuk Membuat Shared Button Sticky Tanpa Menggunakan JavaScript Di Blogger

Assalamualaikum, dahulunya saya perna kongsikan Cara Membuat Social Media Sharing Buttons Tanpa JavaScript Di Blogger, lain pulak pada kali ini saya akan kongsikan cara untuk membuat shared button sticky tanpa menggunakan javascript di blogger.
Cara Untuk Membuat Shared Button Sticky Tanpa Menggunakan JavaScript Di Blogger

Sebenarnya cara membuat share buton ini hampir sama, tetapi saya telah membuat perubahan pada beberapa code dan membuat ia lebih menarik serta menambahkan css sticky, untuk demonya anda boleh menyemak di link berikut.


Cara untuk Memasangnya Share Button
1. login ke blogger anda dan masuk ke template editor
2. Masukan css berikut ke dalam css style anda.

/* share button stickey */
.sharethisGL{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#332d4f;margin-top:20px;padding:10px 0px;border-top:5px dotted #dddddd;position:sticky;position:-webkit-sticky;bottom:0px;}
.sharethisGL svg{width:15px;height:15px;vertical-align:-4px;}
.sharethisGL svg path{fill:#fff;}
.sharethisGL .GLshare{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;color:#00887a;margin-right:15px;font-weight:500;font-size:16px;}
.sharethisGL .GLshare:before{content:'';width:23px;height:23px;margin-right:5px;align-self:center;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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' fill='%2300887a'/%3E%3C/svg%3E") center no-repeat;}
.sharethisGL a{width:100%;padding:3px 0px;text-align:center;box-shadow:none;}
.sharethisGL a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25);}
.sharethisGL a:last-child{border-radius:0px 3px 3px 0px;}
.sharethisGL a.facebook{background-color:#3a579a;border-radius:3px 0px 0px 3px;}
.sharethisGL a.twitter{background-color:#00abf0}
.sharethisGL a.tumblr{background-color:#314358;}
.sharethisGL a.pinterestz{background-color:#a44543}
.sharethisGL a.linkedin{background-color:#2554BF;}
.sharethisGL a.whatsapp{background-color:#4dc247;display:none;}

3. Seterusnya untuk menampilkan butang share di dalam post, Cari code berikut <data:post.body/>, Di dalam blogger template anda selalunya mempunyai 2 adaau 3 code berikut, cari code yang ke dua dan tepat di bawah cod ke dua masukan code berikut.
<div class='sharethisGL'>
                <span class='GLshare'>SHARE</span>
                <a class='facebook' expr:data-text='data:post.title' expr:data-url='data:post.url' 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:data-text='data:post.title' expr:data-url='data:post.url' 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='tumblr' data-notes='right' expr:data-text='data:post.title' expr:data-url='data:post.url' 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>
                <a class='pinterestz' data-pin-config='beside' expr:data-img='data:post.thumbnailUrl' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;http://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' rel='nofollow' target='blank' 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:data-text='data:post.title' expr:data-url='data:post.url' 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>
              </div>

Di dalam code buton share ini saya menggunakan meterial icon untuk mendapatkan loading blog yang cukup bagus.
Setelah selesai memasang code di atas, silakan susun atur warna baground share button anda sesuai warna blog anda.

Setelah selesai menyesuaikan warna shared button silakan save template anda.

Baiklah sampai di sini sahaja perkongsian saya tentang Cara Untuk Membuat Shared Button Sticky Tanpa Menggunakan JavaScript Di Blogger, Saya harapkan apa yang saya kongsikan ini dapat membantu anda .

Related Post