Membuat atau Pasang Widget Share Valid HTML 5 di Bawah Posting Blog

LATIF BLOG - Sobat blogger, Kali ini akan saya share kepada Anda cara membuat atau Pasang Widget Share Valid HTML 5 di Bawah Posting Blog. Silahkan ikuti langkah-langkahnya di bawah ini :

Pasang Widget Share Valid HTML 5 di Bawah Posting Blog

1. Anda masuk ke akun blog
2. Masuk ke menu edit HTML
3. Anda cari kode ini (tekan CTRL+F) <div class='post-footer'>...</div>
4. Biasanya kode di atas ada lebih dari satu, Anda pilih yang terakhir/bawah
5. hapus kode tersebut, lalu Anda ganti 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='Dian Anarchyta' 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>

• Anda copy kode css di bawah ini, lalu letakkan di atas kode ]]></b:skin> atau </style>.
• copy kode css di bawah ini:

.post-footer {
  position: relative;
  display: block;
  background: url("https://scontent-sin.xx.fbcdn.net/hphotos-prn1/t39.1997-6/p128x128/851558_690520954295111_911904297_n.png") -15px center no-repeat scroll #FEF4C8;
  color: #666;
  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;
}

• Anda dapat mengubah URL gambar yang saya block warna merah.
• Save template Anda

Tweet