Cara Memasang Tombol Share Di Blog

Cara Memasang Tombol Share Di Blog - Pada kali ini kita akan belajar memasang tombol share sekaligus membuat tombol share di blog. Anda tentu saja sering melihat beberapa tombol share pada postingan blog maupun website. Memasang tombol share 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 anda menarik, tentu saja akan banyak pengunjung berdatangan melalui hasil share media sosial tersebut. Bagi yg ingin memasang tombol share di blog, Simak panduan lengkapnya berikut.

Cara Memasang Tombol Share Di Blog

Pertama-tama kita harus membuat tombol share terlebih dahulu. Ada banyak website penyedia tombol share gratis salah satunya adalah addthis.

<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. Silahkan anda pilih antara kedua kode 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 = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Google +1 --> <script type='text/javascript'> (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> <!-- 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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 == "item"'> <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='"http://pinterest.com/pin/create/button/?url=" + 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 > a {background-image:none !important;} </style> </b:if>

Memasang Tombol Share Diatas Postingan Blog

• Login ke akun blogger.
• 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

Memasang Tombol Share Dibawah Postingan Blog

• Login blogger.
• Klik template, kemudian edit html.
• Cari kode <data:post.body/>. Jika anda menemukan banyak kode <data:post.body/> gunakan kode kedua.
• Pasangkan kode tombol share tepat dibawah <data:post.body/>.
• Kemudian simpan.

Memasang Tombol Share Melayang Di Samping Blog

Untuk memasang tombol share melayang di blog, kode dan caranya berbeda dengan memasang tombol share diatas dan dibawah postingan

• Login ke 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 dan membuat tombol share di blog. Memasang tombol sharedi blog juga dapat mempercantik blog. 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.