Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive
October 25, 2018
DESAIN atau tampilan Tombol Berbagi (Social Share Button) model Show Hide Keren & Responsive mirip dengan Social Share yang dibagikan sebelumnya.
Tombol Berbagi Posting blog ke media sosial ini cukup lengkap, meliputi Facebook, Twitter, Google Plus, Line, WhatsApp (WA), LinkedIn, dan Pinterest.
Tampilan normalnya hanya tiga (Facebook, Twitter, Google Plus) ditambah tombol hide-show untuk menampilkan link share ke medsos lainnya. Ini penampakannya:
Cara Membuat Tombol Berbagi (Social Share Button) Show Hide
1. Tema > Edit HTML2. Copas kode berikut ini di atas kode </head>
<style>
/* CSS Share Button */
#share_btnper{margin:5px;padding:0}
.showother{display:none}
.share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden}
.share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}
.share_btn ul li{float:left;display:inline-block;overflow:hidden;margin:0}
.share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden}
.share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center}
.shareplus{padding:0;background:#aaa;cursor:pointer}
.share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left}
.share_btn a:hover{background:#333}
.share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto}
.share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto}
.share_btn li a.gp{background:#dc4a38}
.share_btn li a.pt{background:#ca2128}
.share_btn li a.le{background:#0673ab}
.share_btn li a.tr{background:#43556e}
.share_btn li a.em{background:#141b23}
.share_btn li a.ln{background:#00c300}
.share_btn li a.bm{background:#000}
.share_btn li a.wa{background:#4dc247}
.share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%);opacity:0.8}
@media screen and (max-width:600px){
.share_btn li a.fb,.share_btn li a.tw{padding:0 37px}}
@media screen and (max-width:480px){
.share_btn li a.fb,.share_btn li a.tw{padding:0 25px}}
@media screen and (max-width:320px){
.share_btn ul li a.fb,.share_btn ul li a.tw{padding:0 14px}}
</style>
3. Copas kode berikut ini di bawah kode
<b:includable id='shareButtons' var='post'> ... </b:includable>
atau di atas kode
<b:includable id='status-message'>
<b:includable id='sharethis' var='post'>
<div class='share_btn'><ul>
<li><a class='fb' 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' title='Share to Facebook'><i class='fa fa-facebook'/> SHARE</a></li>
<li><a class='tw' expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url.canonical + "&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' target='_blank'><i class='fa fa-twitter'/> SHARE</a></li>
<li><a class='gp' 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' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li>
<div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='block';document.getElementById('showshare').style.display='none''><i aria-hidden='true' class='fa fa-plus'/></span></div>
</ul>
<ul class='showother' id='showother'>
<li><a class='pt' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' target='_blank'><i class='fa fa-pinterest'/></a></li>
<li><a class='le' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li>
<li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li>
<li><a class='ln' expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share On Line'>
<svg class='icon icons8-LINE' viewBox='0 0 48 48'>
<path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
<path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
</svg>
</a></li>
<li><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' expr:href='"whatsapp://send?text="+ data:post.url'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'/></a></li>
<div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='none';document.getElementById('showshare').style.display='block''><i aria-hidden='true' class='fa fa-minus'/></span></div>
</ul>
</div>
</b:includable>
4. simpan kode berikut ini di bawah judul posting dan/atau di bawah postingan.
<b:if cond='data:blog.pageType == "item"'>
<div class='share-wrapper' id='share_btnper'>
<b:include data='post' name='sharethis'/>
</div>
</b:if>
- Untuk ditampilkan di bawah judul, simpan di atas kode <data:post.body/> yang kedua atau ketiga.
- Untuk di bawah judul posting, simpan di bawah kode <data:post.body/> yang kedua atau ketiga atau di atas kode <div class='post-footer'>
Demikian Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive. Sumber dari codepen.io. Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Cara Membuat Tombol Berbagi (Social Share Button) Show Hide Keren Responsive
Post a Comment