Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog

Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog. Social Share Button ini memudahkan admin dan pengunjung untuk berbagi posting blog ke media sosial -- Facebook, Twitter, Google Plus, Linkedin, Pinterest, dan lain-lain. Ini penampakannya.

CSS:
Simpan di atas kode ]]></b:skin>

/* Tombol Share Sosial Media */ .shareing,.shareroot{position:relative;display:block;font-size:0;margin:auto;text-align:center} .shareroot{display:block;text-align:center;margin:30px 0 0 0} .shareroot a.fb,.shareroot a.gp,.shareroot a.tw,.shareroot span.pl{text-decoration:none!important;display:inline-block;margin:0 .5px;font-weight:400;font-size:12px;color:#fff;text-shadow:none;padding:4px 10px;opacity:1;transition:all .3s} .shareroot a.gp {background:#f20000;} .shareroot a.fb {background:#516ca4;} .shareroot a.tw {background:#00baff;} .shareroot span.pl {background:#ff6600;} .fbtea,.gotea,.plustea,.twtea{font-size:13px!important;vertical-align:middle} .shareroot a.fb:hover,.shareroot a.gp:hover,.shareroot a.tw:hover,.shareroot span.pl:hover{color:#fff;opacity:.9} .shareroot a.fb:active,.shareroot a.gp:active,.shareroot a.tw:active,.shareroot span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)} span.pl{color:green;cursor:pointer} #share-menu{display:none} .dropdown-menu{position:absolute;bottom:100%;right:15%;z-index:99;float:left;min-width:100px;padding:5px 10px;margin:0;font-size:13px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;} .dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important} .dropdown-menu li a{color:#333!important;font-weight:400;display:block} .dropdown-menu li a:hover{color:#e8554e!important} ul#share-menu{margin:10px 0;padding:5px 15px}

Kode HTML & JS
Simpan di bawah kode <data:post.body/> yang kedua atau ketiga

<script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href; document.write('<div class="shareroot"><div class="shareing"> \ <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\ <i class="fa fa-google-plus gotea"></i> Google</a> \ <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\ <i class="fa fa-facebook fbtea"></i> Facebook</a> \ <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\ <i class="fa fa-twitter twtea"></i> Twitter</a> \ <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i> More</span> \ <ul class="dropdown-menu" id="share-menu"> \ <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \ <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \ <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \ <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \ <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \ <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \ <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \ <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \ <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \ </ul> \ </div><div class="clear"></div></div> \ '); $(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})}); function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)}; //]]> </script> <div class='clear'/>

Share :