Cara Membuat Tombol Share Sendiri

Bagi anda yang bingung untuk membuat atau memilih tombol shere yang banyak dibagikan oleh para blogger lainnya, kali ini saya akan membagi ilmu pengetahuan baru saya bagaimana cara memasang tombol share sendiri.

Apa Keuntungannya:

1. Anda akan lebih sedikit lebih mengerti mbagaimana cara meramu kode pemograman
2. Like yang sudah ada sebelumnya, jika anda mengganti template, like sebelumnya akan tetap masih ada, karena tombol, shere ini tersimpan dalam social profile anda sendiri.
3. Anda bisa meletakkna dimana saja tombol tersebut
4. Anda bisa memilih bermacam jenis tombol yang di tawarkan oleh social profile tersebut.
5. Dan masih banyak keuntungan lainnya yang bisa anda temukan nantinya.

Tahap Pertama:

1. anda masuk ke developers masing-masing social profile, ini dia developer nya:

• Facebook : https://developers.facebook.com/docs/plugins/like-button
• Twitter      : https://about.twitter.com/resources/buttons#tweet
• Google +  : https://developers.google.com/+/web/share/
• Pinterest   : https://developers.pinterest.com/pin_it/

2. Silahkan pilih yang mana jenis tombol shere yang anda inginkan, contoh tombol share facebook:

 

1. silahkan anda pilih sesuai yang anda inginkan
2. URL to like bisa anda kosongkan
3. Layout bisa anda pilih sesuka anda
4. setelah itu silahkan klik get kode

 3. Anda lakukan hal yang sama kepeda social profile lainnya:
4. anda kumpulkan kode tersebut di note pad
5. Anda bisa mengatur kode tersebut seperti kode di bawah ini:

<b>Share This Articel :</b>

<br />
<div class="fb-like" data-href="http://bermacamfakta.blogspot.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="ErdianRahmana" data-lang="id" data-related="ErdianRahmana" data-hashtags="bermacamfakta">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js">
  {lang: 'id'}
</script>
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
 <a href="http://www.pinterest.com/pin/create/button/
        ?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
        &media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
        &description=Next%20stop%3A%20Pinterest"
        data-pin-do="buttonPin"
        data-pin-config="above">
        <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
    </a>

 Ket:

• Warna biru : facebook
• warna orange : twitter
• Warna hijau : google +
• warna ungu : pinterest

 Tahap Kedua

1. Anda biasa meletakkan kode itu dimana saja dengan cara kode tata letak-> tambah widget--> HTML/ java scrip, pate kan kode tersebut , simpan dan letakkan kode tersebut di mana anda suka

2. Atau ndengan cara masuk ke template --> edit HTML
jika anda ingin memasang di bawah judul postingan anda bisa meletakkannya di bawah
<div class='post-header-line-1'/>
Jika anda ingin memasang di bawah postingan bisa anda paste di bawah kode
<data:post.body/>

3. Simpan dan lihat hasilnya

Untuk demo anda bisa melihat gambar di bawah ini :

Atau lihat langsung demonya :

DEMO