Creating Sticky Social Media Share Buttons in Posts , the Share Button is indeed very important for a website/blog. because this is related to the popularity of the website or blog. the more visitors who share our articles, the more traffic/visitors we get from sharing article links to social media
in the previous tutorial I've made social media share buttons float on blogger , but it floats on the left side. while this time is different, the share button that I will make floats in the post, exactly below. Exactly the same as having Ms. Igniel and already using the SVG icon, so you don't have to worry about the problem of loading the blog's speed.
Why do we make the button sticky or floating, if the button will be used by visitors to share the post, they have no trouble finding the share button, because most visitors will not look for the share button to try to share the post,
How To Make Sticky Social Media Share Buttons On Blog
1. Log in to blogger.com
2. Select Theme => Edit HTML
3. Please find the code #wrapper , then change the value of the overflow property from hidden to unset
4. Then the code will be like this
2. Select Theme => Edit HTML
3. Please find the code #wrapper , then change the value of the overflow property from hidden to unset
4. Then the code will be like this
#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}
5. After that look for the CSS Share Button code in your template, the code example usually starts with the word share, each template must have a different code. if you are a viomagz user, just look for code .share-this-please
6. if you find it, delete the CSS share code and replace it with the CSS Share Button below
/* Share button */
.share-this {
display: inline-block;
margin: 0;
color: inherit;
text-transform: uppercase;
font-size: 16px;
color: #000;
background: #fff;
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: 700;
margin-top: 3px
}
#share-container {
background: #fff;
width: 100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
position: -webkit-sticky;
position: sticky;
bottom: 0px;
z-index: 1;
}
#share {
width: 100%;
text-align: center
}
#share a {
width: 20%;
height: 40px;
display: block;
font-size: 24px;
color: #fff;
transition: opacity .15s linear;
float: left
}
#share i {
position: relative;
top: 8px;
margin-left: 10px;
font-style: normal;
white-space: nowrap;
color: #009688;
}
.facebook {
border-color: #3a579a;
border-top-style: solid;
border-top-width: 3px
}
.facebook:hover {
background: #3a579a
}
#share svg {
width: 24px;
height: 24px;
vertical-align: -12px
}
#share a:hover svg path {
fill: #fff
}
.twitter {
border-color: #55acee;
border-top-width: 3px;
border-top-style: solid
}
.twitter:hover {
background: #55acee
}
.linkedin {
background: #0077b5
}
.pinterest {
border-color: #cb2027;
border-top-width: 3px;
border-top-style: solid
}
.pinterest:hover {
background: #cb2027
}
.whatsapp {
border-color: #25d366;
border-top-width: 3px;
border-top-style: solid
}
.whatsapp:hover {
background: #25d366
}
.total {
border-color: #009688;
border-top-style: solid;
border-top-width: 3px
}
.total:hover {
background: #009688
}
7. Next, look for the <b:includable id='postsharebutton' var='post'>special code for the viomagz user, if you are a user of another template, please search and adjust the placement of the code.
8. After that delete the HTML Share Button code from the default template and replace it with the one below
<div class='label-line-c'>
<p class='share-this'>Bagikan Artikel ini</p>
</div>
<div id='share-container'>
<div id='share'>
<a class='total' target='_blank'>
<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' fill='#009688'/></svg></a>
<!-- facebook -->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow noopener' target='_blank' title='facebook'>
<svg viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='#009688'/>
</svg>
</a>
<!-- twitter -->
<a class='twitter' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' rel='nofollow noopener' target='_blank' title='twitter'>
<svg viewBox='0 0 24 24'>
<path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z' fill='#55acee'/>
</svg>
</a>
<a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow noopener' target='_blank' title='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' fill='#cb2027'/>
</svg>
</a>
<a class='whatsapp' expr:href='"https://api.whatsapp.com/send?phone=&text=" + data:post.title + "%20%2D%20" + data:post.url' rel='nofollow noopener' target='_blank' title='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' fill='#25d366'/>
</svg>
</a>
</div>
</div> <!-- social sharing button end -->
9. Finally save the theme and check the results
Thus this tutorial is about How to Create Sticky Social Media Share Buttons on Blogs. if you have difficulty when applying it, please ask in the comments column. Good luck and hopefully useful.