Contact Us
Join on Facebook!!


Cara Memasang Kolom Komentar Facebook dan Blog Keren

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog. Tidak ketinggalan juga mempercantik tampilan kolom komentar pada blog.

Memasang Kolom Komentar Facebook dan Blog secara bersamaan merupakan salah satu cara mempercantik tampilan blog, khususnya tampilan postingan / artikel yang ada pada blog tersebut. Dimana Komentar-komentar dari pengunjung seakan-akan disembunyikan, dan komentar-komentar tersebut akan terlihat kembali apabila kita memilih berdasarkan Facebook atau Blog, bukan sepenuhnya dihilangkan (komentar tetap ada selama tidak kita hapus). Tujuannya adalah agar tampilan isi postingan terlihat ramping dan jelas (Apabila komentar artikel banyak loh). 

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
Seperti inilah tampilan yang anda lihat bila Memasang Kolom Komentar Facebook dan Blog Model Tab

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
Langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Tentunya seperti biasa anda harus membuka akun blogger anda sendiri.
2. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML
3. Cari Kode : <div class='comments' id='comments'>
4. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya Pastekan tepat di bawah Kode : <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Apabila sudah selesai, Simpanlah Template Blog anda. 
6. Lihat hasilnya.

Catatan:
  • Ganti IDFANPAGEFACEBOOK dengan Kode / No / Id Fan Page Facebook yang anda punya.
  • Cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman Facebook Anda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10026565009xxxx
  • Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya.
  • Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550')
  • Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu.

Cara Mengetahui ID Fanspage (Halaman) Facebook

Trik Ke 1

1. Buka Terlebih Dahulu Facebook Kalian
2. Sekarang Cari Fanspage Kalian
3. Klik Foto Profilnya (Fanspage)
4. Lalu Lihat Bagian Link Atau URL-Nya
https://www.facebook.com/photo.php?fbid=952723051420429&set=a.580990445260360.155327.580987975260607&type=1&theater

Trik Ke 2

1. Buka Terlebih Dahulu Facebook Kalian
2. Sekarang Cari Fanspage Kalian
3. Ganti Url Kalian
Url Aslinya: https://www.facebook.com/pages/tambah5000temandengancepat/580987975260607
Url DiRubah: https://graph.facebook.com/pages/tambah5000temandengancepat/580987975260607



Bagaimana, gampang bukan. Demikianlah tips tutorial kali ini mengenai "Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab". Selamat mencoba dan salam sukses selalu

Cara Membuat Share Button Keren Dan Lengkap Dibawah Blog

Social media adalah salah satu cara untuk mempromosikan blog agar terkenal dan mendapatkan banyak pengunjung.

cara membuat tombol share addthis tutorial menggunakan addthis untuk membuat tombol share dibawah postingan blog membuat tombol share facebook di website cara membuat widget share di blog membuat tombol share keren di blog membuat tombol share di setiap postingan membuat tombol share facebook dengan php cara membuat tombol share melayang di blog tombol share responsive cara membuat tombol share melayang cara membuat tombol share melayang di samping atas bawah blog cara membuat memasang tombol share di bawah atas samping sidebar di samping kiri kanan tutorial cara memasang tombol share di blog wordpress blogger cara memasang tombol share sumome social share keren responsive ringan gratis mudah tutorial pemasangan ikon tombol social share tidak mau terload rusak tidak muncul kendala masalah cara memasang tombol social share diakhir postingan blog januari februari maret april mei juni juli agustus september november desember 2015 2016 2017 2018 2019

Jika Anda cukup pintar untuk memanfaatkan social media, seperti Facebook, Twitter, ataupun Google+, bukan hal yang tidak mungkin jika misalkan Anda akan mendapatkan traffic yang cukup untuk membuat statistik laporan pengunjung Anda menjadi runcing dikarenakan lonjakan pengunjung yang tinggi.

cara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 10.jpg

cara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 8.pngcara memasang tombol social share button di blogger dengan mudah 11.jpgcara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 7.pngcara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 6.pngcara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 5.pngcara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 4.pngcara memasang tombol social share button di blogger dengan mudah 10.jpg

Untuk dapat mengoptimalkan penggunaan social media, Anda juga dapat memfasilitasi pengunjung blog Anda dengan suatu fitur yang dapat mempermudah mereka untuk membagikan artikel ke social media tanpa harus membuka situs social media terlebih dahulu, baru kemudian membagikan tautan blog Anda secara manual.

Itu tentunya rasanya sedikit merepotkan, terutama bagi pengunjung.

Dengan begitu, mereka mungkin akan malas membagikan artikel Anda ke sosmed.

cara membuat tombol social share dengan mudah untuk mendapatkan traffic.jpg

Karena alasan inilah, saya akan sangat disarankan untuk menambahkan tombol social share di blog Anda.

Dengan melakukan pemasangan tombol social share, pengunjung akan dapat membagikan artikel yang dimuat di situs Anda ke social media hanya dengan mengklik 'suatu tombol', yang memang dikhususkan untuk menjalankan fungsi tersebut.

Dan seperti yang saya tuliskan pada judul artikel ini "Cara MEMBUAT Tombol Social Share di BLOG: Lengkap", saya akan membagikan lebih dari satu style tombol social share, jadi silahkan pilih tampilan tombol social share yang Anda suka.

Untuk selengkapnya, silahkan ikuti langkah-langkah dibawah ini untuk memasang tombol social share di blog:

Cara Memasang Tombol Share Melayang di Samping Blog Cara Memasang Tombol Share Keren Melayang di Sisi Kiri Blog Cara membuat tombol share melayang di blog Cara Memasang Tombol Share Melayang di Blog Memasang tombol social share melayang disamping blog Cara Membuat Tombol Share Melayang Dengan SumoMe Cara membuat widget sosial share melayang di sebelah kiri blog


Posisi tombol: dibawah judul atau diakhir postingan



Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya berada dibawah judul artikel atau di akhir postingan, silahkan pilih salah satu style dibawah ini:

Style 1:​



cara memasang tombol social share button di blogger dengan mudah 3.JPG

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>
    .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:hover{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:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
    .sharepost li .pinterest:hover,.sharepost li .linkedin:hover{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>   
    
    
  7. Kemudian klik tombol Simpan template
  8. Tada! Kini tombol social share flat design dengan counter sudah terpasang di blog Anda


Style 2:​



cara memasang tombol social share button di blogger dengan mudah 4.JPG ​

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:
    <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>
    
    
  7. Kemudian klik tombol Simpan template
  8. Tada! Kini tombol social share flat design sudah terpasang di blog Anda


Style 3:​


cara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 2.png ​
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/AVvXsEjXNMi7oJ6cL3aFoZtHCQNraS0Gy7YPpkY6cdRVPG317g95AXXLCVggYtA4hSWSc3w5vvfExcWKm26KsYp7bSvxJkfD0Hrcl2-T4ikOjBal3L5_dECYg3ergThrfKo2pz45Hh7ouzhOFLV1/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. Tada! 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.

Atau coba sampai posisi tombol share muncul dengan benar.


Style 4:​



cara memasang tombol social share button di blogger dengan mudah 5.JPG ​

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:
    <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:hover{top:1px; left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)} 
    </style>
    
  7. Kemudian klik tombol Simpan template
  8. Tada! Kini tombol social share flat design sudah terpasang di blog Anda


Style 5:​



cara membuat tombol social share dengan mudah untuk mendapatkan traffic 2_social share button 3.png ​

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>
    #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:hover .slide-share,.twitter:hover .slide-share,.google:hover .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>
    
    
  7. Kemudian klik tombol Simpan template
  8. Tada! 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.

Atau coba sampai posisi tombol share muncul dengan benar.


Jika misalkan ikon pada tombol social share tidak work (cuma background atau lambang ikon broken), maka besar kemungkinan itu terjadi karena Anda memiliki kode yang serupa/mirip dengan code dibawah ini:
Code:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Kode diatas adalah kode bootsrap CSS untuk meload ikon-ikon tertentu dari Font Awesome, jadi jika misalkan Anda memiliki kode serupa (versi yang lebih lama), maka silahkan hapus kode tersebut, dan gantikan dengan code yang saya berikan.


Posisi tombol: melayang


Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya secara float atau fixed (mengikuti layar walaupun discroll kebawah maupun keatas), silahkan pilih salah satu style dibawah ini:

Style 1:​



cara memasang tombol social share button di blogger dengan mudah 9.JPG

Cara pemasangan:


  1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
  2. Jika sudah, masuk ke menu Tata Letak --> Tambahkan Widget
  3. Pilih HTML/JavaScript
  4. Kemudian, masukan script dibawah ini ke kolom Konten
    Code:
    <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>
    Seperti yang terlihat pada screenshoot dibawah ini:
    cara memasang tombol social share button di blogger dengan mudah 8.JPG 
  5. Jika sudah, klik Simpan


Posisi tombol: layar pop-up


Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya muncul secara pop-up, silahkan pilih salah satu style dibawah ini:

Style 1:​



cara memasang tombol social share button di blogger dengan mudah 7.JPG ​

Cara pemasangan:


  1. Pertama, silahkan pergi ke dashboard blog Anda di Blogger
  2. Jika sudah, silahkan masuk ke menu Tata Letak--> Tambahkan gadget
  3. Pilih HTML/JavScript
  4. Masukan script dibawah ini kedalam kolom Konten
    Code:
    <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58748ec649faba2e"></script>
    
    Seperti yang terlihat pada screenshoot dibawah ini:
    cara memasang tombol social share button di blogger dengan mudah 6.JPG 
  5. Jika sudah, klik Simpan


Perlu diketahui bahwa script yang Anda masukan dalam tutorial diatas (cara membuat social share button yang muncul secara pop-up) menggunakan layanan third-party atau pihak ketiga, yakni AddThis.com

Sesungguhnya, Anda perlu mendaftar dan login untuk dapat mendapatkan kode tersebut, namun untuk cara instannya, Anda dapat menggunakan kode milik saya.

Dampak buruknya? 


Tidak ada

Ini hanyalah sebuah cara yang digunakan agar Anda dapat memasang widget milik AddThis dengan cepat.

Namun jika Anda ingin membuat widget sendiri di Addthis, silahkan.

Bahkan itu lebih disarankan, karena Addthis adalah salah satu situs yang dapat membantu seorang webmaster mengelola pengelolaan navigasi situs, seperti social share button, related post, list building, follow button dan masih banyak lainnya.


Perlu diketahui pula bahwa script AddThis terkadang tidak dapat aktif sesaat setelah Anda memasang script yang saya berikan. Diperlukan waktu 15-1 jam agar script dapat aktif dan menampilkan tombol share yang tampil secara pop-up


Penutup
Kurang lebih, itulah sejumlah hal yang dapat saya sampaikan terkait bagaimana cara memasang tombol social share di blog.

Jika Anda merasa bingung, atau ragu dengan tutorial yang saya tuliskan diatas, jika Anda berkenan, silahkan tinggalkan sebuah feedback di kolom komentar, dan jika memungkinkan, saya akan menjawab feedback yang Anda kirimkan secepat yang saya bisa.
Template by : @copy 2016 Biee Prasetio
Selamat datang di Paradise-Xp | Ready Stock BlackBerry | Grosir Perdana | Pendaftaran Pulsa Multy Chip All Operator| Programming | Photoshop | Windows Tutorial dan terimakasih atas kunjungannya | Semoga bermanfaat ilmunya | kunjungi juga My - Paradise - Net Tempatnya Tips Dan Trik Blogger