Share Button Responsive, Lengkap dengan Tombol WhatsApp, Line dan BBM

Tutorial Blogger/blogspot kali ini ialah tentang cara membuat share Button/tombol berbagi responsive dilengkapi dengan share button WhatsApp (WA), Line dan BlackBerry Messenger (BBM). Selain itu, juga terdapat tombol lainnya seperti tombol share ke Email, Tumblr, Pinterest, LInkEdin dan tombol share yang sudah umum dipasang seperti Facebook, Twitter dan Google Plus.

Tidak hanya itu, tombol share kali ini juga dilengkapi dengan show-hide OnClick event, memperlihatkan antarmuka yang modern dan legal. Sehingga tidak meresahkan masyarakat."

Sebetulnya ada banyak widget share button yang pernah saya bagikan di blog ini. Salah satunya ialah cara membuat tombol share di blog dengan efek peekaboo (ciluukbaaa).

Copy CSS berikut ini dan letakkan di atas kode </style> atau </b:skin>

/* CSS Share Button By Bung Frangki */ #share_btnper{margin:auto;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} .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%)} @media screen and (max-width:768px){ .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>

For the width (width) Please adjust the width of each blog sidebar. If your blog uses sticky headers, please adjust the value of the corresponding high top sticky headers let widget is not truncated.

But there is one thing to watch out for! If you use position: sticky; then the parent should not use div overflow. Well usually the parent div to main and aside this using the class = ' outer-wrapper ', so make sure in CSS. outer-wrapper doesn't use the overflow.

Then please copy code below

<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

Then save just under code </aside>, so insubstantial as below.

<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebar-right'>
...........
...........
...........
</div>
</aside>
<div id='sidebar-sticky'>
  <b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
  </div>

Then save the template.

Please sign in to your Layout or Layout then please add a gadget that would like to be made sticky at the sticky_sidebar.

Advertisement