Ads-Top

Cara Memasang Tombol Share Di Postingan Blog

1:02 AM
Read
Cara Memasang Tombol Share Di Postingan Blog
Anda tentu saja sering melihat beberapa tombol-tombol share di setiap postingan blog maupun website. Tentu saja tombol-tombol share tersebut sangat berguna bagi para pengguna blog anda untuk share artikel ke berbagai media sosial seperti facebook, twitter, google+ 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 cara memasangnya di atas postingan blog, kedua cara memasangnya di bawah postingan blog, dan terakhir melayang di samping blog. Simak panduan lengkapnya di bawah ini.

Membuat Tombol Share

Pertama-tama kita harus membuat tombol-nya 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'.
  • Letakkan 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.
  • Letakkan kode tombol share pilihan anda tepat di bawah <data:post.body/>.
  • Kemudia simpan template. Namun sebaiknya anda preview dulu template anda untuk meminimalisir kesalahan.

Cara memasang tombol share melayang di samping blog

Untuk membuat tombol share melayang di blog, kode dan caranya berbeda dengan kode 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 memasang tombol share 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 typepedia serta klik tombol share di bawah ini.
Tags :

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.