Tutorial Blog dan Tips AdSense

Dijual rumah di Jakarta Timur, selengkapnya klik di sini

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

Cara Membuat Widget Fan Page, Twitter, Google Plus Valid HTML5
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

Cara Membuat Widget Sosial media Valid HTML5

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

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

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+

Cara Membuat Widget sosial media Valid HTML5

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
23 Komentar untuk "Cara Membuat Widget Fan Page, Twitter, Google Plus Valid HTML5"

terimakasih gan, ini bagus sekali

ini dia yang saya cari,
Blogwking gan

makasih gan udah ngunjungin blog ane!

izin terapkan ya mas...Terima kasih...

okeeee gan (terbuka-info.blogspot.com)
saya juga mau pasang ini hooo . . . .!!!

thanks gan tutorialnya
http://pusat-gretongan.blogspot.sg

ikutan ah biar gak ketinggalan jaman

Mantab banget gan, izin share :)
mampir juga gan http://blog-medianet.blogspot.com/

thanks gan sudah ane pasang di blog ane lihat kemari gan http://sebisaanda.blogspot.com

Makasih banget kang, kalau misalkan di tambahin follow this blog gimana ya... ???

sudah saya pasang dan hasilnya keren

Trims gan tuk tipsnya. Sangat bermanfaat.

Terima kasih tutorialnya, sangat bermanfaat buat saya yang newbie

http://www.atmosferku.com/

Saya minta agar anda tidak memakai akun Anonim untuk berkomentar, gunakan akun anonim hanya saat anda sedang dalam keadaan darurat, saya minta juga untuk tidak menggunakan kata-kata kasar dalam berkomentar. Terimakasih atas perhatiannya.