Cara Membuat Tombol Share Blogspot Sendiri

Assalamu'alaikum.wr.wb.
Selamat malam sobat blogger, gimana kabarnya malam ini, mudah-mudahan sobat blogger dimana pun berada saat ini berada dalam keadaan sehat-walafiat yah.. Aamiin.

Kali ini kak Andy ingin berbagi Tutorial Blogger menenai  Cara Membuat Tombol Share Blogspot Sendiri . Bagi Sobat Blogger yang masih bingung untuk membuat atau memilih tombol share yang banyak dibagikan oleh para blogger lainnya, kali ini saya akan membagi ilmu pengetahuan baru saya bagaimana cara memasang tombol share sendiri.

Berikut Manfaat yang di peroleh jika Sobat Membuat Sendiri Tombol Share Sosial Media Untuk blog Sobat:

1. Sobat akan sedikit lebih memahami kode pemrograman khusunya buat yang masih newbie.
2. Like yang sudah ada sebelumnya tidak akan hilang jika sobat mengganti template karena tombol share ini tersimpan dalam social profile sobat sendiri.
3.Sobat bisa meletakkan tombol share ini  dimana saja sobat mau.
4. Sobat bisa memilih berbagai macam jenis tombol share yang di tawarkan oleh masing-masing social media tersebut.
5. Dan masih banyak lagi keuntungan lainnya yang bisa sobat temukan nantinya.


Ok. Saya rasa cukup sampai sini pembukaannya :) . Mari kita kembali ke topik utama kita.

 

Tahap Pertama:

1. Sobat masuk ke developers masing-masing social media nya. Sudah saya sediakan buat sobat link nya dibawah ini, silahkan sobat klik salah satu:

• 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  jenis tombol share mana yang sobat inginkan, contoh tombol share facebook pada gambar dibawah ini:

 

1. silahkan  pilih tombol share facebook sesuai yang sobat inginkan
2. URL to like bisa  dikosongkan saja
3. Layout bisa  pilih sendiri
4. setelah itu silahkan klik get kode

 3. Sobat lakukan hal yang sama kepeda social profile lainnya:
4.  Sobat bisa simpan dan kumpulkan kode tersebut di notepad terlebih dahulu
5. Sobat  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>

 Keterangan:

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

 Tahap Kedua

1. Sobat bisa meletakkan kode share yang sudah sobat dapatkan itu dimana saja dengan cara
masuk ke Dashbor blog lalu klik ==>> tata letak-> tambah widget--> HTML/ java script, lalu pastekan kode tersebut , simpan dan letakkan kode tersebut di mana sobat suka

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

3. Simpan dan lihat hasilnya

Untuk demo bisa dilihat pada gambar di bawah ini :










Demikianlah postingan kak Andi kali ini. Mudah-mudahan bermanfaat.
Jika ada pertanyaan silahkan tulis di comment. Terimakasih

Tweet