Widget Share Valid HTML 5

Minggu, 11 Mei 2014

Laba-Laba Blog - Banyak sekali para pengguna blogger yang memasang widget share seperti facebook, twitter, google plus dan masih banyak lagi, memasang widget seperti itu memiliki sebuah tujuan dan tujuannya itu adalah agar apa yang dipublikasikan kepada publik dapat disebar melalui widget tersebut. Banyak cara bagaimana agar para pengunjung blogger dapat me-share secara sukarela dan tanpa paksaan ya salah satunya membuat widget share yang semenarik mungkin dan sekreatif mungkin.

Memasang widget ini memiliki beberapa keuntungan salah satunya adalah sudah Valid HTML 5 dan tentunya dibuat oleh seorang master blogger yang tiada kalah duanya, bagaimana? bila anda semakin tertarik untuk memasang widget ini, ikutilah langkah-langkah di bawah ini

1. Masuk ke blogger
2. Dari dasbor, kemudian anda pilih template serta edit html
3. Hapus kode <div class='post-footer'>...</div>, kemudian 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>

4. Simpan kode CSS di atas ]]></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;
}

5. Simpan
Resource : http://the-anarchyta.blogspot.com/2014/05/widget-share-valid-html-5.html