Saturday, February 25, 2017 Blogging Tips

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

Nah untuk style yang ke-5 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>
#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>

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.

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.

Selanjutnya saya akan membahas cara membuat stombol share melayang, silahkan klik di sini.

Posted by Iman Faizal