BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

Memasang Tombol Share Pada Posting

KrocoNet.com – Kalian sudah pasti sering melihat beberapa tombol share yang ada pada artikel yang kalian baca di website seseorang.Tombol share ini sangat berguna bagi pengunjung blog sobat karena jika mereka menyukai artikel yang anda tulis maka bisa jadi mereka akan share artikel sobat ke beberapa media sosial seperti Facebook , Twitter , G+ dan media sosial lainnya.Jadi jangan anggap remeh tombol share ini karena dengan adanya tombol share maka dapat menaikan pageview blog/website sobat.

Saya Akan Menjelaskan 3 Cara Memasang Tombol Share :

  • Pasang Di Atas Posting
  • Pasang Di Bawah Posting
  • Pasang Di Samping Posting (Melayang)
Seperti ini kira kira nanti hasilnya


<b:if cond='data:post.isFirstPost'>

<!-- Facebook -->

<div id='fb-root'/>

<script type='text/javascript'>(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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;

fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));

</script>

<!-- Google +1 -->

<script type='text/javascript'>

(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>

<!-- Twitter -->

<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

</b:if>

<!-- Scripts End -->

<!-- Horizontal social buttons Start -->

<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>

<!-- Twitter -->

<div style='float:left;'>

<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>

</div>

<!-- Google +1 -->

<div style='float:left;'>

<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>

</div>

<!-- Facebook Like+Send -->

<div style='float:left;'>

<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>

</div>

<!-- Pinterest Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>

<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img alt='Pinterest' src='//assets.pinterest.com/images/pidgets/pin_it_button.png' title='Pinterest'/></a>

<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>

</div>

<script src='https://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<style type='text/css'>

#pin-wrapper &gt; a {background-image:none !important;}

</style>

</b:if>


  • Cara memasang tombol share di atas postingan
– Pertama silahkan login terlebih dahulu pada blog sobat

– Masuk kemenu Template lalu klik Edit HTML
– Kalian cari kode <div class=’post-body entry-content’
– Jika sudah kamu temukan letakan scriptnya di ATAS kode <div tersebut.
– Jika sudah kamu bisa me review dulu hasilnya sebelum menyimpan
– Jika sudah benar tinggal kamu klik Simpan

  • Cara memasang tombol share di bawah postingan
– Pertama silahkan login terlebih dahulu pada blog sobat

– Masuk kemenu Template lalu klik edit HTML
– Cari kode berikut ini <data:post.body/> ,jika ada lebih dari 1 kode seperti itu gunakanlah yang ke 2
– Letakan script tombol sharenya tepat di bawah <data:post.body/>
– jika sudah,kamu bisa me review dulu hasillnya sebelum disimpan
– Jika sudah benar tinggal klik simpan

  • Cara memasang tombol share di samping postingan (Melayang)
Untuk tombol share yang satu ini sedikit berbeda dengan cara cara diatas karena dengan  tombol share ini kita tidak perlu melakukan edit html cukup menambahkan gadget baru pada tata letak.langsung disimak saja penjelasannya.
– Pertama silahkan login pada blog sobat
– Masuk kemenu Tata Letak 
– Pilih Tambah Gadget lalu klik Html/Javascipt
– Pastekan script dibawah ini pada kolom yang kosong
– Setelah itu klik simpan


<style>

#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>

<div id='floatingbuttons' title="Share this post!"><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='https://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="https://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://blogjuragan.com" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>


Media Sosial tidak akan berpengaruh negatif jika kita menggunakannya dengan baik dan untuk tujuan yang positif Semoga artikel yang saya share dapat bermanfaat untuk para blogger dan jika ada kesalahan atau sebagainya bisa berkomentar atau menghubungi saya terima kasih