Widget share valid html5

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

+

F

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxetQOc2zmrUGY7PLDQrJqx4NP70LaSyHrsL1RftJTFxAdBLEZYk_W5fcO364qLQ3iISiVWAsOFPBLP-7qiLgku1jsTogGU9mVghCQOCCokMYkFkRrHai34WrQPT_UtktR-PpDiEIwhniZ/s1600/BIE_Like.png") -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

+

F

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

Widget share valid html5 2014-10-11T09:00:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown