How to use Social Network buttons on blogger Below Every Post
Thursday, June 17, 2010
|
Blogger Tutorials
How to use Social Network buttons on blogger Below Every Post
By adding social networking icons to your blog you will definitely boost your blog's traffic, if done properly. So be careful while placing them. They should be attractive, correctly placed, aligned and also they should be visible separately from the post. Although buttons like AddThis and AddToAny are quite useful, but now they look quite outdated.
So have a look on these buttons: Download buttons from here
Or from here [Free Icons Download]
Or From here [Glossy Buttons]
To show these icons below all your posts and to dynamically synchronize the post's address with each of these buttons, follow these steps:
Go to "Layout" section, then click on "Edit HTML" link.
Then click on "Expand Widget Templates". Now find (CTRL+F) this code:
The black bolded code hides these icons in your Home-Page and only shows them below your posts.
So have a look on these buttons: Download buttons from here
Or from here [Free Icons Download]
Or From here [Glossy Buttons]
To show these icons below all your posts and to dynamically synchronize the post's address with each of these buttons, follow these steps:
Go to "Layout" section, then click on "Edit HTML" link.
Then click on "Expand Widget Templates". Now find (CTRL+F) this code:
<data:post.body/>Then immediately after that code, add these lines:
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->In the highlighted code (in red color), paste the DIRECT LINKS to the various social networking icons.
<b:if cond='data:blog.pageType == "item"'>
<!--DIGG-->
<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg It!' src=' ' /></a>
<!--Stumble-->
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src=' '/></a>
<!--Delicious-->
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src=' '/></a>
<!--Technorati-->
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src=' '/></a>
<!--Twitter-->
<a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'><img alt='Tweet It!' src=' ' width='122'/></a>
<!--Facebook-->
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src=' '/></a></b:if>
<!--SOCIAL-BOOKMARKING-ICONS-STOPS-4-Help-http://www.vload.org-->
The black bolded code hides these icons in your Home-Page and only shows them below your posts.
