Cara Membuat Tombol Share Di Bawah Posting Blog

|| || || 25 komentar
Tutorial | Tombol share dalam blog sangat penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.



1. 
Login ke blogger :

  • Masuk Ke Dashboard blog sobat
  • Pilih menu Template

2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template
3. Cari kode <data:post.body/> .Setelah ketemu letakan kode di bawah ini tepat di atas 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/AVvXsEhwrtkjrl5vJr364eMyNQhAS2igfKCzIh7S-aTltHf1SmApV6pt1wGfZYG9tRltwX2ps9wF0uUAAY3RLBTq0WANCkR9oH6Ct-VxZwj6elXjcuFL8rp4ZBKVgqQZDjG7PuZ2BzbaXQYgTR0/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"/>
4. Simpan dan lihat hasilnya.
Sekian Dan Terimakasih sobat Blogger Tutoruial :)
/[ 25 komentar Untuk Artikel Cara Membuat Tombol Share Di Bawah Posting Blog]\
Alfarizi Blog said...

Bisa buatin saya gak gan..

saya kurang ngerti niih

Unknown said...

cukup menarik nih, tapi mohon di check sekali lagi tuhh, kayanya ada kode yg salah dehh
check www.mbahgahol.blogspot.com

aries cool said...

terimakasih mas informasi nya sangat berguna saya harus coba nih!

Unknown said...

sudah saya coba bisa gan .,

Unknown said...

silahkan gan., selamat mencoba :d

Unknown said...

gampang gan itu., tinggal copy semua scriptnya di html, cari , letakkan codenya di atas

Samoedra Wallpaper said...

sebaiknya di jelasin lebih mendetail gan, soalnya kode itu gak cuma satu.. :D

Unknown said...

oh iya gan maaf kalo kurang detail, segera di perbaiki :-d

bimantara said...

mantap

Elbert Bandau said...

trims ya....tipsnya sangat membantu
salam kenal gan

Unknown said...

sipp gan.,

Unknown said...

salam kenal juga gan :>)

Anonymous said...

wah perlu banget ini...

izin bungkus gan..hehehe
maksih

Unknown said...

iya gan., buat seo social bookmarking :)

silahkan dibungkus buat makan siang ya gan., hehe =))

Anonymous said...

Berat gak gan menggunakan cara d atas..?

Unknown said...

lumayan ringan kok gan., dicoba saja., terus sebelum sama sesudah di kasih cek kecepatannya di gtmetrix.com.

paimung said...

gan, ane coba belum berhasil..... gmna gan...????

Unknown said...

coba dicari satu" data:postbody nya., soalnya biasanya sih ada lebih dari satu. .

Unknown said...

min, ditaroh di data post body yang ke brp?
di template sy ada 3 dt post bdy...
mohon penjelasan min
www.hollowinter.blogspot.com

Unknown said...

sebenarnya tergantung template agan, kalo punya saya yg satunya berhasil di data post body yang ke 3., coba aja gan :)

Unknown said...

gan untuk di template dinamic views koq g work y....

Anonymous said...

makasih gan..

OP Furniture said...

saya coba dl ya

Anonymous said...

langsung dicoba gan

Unknown said...

sangat menarik sekali nih, bertambah lagi ilmu saya....
makasih banyak.

http://landongobatherbal.com/obat-herbal-insomnia/

Post a Comment