Cara Membuat Share Button Google Plus & Facebook Like Valid HTML5

Share Button - Google Plus dan Facebook Like merupakan kebutuhan sekunder untuk seorang blogger. Biasanya, kedua tombol tersebut jika ditambahkan pada widget blogger akan membuat blogger tersebut tidak lagi valid HTML5. Kali ini Hack4rt akan memberikan cara bagaimana membuat share button google plus dan facebook like akan valid HTML5. Simak tutorial berikut

Persiapan CSS

Pada persiapan CSS, silahkan arahkan perhatian anda pada EDIT HTML blogger, bagi yang belum mengerti tampilan baru, silahkan lihat Tampilan EDIT HTML Template Blogger Baru. 

Selanjutnya sisipkan kode berikut tepat di atas kode ]]</b:skin>

.g-plusone{float:left;}
.novalfblike{border: none;
overflow: hidden;
width: 80px;float:left;
height: 21px;}
#dukungan{background: #FFEEB6;
border-top: 1px solid #CA9433;
border-bottom: 1px solid #CA9433;
height: auto;
margin: 10px auto;
padding: 10px;
position: relative;}
.awal{float: left;
color: #000000;
line-height: 40px;
padding-right: 5px;
font-family: times;
font-weight: bold;
font-size: 60px;}

Script GooglePlus

Bagi yang belum memasang script google plus, silahkan pasang kode berikut tepat di atas </head>

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/> 

Tambah Widget

Silahkan pergi ke Tata Letak (Layout) dan buat sebuah widget baru dengan opsi HTML/Javascript. Lalu, masukkan kode berikut

<div class='novalfblike'><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fhack4rt&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;font=lucida+grande&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=379196715506857" ></iframe></div><div class='g-plusone' data-count='true' data-size='medium'></div>

Silahkan ganti kata yang berwarna merah dengan username facebook fanspage anda. Kemudian klik Simpan. 

Sekian, selamat mencoba.