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;}}<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>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.
Comments