1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML > Lanjutkan.
4. Centang box 'Expand Template Widget'.
5. Cari kode <data:post.body/> menggunakan CTRL+F, dan jika anda sudah memasang read more otomatis, pilihlah kode yang ke-2.
6. Lalu letakkan kode di bawah ini tepat di bawah kode <data:post.body/> yang ke-2 tadi.
<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/AVvXsEjdeJZsxa_oJWcwMJ426BYas5oz6MI_0-IoOxutsIUqyvECQ6OqzZudxBH3i3fAb4rBsgRx5rT5Cz0btvrevmtPG7X7OrTFS2RJEf2RdfYijFwh_PJ4jLd14cyEvXvUZgizcYqcyX-HDwA/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 == "item"'>
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>
<!--Facebook-->
<a class='facebook'
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.url + "&t=" + data:post.title'
rel='external nofollow' target='_blank' title='Share this on Facebook
:>'/>
<!--Google Plus-->
<a class='googleplus'
expr:href='"http://plus.google.com/share?url=" +
data:post.url' rel='external nofollow' target='_blank' title='+1 it
:>'/>
<!-- Twitter -->
<a class='twitter'
expr:href='"http://twitthis.com/twit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='Tweet this
:>'/>
<!-- Pinterest -->
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :>'/>
<!-- Delicious -->
<a class='delicious'
expr:href='"http://del.icio.us/post?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='Add this to Delicious
:>'/>
<!--Stumble-->
<a class='stumbleupon'
expr:href='"http://www.stumbleupon.com/submit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='Stumble this
:>'/>
<!--DIGG-->
<a class='digg'
expr:href='"http://digg.com/submit?phase=2&url="
+ data:post.url' rel='external nofollow' target='_blank' title='Digg
this :>'/>
<!-- Reddit -->
<a class='reddit'
expr:href='"http://reddit.com/submit?url=" +
data:post.url + "&title=" + data:post.title'
rel='external nofollow' target='_blank' title='Add this to Reddit
:>'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl +
"feeds/posts/default"' target='_blank' title='Bookmark
:>'/>
</b:if></div>
<div style="clear:both"/>
7. Klik 'save template', dan selesai.
Semoga bermanfaat..
