Cara memberi tombol Share di postingan Blog

Kali ini Baharshare akan memberikan tutor Cara memberi tombol Share di postingan Blog. WIdget ini sangat berguna untuk Blog anda .dengan widget ini pengunjung dapat membagikan artikel kita di situs jejaring sosial. dan itu sangat menguntungkan untuk mendapatkan banyak pengunjung di blog kita nantinya.
Ok tanpa basa-basi lagi mari kita praktekan.
1. Pilih template
2. Klik Edit HTML dan centang Expang template widget
3. Cari kode <data:post.body/> . untuk lebih cepatnya tekan CTRL+F dan ketikan kode tersebut
4. Baharshare akan memberikan 2 cara untuk menaruh widget ini.
  • Di atas postingan = masukan script di bawah ini tepat di atas kode <data:post.body/>
  • Di bawah Postingan = masukan script di bawah ini tepat di bawah kode <data:post.body/>
 
<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSg2Ha5QtsgtDqiukooQpoEePmivQzY4cDwaqPiEZ7GIQOaYBrtwrQpGEA7aOEC3Wz1B7YkODZAKYj8p0g9EdD-KaOnw-hG75y5NFUi_BewkgLAy-lt30znbOYPiSdW3e5HoLuHHHhSA/s1600/sharebelow.png) no-repeat;
}
.sharebelow  a.googleplus {
background-position: 0px -348px;
}
.sharebelow  a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow  a.pinterest {
background-position: 0px -464px;
}
.sharebelow  a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow  a.delicious {
background-position: 0px 0px;
}
.sharebelow  a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow  a.digg {
background-position: 0px -116px;
}
.sharebelow  a.digg:hover {
background-position: 0px -174px;
}
.sharebelow  a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow  a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow  a.technorati {
background-position: 0px -928px;
}
.sharebelow  a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow  a.twitter {
background-position: 0px -928px;
}
.sharebelow  a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow  a.facebook {
background-position: 0px -232px;
}
.sharebelow  a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow  a.reddit {
background-position: 0px -580px;
}
.sharebelow  a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow  a.rss {
background-position: 0px -696px;
}
.sharebelow  a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class='sharebelow'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareandbookmark'>
Kindly Bookmark and Share it:</div>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest' href='http://pinterest.com/' rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
</b:if></div>
<div style='clear:both'/>

5. Klik pratinjau untuk melihat kondisi tampilan blog jika berubah sebaiknya batalkan
6. jika sudah Klik Save template

Jika Script belum berhasil silahkan berkomentar


sumber : blazerracing.blogspot.com

16 komentar:

  1. panjang bener kodenya jdi males ngopasnya wkwkwk komen bck y

    ReplyDelete
    Replies
    1. Punya yang lebih singkat ta gan ? kalo punya saya minta :D ..

      Delete
  2. halo sobat,,
    thank info nya
    www.richylerian.blogspot.com

    ReplyDelete
  3. thx tipsnya, coba yah gan.. :D

    come back..

    ReplyDelete
  4. boleh juga nih makasih tipsnya sob

    ReplyDelete
  5. udah ada di tempalate hihihi.. jadi ga usah repot masang.. tapi nice share gan.. jadi tau

    ReplyDelete
  6. Tombol-tombol bermanfaat nih sob
    nice post...

    ReplyDelete
  7. Maksih tutornya gan.

    kunjungan balik dari saya.

    Kunjungan balik gan mungkin pengunjung blog agan ada yang perlu Tutorial HACKING. KOMPUTER. BLOG, TRIK JAIL, SEO, DOWNLOAD TEMPLATE, EBOOK, SOFTWARE, GAMES, DAN MASIH BANYAK LAGI.

    SILAHKAN Klik Disini

    ReplyDelete