Cara Membuat Icon Share Artikel Mengambang Igniel

Cara Membuat Icon Share Artikel Mengambang Igniel - Hai sahabat blogger pada kesempatan kali ini saya akan membagikan Cara Membuat Icon Share Artikel Mengambang Igniel dimana saya mendapatkan inspirasi dari blog Mas Azid Zainuri, di blog diapun banyak tutorial - tutorial menarik lain nya silahkan kunjungi www.azid45.web.id

Sebenar nya tidak banyak yang perlu kita rubah dari CSS dan Icon Share Artikel yang ada di Template Viomagz disini saya hanya menambah satu Icon Svg dan sedikit merubah CSS nya saja, tampilan nya cukup bagus untuk demo silahkan lihat dibawah ini ya baiklah kita langsung saja kita ke tutorialnya dibawah ini

Cara Membuat Icon Share Artikel Mengambang Igniel

1. Silahkan Login ke Blogger

2. Buka Tema kemudian Edit HTML

3. Silahkan cari CSS dibawah ini dan ganti dengan kode dibawah nya.

Sebelum

/* Share button */
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: inherit;
text-transform: uppercase;
font-size: 16px;
color: #000000;
background: #ffffff;
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 .15s linear;float:left}
#share i{position:relative;top:50%;transform:translateY(-50%)}
.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}

/* Share button */
.share-this-pleaseeeee{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}

<b:includable id='postsharebutton' var='post'> 
<div id='share-container'> <!-- social sharing button -->
<div class='label-line-c'>
<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"></path>
 </svg>
</a>
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' 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>
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' 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>
  <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 style='width:24px;height:24px' 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='&quot;https://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'>
<svg style='width:24px;height:24px' 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>
</div>
</div>
</div>
</b:includable> 

#wrapper {
background: #ffffff;
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}

#share-container {
margin: 20px auto 30px;
overflow: hidden;
}

#share-container {
width:100%;
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: 30px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

.label-line-c {
text-align: center;
margin-bottom: 20px;
}

Penutup