Membuat Widget Sosial Media Lengkap

Membuat Widget Sosial Media Lengkap

Widget Sosial Media adalah widget yang berisi tombol like dan profile seperti Facebook, Twitter, Google Plus dan Blogger. Widget ini sangat diperlukan untuk blog agar pengunjung dapat berinteraksi tidak hanya di blog saja, namun di Sosial Media juga. Baca juga artikel tentang sosial media Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5.

Cara Memasang Widget Sosial Media Lengkap

1. Silakan masuk pada akun blogger Anda
2. Simpan kode dibawah ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>
3. Kemudian Tambahkan Gadget dan pilih HTML/JavaScript, lalu simpan kode dibawah ini

<div style="background:#3498db;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;">
<a href="http://www.blogger.com/follow-blog.g?blogID=4618488608224214041" target="_blank" title="Follow this blog"><span style="color:#fff">Join</span> <span style="color:#000">Now</span></a>
</div>
<div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'>
<div style='background:#fff;margin:0;'>
<div class="fb-like-box" data-href="https://www.facebook.com/Mousirr" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div>
<div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/KangMousir" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @KangMousir</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://kang-mousir.blogspot.com"></div></div></div>
<div class="g-person" data-href="//plus.google.com/107577168276378903527" data-layout="landscape" data-rel="author"></div>
4. Terakhir Simpan

Pengaturan

Untuk mengganti alamat pada kode diatas perhatikan kode yang Saya tandai, selanjutnya tinggal ganti sesuai pengaturan dibawah ini ;)
KodeKeterangan
4618488608224214041Silakan ganti dengan ID blog Anda
https://www.facebook.com/MousirrGanti dengan alamat Fans Page Anda
https://www.twitter.com/KangMousirGanti dengan alamat Twitter Anda
@KangMousirGanti dengan username Twitter Anda
http://kang-mousir.blogspot.com/Ganti dengan alamat blog Anda
107577168276378903527Ganti dengan ID akun Google Plus Anda

Artikel Terkait

Komentar

Adhy Suryadi
Dengan begitu sidebar jadi lebih simple dan rapih ya kang :) apalagi dengan optimasi asynchronous tampah keren kang :-d
Kang Mousir
Betul kang jadi lebih rapi, ditambah asynchronous pada javascript jadi beban loading ringat :D
Unknown
Keren kang, udah begitu rapi lagi tampilannya :D, jos gandos :-d
Kang Mousir
Sip, buat mempercantik tampilan blog :-d
Unknown
Saya suka widget seperti ini selain penting juga tidak memakan ruang, :D
Kang Mousir
Betul, dibuat simpel agar tidak memakan ruang :D
Billy Ramadhan
Keyenn :-d praktekk ahh.. mumpung di blog kga ada sosmed :roll:
Kang Mousir
Silakan gan biar tambah cakep blognya :)
Unknown
mantap ini jadi gak usah cari kode satu" buat widget sosmed. tinggal pasang yang ini dah paket komplit :D
Kang Mousir
Betul sob tinggal pasang, yang ini sudah lengkap :D
Dian Anarchyta
Udah di paketin sama kang mousir Widget Sosial Medianya...
Mantap kang...
Kang Mousir
iya, yang di sidebar sebelah kanan :D
Unknown
Bagus juga kang. Cukup hemat tempat di sidebar. saya juga suka model yang seperti ini
Unknown
ini akan membuat media sosial jadi simpel dan tidak ribet pating slebar thnks gan
Iwan Efendi
Kang, cara bikin tampilan untuk script sperti blog akang nih gimana kang,..??
terima kasih sebelumnya kang,.. :)
Khir Khalid
Lama sudah saya mencari widget yg bersesuaian & mantap spt ini. Terbaik.. Terima kasih Kang Mousir.. :)
Unknown
kang gimana supya ini bisa sesuai ukurannya 250x250 pixel ?
Unknown
izin coba kang, biar lebih rapi dan tak memakan banyak tempat :-d
Unknown
Ini yang saya cari selama ini terima kasih kang sudah berbagi :lol:
Hamzah
Udah DI Coba n hasilnya ya lumayan lah kang
Unknown
Mas punyaku garis yang kanan kok gak sama ama yang bawah ya ??? . Batas kanan nya
Yadi Rosadi
udh di coba lebih simpel :) :-d :-d :-d
Portal Statistik
Terimakasih kang, saya baru coba pasang Sang SEO Responsive Blogger Template dari kang mousir, selanjutnya saya coba pasang widget sosmednya, tapi kok fanspage nya gak muncul yaa spt punyanya kang mousir di atas....
bentuknya kayak demo.
Tf
keren amat gan, minimais, hehee....,
usulan gan, tambahin tombol join sitenya juga donk gan. hehee
Unknown
makasih kang tutornya...
ijin sedot.... :D
manok
klau untuk fb knpa tidak bisa y kang, Apa itu dikhususkan untuk fans page saja, mohon pencerahannya kang :)
Unknown
Terima kasih kang buat bantuannya
Anonim
[Saran]
Saran gan, isi screenshot biar mudah mengenalinya
Unknown
iyah kok fanspage facebook gak nongol ya???
defantri.com
dicoba dan ternyata berhasil,,.. keren kang (y)
Unknown
Kenapa tidak rata ya kang? Cara ratainnya gimana?
Abdul Muhajir
mantap kang sudah saya terapkan di blog saya
Unknown
kok icon fb ama twitter nya ga muncul itu gimana mas?
Unknown
keren kang, cara copy kode nya gimana ya ko ga bisa
daniel
Coba dulu ya kang mousir....
daniel
Oke gan...semuanya berjalan lancar nih...terima kasih atas bantuan widget sosmed nya ya...
https://lintanggypsum.blogspot.com
Lagi cari2 nih....
E...kesasar disini, yaudah jalan2 aj
Unknown
kang maaf OOT , klo iklan yang dbwah widget social media ithu iglan dri GA atau drimana
Unknown
Dilihat dari banyaknya pertanyaan yang tidak dijawab.
Membuat niat berkomentar menjadi hilang tapi semoga saja dijawab.
Kang, kenapa pada saat saya ganti ID google+ dengan ID google+ laman saya, widget ini tidak berkerja 100% artinya google+ nya tidak muncul. Cara atasi itu bagaimana kang ?
Anonim
mantep mantem kang .. makasih banyak
Unknown
walaaahhhh...keren banget nih gan widget sosial medianya. all in one.
saya coba ya mas...
terimakasih sudah berbagi...
Studiblogging.com
bagus juga ni. kunjungi blog saya juga ya godeloku.blogspot.com

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal