Cara Membuat Widget Fan Page, Twitter, Google Plus Valid HTML5

Oleh Rafid Aslam

20 Agustus 2014

Widget ini banyak dipakai para Blogger, karena tampilannya sangat simpel dan lebih bagus. Banyak orang yang memakai widget ini, karena loading blog menjadi enteng dan valid HTML5. Selain blog menjadi enteng widget ini sama dengan widget pengikut, fan page Facebook, follower twitter, google plus digabung menjadi satu dan tidak menghabiskan terlalu banyak tempat.

Saya kira saat saya melihat widget ini pasti sudah jadi satu dengan tabelnya, ternyata setelah saya lihat kodenya semua widget terpisah dan disambungkan sehingga terlihat seperti menyatu.

Berikut adalah cara pemasangannya.

Langkah pertama: Masuk ke Blogger, lalu ke tata letak dan tambah gadget.

Seperti biasa langkah pertama selalu masuk ke akun blogger anda, lalu masuk ke Tata Letak, kemudian klik Tambah Gadget letaknya sesuai selera anda, lalu pilih HTML/JavaScript.


Langkah kedua: Menaruh kode HTML

Silahkan anda taruh kode di bawah ini pada widget HTML/JavaScript.

<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=ID Blog" 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;'>
<div style='background:#fff;margin:0;'>
<div class="fb-like-box" data-href="URL Fanpage Fb" 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" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @Nama 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="//plus.google.com/ID Google+" data-layout="landscape" data-rel="author"></div>
<script type='text/javascript'>
//<![CDATA[
(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='http://platform.twitter.com/widgets.js';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='https://apis.google.com/js/plusone.js';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();
//]]>
</script>

Silahkan anda sesuaikan kode yang ditandai.

ID Blog

Anda bisa melihat ID Blog di saat anda masuk ke akun Blogger anda dan memilih blog, lalu anda akan melihat ID Blog tepat di samping blogID, sepeti gambar di atas.

URL Fanpage Fb, URL Twitter

Masuk terlebih dahulu ke akun Facebook anda, lalu pergi ke halaman Fan Pagenya, dan lihat pada tab URL seperti gambar di atas. Untuk twitter hampir sama dengan Facebook tetapi hanya harus masuk ke halaman profil Twitter anda dan lihat pada tab URL.

@Nama Twitter: Anda hanya harus menggantinya dengan nama profil twitter anda.

ID Google+

Masuk terlebih dahulu ke akun Google anda, lalu buka halaman profil Google+ anda dan lihat pada tab browser seperti gambar di atas, bisa berupa angka maupun tulisan.

Jika anda meminta penjelasan mengenai tutorial di atas bisa dituliskan di kotak komentar di bawah ini, terimakasih sudah melihat tutorial ini.

Tag : Tips Blogger

Bagikan :

Tweet