Tombol share sudah pasti sering digunakan untuk membagikan artikel atau postingan yang menurut kita menarik dan dibagika ke orang orang yang ada di sosmed atau dunia maya selain itu juga tombol share ini sangat bermanfaat sekali bagi blog. Karena dengan adanya tombol share dapat membuat blog semakin banyak penunjung karena semakin banyak orang yang membagikan blog kita maka pengunjung akan semakin ramai juga.
Jika sobat sudah pernah melihat sosial share di bungfrangki maka saya tidak perlu menjelaskan tampilan nya lagi karena sudah pasti sangat bagus banget sob tampilan nya. Bagi sobat yang ingin mencoba tombol share yang sama seperti bungfrangki sobat bisa pakai tombol share dengan kode yang ada dibawah ini.
Cara Membuat Tombol Share
1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > Kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>
.icons, .icon {width: 24px;height: 24px;}
#share_btnper{margin:25px auto 0;padding:0;display:block;}
.share_btn{position:relative;margin:0 auto;padding:0;text-align:center;display:block;overflow:hidden;}
.share_btn ul{display:block;width:78%;margin:auto;}
.share_btn ul li{text-transform:uppercase;font-family:'Archivo Narrow',sans-serif;font-size:70%;width:25%;list-style:none;margin:0 auto;padding:0;text-align:center;float:left;display:block;letter-spacing:0.7px;position:relative;}
.share_btn ul li a,.shareplus{color:#fff;padding:0;display:block;text-align:center;height:23px;line-height:23px;font-weight:700;transition:all 0.25s;margin:0 auto;text-transform:uppercase;}
.share_btn .icons{vertical-align:middle;width:13px;height:13px;fill:#fff;position:absolute;left:7px;top:5px;}
.shareplus{padding:0;background:#aaa;cursor:pointer;}
.share_btn ul li{background:#aaa;}
.share_btn ul li.fb{background:#3a589e;}
.share_btn ul li.tw{background:#52cbff;}
.share_btn ul li.gp{background:#dc483c;}
.share_btn ul li a.mg{background:#02c4ff;}
.share_btn ul li.wa{background:#4dc247;}
.share_btn ul li:hover,.shareplus:hover{opacity:0.8;}
.share_btn ul li.bc{background:#e4d2a6;display:none;}
.share_btn ul li.bc a{color:#987218!important;}
#show,#hide{display:none;}
.share_btn .bc .icons{fill:#987218;}
@media screen and (max-width:480px){
#show{display:block;width:100%;margin:25px auto;text-align:center;}
#hide{margin:0 auto 30px;}
#show .icons,#hide .icons{width:24px;height:24px;vertical-align:middle;fill:#fe8f04;}
.sharebtn{cursor:pointer;width:47px;height:47px;line-height:45px;text-align:center;margin:0 auto;display:inline-block;border:2px dotted #fe8f04;border-radius:99em;}
#sharing{margin:0 auto;display:none;padding:45px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(255,255,255,.90);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;}#share-container{width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out;}@keyframes shownow{0%{transform:scale(0.9);}50%{transform:scale(1.01);}100%{transform:scale(1);}}
#share_btnper{margin:25px auto 0;padding:0 20px;}
#share_btnper:before{content:'Gratis,bagikan ke:';margin:25px auto 0;padding:0 0 10px;display:block;}
.share_btn ul{display:block;width:100%;margin:auto;}
.share_btn ul li{font-size:70%;width:100%;margin:0 auto 5px;}
.share_btn ul li a,.shareplus{height:45px;line-height:45px;}
.share_btn .icons{vertical-align:middle;width:17px;height:19px;margin-right:9px;position:relative;left:auto;top:auto;}
.share_btn ul li.bc{display:block;}}
2. Kemudian tambahkan kode dibawah ini seterah sobat letakkan dimana menurut sobat bagusnya
<div id="show">
<span class="sharebtn" href="javascript:void(0)" onclick="document.getElementById('sharing').style.display='block';document.getElementById('hide').style.display='block'"><svg class="icons icon-Plus" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path></svg></span></div>
<div id="sharing">
<div id="share-container">
<div id="hide"><span class="sharebtn" href="javascript:void(0)" onclick="document.getElementById('sharing').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block'"><svg class="icons icon-Close" viewBox="0 0 24 24"><path d="M3,16.74L7.76,12L3,7.26L7.26,3L12,7.76L16.74,3L21,7.26L16.24,12L21,16.74L16.74,21L12,16.24L7.26,21L3,16.74M12,13.41L16.74,18.16L18.16,16.74L13.41,12L18.16,7.26L16.74,5.84L12,10.59L7.26,5.84L5.84,7.26L10.59,12L5.84,16.74L7.26,18.16L12,13.41Z"></path></svg></span></div>
<div class="share-wrpaper" id="share_btnper">
<div class="share_btn"><ul>
<li class="gp"><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow noopener" target="_blank" title="Share on Google+"><svg class="icons icon-GP" viewBox="0 0 24 24"><path d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z"></path></svg> Google+</a></li>
<li class="fb"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick="window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");return false;" rel="nofollow noopener" title="Share to Facebook"><svg class="icons icon-FB" viewBox="0 0 24 24"><path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg> Facebook</a></li>
<li class="tw"><a expr:href='"http://twitter.com/share?url=" + data:post.url' onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow noopener" target="_blank" title=""><svg class="icons icon-TW" 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"></path></svg> Twitter</a></li>
<li class="wa"><a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url' rel="nofollow noopener" target="_blank"><svg class="icons icon-WA" 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"></path></svg> Whatsapp</a></li>
<li class="bc"><a href="/" rel="nofollow noopener" target="_blank"><svg class="icons icon-BTC" viewBox="0 0 24 24"><path d="M4.5,5H8V2H10V5H11.5V2H13.5V5C19,5 19,11 16,11.25C20,11 21,19 13.5,19V22H11.5V19H10V22H8V19H4.5L5,17H6A1,1 0 0,0 7,16V8A1,1 0 0,0 6,7H4.5V5M10,7V11C10,11 14.5,11.25 14.5,9C14.5,6.75 10,7 10,7M10,12.5V17C10,17 15.5,17 15.5,14.75C15.5,12.5 10,12.5 10,12.5Z"></path></svg> Duit Bitcoin</a></li>
</ul>
</div>
</div>
</div>
</div>
3. Simpan Tema dan lihat hasilnya
See the Pen Social Share With SVG Icon by Kang Iyan (@KangIyan) on CodePen.
Mungkin sekian artikel
Cara Membuat Tombol Share Seperti Bungfrangki di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semuanya.
