Cara Membuat Widget Media Social di Blog

Oleh Achmad Arifandi

Wednesday 11 February 2015

Bagikan :

Tweet

Widget Media Social adalah widget yang berisi tombol - tombol untuk mengikuti, memfollow, mengelike, bahkan hinggal profile kita bisa ditambahkan dalam widget ini. Contohnya seperti Facebook, Twitter, Google Plus dan Blogger. Widget ini diperlukan pengunjung agar dapat berkomunikasi dengan kita lewat media social dan juga agar tidak berkomunikasi dengan kita lewat blog saja.

Contoh widget media social

Cara Membuat Widget Media Social di Blog

1. Login dan masuk ke blogger anda masing-masing.
2. Masuk ke Template >> Edit HTML.

3. Simpan kode dibawah ini tepat 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>

4. Lalu masuk ke Tata Letak >> Tambah Gadget >> HTML/JavaScript, dan paste kode dibawah ini dikolom yang sudah disediakan.

<div style="background:#7677BF;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;">
<a href="http://www.blogger.com/follow-blog.g?blogID=4010151311182430951" target="_blank" title="Follow this blog"><span style="color:#fff">Join</span> <span style="color:#fff">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/1604815239738911" 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/MursaidBlog" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @MursaidBlog</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://mursaidblog.blogspot.com"></div></div></div>
<div class="g-person" data-href="//plus.google.com/109679809811966845730" data-layout="landscape" data-rel="author"></div>

5. Simpan, dan lihat hasilnya diblog Anda.

KETERANGAN :
- Ganti 4010151311182430951 dengan ID Blog anda.
- Ganti 1604815239738911 dengan ID Fanspage/Halaman anda.
- Ganti 109679809811966845730 dengan ID Google+ Plus anda.
- Ganti MursaidBlog dengan ID Twitter anda.
- Ganti http://mursaidblog.blogspot.com dengan Link Blog anda.

Itulah bagaimana Cara Membuat Widget Media Social di Blog jika warna kurang menyatu dengan blog anda, silahkan bekreasi sendiri dengan mengganti kode warna sesuai keinginan anda. Sumber

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

RSS FEED

Kategori : Tutorial Blogger, Widget