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(http://3.bp.blogspot.com/-vslV5wtB7Hc/T_iYKWWojFI/AAAAAAAAAKc/IBi91mIC0b8/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

fikri ashsiddiqi said...

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

talmajaya fotocopy said...

terimakasih mas informasi nya sangat berguna saya harus coba nih!

adji sukmana said...

sudah saya coba bisa gan .,

adji sukmana said...

silahkan gan., selamat mencoba :d

adji sukmana said...

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

Sigit Adi Surya | Onthezone said...

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

adji sukmana said...

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

Bimbim pradana said...

mantap

Elbert Bandau said...

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

adji sukmana said...

sipp gan.,

adji sukmana said...

salam kenal juga gan :>)

insomniague said...

wah perlu banget ini...

izin bungkus gan..hehehe
maksih

adji sukmana said...

iya gan., buat seo social bookmarking :)

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

andaberbagi.com said...

Berat gak gan menggunakan cara d atas..?

adji sukmana said...

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

pai mung said...

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

adji sukmana said...

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

bregas maulana 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

adji sukmana said...

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

Muhammad Syahbana said...

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

inbox-me said...

makasih gan..

Opi Furni said...

saya coba dl ya

yamatoikwan said...

langsung dicoba gan

Ace Maxs said...

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

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

Post a Comment