Skip to content Skip to sidebar Skip to footer
Home / Blogger / CSS / Javascript

Membuat Tombol Share Sosial Media Di Blog

By Anonymous Post a Comment
Tidak sanggup dipungkiri bahwa keberadaan tombol  share pada sebuah situs web/blog terasa begitu  penting. melaluiataubersamaini menambahkan tombol share pada blog tentunya pengunjung sanggup dengan praktis membagikan artikel yang terdapat di blog ke sosial media, selain itu artikel yang sudah di share oleh pengunjung juga akan menguntungkan bagi pemilik blog itu sendiri, alasannya yaitu sanggup meningkatkan kunjungan/trafik blog.

Ada banyak program yang sanggup dipakai seseorang untuk menciptakan/menambahkan tombol share sosial media ke sebuah situs web/blog, meskipun sebetulnya secara default bila Anda memakai template bawaan blogger tombol share sudah ada, spesialuntuk perlu diaktifkan saja. Kendati demikian, bila Anda menginginkan tombol share yang tidak sama, maka Anda perlu menciptakannya sendiri 


Lihat juga : 

Saya disini akan sedikit membuatkan wacana bagaimana membuat tombol share sosial media di blogspot, disini tombol share yang akan dibentuk sangatlah sederhana, tiga tombol share Google _ Facebook dan Twiiter, kemudian pelengkap tombol share ibarat Pinteres, Digg dll yang juga akan dimenambahkan namun  akan memakai dampak show hide.

Karena disini memakai dampak show hide, maka tentunya diharapkan librari JavaScript/Jquery, umumnya untuk template – template kini ini sudah di lengkapi dengan Jquery, kalau belum ada silahkan menambahkan <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> daiatas isyarat </head>, kemudian juga disini untuk icon – icon sosial medianya memakai font awesome, bila di template Anda belum ada silahkan menambahkan <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> diatas </head> atau dibawah <head>

Membuat Tombol Share Sosial Media di Blog
  1. Masuk ke hidangan EDIT HTML dan menambahkan isyarat CSS dibawah ini dibagian susunan CSS yang sudah sudah ada pada template Anda, atau sanggup dibawah isyarat <b:skin><![CDATA[/* 
     /* 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}
  2. Tekan CTRL+F kemudian cari isyarat <data:post.body/> kemudian pastekan isyarat dibawah ini. 
    <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="Membuat Tombol Share Sosial Media di 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="Membuat Tombol Share Sosial Media di 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="Membuat Tombol Share Sosial Media di 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="Membuat Tombol Share Sosial Media di Blog">Digg</a></li> \     <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Membuat Tombol Share Sosial Media di Blog">Linkedin</a></li> \     <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Membuat Tombol Share Sosial Media di Blog">Stumbleupon</a></li> \     <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Membuat Tombol Share Sosial Media di 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="Membuat Tombol Share Sosial Media di Blog">Tumblr</a></li> \     <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Membuat Tombol Share Sosial Media di Blog">BufferApp</a></li> \     <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Membuat Tombol Share Sosial Media di 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="Membuat Tombol Share Sosial Media di 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'/>
  3. Terakhir simpan, maka nanti alhasil akan terlihat ibarat pada gambar dibawah ini
    Tidak sanggup dipungkiri bahwa keberadaan tombol Membuat Tombol Share Sosial Media di Blog

Kode <data:post.body/> pada template umumnya lebih dari satu, Pada template yang Saya gunakan terdapat tiga isyarat <data:post.body/> dan Saya tempelkan script yang berada pada poin dua dibagian isyarat <data:post.body/> yang terakhir alasannya yaitu biar tombol share ditampilkan di bab final artikel

Post a Comment for "Membuat Tombol Share Sosial Media Di Blog"