Cara Memasang Tombol Share Media Sosial dibawah artikel blog

Oke sobat di postingan kali ini saya akan membahas tentang Tombol Share Media Sosial. Seperti yang kita ketahui bahwa tombol-tombol tersebut sangat berguna bagi blogger kita untuk menarik pengunjung selain itu juga memudahkan kita dan pengunjung untuk membagikan artikel blog kita ke media sosial tersebut.

Saya rasa kita semua tidak asing bahwa tombol-tombol tersebut sangat berguna bagi kita selain membuat blog kita lebih SEO friendly juga meningkatkan popularitas blog kita dan menaikkan page rank blog kita , maka dari itu saya akan menjelaskan langkah-langkah dalam memasang tombol tersebut (Baca juga : Cara Memasang Tombol Share Media Sosial disamping Blog) Silahkan simak langkah-langkah berikut ini, Lets check it out....

Langkah-langkahnya adalah :

#1. Silahkan login ke blogger anda sobat

#2. Klik menu Template → Edit Template

#3. Cari dengan Ctrl + F untuk kode <div id='related-posts'> atau <data:post.body/>

#4. Sekarang copy kode dibawah ini dan pastekan diatas kode <div id='related-posts'> atau dibawah kode <data:post.body/> yang kedua atau yang ketiga

<!-- Scripts Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(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>!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 -->
<div class='horizontal-social-buttons' style='padding:5px;margin:5px'>
<!-- Twitter -->
<div style='float:left;margin-right:5px'>
<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 -->
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 18px; 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 src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></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>
<!-- Pinterest End --><div style='float:left;margin-left:7px'>
<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;//yourjavascript.com/09010225501/whatsappblogger.js&quot;;h.appendChild(s);}</script> 
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
<!-- Whatsapp Share Buttons End -->
  </div>
<div style='float:left;margin-left:10px;'> 
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='BUTTON-TYPE' expr:data-url='data:post.url' type='in/share'/>
</div>   
</div>
<div class='clear'/>
</b:if>
<!-- Scripts End -->

#5. Klik Simpan Template

Selesai juga tutorialnya, silahkan anda lihat di blogger anda dan rasakan perubahannya di bawah artikel anda. Akan ada Tombol Media Sosial seperti Facebook, Google+, Twitter, Pinterest, Linkedln, dan WhatsApp. Terima Kasih sudah berkunjung di blog ini, semoga artikel yang saya postingkan bermanfaat bagi kalian. Happy Browsing!!

Tweet

Postingan terkait:

Ditulis Michael — Monday 30 January 2017 — Add Comment — Tutorial Blog