Share Weblog Posts Inwards Social Media Using Addthis

AddThis is the virtually consummate social sharing service allowing you lot to part your posts inwards to a greater extent than than 270 dissimilar social networks. If you lot desire to purpose the AddThis widget together with larn the AddThis sharing buttons, this tutorial volition present you lot how to register together with add together this characteristic on your blog. Plus, you lot volition larn to know precisely about of the customization options of these buttons. So let's larn started!

Getting the AddThis part buttons code

Step 1. Visit the https://www.addthis.com/get/sharing page.

Step 2. To larn the sharing buttons together with to access the AddThis sharing stats to honour out how many people shared your ship service yesteryear using the AddThis feature, click on the "Create account" button.

AddThis is the virtually consummate social sharing service allowing you lot to part your posts inwards 2nd Share Blog Posts inwards Social Media using AddThis

The site volition inquire you lot to brand a pocket-size registration. Fill out the information to register. It's quick, elementary together with it's free. To complete the registration, click on the Register button.

Step 3. After you've been logged in, correct below the "Get sharing buttons for", pick out the "A website" option.

Step 4. In the "Select style" section, pick out the buttons fashion that you lot mean value would await the best on your site/blog. Please banking concern annotation that on the correct side you lot tin hand notice meet a preview of these buttons.

Step 5. After you lot convey chosen the style, the site volition render a code - click on the "Grab it" push to re-create it.

The code provided volition await similar this:

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

Now that you lot convey selected together with gear upward your AddThis sharing buttons, let's add together them inwards the footer of the posts.

Adding the AddThis sharing buttons on Blogger

Step 1. Access your Blogger Dashboard together with larn to "Template", together with hence click on the "Edit HTML" push on the correct side:

Step 2. Click anywhere within the code expanse together with press the CTRL + F keys to opened upward the search box.

Step 3. Type the next business within the search box together with endeavour to honour the minute occurrence of it - hitting Enter:

<div class='post-footer'>

Step 4. Just higher upward this line, add together the code for the AddThis social sharing buttons.

Note: If you lot desire to add together at the starting fourth dimension of your posts, add together the code below the second:

<div class='post-header'>

How to add together to a greater extent than AddThis buttons

To add together to a greater extent than buttons, only pick out the push for that social network together with add together the code precisely earlier the </div> tag (refer to the stride five from above).

Some examples:

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

CSS3 AddThis Share Buttons

You tin hand notice add together precisely a unmarried button, hence that when the reader hovers over it, a carte du jour volition opened upward amongst the options of social networks to part the post.

Visit this page for a demo.

Step 1. Go to "Template" > click on the "Edit HTML" push > press the CTRL + F keys together with search:

<div class='post-footer'>

Just higher upward this line, glue the next code:

<style type='text/css'>
.addthis_share_btn a, .addthis_share_btn a:visited {
background: #FF5C00; /* background color of the push */
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 corporation 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 bridge {
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left;
padding: 1px 0 1px 18px;
}
</style>

<div class='addthis_toolbox addthis_share_btn'>
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'>
<span>Share</span></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

Customization

To modify the color of the push according to the colors of your template, modify the color value inwards red.
If you lot desire to modify the "Share" text, supplant the text inwards blue.

Step 2. Save the changes yesteryear clicking on the "Save template" push together with you're done!