[LENGKAP] Cara Memasang Iklan Google Adsense di Blogspot

Beberapa waktu lalu, ada yang bertanya ~ tentang bagaimana memasang unit iklan adsense di blog. Tentu untuk memasang iklan, Anda harus sudah disetujui oleh Google Adsense dan saya pikir yang bertanya saat itu sudah dapat persetujuan.

Pada dasarnya, ada dua cara yang disediakan Google untuk memasang iklan di blog. Cara jika Anda mendaftar Adsense melalui blogger dan cara jika memasang iklan melalui dasboard akun Google Adsense yang konvensional.

Pasang Iklan Google Adsense dari Blogspot

Cara ini terbilang mudah. Anda hanya perlu masuk ke akun blogger Anda dan memilih Penghasilan. Jika Anda mendaftar Adsense tidak melalui blogspot, ada baiknya mengaitkan dulu akun adsense Anda dengan blogspot. Caranya dengan memasukkan ID akun Anda.

Jika berhasil maka tampilannya akan seperti berikut :

Untuk memasang iklan Adsense di blog, pilihlah Ya pada opsi Tampilkan iklan di blog. Ada tiga model iklan yang bisa kita tampilkan melalui pengaturan ini. 

• Tampilkan iklan di bilah samping dan entri: artinya iklan akan tampil di sidebar blog dan di bagian akhir postingan. 
• Tampilkan iklan di bilah samping : iklan hanya akan tampil di sidebar blog
• Tampilkan iklan di bawah entri : ikan hanya akan muncul di bagian bawah atau akhir postingan. 

Jika telah melakukan perubahan jangan lupa untuk mengklik tombol Simpan Setelan di pojok kanan atas.

Pasang Iklan Google Adsense dari Akun Adsense

Untuk memasang iklan Adsense pertama-tama login dulu ke dasboard. Kunjungi google.com/adsense dan masukkan email yang telah disetujui oleh Adsense. Setelah berhasil, Anda akan dihadapkan pada tampilan beranda. Disini Anda bisa melihat laporan penghasilan Adsense.

Selanjutnya, klik Iklan Saya yang berada di samping beranda.

Di bagian inilah semua jenis iklan ditampilkan. Anda bisa memodifikasinya dan mengaitkan dengan tema blog Anda. Untuk membuat unit iklan baru, klik tombol + Unit iklan baru.

Di bagian inilah Anda akan memilih jenis iklan apa yang akan digunakan. Harus diperhatikan, setiap unit iklan yang dibuat, selalu memberikan nama.

Pilih ukuran iklan yang akan dibuat. Anda bisa memilih jenis ukuran yang disediakan dengan mengklik pilihan Menampilkan. Ada sekitar tujuh jenis pilihan yang diberikan. Pertama yang Disarankan, ini adalah jenis yang paling banyak digunakan. Spanduk Horizontal, Spanduk Tegak, Persegi Panjang Responsif, Ukuran khusus dan Iklan Tautan.

Setiap ukuran, Anda bila melihatnya terlebih dahulu dengan mengklik Pratinjau, seperti ukuran 300x250 berikut ini.

Setelah yakin dengan ukurannya, selanjutnya pilih Jenis Iklan. Ada tiga pilihan, menampilkan iklan dalam bentuk teks dan gambar, hanya iklan gambar atau hanya iklan teks.

Jika memilih iklan teks dan gambar, ada baiknya Anda memilih gaya iklan teks yang akan ditampilkan. Di bagian ini ada banyak pilihan yang bisa Anda sesuaikan dengan blog Anda. Untuk mengeditnya, klik tombol Salin dan Edit.

Di bagian bawah, masih ada dua opsi, Saluran khusus dan Iklan Cadangan. Keduanya hanya berguna untuk waktu-waktu tertentu saja. Jika telah yakin dengan pilihan, selanjutnya klik Simpan dan dapatkan kode.

Copy kode iklan yang dimunculkan dan pasang di bagian blog Anda. Tunggu sampai iklannya aktif. Jika telah aktif maka, iklan yang dimaksud sudah akan muncul di blog Anda. Langkah selanjutnya adalah mempromosikan blog Anda agar ramai pengunjung, dengan begitu, akan semakin besar kemungkinan iklan Anda akan diklik dan tentu pundi-pundi penghasilan Anda akan semakin besar.

Simak Video berikut

Iklan Adsense Pada Blogger Dan di Postingan Blogger

Cara Jitu Share Otomatis Postingan Blog ke Sosial Media

Salah satu cara biar blog banyak yang mengunjungi adalah dengan share postingan kita ke sosial media. Ada Banyak sosial media di internet, salah satunya Facebook dan Twitter yang juga telah kita pelajari cara membuatnya pada postingan sebelumnya.

Dengan memiliki akun Facebook dan twitter akan dengan mudah bagi kita untuk membagikan postingan. Hanya saja, akan terasa melelahkan apabila postingan yang baru kita buat harus di share satu persatu.

Nah, pada postingan kali ini kita akan pelajari cara mengatur postingan blogspot bisa tershare secara otomatis setiap kali kita membuat postingan.

Ada banyak cara dan aplikasi yang bisa kita gunakan buat share postingan secara otomatis. Kalau share otomatis ke Google+ sudah disediakan di dashboard Blogger, tinggal dicentang saja. Sedangkan share otomatis ke situs sosial media yang lain kita butuh alat bantu. Alat bantu ini ada banyak sekali, mulai dari Feedburner, IFTTT, Buffer, Hootsuite dan lain-lain.

Kali ini kita akan mengetahui cara share postingan otomatis pake Hootsuite. Kenapa Hootsuite? karena alat ini populer dan cukup gampang buat pemula. Langsung aja disimak cara share postingan otomoatis ke sosial media pake Hootsuite. Saya mencoba semudah mungkin memberikan pemahanan agar semua bisa menerapkan.

• Pertama kalian menuju ke situs Hootsuite lalu daftar. Cara daftarnya gampang bisa pake akun Facebook atau pake email. Tinggal di isi datanya yang lengkap terus klik Sing up Now. Tapi dalam tutorial ini kita akan mendaftar dengan menggunakan data email, caranya klik Create a new account, lalu isikan email dan username serta pasword yang diinginkan.

• Setelah proses pertama diatas selesai, Anda akan dihadapkan pada tab baru. Dalam langkah kedua Add your social networks, silahkan pilih sosial media yang ingin Anda pakai untuk share otomatis postingan Anda diblog. Dalam tuturial ini saya gunakan Twitter dan Facebook. Caranya, klik saja tombol masing-masing dan ikuti perintahnya hingga selesai, setelah itu klik Done Adding sosial networks >>

• Anda akan dihadapkan pada halaman dasbor Hootsuite. Langsung saja lihat tab disebelah kiri dan pilih setting dan  klik RSS/Atom, setelah itu akan tampil gambar berikut. 

• Setelah itu klik tanda + ( Add New Feed ), terus tinggal di isi datanya. 

Keterangan Pilihan :
Feed URL  : Tambahkan alamat feed blog Anda.
Network to send feed items to: pilih akan di share kemana.
Prepend text to each message (20 chars max): Isikan kata-kata yang ingin muncul disana.
Lalu klik Save Feed

Ulangi hingga semua akun sosial media Anda terkoneksi dan silahkan kembali ke blog Anda. Coba melakukan postingan, secara otomatis postingan Anda akan tershare di Twitter dan Facebook. Mudah bukan. Semoga bermanfaat. Jika memiliki pertanyaan atau sharing, silahkan berdiskusi di kolom komentar berikut.

Membuat Tulisan Berjalan Keren di Bawah Blogger

Banyak yang email saya menanyakan cara membuat Tulisan berjalan di blog saya, saya bingung menamakannya apa.. hehehe... jadi saya menamakan "Tulisa Berjalan di Bawah Blogger"
Contohnya Seperti Di blog saya ini.. Ok langsung saja tanpa basa basi.... Prakteknya

zoom

1. Copy Paste kode di bawah tepat di atas ]]></b:skin>
Gunakan ctrl + F agar cepat menemukan kode di atas

#anima_sudut1 {
position:fixed;_position:relative;bottom:10px; left:10px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Anda bisa mengatur ukuran dengan merubah yang berwarna hujau
bottom:10px
left:10px

2. Lalu Copy Paste kode di bawah tepat di atas </body>
Gunakan ctrl + F agar cepat menemukan kode di atas

<div id='anima_sudut1'>
&lt;font COLOR=&quot;#000000&quot;&gt;
&lt;B&gt;&lt;MARQUEE onmouseover=&quot;this.stop()&quot; onmouseout=&quot;this.start()&quot; direction=&quot;left&quot; BGCOLOR=&quot;#80ff00&quot; width= 100%px scrollamount=&quot;3&quot;&gt;
TERIMAKASIH ATAS KUNJUNGAN ANDA | JANGAN LUPA BUAT COMMENT, SHARE YAH SAMA <blink style='font-weight: bold;'><a href='https://plus.google.com/u/0/108651077330085314935' style='color: rgb(255, 0, 0);' target='_blank'>FOLLOW</a></blink> | ANDA DAPAT MENDOWNLOAD SEMUA VIDEO DISINI SECARA GRATIS TANPA DI PUNGUT BIAYA, DAN KAMI MENYEDIAKAN FILE TANPA BANYAK IKLAN | SEMOGA DI BLOG <blink style='font-weight: bold;'><a href='http://gallery-vip.blogspot.com/' style='color: rgb(255, 0, 0);' target='_blank'>GALLERY VIP</a></blink> INI ANDA MENDAPAT KEHARMONISAN KELUARGA ANDA | BERKUNJUNG LAGI YA...
&lt;/MARQUEE&gt;&lt;/b&gt;&lt;/font&gt;
</div>

Anda bisa merubah Warna Tulisan #000000 <== Anda bisa mengganti
Anda bisa merubah Warna Backround #80ff00 <== Anda bisa mengganti
Yang tulisan merah Anda bisa ganti dengan kata-kata Anda sendiri
Dan Link yang di bawah Anda bisa ganti dengan Profil Google+ / Alamat Blogger Anda
https://plus.google.com/u/0/108651077330085314935 Anda bisa ganti
http://gallery-vip.blogspot.com/ Anda bisa ganti

Anda Juga bisa Mengadopsi Kode Marquee Kode-kodenya Link di bawah ini:
Cara Membuat Tulisan Berjalan (Marquee)

Semoga bermanfaat, tinggalkan komen. Terimakasih...

Cara Membuat Tulisan Berjalan (Marquee) Di Blogger

Cara membuat tulisan berjalan (Marquee) di blog memang sangatlah mudah. Kenapa tulisan berjalan juga disebut Marquee? karena untuk membuat tulisan berjalan itu menggunakan kode Marquee. Marquee berguna untuk mempercantik tampilan blog sehingga pengunjung bisa lebih suka dengan blog anda.

Perlu anda ketahui bahwa kode dasar Marquee adalah..

<marquee>TEKS YANG BERGERAK</marquee>  

Kode diatas menjadi seperti ini
TEKS YANG BERGERAK 
Jadi, dengan mengerti kode dasar diatas, anda bisa membuat bermacam-macam variasi kode Marquee.. Sebelum membahas ke variasi kode Marquee. Mari kita bahas terlebih dahulu cara pemasangannya.. Ada 2 tempat untuk pemasangan kode Marquee ini, yaitu untuk Widget dan artikel..

Cara pemasangan kode Marquee pada artikel

1. Di bagian edit entri atau entri baru, silahkan ubah dari Mode Compose ke mode HTML
2. Silahkan masukkan kode Marquee di mode HTML
3. Cek posisi teks di mode Compose
4. Untuk melihat apakah kode berjalan, silahkan klik Pratinjau. 

Cara pemasangan kode Marquee pada widget 

1. Login ke akun blogger anda
2. Masuk ke menu Tata Letak, Klik tambahkan gadget
3. Silahkan pilih HTML/Java Script
4. Masukkan kode Marquee yang anda pilih
5. Silahkan klik Simpan
6. Kemudian silahkan cek apakah kode sudah bekerja.

Supaya lebih jelas dan tidak bingung, kita bahas terlebih dahulu cara mengubah warna , huruf, dan ukuran pada teks. Ikuti langkah-lenglah berikut..

Kode dasarnya adalah
style="font-family: Arial; font-size:20px; color:#800C0C;"

1. Arial adalah jenis huruf
2. 20px adalah ukuran huruf
3. #f2f2f2 adalah warna huruf

Silahkan ubah sesuai dengan keinginan anda

Contoh kode nya seperti ini..
<marquee bgcolor="pink" style="font-family: Arial; font-size:20px; color:#800C0C;">CONTOH BACKGROUND AREA TEKS</marquee>

Hasilnya akan terlihat seperti ini..
CONTOH BACKGROUND AREA TEKS

Jadi, mari kita bahas saja variasi kode Marquee ini. Berikut ini adalah varias-variasi kode Marquee nya.. 

Kode Marquee untuk mengatur pengulangan Rotasi

kode loop="angka|-1|infinite" digunakan untuk pengulangan berotasi pada Marquee.. Setelah berotasi sesuai angka yang ditentukan, maka teks tersebut akan hilang.
Contoh kodenya seperti ini:
<marquee loop="6">TEKS BEROTASI 6 KALI</marquee>

Hasilnya akan terlihat seperti ini..
TEKS BEROTASI 6 KALI

Kode Marquee untuk mengatur lebar teks

Kode width="angka lebar" berguna untuk mengatur lebar dari kode teks yang yang akan berjalan. Bisa anda atur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang teks berjalan saja.

Contoh kodenya seperti ini:
<marquee width="50%">LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG</marquee>

Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.

Hasilnya akan terlihat seperti ini
LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG 

Kode Marquee untuk memberi link pada teks

Kode dasar seperti ini..
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://seoterpadu.blogspot.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN</a></marquee>

Hasilnya akan terlihat seperti ini..
CARA MEMBUAT TULISAN BERJALAN

Kode Marquee untuk mengatur background pada jalur teks

Kode bgcolor="warna" berguna untuk memberikan warna background pada area teks berjalan.

Contoh kodenya seperti ini:
<marquee bgcolor="pink">CONTOH BACKGROUND AREA TEKS</marquee>

Keterangan: pink bisa anda ganti sesuai warna yang anda inginkan. Misalnya blue, yellow, red, dan lain-lain. 

Hasilnya akan terlihat seperti ini
CONTOH BACKGROUND AREA TEKS

Kode Marquee untuk mengatur kecepatan jeda

Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik.

Contoh kodenya seperti ini:
<marquee scrolldelay="750">TEKS BERJALAN DALAM JEDA 0,75 DETIK</marquee> 

Keterangan: Angka 750 itu untuk jeda dalam 0,75 detik. Jadi silahkan ganti 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..

Hasilnya akan terlihat seperti ini..
TEKS BERJALAN DALAM JEDA 0,75 DETIK

Kode Marquee untuk memberi Alt Title pada area teks berjalan

Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area teks berjalan. Atau nama lainnya yaitu Alt Title.

Contoh kodenya seperti ini:
<marquee title="TEKS YANG AKAN MUNCUL JIKA KURSOR DIARAHKAN KE AREA TEKS BERJALAN">TEKS YANG BERJALAN DENGAN PESAN</marquee>

Hasilnya seperti ini.. 
TEKS YANG BERJALAN DENGAN PESAN

Kode Marquee untuk mengatur kecepatan teks berjalan

Kode scrollamount="angka" berguna untuk mengatur kecepatan laju teks yang berjalan.

Contoh kodenya seperti ini:
<marquee scrollamount="12">KECEPATAN TEKS YANG BERJALAN 12</marquee> 

Keterangan: angka 12 bisa anda ganti sesuai kecepatan yang anda sukai. Semakin besar angka maka akan semakin cepat.

Hasilnya akan terlihat seperti ini..
KECEPATAN TEKS YANG BERJALAN 12

Kode Marquee untuk mengatur arah teks bergerak

Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.

Contoh kode nya seperti ini:
<marquee direction="left">TEKS AKAN BERGERAK KE KIRI</marquee>

Keterangan: left bisa anda ganti sesuai arah teks berjalan yang anda inginkan.

Hasilnya akan terlihat seperti ini..
TEKS AKAN BERGERAK KE KIRI

Kode Marquee untuk mengatur teks berhenti jika dilintasi mouse

Kode dasar untuk mengatur teks agar berhenti jika dilintasi mouse adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE</marquee> 

Hasilnya akan terlihat seperti ini..
TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE

Jadi itulah, beberapa macam variasi kode Marquee. Semoga bermanfaat untuk anda. Dan terima kasih sudah mau berkunjung ke blog ini.

Cara Memasang Kolom Komentar Facebook dan Blog Keren

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog. Tidak ketinggalan juga mempercantik tampilan kolom komentar pada blog.

Memasang Kolom Komentar Facebook dan Blog secara bersamaan merupakan salah satu cara mempercantik tampilan blog, khususnya tampilan postingan / artikel yang ada pada blog tersebut. Dimana Komentar-komentar dari pengunjung seakan-akan disembunyikan, dan komentar-komentar tersebut akan terlihat kembali apabila kita memilih berdasarkan Facebook atau Blog, bukan sepenuhnya dihilangkan (komentar tetap ada selama tidak kita hapus). Tujuannya adalah agar tampilan isi postingan terlihat ramping dan jelas (Apabila komentar artikel banyak loh). 

Seperti inilah tampilan yang anda lihat bila Memasang Kolom Komentar Facebook dan Blog Model Tab

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
Langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Tentunya seperti biasa anda harus membuka akun blogger anda sendiri.
2. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML
3. Cari Kode : <div class='comments' id='comments'>
4. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya Pastekan tepat di bawah Kode : <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Apabila sudah selesai, Simpanlah Template Blog anda. 
6. Lihat hasilnya.

Catatan:

• Ganti IDFANPAGEFACEBOOK dengan Kode / No / Id Fan Page Facebook yang anda punya.
• Cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman Facebook Anda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10026565009xxxx
• Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya.
• Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550')
• Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu.

Cara Mengetahui ID Fanspage (Halaman) Facebook

Trik Ke 1

1. Buka Terlebih Dahulu Facebook Kalian

2. Sekarang Cari Fanspage Kalian

3. Klik Foto Profilnya (Fanspage)

4. Lalu Lihat Bagian Link Atau URL-Nya

https://www.facebook.com/photo.php?fbid=952723051420429&set=a.580990445260360.155327.580987975260607&type=1&theater

Trik Ke 2

1. Buka Terlebih Dahulu Facebook Kalian

2. Sekarang Cari Fanspage Kalian

3. Ganti Url Kalian

Url Aslinya: https://www.facebook.com/pages/tambah5000temandengancepat/580987975260607

Url DiRubah: https://graph.facebook.com/pages/tambah5000temandengancepat/580987975260607

Bagaimana, gampang bukan. Demikianlah tips tutorial kali ini mengenai "Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab". Selamat mencoba dan salam sukses selalu

Cara Membuat Share Button Keren Dan Lengkap Dibawah Blog

Social media adalah salah satu cara untuk mempromosikan blog agar terkenal dan mendapatkan banyak pengunjung.

cara membuat tombol share addthis tutorial menggunakan addthis untuk membuat tombol share dibawah postingan blog membuat tombol share facebook di website cara membuat widget share di blog membuat tombol share keren di blog membuat tombol share di setiap postingan membuat tombol share facebook dengan php cara membuat tombol share melayang di blog tombol share responsive cara membuat tombol share melayang cara membuat tombol share melayang di samping atas bawah blog cara membuat memasang tombol share di bawah atas samping sidebar di samping kiri kanan tutorial cara memasang tombol share di blog wordpress blogger cara memasang tombol share sumome social share keren responsive ringan gratis mudah tutorial pemasangan ikon tombol social share tidak mau terload rusak tidak muncul kendala masalah cara memasang tombol social share diakhir postingan blog januari februari maret april mei juni juli agustus september november desember 2015 2016 2017 2018 2019

Jika Anda cukup pintar untuk memanfaatkan social media, seperti Facebook, Twitter, ataupun Google+, bukan hal yang tidak mungkin jika misalkan Anda akan mendapatkan traffic yang cukup untuk membuat statistik laporan pengunjung Anda menjadi runcing dikarenakan lonjakan pengunjung yang tinggi.

Untuk dapat mengoptimalkan penggunaan social media, Anda juga dapat memfasilitasi pengunjung blog Anda dengan suatu fitur yang dapat mempermudah mereka untuk membagikan artikel ke social media tanpa harus membuka situs social media terlebih dahulu, baru kemudian membagikan tautan blog Anda secara manual.

Itu tentunya rasanya sedikit merepotkan, terutama bagi pengunjung.

Dengan begitu, mereka mungkin akan malas membagikan artikel Anda ke sosmed.

​

Karena alasan inilah, saya akan sangat disarankan untuk menambahkan tombol social share di blog Anda.

Dengan melakukan pemasangan tombol social share, pengunjung akan dapat membagikan artikel yang dimuat di situs Anda ke social media hanya dengan mengklik 'suatu tombol', yang memang dikhususkan untuk menjalankan fungsi tersebut.

Dan seperti yang saya tuliskan pada judul artikel ini "Cara MEMBUAT Tombol Social Share di BLOG: Lengkap", saya akan membagikan lebih dari satu style tombol social share, jadi silahkan pilih tampilan tombol social share yang Anda suka.

Untuk selengkapnya, silahkan ikuti langkah-langkah dibawah ini untuk memasang tombol social share di blog:

Cara Memasang Tombol Share Melayang di Samping Blog Cara Memasang Tombol Share Keren Melayang di Sisi Kiri Blog Cara membuat tombol share melayang di blog Cara Memasang Tombol Share Melayang di Blog Memasang tombol social share melayang disamping blog Cara Membuat Tombol Share Melayang Dengan SumoMe Cara membuat widget sosial share melayang di sebelah kiri blog

Posisi tombol: dibawah judul atau diakhir postingan


Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya berada dibawah judul artikel atau di akhir postingan, silahkan pilih salah satu style dibawah ini:

Style 1:​

​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
2. Setelah itu, masuk ke menu Template--> Edit HTML
3. Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
4. Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
   
   Code:

   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Kemudian cari kode <data:post.body/>
6. Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.
   
   Code:

   <style>
   .sharepost li{width:19%;padding:0;list-style:none;}
   .sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
   .sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
   .sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
   .sharepost li .twitter{background-color:#55acee;}
   .sharepost li .facebook{background-color:#3b5998;}
   .sharepost li .gplus{background-color:#dd4b39;}
   .sharepost li .pinterest{background-color:#cc2127;}
   .sharepost li .linkedin{background-color:#0976b4;}
   .sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
   .sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
   .sharepost li{float:left;margin-right:1.2%}
   .sharepost li:last-child{margin-right:0}
   .sharepost li .fa:before{margin-right:5px}
   </style>
   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
           <div class='sharepost'>
                   <ul>
                   <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
   
                   <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
   
                   <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
   
       <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
   
                   <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
   
                   </ul>
            </div> </b:if>   
   
   

7. Kemudian klik tombol Simpan template
8. Tada! Kini tombol social share flat design dengan counter sudah terpasang di blog Anda

Style 2:​

 ​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
2. Setelah itu, masuk ke menu Template--> Edit HTML
3. Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
4. Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
   
   Code:

   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Kemudian cari kode <data:post.body/>
6. Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.
   
   Code:

   <div class="don-share" data-bubbles="top" data-limit="3">
   <div class="don-share-total"></div>
   <div class="don-share-facebook"></div>
   <div class="don-share-twitter"></div>
   <div class="don-share-google"></div>
   <div class="don-share-pinterest"></div>
   <div class="don-share-linkedin"></div>
   <div class="don-share-tumblr"></div>
   <div class="don-share-stumbleupon"></div>
   <div class="don-share-reddit"></div>
   <div class="don-share-hackernews"></div>
   <div class="don-share-buffer"></div>
   <div class="don-share-xing"></div>
   <div class="don-share-pocket"></div>
   <div class="don-share-fancy"></div>
   <div class="don-share-yummly"></div>
   <div class="don-share-scoopit"></div>
   <div class="don-share-weibo"></div>
   <div class="don-share-vk"></div>
   <div class="don-share-mailru"></div>
   <div class="don-share-odnoklassniki"></div>
   <div class="don-share-hatena"></div>
   </div>
   <script type="text/javascript"> 
   (function() {
   var dr = document.createElement('script');
   dr.type = 'text/javascript'; dr.async = true;
   dr.src = '//share.donreach.com/buttons.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
   })();
   </script>
   <style>
   .don-share .don-share-total {
       line-height: 18px;
       margin-right: 30px;
       display: none !important;
       position: static;
   }
   .don-share .don-share-expand {
       color: #333;
       display: none !important;
       background-color: #fff;
       border-color: #ccc;
   }
   </style>
   
   

7. Kemudian klik tombol Simpan template
8. Tada! Kini tombol social share flat design sudah terpasang di blog Anda

Style 3:​

 ​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
2. Setelah itu, masuk ke menu Template--> Edit HTML
3. Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
4. Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
   
   Code:

   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Kemudian cari kode <data:post.body/>
6. Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.
   
   Code:

   <style>
   .social-buttons-box {
   height: 67px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXNMi7oJ6cL3aFoZtHCQNraS0Gy7YPpkY6cdRVPG317g95AXXLCVggYtA4hSWSc3w5vvfExcWKm26KsYp7bSvxJkfD0Hrcl2-T4ikOjBal3L5_dECYg3ergThrfKo2pz45Hh7ouzhOFLV1/s1600/rect3799.png) no-repeat 200px 0px;
   margin:20px 0 15px;
   overflow:hidden;
   }
   .social-buttons {
   margin:0 0;
   height:67px;
   float:left;
   }
   .social-buttons .share {
   float:left;
   margin-right:10px;
   display:inline-block;
   }
   .share-btn {
   margin:15px 0 25px;
   height:20px;
   overflow:hidden;
   }
   </style>
   <div class='social-buttons-box'>
   <div class='social-buttons'>
     <div class='share gplus'>
   <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/>
   </div>
   <div class='share like'>
   <div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/>
   </div>
   <div class='share tweet'>
   <a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
   </div>
   </div>
   <!-- <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>-->
   <div style='clear: both;'/>
   <script>
     window.___gcfg = {lang: 'id'};
   
     (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>
   <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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
   </script><div id='fb-root'/>
   <script type='text/javascript'>
   //<![CDATA[
   (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 = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
   //]]>
   </script>
   

7. Kemudian klik tombol Simpan template
8. Tada! Kini tombol social share flat design sudah terpasang di blog Anda

Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.

Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.

Atau coba sampai posisi tombol share muncul dengan benar.

Style 4:​

 ​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
2. Setelah itu, masuk ke menu Template--> Edit HTML
3. Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
4. Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
   
   Code:

   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Kemudian cari kode <data:post.body/>
6. Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.
   
   Code:

   <div id='share-button'> <p>Bagikan artikel ke: </p> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a> <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a> <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;'>Twitter</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>"); //]]> </script> <div class='clear'/> </div> 
   <style>
   #share-button{margin:10px 0;padding:5px;border: 1px solid #eee;overflow:hidden}#share-button p{float:left;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:1px 1px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px; left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)} 
   </style>
   

7. Kemudian klik tombol Simpan template
8. Tada! Kini tombol social share flat design sudah terpasang di blog Anda

Style 5:​

 ​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
2. Setelah itu, masuk ke menu Template--> Edit HTML
3. Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>
4. Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>
   
   Code:

   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Kemudian cari kode <data:post.body/>
6. Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.
   
   Code:

   <style>
   #button-count-share { width:100%; overflow:hidden; background:transparent; margin:0 auto; padding:3px; }
   #button-count-share span { float:left; position:relative; font-size:13px; color:#fff; margin:12px 5px 12px 5px; }
   .button-share { background:#dce0e0; position:relative; display:block; float:left; height:40px; overflow:hidden; width:140px; margin:4px; border-radius:3px; }
   .ikons { display:block; float:left; position:relative; z-index:3; height:100%; vertical-align:top; width:38px; text-align:center; }
   .ikons i { color:#fff; line-height:33px; }
   .slide-share { z-index:2; display:block; height:100%; left:38px; position:absolute; width:108px; margin:0; }
   .slide-share p { font-family:Verdana; font-weight:400; border-left:1px solid rgba(255,255,255,0.35); color:#fff; font-size:14px; left:0; position:absolute; text-align:center; top:10px; width:100%; margin:0; }
   .button-share .slide-share { transition:all 0.4s ease-in-out; }
   .facebook .fb_iframe_widget { display:block; position:absolute; right:5px; top:0; z-index:1; }
   .twitter iframe { left:50px; top:10px; z-index:1; display:block; position:absolute; }
   .google #___plusone_0 { width:90px !important; top:10px; right:5px; position:absolute; display:block; z-index:1; }
   .facebook .ikons,.facebook .slide-share { background:#4f79bc; }
   .twitter .ikons,.twitter .slide-share { background:#63cef2; }
   .google .ikons,.google .slide-share { background:#f36261; }
   .facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share { left:180px; opacity:0.6; }
   </style>
   <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='clear'/>
   <div id='button-count-share'>
   <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
   <div class='slide-share'>
   <p>Share</p>
   </div>
   <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
   </div>
   <div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
   <div class='slide-share'>
   <p>Like</p>
   </div>
   <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
   </div>
   <div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
   <div class='slide-share'>
   <p>G+</p>
   </div>
   <div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
   <script type='text/javascript'>
     window.___gcfg = {lang: &#39;id&#39;};
   
     (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>
   </div>
   <div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
   <div class='slide-share'>
   <p>Tweet</p>
   </div>
   <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
   <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
   </div>
   </div>
   <div class='clear'/>
   </b:if>
   
   

7. Kemudian klik tombol Simpan template
8. Tada! Kini tombol social share flat design sudah terpasang di blog Anda

Jika tombol social share tidak muncul, besar kemungkinan penyebabnya terletak pada penempatan kode setelah kode <data:post.body/>.

Setiap template biasanya memiliki dua, tiga, bahkan lebih dari itu untuk kode <data:post.body/>, jadi jika misalkan tombol social share button tidak muncul, silahkan coba letakan kode yang saya berikan pada <data:post.body/> kedua atau ketiga.

Atau coba sampai posisi tombol share muncul dengan benar.

Jika misalkan ikon pada tombol social share tidak work (cuma background atau lambang ikon broken), maka besar kemungkinan itu terjadi karena Anda memiliki kode yang serupa/mirip dengan code dibawah ini:

Code:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kode diatas adalah kode bootsrap CSS untuk meload ikon-ikon tertentu dari Font Awesome, jadi jika misalkan Anda memiliki kode serupa (versi yang lebih lama), maka silahkan hapus kode tersebut, dan gantikan dengan code yang saya berikan.

Posisi tombol: melayang


Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya secara float atau fixed (mengikuti layar walaupun discroll kebawah maupun keatas), silahkan pilih salah satu style dibawah ini:

Style 1:​

​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Blogger Anda
2. Jika sudah, masuk ke menu Tata Letak --> Tambahkan Widget
3. Pilih HTML/JavaScript
4. Kemudian, masukan script dibawah ini ke kolom Konten
   
   Code:

   <style>
   #seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
   0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
   #seocipssharebtn .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
   .fb_share_count_top {width:48px !important;}
   .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
   .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
   .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
   @media screen and (max-width:480px){#seocipssharebtn{display:none;}}
   @-webkit-keyframes bawah{
   from{transform:translate(0px, 2000px)}
   to{transform:translate(0px,0px)}
   }
   @keyframes bawah{
   from{transform:translate(0px, 2000px)}
   to{transform:translate(0px,0px)}
   }
   </style>
   <div id='seocipssharebtn' title="Share This With Your Friends">
   <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
   <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
   <div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
   <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
   </div>

   Seperti yang terlihat pada screenshoot dibawah ini:
    
5. Jika sudah, klik Simpan

Posisi tombol: layar pop-up


Jika misalkan Anda sedang mencari tutorial cara pemasangan social button yang penempatannya muncul secara pop-up, silahkan pilih salah satu style dibawah ini:

Style 1:​

 ​

Cara pemasangan:

1. Pertama, silahkan pergi ke dashboard blog Anda di Blogger
2. Jika sudah, silahkan masuk ke menu Tata Letak--> Tambahkan gadget
3. Pilih HTML/JavScript
4. Masukan script dibawah ini kedalam kolom Konten
   
   Code:

   <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58748ec649faba2e"></script>
   

   Seperti yang terlihat pada screenshoot dibawah ini:
    
5. Jika sudah, klik Simpan

Perlu diketahui bahwa script yang Anda masukan dalam tutorial diatas (cara membuat social share button yang muncul secara pop-up) menggunakan layanan third-party atau pihak ketiga, yakni AddThis.com

Sesungguhnya, Anda perlu mendaftar dan login untuk dapat mendapatkan kode tersebut, namun untuk cara instannya, Anda dapat menggunakan kode milik saya.

Dampak buruknya? 

Tidak ada

Ini hanyalah sebuah cara yang digunakan agar Anda dapat memasang widget milik AddThis dengan cepat.

Namun jika Anda ingin membuat widget sendiri di Addthis, silahkan.

Bahkan itu lebih disarankan, karena Addthis adalah salah satu situs yang dapat membantu seorang webmaster mengelola pengelolaan navigasi situs, seperti social share button, related post, list building, follow button dan masih banyak lainnya.

Perlu diketahui pula bahwa script AddThis terkadang tidak dapat aktif sesaat setelah Anda memasang script yang saya berikan. Diperlukan waktu 15-1 jam agar script dapat aktif dan menampilkan tombol share yang tampil secara pop-up

Penutup
Kurang lebih, itulah sejumlah hal yang dapat saya sampaikan terkait bagaimana cara memasang tombol social share di blog.

Jika Anda merasa bingung, atau ragu dengan tutorial yang saya tuliskan diatas, jika Anda berkenan, silahkan tinggalkan sebuah feedback di kolom komentar, dan jika memungkinkan, saya akan menjawab feedback yang Anda kirimkan secepat yang saya bisa.