In this post we will teach you. (How to Make Social Buttons Html) .Copy the code below. Then check out our blog through the online HTML editor. Then use the code in your website. If there is a problem with the code, ask your question in the comment box below.
<![CDATA[
<style type="text/css">#st-28 {
font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif;;
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
backface-visibility: hidden;
display: block;
position: fixed;
opacity: 1;
text-align: left;
top: 160px;
z-index: 94034;
}
#st-28.st-left {
left: 0px;
}
#st-28.st-hidden.st-left {
left: -48px;
}
#st-28.st-hidden {
width: 96px;
}
#st-28 > div {
clear: left;
float: left;
}
#st-28 .st-btn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
border: none;
cursor: pointer;
display: inline-block;
font-size: NaNpx;
height: 48px;
line-height: 24px;
margin-bottom: 0;
opacity: 1;
overflow: hidden;
padding: 12px;
position: relative;
text-align: left;
top: 0;
vertical-align: top;
white-space: nowrap;
width: 48px;
}
#st-28 .st-btn.st-first {
border-top: none;
border-top-right-radius: 16px;
}
#st-28 .st-btn.st-last {
border-bottom: none;
border-bottom-right-radius: 16px;
}
#st-28 .st-btn > svg {
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
height: 24px;
margin-left: 0;
vertical-align: top;
width: 24px;
}
#st-28 .st-btn > img {
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
height: 24px;
margin-left: 0;
vertical-align: top;
width: 24px;
}
#st-28 .st-btn > span {
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
color: #fff;
display: inline-block;
font-weight: 500;
left: -35px;
letter-spacing: 0.5px;
opacity: 0;
padding: 0 6px;
position: relative;
vertical-align: top;
filter: alpha(opacity=0);
}
#st-28 .st-btn.st-hide-label > span {
display: none !important;
}
#st-28 .st-total {
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
background: #fff;
color: #555;
display: inline-block;
font-weight: 500;
line-height: 18px;
margin-right: 0;
min-height: 34px;
max-width: 80px;
opacity: 1;
padding: 4px 0;
text-align: center;
width: 48px;
}
#st-28 .st-total.st-hidden {
display: none;
}
#st-28 .st-total > span {
display: block;
font-size: 18px;
line-height: 21px;
padding: 0;
}
#st-28 .st-total > span.st-shares {
font-size: 11px;
line-height: 11px;
}
#st-28 .st-toggle {
left: -48px;
-moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
background: #ccc;
border-bottom-right-radius: 16px;
color: white;
cursor: pointer;
font-size: 24px;
line-height: 24px;
position: relative;
text-align: center;
width: 48px;
}
#st-28.st-hidden .st-toggle {
border-top-right-radius: 16px;
}
#st-28.st-left .st-toggle .st-left {
display: inline-block;
}
#st-28.st-left.st-hidden .st-toggle .st-left {
display: none;
}
#st-28.st-left .st-toggle .st-right {
display: none;
}
#st-28.st-left.st-hidden .st-toggle .st-right {
display: inline-block;
}#st-28:hover .st-toggle {
left: 0;
}
#st-28.st-hidden:hover .st-toggle {
left: 48px;
}
#st-28.st-toggleable:hover .st-btn.st-last {
border-bottom-right-radius: 0;
}
#st-28.st-toggleable:hover .st-btn.st-last:hover {
border-bottom-right-radius: 16px;
}
#st-28 .st-btn:hover {
border-bottom-right-radius: 16px;
border-top-right-radius: 16px;
}
#st-28.st-has-labels .st-btn:hover {
width: 120px;
}
#st-28:not(.st-has-labels) .st-btn:hover {
width: 62px;
}
#st-28 .st-btn.st-hide-label:hover {
width: 62px;
}
#st-28 .st-btn:hover > svg {
margin-left: 5px;
}
#st-28 .st-btn:hover > img {
margin-left: 5px;
}
#st-28 .st-btn:hover > span {
opacity: 1;
display: inline-block;
left: 0;
filter: alpha(opacity=100);
}
@media (max-width: 1024px) {
#st-28 .st-btn:hover > svg {
margin-left: 0;
}
#st-28 .st-btn:hover > span {
display: none;
}
}@media (max-width: 1024px) {
#st-28 {
bottom: 0;
display: flex;
left: 0;
right: 0;
top: auto;
width: 100%;
}
#st-28.st-hidden {
bottom: -48px;
width: 100%;
}
#st-28.st-hidden.st-left {
left: 0;
}
#st-28.st-hidden.st-right {
right: 0;
}
#st-28 > div {
-moz-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
clear: none;
flex: 1;
float: none;
}
#st-28 .st-total {
background: #fff;
padding: 6px 8px;
}
#st-28 .st-btn {
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
text-align: center;
width: auto;
}
#st-28 .st-btn > span {
display: none;
}
#st-28 .st-toggle {
display: none;
}body { padding-bottom: 48px; }
}#st-28 .st-btn[data-network='whatsapp'] {
background-color: #25d366;
}
#st-28 .st-btn[data-network='whatsapp'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='whatsapp'] > span {
color: #fff;
}
#st-28 .st-btn[data-network='twitter'] {
background-color: #55acee;
}
#st-28 .st-btn[data-network='twitter'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='twitter'] > span {
color: #fff;
}
#st-28 .st-btn[data-network='linkedin'] {
background-color: #0077b5;
}
#st-28 .st-btn[data-network='linkedin'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='linkedin'] > span {
color: #fff;
}
#st-28 .st-btn[data-network='reddit'] {
background-color: #ff4500;
}
#st-28 .st-btn[data-network='reddit'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='reddit'] > span {
color: #fff;
}
#st-28 .st-btn[data-network='pinterest'] {
background-color: #CB2027;
}
#st-28 .st-btn[data-network='pinterest'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='pinterest'] > span {
color: #fff;
}
#st-28 .st-btn[data-network='sms'] {
background-color: #ffbd00;
}
#st-28 .st-btn[data-network='sms'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='sms'] > span {
color: #fff;
}
#st-28 .st-btn[data-network='sharethis'] {
background-color: #95D03A;
}
#st-28 .st-btn[data-network='sharethis'] svg {
fill: #fff;
}
#st-28 .st-btn[data-network='sharethis'] > span {
color: #fff;
}
</style>
<div id="st-28" class=" st-sticky-share-buttons st-left st-toggleable st-has-labels st-show-total "><div class="st-total ">
</div><div class="st-btn st-first" data-network="whatsapp" style="display: inline-block;">
<img alt="whatsapp sharing button" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vJliV6vUTcYeJEFXoj9lo1_bVsKC8EOwk_tEJJAzX9mEejbNfD4ZeLVqgeXJFLb1Dpg3Y4nrUzRqAKMZSUwrWfE0YU8FjFz_M_R_40OYotlQWsoKM692U=s0-d">
<span class="st-label">Share1</span>
</div><div class="st-btn" data-network="twitter" style="display: inline-block;">
<img alt="twitter sharing button" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_swlNrfPUVAMf0AOKrzP-dsyzJnykCjpAr41u5cEGzeJaqT2idHstiEtwcFNd-3kEhatvKoKIaf_cD-7h7HO7bopLXI6G_rVOVMGD5ybXRbP7x50ulDpQ=s0-d">
<span class="st-label">Tweet</span>
</div><div class="st-btn" data-network="linkedin" style="display: inline-block;">
<img alt="linkedin sharing button" src="https://www.vhv.rs/file/max/15/151218_official-linkedin-icon-png.png">
<span class="st-label">Share</span>
</div><div class="st-btn" data-network="reddit" style="display: inline-block;">
<img alt="reddit sharing button" src="https://logodownload.org/wp-content/uploads/2018/02/reddit-logo-16.png">
<span class="st-label">Share</span>
</div><div class="st-btn" data-network="pinterest" style="display: inline-block;">
<img alt="pinterest sharing button" src="https://sourcingadda.files.wordpress.com/2016/01/pinterest-logo.png">
<span class="st-label">Pin</span>
</div><div class="st-btn st-last" data-network="sharethis" style="display: inline-block;">
<img alt="sharethis sharing button" src="https://www.freepnglogos.com/uploads/share-png/share-svg-png-icon-download-21.png">
<span class="st-label">Share</span>
</div></div>
]]>
Copy All Code
Post a Comment
Post a Comment