Blog Personal tentang tips Blogging dan Internet

Membuat Widget Sosial Media Lengkap

Social Media
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

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

58 Komentar untuk "Membuat Widget Sosial Media Lengkap"

Adhy Suryadi

Dengan begitu sidebar jadi lebih simple dan rapih ya kang :) apalagi dengan optimasi asynchronous tampah keren kang :-d

Si Ryan

Keren kang, udah begitu rapi lagi tampilannya :D, jos gandos :-d

Arif Rachman Hakim

Saya suka widget seperti ini selain penting juga tidak memakan ruang, :D

Billy Ramadhan .P.

Keyenn :-d praktekk ahh.. mumpung di blog kga ada sosmed :roll:

Kang Mousir

Betul kang jadi lebih rapi, ditambah asynchronous pada javascript jadi beban loading ringat :D

Kang Mousir

Sip, buat mempercantik tampilan blog :-d

Kang Mousir

Betul, dibuat simpel agar tidak memakan ruang :D

Kang Mousir

Silakan gan biar tambah cakep blognya :)

Hand Excel

mantap ini jadi gak usah cari kode satu" buat widget sosmed. tinggal pasang yang ini dah paket komplit :D

Si Ryan

blog saya terlalu sederhana kang :D

Kang Mousir

Sederhana, tapi kan SEO nya killer :D

Kang Mousir

Betul sob tinggal pasang, yang ini sudah lengkap :D

Dian AnaR-chyta

Udah di paketin sama kang mousir Widget Sosial Medianya...
Mantap kang...

Kang Mousir

iya, yang di sidebar sebelah kanan :D

Fathoni Muhammad

Bagus juga kang. Cukup hemat tempat di sidebar. saya juga suka model yang seperti ini

Jobforseaman

ini akan membuat media sosial jadi simpel dan tidak ribet pating slebar thnks gan

Kang Mousir

betul sob, bikin sederhana

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.. :)

Kang Mousir

sama kok, kodenya yang diatas

Nurhidayat Bigurdin

kang gimana supya ini bisa sesuai ukurannya 250x250 pixel ?

eNzi Navitu

izin coba kang, biar lebih rapi dan tak memakan banyak tempat :-d

Admin Rungan

makasih kang mousir, medsosnya bisa dalam satu kotak, terlihat simpel

Satrio Elang

Ini yang saya cari selama ini terima kasih kang sudah berbagi :lol:

Hamzah Chen

Udah DI Coba n hasilnya ya lumayan lah kang

Achmad Sufan Wicaksono

Mas punyaku garis yang kanan kok gak sama ama yang bawah ya ??? . Batas kanan nya

Adi Prasetia Nugraha

udh di coba lebih simpel :) :-d :-d :-d

M Nashihun Ulwan

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.

Jufriyansya Iranto

keren amat gan, minimais, hehee....,
usulan gan, tambahin tombol join sitenya juga donk gan. hehee

Nahumarury Blog

makasih kang tutornya...
ijin sedot.... :D

Fia_Newbie

klau untuk fb knpa tidak bisa y kang, Apa itu dikhususkan untuk fans page saja, mohon pencerahannya kang :)

Reza Abdillah

punten kang... saya teh mau tanya supaya blog saya loadingnya tidak lama harus diapain... terima kasih sebelumnya eja-abdillahrpl2.blogspot.com

Denny Jaka Yuktie

Terima kasih kang buat bantuannya

Gusti Anugrah Nugraha

[Saran]
Saran gan, isi screenshot biar mudah mengenalinya

5secmusic Chordsbank

iyah kok fanspage facebook gak nongol ya???

blog dmathholic

dicoba dan ternyata berhasil,,.. keren kang (y)

Ogip Rikardo B

Kenapa tidak rata ya kang? Cara ratainnya gimana?

Hajir ™

mantap kang sudah saya terapkan di blog saya

Berita Bola Hari ini

kok icon fb ama twitter nya ga muncul itu gimana mas?

San Kurnia

keren kang, cara copy kode nya gimana ya ko ga bisa

Daniel Nagata

Oke gan...semuanya berjalan lancar nih...terima kasih atas bantuan widget sosmed nya ya...

Lintang Gypsum

Lagi cari2 nih....
E...kesasar disini, yaudah jalan2 aj

Gyoku Bahri

kang maaf OOT , klo iklan yang dbwah widget social media ithu iglan dri GA atau drimana

Putri Zia Ulhaq Chalik

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 ?

sarip ar

mantep mantem kang .. makasih banyak

Prana Jomantara

walaaahhhh...keren banget nih gan widget sosial medianya. all in one.
saya coba ya mas...
terimakasih sudah berbagi...

Rahmat Saputra

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 !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d