Memasang Widget Social Media 1Pack di Blog

Widget Social Media dapat dijadikan media promosi supaya para pembaca blog men-like fanspage, mem-follow twitter, atau men-circle akun g+ anda.
Tampilan juga sangat berpengaruh dalam hal ini, oleh karena itu, saya me-redesign ulang widget social media dari para mastah dan menjadikan beberapa widget tsb. menjadi 1 paket.
Tampilannya seperti ini :

Menarik bukan? Oke, langsung saja simak Tutorialnya :

Langkah Pertama : Login Blogger

Langkah Kedua : Pilih Blog

Langkah Ketiga : Klik Tab Tata Letak

Langkah Keempat : Tambah Gadget HTML. Lebih lengkapnya silahkan baca di Cara Menambahkan Widget HTML/JavaScript pada Blogger

Langkah Kelima : Copy kode dibawah ini :

<div class='fb-like-box' data-header='false' data-href='https://www.facebook.com/artikelBlogGue' data-show-faces='false' data-stream='false' data-width='100'></div>
<br/>
<a href="https://twitter.com/MNurWahidF" class="twitter-follow-button" data-show-count="true" data-lang="id">Ikuti @MNurWahidF</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br/>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
Baca Juga
Memasang Loading Bar di Blog seperti Youtube
Kode Aneh di Belakang URL Postingan Blog
Membuat URL Shortener Sendiri dengan JavaScript
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>

Langkah Keenam : Letakkan kode tersebut pada kolom HTML yang tersedia

Langkah Ketujuh : Klik Simpan

Note : Ubah kode yang berwarna biru sesuai dengan Username FP & Twitter sobat.

Langkah Kedelapan : Klik tab 'Template'
Langkah Kesembilan : Klik 'Edit HTML' selengkapnya baca Cara Edit HTML Template Blog yang Benar

Langkah Kesepuluh : cari kode <body>
Langkah Kesebelas : Letakkan kode berikut dibawah kode <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Langkah Keduabelas : Klik Simpan

Sekian tutorial dari saya, semoga bermanfaat bagi sobat.

Muhammad Nur Wahid Fakhrudin Seseorang yang ingin berbagi tulisan tentang blog, desain, dan geologi.