Thursday

Add Share Botton to Your Blog Post to Promote Your Blog

Today we are going to be talking about how to add Customized share button below your blog post many people have this issue of share button below their blog  post today I have come to make things more easier for you.



1.
Now you have to Visit the
https://www.addthis.com/get/ sharing page. This is the number one method you need for this.

2. This wil help you to have the
sharing buttons even  to access the amount of  people who have shared your blog  post by using this method

Now    you have to  click on" Create account site and you will be ask you to
make a smallregistration form.

Fill out the information correctly
click on the Register button.


3
After you have  logged in, right
below the " Get sharing buttons for", choose the "A website" option.

4
Now Select style the way you want it to look like in your blog then click preview to check it out.


5
After that, that website will provide you a code copy it.
The code been given to you would look like this one below

<div class="addthis_toolbox
addthis_default_style ">
<a
class="addthis_button_facebook_like"
fb:like:layout="button_count"></
a>
<a
class="addthis_button_tweet"></
a>
<a
class="addthis_button_pinterest_pinit"
pi:pinit:layout="horizontal"></
a>
<a class="addthis_counter
addthis_pill_style"></a>
</div><script type="text/
javascript">var
addthis_config =
{"data_track_addressbar":true};</
script>
<script type="text/
javascript" src="//
s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXX"></script>




Add them in the footer of the blog posts.
To insert this  addThis sharing buttons in your Blogger HTML.

You just need to follow the steps below


1
Now goto www.blogger.com  and in your  Blogger Dashboard select the blog you are customizing and then go to Template, then click on the Edit HTML
Make sure you are using a computer not  a phone.


2
Move your mouse into the box were you see the HTML code and click once then on Your keyboard make use of the control of the CTRL + F keys to do  search  a search.


3
Now put the code below in the search box and click on enter button


<div class='post-footer'>



Step 4. Just above this code, add the code for the AddThis social sharing buttons.
Remember that If you want to add at the beginning of your posts, add the code below the second


<div class='post-header'>


Do you want to add more
AddThis buttons to your blog?

simply select the button for that social
network and add the code just before the

 </div>

step 5 from example above  Some
below

<a
class="addthis_button_linkedin"></
a> /* linkedin button */<a
class="addthis_button_google_plusone"
g:plusone:size="medium"></
a> /*gplus button */<a
class="addthis_button_digg"></
a> /* digg button */<a
class="addthis_button_stumbleupon"></
a> /* stumbleupon button */<a
class="addthis_button_print"></
a> /* print button */

Check here for preview 


1.
Click on Your  Template  move your cursor to  Edit HTML button  then click it after clicking, press the CTRL + F key to search for this code below.

<div class='post-footer'>


Just above this line I mean the code above, paste this code below


<style type='text/css'>
.addthis_share_btn a,
.addthis_share_btn a:visited
{
background: #FF5C00; /*
background color of the
button */
display: inline-block;
padding: 6px 12px;
font-family:
arial,helvetica,lucida,verdana,sans-
serif;
font-size: 12px;
line-height: 1em;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px
3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px
3px rgba(0,0,0,0.5);
border-radius: 5px;
box-shadow: 0 1px 3px
rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px
rgba(0,0,0,0.25);
border-bottom: 1px solid
rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.addthis_share_btn a:hover {
background: #D45500; /*
background color on mouse
hover */
color: #fff;
}
.addthis_share_btn a:active
{ top: 1px; }
.addthis_share_btn a span,
.addthis_share_btn:visited a
span {
background: url(http://
www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}
</style>
<!-- AddThis Share Button
-->
<div class='addthis_toolbox
addthis_share_btn'>
<a
class='addthis_button_compact'
href='http://addthis.com/
bookmark.php
bookmark.php'>
<span>Share</span></a>
</div>
<script src='http://
s7.addthis.com/js/250/addthis_widget.js' type='text/
javascript'/>
<!-- End AddThis Share
Button -->



Arrange  our your way

•  To change the color of the button  to matchbelow  the colors of your template, the color value should be modify in red.

• change the "Share" text, by  replacing  the text in green

2
Just Save the changes by easily clicking on the Save template button now you are for to go


Thanks for your view remember to comment thank you
Share :

zealmatblog

No comments:

Post a Comment



Parse Your Adsense HTML code Here





We love to hear from you!

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