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
Si Ryan
Keren kang, udah begitu rapi lagi tampilannya :D, jos gandos :-d
Kang Mousir
Sip, buat mempercantik tampilan blog :-d
Arif Rachman Hakim
Saya suka widget seperti ini selain penting juga tidak memakan ruang, :D
Kang Mousir
Betul, dibuat simpel agar tidak memakan ruang :D
Billy Ramadhan .P.
Keyenn :-d praktekk ahh.. mumpung di blog kga ada sosmed :roll:
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
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
Kang Mousir
Sidebarnya jadi simple :D
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,.. :)
Kang Mousir
sama kok, kodenya yang diatas
Khir Khalid
Lama sudah saya mencari widget yg bersesuaian & mantap spt ini. Terbaik.. Terima kasih Kang Mousir.. :)
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
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 :)
Denny Jaka Yuktie
Terima kasih kang buat bantuannya
Anonim
[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
Coba dulu ya kang mousir....
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
Akhmad Syaiful
mantap kag tutorialnya :)
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 ?
Anonim
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 !

Batal