posted under blogger hacks by admin

I receive so many question about how to put or install Social Bookmarks on my templates. actually no matter what your template is, once you can install it, you will be able to install it anywhere on any template.

Now this is the step-by-step to put Social Bookmark on Blogger. For now, I will include Digg, Delicious, Stumble Upon. and will add more later as readers requests. subscribe to our feed so you will be the first to know if we have added new other social.

so here it is,

Oh first, let me remind you that you’re better host all the images this hack needed on your own googlepages, or other filehost. So many blogger forget do not read my post carefully and keep asking the same question about why their template images disappear from their blog. Now please host all the images needed by this template on your own host.

How to find out that images needed by this hack? look at the style, and see the url. all that url mean they are needed by this hack. please read this to learn how to host all the images on your own host.

Now, Put Social Bookmarks on Blogger/Blogspot.

1. first of course go to your template editor. and Tick the Expand Widget Template.

2. put this code below inside your head. it means you can find this code </head> and put the codes before it. so it becomes like this below,

<style type="text/css">div.jackbook_socialmark  ul { display: block;font-size:10px;height: 20px;

list-style:none;

padding: 0px 10px 10px 0px;

margin: 0px 0px 0px 15px;

}

div.jackbook_socialmark ul li {

display: inline;

margin: 0px;

padding: 0px 5px 0px 5px;

}

div.jackbook_socialmark ul li a {

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

margin: 0px;

}.jackbook_socialmark .stumbleupon, .jackbook_socialmark  .delicious, .jackbook_socialmark .digg {

padding-left: 20px;

}

.jackbook_socialmark .digg {

background: url(http://fluidsolution.lifewg.googlepages.com/jackbook_digg.gif) no-repeat left;

}

.jackbook_socialmark .delicious {

background: url(http://fluidsolution.lifewg.googlepages.com/jackbook_delicious.gif) no-repeat left;

}

.jackbook_socialmark .stumbleupon {

background: url(http://fluidsolution.lifewg.googlepages.com/jackbook_stumbleupon.gif) no-repeat left;

}

</style>
</head>

3. Now go find this code below,

<data:post.body/>

4. Put this code after, so it becomes like this

<data:post.body/><div class='jackbook_socialmark'>

<ul>

<li><a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title + "&bodytext=&topic="' target='_blank' title='Digg this'>Digg this</a></li>

<li><a class='delicious' expr:href='"http://del.icio.us/post?v=4&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add to del.icio.us'>Add to del.icio.us</a></li>

<li><a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumble It!'>Stumble It!</a></li>

</ul>

</div>

5. review your blog template.
6. if it’s satisfying, Save your template, refresh your blog and done.

If you still using Classic Blogger Version, please let me know by leaving your comment here. Even I would suggest you to upgrade to New Blogger, but I will convert it to classic blogger version if you need it.

update:

Some readers reported that they have problem with just copy and paste the codes. If you have the problem too, please download the codes below. thanks

Downloaded a total of 460 times