Beranda Blogger

Cara Memasang Tombol Share Di Postingan Blog

11.02
A+ A- Print Email
Cara Memasang Tombol Share Di Postingan Blog
Cara Memasang Tombol Share Di Postingan Blog - Pada kali ini kita akan membuat tombol share dan memasang tombol di postingan blog. Anda tentu saja sering melihat beberapa tombol share di setiap postingan blog maupun website. Tombol share tersebut sangat berguna bagi para pengguna blog anda untuk share artikel ke berbagai media sosial seperti facebook, twitter, google plus serta masih banyak lagi. Bila postingan-postingan anda menarik, tentu saja akan banyak pengunjung berdatangan melalui hasil share media sosial tersebut. Munkin kita memang harus berterima kasih kepada beberapa media sosial yang telah memberikan fasilitas tombol share untuk blog maupun website. Di bawah ini saya akan menjelaskan 3 cara memasang tombol share, pertama tombol share di atas postingan, kedua tombol share di bawah postingan blog, dan terakhir tombol share melayang di samping blog. Simak panduan lengkapnya di bawah ini.

Cara Membuat Tombol Share

Pertama-tama kita harus membuat tombol share terlebih dahulu. Ada banyak website penyedia tombol share gratis salah satunya adalah addthis. Untuk kode tombol share addthis anda bisa lihat di bawah ini.
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e01902e6f8880cf"></script>
Nah, untuk kode tombol share yang saya pakai anda bisa lihat di bawah ini.
<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='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'> 
#pin-wrapper &gt; a {background-image:none !important;}
</style> 
</b:if> 

Silahkan anda pilih antara kedua kode di atas. Sekarang kita masuk ke tahap pemasangannya ke template blog.

Cara memasang tombol share di atas postingan blog

  • Login ke akun blogger anda.
  • Pada dashboard klik menu template, kemudian klik edit html.
  • Lalu cari kode <div class='post-body entry-content'.
  • Pasangkan kode tombol share pilihan anda tepat di atas kode <div class='post-body entry-content'.
  • Kemudian simpan template. Namun sebaiknya anda preview dulu template anda untuk meminimalisir kesalahan.


Cara memasang tombol share di bawah postingan blog

  • Login ke akun blogger anda.
  • Pada dashboard klik menu template, kemudian klik edit html.
  • Lalu cari kode <data:post.body/>. Jika anda menemukan banyak kode <data:post.body/> gunakan kode kedua.
  • Pasangkan kode tombol share pilihan anda tepat di bawah <data:post.body/>.
  • Kemudian simpan template. Jangan lupa preview dulu template anda untuk meminimalisir kesalahan.

Cara memasang tombol share melayang di samping blog

Untuk memasang tombol share melayang di blog, kode dan caranya berbeda dengan memasang tombol share di atas dan di bawah postingan. Untuk memasangnya simak panduannya di bawah ini.
  • Login ke akun blogger anda.
  • Pada dashboard pilih menu tata letak.
  • Kemudian pilih HTML/Javascript.
  • Lalu pastekan kode di bawah ini.
<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="http://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='http://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="http://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>

  • Lalu simpan 
Demikianlah ulasan saya mengenai cara membuat tombol share dan memasang tombol di postingan blog.. Tombol share unik juga dapat mempercantik blog anda. Sosial media tidak selalu berdampak negatif jika kita menggunakanya secara positif. Mungkin anda berminat baca artikel berhubungan dengan sosial media.
Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa untuk berlangganan artikel terbaru dari tapike serta klik tombol share di bawah ini.