Thursday

Advanced Share Button With Counters On Blogger

The share button is  very important for your blog because it increase your post audience and also allow people to express how the feel about a particular post.
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.

Image

So today am going to give you a full tutorial on how to add this feature to your blog.


Image




Step 1
Visit this link Sharethis 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 and 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 creation a new tab and then login to your blogger dashboard and select rye 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 contact me or comment below thanks.
Share :

zealmatblog

1 comment:



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.