Widget Share Valid HTML 5 - Peran jejaring sosial dalam meraih visitor lumayan signifikan. Oleh karena itu jangan lupa untuk memasang Facebook Like, Google Plus, Twitter dan Linkedin atau bisa di tambah dengan jejaring sosial lainnya.
Jika ingin membuat Widget Share Valid HTML 5 Silahkan ikuti langkah - langkah berikut
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 == "item"'>
<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>
5. 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;
}
"Jika pada tombol Google Plus dan Facebook Like tidak muncul, Silahkan simpan kode ini di bawah"
<body>
Google Plus
<script type='text/javascript'> window.___gcfg = {lang: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
Facebook Like
<div id='fb-root'/> <script>//<![CDATA[ (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=352634211479923"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script>
Mudah bukan, Semoga bermanfaat.
Silahkan berkomentar sesuai topik. ConversionConversion EmoticonEmoticon