Widget Share Valid HTML 5

Peran jejaring sosial dalam meraih visitor lumayan signifikan. Oleh karena itu jangan lupa untuk memasang Facebook 'Like' button, Google Plus, Twitter dan Linkedin atau bisa di tambah dengan jejaring sosial lainnya.
Berikut ini adalah tombol (button) yang valid HTML5 :

1. Login ke Blogger
2. Edit HTML
3. Cari kode <div class='post-footer'>...</div>
4. Hapus kode tersebut dan ganti dengan 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>

Terakhir tambahkan CSS ini di atas kode ]]></b:skin> atau </style>

.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;
}

Semoga bermanfaat, jika belum maksut silahkan tinggalkan komentar sobat...

Widget Share Valid HTML 5

0 Response to "Widget Share Valid HTML 5"

Post a Comment