Memasang Tombol Share Sticky di Blogger Template Viomagz
Agustus 26, 2020
Edit
Tombol Share Sticky adalah tombol berbagi ke sosial media atau ke platform lain dengan efek melayang dibawah ketika di scroll. Dengan efek melayang seperti ini, tombol berbagi akan selalu menampilkan dibawah ketika berada ditengah-tengah isi konten artikel. Selain itu tampilan nya juga lebih modern dan unik, jadi pengunjung juga tidak perlu susah payah men-scroll sampai bawah untuk mencari tombol berbagi.
Membuat Tombol Share Sticky Blogger di VioMagz
1. Login dulu ke Blogger.
2. Dalam Dashboard Blogger pilih menu Tema dan Edit HTML.
3. Setelah itu tekan tombol , lalu cari code #wrapper { dan hapus code overflow: hidden;.
4. Tetap dalam Edit HTML, selanjutnya cari code /* Share button */ lalu hapus code dibawah ini.
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: $(label.color);;
text-transform: uppercase;
font-size: 16px;
background: $(posts.background.color);
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: bold;
margin-top: 3px;
}
#share-container {
margin: 20px auto 30px;
overflow: hidden;
}
#share {
width: 100%;
text-align: center;
}
#share a {
width: 25%;
height: 40px;
display: block;
font-size: 24px;
color: #fff;
transition: opacity 0.15s linear;
float: left;
}
#share a:hover {
opacity: 0.8;
}
#share a svg {
width:24px;
height:24px;
margin-top: 7px;
}
#share a svg path {
fill: #ffffff;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #55acee;
}
.linkedin {
background: #0077b5;
}
.pinterest {
background: #cb2027;
}
.whatsapp {
background: #25d366;
}5. Setelah dihapus lalu ganti dengan code dibawah ini.
#share {
width: 100%;
text-align: center;
}
#share a {
width: 11%;
height: 24px;
display: block;
font-size: 24px;
color: #fff;
transition: opacity 0.15s linear;
float: left;
}
#share a:hover {
opacity: 0.8;
}
#share a svg {
width:24px;
height:24px;
}
6. Lanjut copy code CSS dibawah ini diatas tag </b:skin> atau </style>.
/* Social Share Sticky */
.Tukang_Redesign_Share{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
background-color:#fff;
margin-top:15px;
padding:8px 0px 0px;
position:sticky;
position:-webkit-sticky;
bottom:0px;
z-index:99;
transition:all .5s ease;
}
@media screen and (max-width: 480px){
.Tukang_Redesign_Share {
padding:5px 0px 0px!important;
}
}
.Tukang_Redesign_Share svg{
width:17px;
height:17px;
vertical-align:-4px;
}
.Tukang_Redesign_Share svg path{
fill:#757575;
transition:all .3s ease;
}
.Tukang_Redesign_Share a{
width:100%;
padding:10px 0px;
border-top-width:3px;
border-top-style:solid;
text-align:center;
box-shadow:none;
transition:all .3s ease;
}
.Tukang_Redesign_Share a:hover svg path{
fill:#fff !important;
}
.Tukang_Redesign_Share a.facebook{
border-color:#3a579a;
}
.Tukang_Redesign_Share a.facebook:hover{
background-color:#3a579a;
}
.Tukang_Redesign_Share a.facebook svg path{
fill:#3a579a;
}
.Tukang_Redesign_Share a.twitter{
border-color:#00abf0;
}
.Tukang_Redesign_Share a.twitter:hover{
background-color:#00abf0;
}
.Tukang_Redesign_Share a.twitter svg path{
fill:#00abf0;
}
.Tukang_Redesign_Share a.pinterest{
border-color:#cd1c1f;
}
.Tukang_Redesign_Share a.pinterest:hover{
background-color:#cd1c1f;
}
.Tukang_Redesign_Share a.pinterest svg path{
fill:#cd1c1f;
}
.Tukang_Redesign_Share a.linkedin{
border-color:#2554BF;
}
.Tukang_Redesign_Share a.linkedin:hover{
background-color:#2554BF;
}
.Tukang_Redesign_Share a.linkedin svg path{
fill:#2554BF;
}
.Tukang_Redesign_Share a.tumblr{
border-color:#314358;
}
.Tukang_Redesign_Share a.tumblr:hover{
background-color:#314358;
}
.Tukang_Redesign_Share a.tumblr svg path{
fill:#314358;
}
.Tukang_Redesign_Share a.telegram {
border-color:#54A9EB;
}
.Tukang_Redesign_Share a.telegram:hover{
background-color:#54A9EB;
}
.Tukang_Redesign_Share a.telegram svg path{
fill:#54A9EB;
}
.Tukang_Redesign_Share a.reddit {
border-color:orangered;
}
.Tukang_Redesign_Share a.reddit:hover{
background-color:orangered;
}
.Tukang_Redesign_Share a.reddit svg path{
fill:orangered;
}
.Tukang_Redesign_Share a.gmail {
border-color:#d93025;
}
.Tukang_Redesign_Share a.gmail:hover{
background-color:#d93025;
}
.Tukang_Redesign_Share a.gmail svg path{
fill:#d93025;
}
.Tukang_Redesign_Share a.whatsapp{
border-color:#4dc247;
}
.Tukang_Redesign_Share a.whatsapp:hover{
background-color:#4dc247;
}
.Tukang_Redesign_Share a.whatsapp svg path{
fill:#4dc247;
}
.Tukang_Redesign_Share a.messenger{
border-color:#448AFF;
}
.Tukang_Redesign_Share a.messenger:hover{
background-color:#448AFF;
}
.Tukang_Redesign_Share a.messenger svg path{
fill:#448AFF;
}
@media screen and (max-width:480px) {
#share {
width:100%;
margin-top:4px;
margin-bottom:1px;
}
#share a {
height:24px;
}
#share svg {
margin-top:0px!important;
}
.Tukang_Redesign_Share .total {
margin-top:1px!important;
padding:6px 0!important;
}
.Tukang_Redesign_Share .total svg {
margin-right:5px!important;
margin-top:3px!important;
}
}7. Setelah melakukan langkah-langkah tadi, sekarang tekan tombol Ctrl+F lalu cari code <b:includable id='postsharebutton' var='post'> dan hapus semua code yang ada di tag tersebut.. Ganti dengan kode dibawah ini.
<div class='Tukang_Redesign_Share'>
<div id='share'>
<!-- facebook -->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><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='#3a579a'/>
</svg></a>
<!-- twitter -->
<a class='twitter' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' rel='nofollow' target='_blank'><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' fill='#55acee'/>
</svg></a>
<!-- pinterest -->
<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' target='_blank'><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>
<!-- whatsapp -->
<a class='whatsapp' expr:href='"https://api.whatsapp.com/send?phone=&text=" + data:post.title + "%20%2D%20" + data:post.url'><svg viewBox='0 0 24 24'>
<path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='#25d366'/>
</svg></a>
<!-- LinkedIn -->
<a class='linkedin' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl' rel='noopener' target='_blank'><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' fill='#2554BF'/></svg></a>
<!-- tumblr -->
<a class='tumblr' expr:href='"https://tumblr.com/share/link?url=" + data:post.canonicalUrl + "&name=" + data:post.title + "&description=" + data:post.snippet' rel='noopener' target='_blank'><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>
<!-- Telegram -->
<a class='telegram' expr:href='"https://telegram.me/share/url?text=" + data:post.title + "&url=" + data:post.canonicalUrl' rel='noopener' target='_blank'><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>
<!-- Reddit -->
<a class='reddit' expr:href='"https://reddit.com/submit/?url=" + data:post.canonicalUrl + "&resubmit=true&title=" + data:post.title' rel='noopener' target='_blank'><svg viewBox='0 0 24 24'>
<path d='M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z'/>
</svg></a>
<!-- Gmail -->
<a class='gmail' expr:href='"https://mail.google.com/mail/u/0/?view=cm&ui=2&tf=0&fs=1&su=" + data:post.title + "&body=" + data:post.canonicalUrl' rel='noopener' target='_blank'><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>
</div>