Cara Membuat Share Sticky Di Template Viomagz

Cara Membuat Share Sticky Di Template Viomagz
arsadpedia.com
Cara Membuat Share Sticky Di Blogger -  Pada kesempatan kali ini saya akan membagikan Cara Membuat Share Sticky Di Template Viomagz dengan icon media sosial yang banyak untuk mengetahui nya silahkan klik Preview di bawah ini
Cara Membuat Share Sticky Di Template Viomagz
Klik gambar untuk ukuran lebih besar
arsadpedia.com

Untuk melihat demo nya langsung silahkan klik tombol demo dibawah ini maka akan terlihat Tombol Share Sricky nya jika kamu ingin membuatnya silahkan ikuti langkah - langkah nya di bawah ini


Cara Membuat Share Sticky Di Blogger

1. Silakan login ke Blogger
2. Buka Tema > Edit HTML
3. Kemudian cari kode /* Share Button */ kemudian hapus semua kode di bawah nya dan ganti dengan kode di bawah ini

/* Share button */
.arsadpediaShare{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
background-color:#ffffff;
margin-top:10px;
padding:10px 0px 0px;
position:sticky;
position:-webkit-sticky;
bottom:0px;
z-index:1;
}
#arsadpedia-container{display:none}
.arsadpediaShare svg{
width:17px;
height:17px;
vertical-align:-4px;
}
.arsadpediaShare svg path{
fill:#757575;
transition:all .3s ease;
}
.arsadpediaShare .total{
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
width:100%;
font-size:16px;
font-weight:500;
color:#0d344e;
padding:10px 0px;
border-top:3px solid #0d344e;
cursor:not-allowed;
}
.arsadpediaShare .total i{
font-style:normal;
white-space:nowrap;
}
.arsadpediaShare .total svg{
margin-right:15px;
}
.arsadpediaShare .total svg path{
fill:#0d344e;
}
.arsadpediaShare a{
width:100%;
padding:10px 0px;
border-top-width:3px;
border-top-style:solid;
text-align:center;
box-shadow:none;
transition:all .3s ease;
}
.arsadpediaShare a:hover svg path{
fill:#fff !important;
}
.arsadpediaShare a.facebook{
border-color:#3a579a;
}
.arsadpediaShare a.facebook:hover{
background-color:#3a579a;
}
.arsadpediaShare a.facebook svg path{
fill:#3a579a;
}
.arsadpediaShare a.twitter{
border-color:#00abf0;
}
.arsadpediaShare a.twitter:hover{
background-color:#00abf0;
}
.arsadpediaShare a.twitter svg path{
fill:#00abf0;
}
.arsadpediaShare a.pinterest{
border-color:#cd1c1f;
}
.arsadpediaShare a.pinterest:hover{
background-color:#cd1c1f;
}
.arsadpediaShare a.pinterest svg path{
fill:#cd1c1f;
}
.arsadpediaShare a.linkedin{
border-color:#2554BF;
}
.arsadpediaShare a.linkedin:hover{
background-color:#2554BF;
}
.arsadpediaShare a.linkedin svg path{
fill:#2554BF;
}
.arsadpediaShare a.tumblr{
border-color:#314358;
}
.arsadpediaShare a.tumblr:hover{
background-color:#314358;
}
.arsadpediaShare a.tumblr svg path{
fill:#314358;
}
.arsadpediaShare a.whatsapp{
border-color:#4dc247;
}
.arsadpediaShare a.whatsapp:hover{
background-color:#4dc247;
}
.arsadpediaShare a.whatsapp svg path{
fill:#4dc247;
}
.arsadpediaShare a.messenger{
border-color:#448AFF;
}
.arsadpediaShare a.messenger:hover{
background-color:#448AFF;
}
.arsadpediaShare a.messenger svg path{
fill:#448AFF;
}
.arsadpediaShare a.telegram{
border-color:#448AFF;
}
.arsadpediaShare a.telegram:hover{
background-color:#4B97D1;
}
.arsadpediaShare a.telegram svg path{
fill:#54A9EB;
}
.arsadpediaShare a.gmail{
border-color:#d93025;
}
.arsadpediaShare a.gmail:hover{
background-color:#d93025;
}
.arsadpediaShare a.gmail svg path{
fill:#d93025;
}
.arsadpediaShare a.line{
border-color:#25D366;
}
.arsadpediaShare a.line:hover{
background-color:#25D366;
}
.arsadpediaShare a.line svg path{
fill:#25D366;
}
.arsadpediaShare .total{
display:block;
text-align:center;
}
.arsadpediaShare .total svg{
margin-right:0px;
}
.arsadpediaShare .total i{
display:none;
}

5. Kemudian cari kode dibawah ini 
<b:includable id='postsharebutton' var='post'>
...........
...........
Hapus kode dalam ini
...........
...........
</b:includable>

6. Kemudian Pastekan kode dibawah ini tepat di kode yang kamu hapus tadi 
<b:includable id='postsharebutton' var='post'> 
<div class='arsadpediaShare' id='arsadpediaShare-container' style='display: flex;'>
 <span class='total'>
  <svg class='ngaceng' 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'/>
  </svg>
 </span>
 <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
  <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;https://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'>
  <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='messenger' href='fb-messenger://share?link=' rel='nofollow' title='Share to Messenger'>
  <svg viewBox='0 0 24 24'>
   <path d='M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z'/>
  </svg>
 </a>
   <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + 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'/>
  </svg>
 </a>
 <a class='pinterest' 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'>
  <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' href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on 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>
 <a class='tumblr' data-notes='right' href='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' rel='noopener' target='_blank' title='Share on 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='telegram' href='&quot;https://telegram.me/share/url?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Telegram'>
  <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>
 <a class='line' href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Line'>
  <svg viewBox='0 0 24 24'>
   <path d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/>
  </svg>
 </a>
 <a class='gmail' href='&quot;https://mail.google.com/mail/u/0/?view=cm&amp;ui=2&amp;tf=0&amp;fs=1&amp;su=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Gmail'>
  <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> 
</b:includable>

7. Kemudian simpan Tema

Penutup

Demikianlah tutorial Cara Membuat Share Sticky Di Template Viomagz  jika ada pertanyaan silahkan tinggalkan komentar anda di bawah ini