Assalamu'alaikum wr. wb - Kali ini ane akan kasih tutorial "Tutorial Membuat Widget 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.
Tutorial :
- Login Blogger
- Simpan kode di bawah ini di atas 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>
- 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=1358327908945513514" 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/ngetech" 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/Allimaghfur" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @allimaghfur</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/+AliMaghfur" data-layout="landscape" data-rel="author"></div>
- Finish
Pengaturan :
Untuk mengganti alamat pada kode diatas perhatikan kode yang Saya tandai, selanjutnya tinggal ganti sesuai pengaturan dibawah iniKode | Keterangan |
---|---|
1358327908945513514 | Silakan ganti dengan ID blog Anda |
https://www.facebook.com/ngetech | Ganti dengan alamat Fans Page Anda |
https://www.twitter.com/Allimaghfur | Ganti dengan alamat Twitter Anda |
@allimaghfur | Ganti dengan username Twitter Anda |
http://mge-tech.blogspot.com/ | Ganti dengan alamat blog Anda |
+AliMaghfur | Ganti dengan ID akun Google Plus Anda |
Source
Artikel yang Munkin Anda Cari :
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Keren ini widgetnya udah valid html5 lagi makasih udah share bro
ReplyDeletesama sama gan eragi itu indah :)
Deletemantap widget nya..
ReplyDeleteijin coba gan :-D
monggo gan hehehe
Deletekeren gan, valid html5 lagii, banyak yang cari kayak gini nich
ReplyDeleteiya gan thanks udah erkunjung gan :)
Deletekeknya bagus nih klo di tempel di blog ane, thanks gan atas widgetnya
ReplyDeletesama sama gan..
DeleteGan, tutorial membuat widgetnya sangat membantuk banget, terima kasih yah :)
ReplyDeleteiya gan sama sama" :)
DeleteKeren gan, apa lagi ini sudah support html 5.. :)
ReplyDeleteThanks nanti ane terapin di blogger ane gan..
monggo gan..
Delete