Widget share valid html5 ~ blog sepot

Hello,... apa kabar kamu yang disana,???
selamat berjumpa lagi dengan saya orang terkece sedunia maya -/\- wkwkkwkk :D
Pada postingan hari ini saya akan membahas tentang cara membuat widget share valid html5 tutorial ini saya buat berdasarkan permintaan dari sahabat blogger yang bernama Irfan Chandra Irawan atau biasa di panggil Ipeenk.sebelum lanjut ke pembahasan silahkan lihat DEMO nya terlebih dahulu.
Berikut ini adalah tombol yang valid html5:

Simak langkah² dibawah ini :

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan

Ctrl

cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.post-footer {
position: relative;
display: block;
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimWR80z8M9G4j2LXkiZf7WGUbrMWgGeGgKYUV179cq7mPdNj7QwrMsuTG3UZ9eqiOstyxE3YTCBkL4gQcDbaEiS7tVvR-KY2jCAxCipWod5fQaqAEv5e4BwAjdElz9IXvN15Pjm6xtZXI1/s1600/BIE_Like.png&quot;) -15px center no-repeat scroll #245C89;
color: #FFF;
margin:10px 0 0 0;
padding: 10px 20px 10px 100px;
border-radius: 4px;
border-bottom: 1px solid rgba(0,0,0,.1);
line-height: 1.4em; 
font-weight: bold; }

5. Tekan

Ctrl

cari kode <div class='post-footer'>...</div>
kemudian ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer'>
<p>Terimakasih sudah berkunjung dan membaca artikel mengenai <i><data:post.title/></i>, jika ingin menyebar luaskan artikel ini di mohon untuk mencantumkan Link Sumbernya.<br/>
Jangan lupa klik tombol di bawah ini</p>
    <div class='post-footer-line post-footer-line-1' style='line-height: 0.9em;'>
      <span class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
      <span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url' style='margin-right:30px'/>
      <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='BLog IRvan EFendy' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
      <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
      <script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
      <script src='//platform.linkedin.com/in.js' type='text/javascript'/>
<div class='clear'/>
    </div>
    <div class='post-footer-line post-footer-line-2'/>
    <div class='post-footer-line post-footer-line-3'/>
   </div>
</b:if>

6. Kemudian simpan template sobat.

Semoga bermanfaat, jika ada kesulitan silahkan tinggalkan komentar sobat...

Source script: Blog Dian Anarchyta

Terima kasih telah membaca artikel tentang Widget share valid html5 di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.