Cara Mudah Memasang tombol Share dibawah Postingan di Blogger

Cara Mudah Memasang tombol Share di Blogger,- Memasang tombol Share sangatlah di perlukan di suatu Blog selain akan membuat tampilan Blog anda menarik juga dapat membuat Blog anda terkenal. Tombol ini juga berfungsi untuk meningkatkan trafik pada blog kita.

Pada kesempatan ini kita akan mencoba membuat tombol Share media sosial pada Blogger. Kebetulan pada blog saya ini baru saja memasang tombol share yang saya pelajari dari artikel blog blogooblok.com dan giribig.com kedua blog tersebut memberikan bentuk tombol share yang bagus dan berfungsi dengan baik. Selain itu tampilan tombolnya menarik sesuai dengan selerah saya. Terima kasih pada kedua blog tersebut mudah-mudahan beliau membaca postingan saya kali ini. Berikut langkah-langkah pemasangan tombol share di blogger :

1. Login ke akun blogger

2. Pilih Template lalu Edit HTML
Cara Mudah Memasang tombol Share dibawah Postingan di Blogger

3. Cari kode <data:post.body/>

Cara Mudah Memasang tombol Share dibawah Postingan di Blogger

4. Letakan kode berikut tepat dibawahnya ( pilih salah satu kode yang kamu suka sesuai selera anda )

Kode dari giribik.com
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/>
<script type='text/javascript'>var switchTo5x=false;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-f47fa722-7a63-345d-ca8b-f9aadea89ef4&quot;, doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<div class='shr-btn'>
Share This Article<br/>
<center>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_googleplus_hcount' displayText='Google +'/>
<span class='st_sharethis_hcount' displayText='ShareThis'/></center>
</div>
<br/><br/><style>
.shr-btn{
text-align:left;
font-size: 15px;
font-family: Georgia,serif;
font-style: italic;color:#6D0000;
border-top:1px solid ;
padding:10px;
border-bottom:1px solid;margin-left: 0px;
margin-right: 0px;
}
</style>
</b:if>
Hasilnya seperti gambar dibawah ini
Cara Mudah Memasang tombol Share dibawah Postingan di Blogger

Kode blogooblok.com

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'
type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal'
data-via='User Name'
href='http://twitter.com/share'>Tweet</a><script
src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(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>
</div>
</div>
</b:if>
Hasilnya seperti gambar dibawah ini
Cara Mudah Memasang tombol Share dibawah Postingan di Blogger

4. Kemudian klik Simpan Template

Demikian yang dapat saya sampaikan semoga bermanfaat.

0 Response to "Cara Mudah Memasang tombol Share dibawah Postingan di Blogger "