Cara Menciptakan Tombol Share Sosial Media Di Bawah Posting Blog

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

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

Berikut ini salah satu isyarat menyebarkan ke media umum dan cara memasangnya di bawah artikel. Ini penampakannya.

Kode CSS:
Simpan di atas isyarat ]]></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 isyarat <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="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">\ <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="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">\ <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="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">\ <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="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">Digg</a></li> \ <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">Linkedin</a></li> \ <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">Stumbleupon</a></li> \ <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">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="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">Tumblr</a></li> \ <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">BufferApp</a></li> \ <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">Pocket</a></li> \ <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Membuat Tombol Share Sosial Media di Bawah Posting Blog">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 umum untuk mendapat pengunjung sebanyak-banyaknya. Good Luck!


Sumber https://testemplatecb.blogspot.com/

Berbagi :