Saturday, February 25, 2017 Blogging Tips

Cara membuat tombol share dibawah judul atau di akhir postingan Style 3

Nah untuk style yang ke 3 seperti dibawah ini:

Cara pemasangan:

Pertama, silahkan pergi ke dashboard blog Blogger Anda
Setelah itu, masuk ke menu Template--> Edit HTML
Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>

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'/>

Kemudian cari kode <data:post.body/>

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/AVvXsEjgzB-JyqAluYhifZwXT2s8KGbAu3x50rimeRfGoQdZI0wiJPAPxJaVaF9BwseC58Ar4Uh7dJ8wnatcCrNkFnPMZOzVlAItrQ9wcoMwOVqrAAoISgZRHBUcsFRJ3OrLtpUV4aD8QPhuPVyV/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>

Kemudian klik tombol Simpan template
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.

Okeh langsung saja, selanjutnya saya akan membahas Style yang ke 4.

Silahkan lihat di sini.

Posted by Iman Faizal

Cara membuat tombol share dibawah judul atau di akhir postingan Style 3

1 Response to "Cara membuat tombol share dibawah judul atau di akhir postingan Style 3"