Sunday 28 April 2013

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 :

Widget Share Valid HTML 5

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

Ditulis Oleh : Unknown // 09:48
Kategori:

0 comments:

Post a Comment