GagakTekno

Cara Membuat Tombol Share Seperti Bungfrangki

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='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);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='&quot;http://twitter.com/share?url=&quot; + data:post.url' onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);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='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + 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

Untuk melihat demonya bisa klik button ini :


Dari segi tampilan akan sama persis dengan yang ada di Bungfrangki dan sobat juga bisa nambahkan sosial share lainnya bila kurang. Oh iya tombol share ini saya test di Non Amp jadi jika sobat menggunakan AMP saya tidak tahu apakah akan work atau tidak.

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR