6 Cara Memasang Social Media Share Button Pada Blog

Zona Internetku 5 Comments September 18, 2018

Beberapa Cara Untuk Membuat Social Media Share Button Pada Blog Dengan Mudah. Social media share button atau biasa di sebut dengan tombol berbagi untuk media sosial adalah sebuah tombol yang berfungsi untuk membagikan sebuah postingan atau laman pada blog ke dalam akun sosial media mereka.
Tombol share ini juga memiliki pengaruh yang besar pada sebuah blog, karena dengan memasang tombol share button maka ada kemungkinan kalau blog kita akan semakin ramai jika postingan tersebut di bagikan oleh banyak orang di halaman timeline ataupun status mereka.

Tutorial Untuk Memasang Widget Tombol Share Ke Sosial Media Yang Keren Di Blog Kita Dengan Mudah

Untuk membuat tombol share ke sosial media kalian tidak perlu susah susah untuk belajar koding, karena saya sudah menyiapkan kode untuk membuat tombol share ke sosial media seperti di bawah ini

1. Masuk ke dalam blog kalian sendiri dan pilih menu "Tema" dan klik "Edit HTML"
2. Selanjutnya kalian cari kode <data:post.body/> dan pilih dan copy salah satu kode di bawah ini

Style 1

<div id='share-button'> <p>Bagikan artikel ke: </p> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a> <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a> <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;'>Twitter</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>"); //]]> </script> <div class='clear'/> </div> 
<style> #share-button{margin:10px 0;padding:5px;border: 1px solid #eee;overflow:hidden}#share-button p{float:left;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:1px 1px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:active{top:1px; left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)} </style>

Style 2

<style>
.social-buttons-box {
height: 67px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb8A6C8Udqy0jNj4Z7W3Vd0catNpBua_mi5dCfnH1QkrosWKKVAIY9QIjqIRPjyNo-6PzFW5QOrUempfjDyfJQBfZG2E_xseKLg7ePAlzbpa6aJP8iydi0XL8zaGLXEVITqgudJEtPf9d0/s1600/rect3799.png) no-repeat 200px 0px;
margin:20px 0 15px;
overflow:hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}
</style>
<div class='social-buttons-box'>
<div class='social-buttons'>
  <div class='share gplus'>
<div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>
</div>
<div class='share like'>
<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/>
</div>
<div class='share tweet'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>-->
<div style='clear: both;'/>
<script>
  window.___gcfg = {lang: 'id'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Style 3

<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:active{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:active,.sharepost li .facebook:active,.sharepost li .gplus:active,
.sharepost li .pinterest:active,.sharepost li .linkedin:active{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

    <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

                </ul>
         </div> </b:if>

Style 4

<style>
#button-count-share { width:100%; overflow:hidden; background:transparent; margin:0 auto; padding:3px; }
#button-count-share span { float:left; position:relative; font-size:13px; color:#fff; margin:12px 5px 12px 5px; }
.button-share { background:#dce0e0; position:relative; display:block; float:left; height:40px; overflow:hidden; width:140px; margin:4px; border-radius:3px; }
.ikons { display:block; float:left; position:relative; z-index:3; height:100%; vertical-align:top; width:38px; text-align:center; }
.ikons i { color:#fff; line-height:33px; }
.slide-share { z-index:2; display:block; height:100%; left:38px; position:absolute; width:108px; margin:0; }
.slide-share p { font-family:Verdana; font-weight:400; border-left:1px solid rgba(255,255,255,0.35); color:#fff; font-size:14px; left:0; position:absolute; text-align:center; top:10px; width:100%; margin:0; }
.button-share .slide-share { transition:all 0.4s ease-in-out; }
.facebook .fb_iframe_widget { display:block; position:absolute; right:5px; top:0; z-index:1; }
.twitter iframe { left:50px; top:10px; z-index:1; display:block; position:absolute; }
.google #___plusone_0 { width:90px !important; top:10px; right:5px; position:absolute; display:block; z-index:1; }
.facebook .ikons,.facebook .slide-share { background:#4f79bc; }
.twitter .ikons,.twitter .slide-share { background:#63cef2; }
.google .ikons,.google .slide-share { background:#f36261; }
.facebook:active .slide-share,.twitter:active .slide-share,.google:active .slide-share { left:180px; opacity:0.6; }
</style>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div class='clear'/>
</b:if>

style 5

<div class="don-share" data-bubbles="top" data-limit="3">
<div class="don-share-total"></div>
<div class="don-share-facebook"></div>
<div class="don-share-twitter"></div>
<div class="don-share-google"></div>
<div class="don-share-pinterest"></div>
<div class="don-share-linkedin"></div>
<div class="don-share-tumblr"></div>
<div class="don-share-stumbleupon"></div>
<div class="don-share-reddit"></div>
<div class="don-share-hackernews"></div>
<div class="don-share-buffer"></div>
<div class="don-share-xing"></div>
<div class="don-share-pocket"></div>
<div class="don-share-fancy"></div>
<div class="don-share-yummly"></div>
<div class="don-share-scoopit"></div>
<div class="don-share-weibo"></div>
<div class="don-share-vk"></div>
<div class="don-share-mailru"></div>
<div class="don-share-odnoklassniki"></div>
<div class="don-share-hatena"></div>
</div>
<script type="text/javascript">
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//share.donreach.com/buttons.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
})();
</script>
<style>
.don-share .don-share-total {
    line-height: 18px;
    margin-right: 30px;
    display: none !important;
    position: static;
}
.don-share .don-share-expand {
    color: #333;
    display: none !important;
    background-color: #fff;
    border-color: #ccc;
}
</style>

3. kemudian letakkan kode yang anda pilih tadi tepat di atas <data:post.body/> untuk memunculkan tombol share di bawah judul postingan
atau bisa juga di letakkan di bawah kode <data:post.body/> untuk memunculkan tombol share di bawah isi postingan blog

Tips : Setiap template blog memiliki jumlah kode <data:post.body/> yang berbeda beda, jadi jika tombol share pada blog kalian tidak muncul maka solusinya kalian harus meletakkan kode tombol share tadi di atas atau di bawah kode <data:post.body/> yang lainnya
biasanya yang benar adalah kode <data:post.body/> berada di dalam kode <b:includable id='post' var='post'>...</b:includable>

Tambahan :
Jangan lupa untuk memasang kode font awesome supaya ikon tombol share ke sosial media bisa muncul, jika sudah ada kode font awesome di blog anda, kalian bisa abaikan saja
Cari kode <head>...</head> dan letakkan link eksternal css font awesome berikut ini di dalam kode <head>...</head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Jika semua di rasa sudah selesai maka jangan lupa klik "Simpan Tema" untuk menyimpan perubahannya

Baca juga :
2 Cara Membuat Widget Subscribe Box Keren Di Blog
Trik Memodifikasi Widget Arsip Supaya Keren
Cara Mengubah Widget Popular Post Menjadi Keren

Cara Membuat Widget Floating/Fixed Social Media Share Button Di Blog

Apabila kalian ingin menmabahkan widget tombol share dengan gaya melayang atau dengan posisi tetap (fixed) saat di scroll up/down maka kalian bisa mencoba widget yang satu ini

Style 1

1. Pastikan kalian sudah masuk ke dalam blog kalian
2. Pilih menu "Tata Letak" dan klik "Tambahkan Gadget"
3. Kemudian pilih widget "HTML/JavaScript" dan letakkan kode berikut ini di dalam widget tersebut

<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='seocipssharebtn' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Jika semua sudah siap, klik "Simpan" dan lihat hasilnya

Cukup itu saja pembahasan blogging kali ini tentang Cara Memasang Social Media Share Button Pada Blog yang dapat saya bagikan pada kalian semua, semoga berhasil.

Sumber :
17 September 2018 https://diskusi.sahabatcloud.id/index.php?threads/cara-membuat-tombol-social-share-di-blog-lengkap.632/

Promo Menarik

Diskon Barang Elektronik Di Lazada Hingga 80%

Cek disini

Promo Cuci Gudang, Diskon Sampai 50%

Cek disini

Murah Pol - Barang Murah Berkualitas Mewah

Cek disini

Tampil Cantik Gak Perlu Mahal - Diskon 50%

Cek disini

Kumpulan Barang Untuk Kesehatan - Diskon 50%

Cek disini

SHARE