Cara Membuat Tombol Social Share di Blogger

Cara Membuat Tombol Social Share di Blogger - Kali ini saya tidak akan bagikan game dulu namun akan bagikan tips blogger Cara Membuat Tombol Social Share di Blogger. Ok tidak usah panjang lebar ini Caranya : 


Cara pemasangan :

  1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
  2. Setelah itu, masuk ke menu Template--> Edit HTML
  3. Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
  4. Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
    Code:
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
  5. Kemudian cari kode <data:post.body/>
  6. Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel. 
    Code:
    <style>
    .social-buttons-box {
    height: 67px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJVWWoi5ZiJ2U_WHypqFb4080PlU-Z6DNRTIxQ6IuczsQDwjgcCbDi_b9S3ElHE7RsomAYwtFD4QLfflC5ZrXEPplLDpf1v4XSqQ0LhDjg67SbYLcOn8_nhoyQSfl8jxY4DgC-LP3KSHz/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>
    
  7. Kemudian klik tombol Simpan template
  8. Tara! Kini tombol social share flat design sudah terpasang di blog Anda


Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.


Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.


Kalau anda memakai code yang lain, coba hapus saja code tersebut dan ganti dengan code yang admin bagikan ini.
Atau coba sampai posisi tombol share muncul dengan benar.

Jika mengalami kesulitan berkomentarlah di kolom komentar yang sudah disediakan atau hub lewat laman Contact Us. Semoga bisa bermanfaat dan selamat mencoba. Good Luck !!!

Subscribe To Receive Free Email Updates:

0 Response to "Cara Membuat Tombol Social Share di Blogger"

Post a Comment

Contact Form

Name

Email *

Message *