Widget Media Sosial Blogspot

Bagaimana cara nak letak widget media sosial di sidebar blogspot? Saya nak kongsikan versi terbaru widget media sosial beserta widget follower terbaru 2014 untuk blogspot. Ia merangkumi follower blogspot, Facebook fanpage, Twitter, dan juga Google plus. Anda boleh meletakkannya di sidebar blog anda.

Widget media sosial adalah salah satu cara untuk memberikan peluang kepada pengunjung blog untuk ikuti blog anda dalam platform berbeza. Saya sendiri ada menggunakannya di beberapa blog lain, ia menampilkan rekabentuk yang kemas dan nampak pro.

Widget Media Sosial Blogspot

Cuba anda lihat contoh yang saya tunjukkan di bawah ini.

Nampak gambar lelaki kacak tu tak? Aha ... gambar lelaki dalam sosial widget itu bila-bila masa boleh anda tukarkan dengan milik anda, saya tahu ramai lagi kacak cun .... hoho lebih daripada saya.

Skarang, bagaimana nak letak widget media sosial seperti di atas dalam blogspot anda? Dan gantikan gambar lelaki kacak itu dengan gambar anda pula...hoho...

Ikuti langkah demi langkah mudah cara nak letak widget media sosial blogspot ini. In Sha Allah, ia mudah, tak sukar mana, cuba kena ganti itu dan ini sahaja, salin, dan tempek di sidebar blogspot anda.

Langkah pertama ialah dengan memasukkan kod HTML atau script di bawah ini di dalam kod HTML blogspot anda sebelum penutup /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>

Save template HTML blogspot anda. Sekarang langkah seterusnya ialah dengan meletakkan widget yang saya maksudkan di atas tadi. Salin kod di bawah ini, dan letakkan sebagai widget/HTML/javascript di sidebar blogspot anda.

<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=BLOG-ID" target="_blank" title="Follow this blog"><span style="color:#fff">Sertai</span> <span style="color:#000">Blog Ini</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="URL-FB-Page" 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="URL-TWITTER-ANDA" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @ID-TWITTER</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="URL-BLOG"> </div> </div> </div> <div class="g-person" data-href="URL-GOOGLE-PLUS" data-layout="landscape" data-rel="author"> </div>

Sebelum anda save kod HTML di atas ini, pastikan anda tukar dulu pembolehubah atau id-id milik anda.

1. BLOG-ID
2. URL-FB-Page
3. URL-TWITTER-ANDA
4. ID-TWITTER
5. URL-BLOG
6. URL-GOOGLE_PLUS

Bagaimana nak dapatkan blog id? Anda boleh lihat contoh di bawah ini:

Kod yang lengkap akan kelihatan seperti di bawah 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=1039913750360806682" 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/bloghasrulhassan" 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/hasrulhassan" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @hasrulhassan</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://www.hasrulhassan.com"> </div> </div> </div> <div class="g-person" data-href="//plus.google.com/+bloggerhasrulhassan" data-layout="landscape" data-rel="author"> </div>

Mudah je kan? In Sha Allah, anda boleh buat .... dan tempek di blog supaya beri peluang orang lain untuk jadi peminat blog anda .. hoho.

Selamat mencuba.