How to Make Sticky Social Media Share Buttons on a Blog?
Marouses Sticky Keys Share Social Media in Post, Share Button is so 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 the results of sharing article links to social media.
In the previous tutorial, I had made a social media share button floating on blogger, but it floated on the left side. while this time it's different, the share button that I will make floats in the post exactly below. exactly the same as having an igniel mba and already using the SVG icon, so you don't have to worry about the blog loading speed problem.
How to Make Sticky Social Media Share Buttons on a Blog?
Why do we make the button sticky or floating, if the button will be used by visitors to share the post, they will have no trouble finding the share button, because most visitors will not look for the share button to try to share the post.but they are also just sharing it for fun. Therefore, an interesting and cool share button will increase the likelihood of the button being clicked by visitors so that it can be shared on their social media.
How to Make Sticky Social Media Share Buttons on a Blog
1. Go to blogger.com.2. Select Themes => Edit HTML
3. Please look for 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 on your template, the sample code usually begins with the word share, each template must have a different code. if you are a viomagz user just look for the .share-this-please code.
6. If you have found, 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 code
8. After that, delete the HTML Share Button code that comes with the 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 So this tutorial is about How to Make a Sticky Social Media Share Button on a Blog. if you experience difficulties when applying it, please ask in the comments column. Good luck and hopefully useful.
Comments
Post a Comment