Monday, March 13, 2017

MENAMBAHKAN WIDGET SHARE MEDIA SOSIAL IN BLOGGER

Posted by Nurkolis on March 13, 2017 in | 3 comments

ASSALAMMUALAIKUM WR.WB


PENGERTIAN

Widget ini sangat penting untuk optimasi suatu blog karena dengan widget share button sosial media Facebook, Twitter dan lainya, maka user internet yang mereweet kembali tentang update halaman blog anda bisa lewat widget ini, jadi widget ini berfungsi ganda selain mempercantik tampilan blog lebih keren atau hidup dan yang keduanya sebagai alat atau tempat untuk menambah traffic blog semakin tinggi, karena bila arikel Anda sudah terhubung lewat share button media sosial maka blog anda akan terkenal karena banyak yang melihat lewat situs sosial media tersebut.

LATAR BELAKANG

Karena pada template blog saya ini belum ada widget sosial media, untuk itulah saya ingin menambahkan widget ini pada template blog saya.

MAKSUD & TUJUAN

- Difungsikan untuk menshare postingan yang ada
- Untuk mempercantik tampilan blog, agar tidak terkesan garing.
- Untuk menambah wawasan yang ada

ALAT & BAHAN

- Blogger
- koneksi internet
- laptop

JANGKA WAKTU

Jangka waktu yang dibutuhkan untuk setting ini kurang lebih 5 menit, tergantung pada koneksi internet yang ada.

LANGKAH KERJA

1. Pertama-tama kita masuk ke akun blogger kita, lalu pilih tata letak -> tambah gadget sesuai letak yang kalian inginkan, disini saya tambah dibaris paling bawah.


2. Setelah itu pilih HTML/javaScript


3. Kemudian tinggal kalian isikan judul dan script seperti dibawah ini.

SCRIPT :

<!-- 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>
 </div></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'/>
</g:plusone></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'/>
</fb:like></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;'/></a></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 --></script></div></b:if>


5. Kemudian simpan scriptnya. kemudian cek pada blog kalian, apabila sudah muncul seperti ini, berarti kita sudah berhasil.


KESIMPULAN

Dengan menambahkan widget sosial media ini, kita bisa menshare postingan kita kemedia sosial yang kita miliki, untuk sebagai media promosi.

REFERENSI
http://www.idesat.com/2014/02/script-share-sosial-media-button.html

3 comments: