Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog

Baca Juga

Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog ini tidak mesti dilakukan jika template blog Anda sudah menampilkannya. Template bawaan Blogger juga sudah menyediakannya.

Tombol bebagi ke media sosial (Social Share Button) ini memudahkan admin dan pengunjung untuk berbagi posting blog ke media sosial -- Facebook, Twitter, Google Plus, Linkedin, Pinterest, dan lain-lain.

Berikut ini salah satu kode berbagi ke media sosial dan cara memasangnya di bawah artikel. Ini penampakannya.

Kode 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'/>

Demikian Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog. Sebarkan posting blog Anda ke media sosial untuk mendapatkan pengunjung sebanyak-banyaknya. Good Luck!