4.09.2008

Add Social Bookmark Icons In Blogger

6 comments

Do you want to add social bookmark icons in blogger after every post? Well in this article, i will teach you how to add social bookmark icon in blogger. But always remember whenever you do something to your HTML code, PLEASE backup your template first.

I will teach you how to add popular social bookmarking sites like Digg, Technorati, del.icio.us, Reddit, Blinklist, Furl, Yahoo, Simpy, etc.

Readers can click them to add your site or your post to their bookmarks and in sharing these links with others, your Blog becomes more visible. This code when inserted into your template will automatically place these social bookmark links at the bottom of every post. There are many social bookmarking sites and new sites pop up almost every week. What we can do here is to provide you with a code that will place several of these popular sites, and update this list over time.

Ok, lets go.

Step 1. Sign in to blogger, Layout -> Edit HTML and Expand widget templates.

Step 2. Copy the code below



Step 3. Where to place them

- Below your Posts and before the “Posted By” line.

Scroll to these lines and place the relevant code at the red portion.

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
PLACE CODE HERE
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

- Just above the labels

Scroll to these lines and place the relevant code at the red portion.

PLACE CODE HERE
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

- Bottom after the labels

Scroll to these lines and place the relevant code at the red portion.

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
PLACE CODE HERE

Credit goes to http://tips-for-new-bloggers.blogspot.com

Related articles :

  • How to Create a “What’s Next?” After Every Post In Blogger
  • Top 10 Blogger Hacks and Tips
  • Creating Expandable Post
  • Add Digg button
  • Change Blogger Favicon
  • Add Language Translation
  • 10 Questions Every Blogger
  • Hide Navigation Bar
  • Convince People To Comment
  • Put Clock In Your Blog
  • Change Post Date To Calender...


    Comments

    6 comments to "Add Social Bookmark Icons In Blogger"

    Britney said...
    November 19, 2008 at 1:44 PM

    Wide circle is a social media networking that delivers your ads to a large number of websites.
    =============
    Taylor
    Social Bookmarking

    saleel said...
    December 15, 2008 at 4:46 AM

    Hi, Thanks for this post. I was looking for this info. Will do as you described here.
    Also, I am adding your site to my blogroll. When you are free please add me to your blogroll.
    Thanks.

    Prateek said...
    January 24, 2009 at 12:21 PM

    Please change Google's Favicon here in Icons

    organic.life said...
    February 18, 2009 at 12:21 PM

    i can't add this social bookmarks in my blogroll..

    Vinoth said...
    June 14, 2009 at 1:39 PM

    I'm getting the follow error message:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "url" must end with the ';' delimiter.

    decosta said...
    September 9, 2009 at 11:18 PM

    Thanks for sharing best information about SEO.i have also found one website which offier similar services"Directory Submission,One way Link Building,Social Bookmarking"
    Social Bookmarking Services,Directory Submission Services,One way Link Building,Social Bookmarking

    Post a Comment