Sarcastic Geek Community

How to Set Blogger Share Button with Counter

Share:

Advertisements

The share button is very important for your blog because it increases your post audience and also allow people to express how the feel about a particular post.
MyWapTutors image loading...
Most times you find a post which you will love to share with your friends either on Facebook or twitter and that's how this wonderful feature helps in blogging.
So today am going to give you a full tutorial on how to add this feature to your blog.

Step 1

Visit Sharethis.com and then Register with them and hit the "Publishers"

Step 2

Then click on "Get the Share Widget " tab.
» Website or Blog? Choose website.

» Pick your style - Third Option (Horizontal counters)

» Just choose the networking sites which you want to have on your blog.

» Choose the Oauth widget or Classic
Widget.

» Now, click on the "Get the button" tab.

=> Copy the scripts that are generated; it will be of two type Script 1 (Script in the top/first box) and Script 2 (Script in the bottom/second box).

Step 3

Now create a new tab and then login to your blogger dashboard and select the blog your want to add the share button to.

Step 4

Scroll down and click on template - Edit HTML.

Step 5

Press CTRL+F on your keyboard and search for the below code

]]></b:skin>

Step 6

Add the following code just above
the line in step 5

.sharethis {
border: dashed #ddd;
border-width:1px 0
1px 0;
margin: 10px auto
10px;
display:block;
padding: 3px 0 1px
0px;
overflow: hidden;
margin-left:0px;
}


Step 7

Again search for the code below
</head>

Step 8

paste the code present in the text
document Script 2, just above the line.

Step 9

Now search for the below code
<div class='post-
footer-line post-
footer-line-1'/>

Step 10

Add the following piece of code just
below the line.

<b:if
cond='data:blog.pageTyp
e == "item"'>
<span style='font-
size:20px; font-
family:Georgia; font-
style: italic; line-
height:21px; margin-
top:1px; margin-
bottom:-2px;'>Enjoyed
the article?</span>
<div class='social'>
<div style='margin-
left:10px; margin-
top:0px; margin-
bottom:3px;'>
INSERT SCRIPT 1 CODE
HERE
</div>
</div>
<div class='clear'/>
</b:if>


Step 11

Finally Save your template.
If you will need my assistance on this just feel free to drop a comment.

My name is Gozie Brain Izuka, and to all bloggers out there, i just want to make common sence; i hope i did.

Subscribe to Our Youtube Channel and Join Our Free Online Class.