Pamula merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri menggunak
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
Mungkin sekian artikel Cara Membuat Tombol Share Seperti Bungfrangki di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semuanya.
Comments
Post a Comment
To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.