OK, about 2 hours ago I thought, 'Those bookmark links at the end of BBC articles look really cool and encourage traffic, how would i do something like that?' Scroll down for the answer, read on for my wibbling.
Simple I thought, someone else must have figured it out, i'll just search Google Groups and the answer will appear.
Well lots of answers did appear but not quite the right ones. I want
- Bookmarks appearing at the end of my post
- With little logos for each
- And with nice accessibility touches such as "Bookmark with" and "What are these?" written at the end plus alt text coming up when you hover over the links.
I first considered the add this option which is really easy but clicking on it does take you to the 'add this' page before the relevant bookmark page which i didn't want. I'd recommend this though if you want a really simple option.
I then thought, well i'll try and figure it out myself! So i copied the source html from the BBC page but that just broke my template funnily enough.
I then found most of the answer on tips for new bloggers (the reason why i'm not just redirecting you there is because they don't add the little accessibility things that i wanted!). I've had a play in photoshop to get the little images looking right and hosted them on my Google Page Creator site (don't use these images on your own blog as i can't guarantee i won't move them at some point, get your own, it's FREE!). Also i needed a Facebook image as the facebook site doesn't have a nice one so I used the png file on this facebook icon request forum. I figured out the alt text using the source i'd viewed on the BBC site.
Also I've written basic html before but as you'll see, this code doesn't look like normal html. For example you use expr:href as opposed to href and instead of "quotes" either side of text you put 'apostrophes'. Well this is because it's in the blogger code as i was told by this new blogger blog site, I'm sure you'll find it thrilling...
Enough of how i've wasted the last two hours, here's what i did:
- Go into 'Template' > 'Edit HTML'. Save your current template somewhere so if you balls it up you can revert to the old one.
- Tick the check box 'Expand Widget Templates'.
- Find (ctrl + F) the bit of code that says <div class="'post-footer'"> and immediately after this put the following code: (change the red text for wherever you host the images)
<!-- Start of social bookmarks. --><br/>
Bookmark with:
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Post this story to Digg'><img alt='Digg' src='http://edsexton.googlepages.com/digg.gif'/></a>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Post this story to Technorati'><img alt='Technorati' src='http://edsexton.googlepages.com/technorati.gif'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Post this story to Delicious'><img alt='del.icio.us' src='http://edsexton.googlepages.com/delicious.gif'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Post this story to StumbleUpon'><img alt='Stumbleupon' src='http://edsexton.googlepages.com/stumbleupon.gif'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Post this story to reddit'><img alt='Reddit' src='http://edsexton.googlepages.com/reddit.gif'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&Title=" + data:post.title' target='_blank' title='Post this story to Facebook'><img alt='Facebook' src='http://edsexton.googlepages.com/facebook.gif'/></a>
<br/>
<!-- End of social bookmarks --> - Save template
- Admire your handiwork
No comments:
Post a Comment