Cara Membuat Tombol Share Show/Hide

Cara Membuat Tombol Share Show/Hide - Pada kali ini kita akan membuat tombol share show/hide atau membuat share button dengan efek toogle. Tombol share merupakan element yg paling penting untuk menyebarluaskan suatu artikel ke social media. Dengan ini pengunjung tidak hanya datang melalui mesin pencari saja, tapi bisa juga dari jejaring sosial. Sayangnya tombol share memiliki ukuran yg besar dan bisa membuat loading blog menjadi lambat. Untuk itu kita perlu membuat custom share button yg bisa meminimalkan proses pemuatan blog. Nah bagi yg ingin membuat widget tombol share show/hide, simak langkah-langkah berikut.

CSS Tombol Share Show/Hide

• Login akun blogger.
• Kemudian klik template.
• Klik edit.
• Paste kode berikut diatas ]]></b:skin>.

.hid{display: none;}.vis{display:inline-block;}.shrtoggle{font-weight:bold;text-align:center;color:#fff;background:#ff5848;line-height:17px;font-size:11px;cursor: pointer;float:left;border:0;border-radius:2px;} .share{font-family:sans-serif;font-size:11px;width: 340px;text-align: center;float: left;}.share a span{font-weight:700;display:block;color:#fff;text-align:right;}.share a{text-decoration:none;width:60px;padding:0 4px 0 0;line-height:18px;display:inline-block;border-radius:2px;background-size:18px;background-repeat:no-repeat;box-shadow:0 1px 0 rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.05)}.btnTw{ cursor: pointer;background-color:#1EBEF0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKH6ku_fSU1uYT6Rs4c0n0FKlTob-dZFT4l9XLhQN05y5d0K2mVKVZyLZGr5jwQekpBT_hQyklvhwsjCgDAD8G_TKo9d1bnECEM-EN1GxaxQR-NvORw3CyN4Cc43tu4k4-wEqa8vwzLk/s1600/twitter.png)}.btnGo{ cursor: pointer;background-color:#DD5347;background-image:url(http://www.gstatic.com/images/icons/gplus-32.png)}.btnFb{ cursor: pointer;background-color:#3A5BA1;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbeyiti7mbYNAGi9zVoxHj5GW6Ni89bWZfhNO4zHlOuL0S7XpfZCQtviMhU2_RApaa9rAYk3oTNIMVtilxbgIuVlrTuII7SrQLpOR-n7hXqpa7pGUflu5rZE015YjgVpjEQcXzzoG-Pp8/s1600/facebook.png)}.btnPr{ cursor: pointer;background-color:#C33C2D;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMB5AT8B4cjV1QKpuvuG_l2k3Wjb5IWMkLpnB6OjJiXbxfOsyFTOEXyYUzU7zo6bQx1_plnzc4ZRJnf-LScGykeKT9WGxuskhdJ4dSRgHVDq2DbPB1ZxyxQu3Ct_zXq4sOIb3IOKoNQKU/s1600/pinterest.png)}.btnLi{ cursor: pointer;background-color:#1983BC;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBA1WtlHSNI6dQG6moLe2nXeGW5m1KBEKsn7mNlPe0v2OYPtTgQmnQC_O9z94LnXvZ-WK6TIzWoPzvbGGHzd2vfU4_hrKHYr_cjWThNXiSiRyuUND59Ox2TuViq578HgIc1_j1gBKWL4/s1600/linkedin.png)}.share a span.buCount{color:#000}

Script Tombol Share Show/Hide

• Masuk ke blogger.
• Kemudian klik template.
• Klik edit html.
• Pastekan script berikut diatas </body>.

<script type="text/javascript">
var toggle = document.getElementById('shrtoggle');
var more = document.getElementById('moreBtns');
shrtoggle.addEventListener('click', function (){
if (more.className === 'hid'){more.className = 'vis';}
else{more.className = 'hid';}});
</script>

HTML Tombol Share Show/Hide

• Sign in ke akun blogger.
• Klik menu template.
• Klik edit
• Pastekan kode berikut dibawah <data:post.body/>

<button id="shrtoggle" class="shrtoggle">Share</button><div id="moreBtns" class="hid"> <div class='share'> <a class='btnFb' expr:href='"http://www.facebook.com/sharer.php?u=" + 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' title='Facebook'><span>Share</span></a> <a class='btnTw' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Twitter'><span>Tweet</span></a><a class='btnGo' 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' title='Google+'><span>Share</span></a> <a class='btnPr' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:blog.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:blog.metaDescription' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Pinterest'><span>Pin</span></a> <a class='btnLi' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:blog.url + "&title=" + data:post.title + "&summary=" + data:blog.metaDescription' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='LinkedIn'><span>Share</span></a></div> </div>

Membuat Share Button Show Hide Responsive

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan kode berikut diatas kode ]]></b:skin>.

@media screen and (max-width: 689px){
.shrtoggle, .share, .share a{width: 100%;border-radius: 0;margin-bottom: 5px;line-height: 26px;background-size: 23px;padding: 0;font-size: 12px;}.share a span{padding-right:10px;}.vis{display:block;}}

Demikianlah penjelasan saya mengenai cara membuat tombol share show/hide atau cara membuat share button dengan efek toogle. Semoga artikel ini dapat bermanfaat bagi kita semua.