Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Tuesday, 19 August 2008

Adding Yahoo! Buzz(TM) buttons to blogger

Seems Yahoo! have opened up their Buzz(TM) service to anyone. What is Buzz? It looks like a way of publishing content to the Yahoo news and home page, where someone can submit a story to Buzz, provide a description, then subsequent users can vote the story up or down in some way.


Anyway, because I like all this Web 2.0 technology, I thought I'd add the Buzz buttons to my blog. You can grab the code for buttons On the Buzz site along with how to use it. I've hacked my blogger layout template to add a button to each post - the code provides the post title as the story title, hard-codes the category to "entertainment" and links the story content to the post's permalink page. Here is how:


  • From your blog control panel, click the Layout link then click Edit HTML. Check Expand widget templates.
  • Before you change anything I really really advise backing up the template. Click Download Full Template and keep the file somewhere secret and safe.
  • To add the button at the bottom of each post, before the summary section (the bit with the comments etc):

    • In the Edit Template window with all the code, search for <data:post.body/>, which should be surrounded by code like:

      <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
      </div>

    • Just below <data:post.body/> paste the highlighted code so it ends up looking like:

      <div class='post-body entry-content'>
      <data:post.body/>
      <br/>
      <!-- yahoo buzz button -->
      <script type="text/javascript">
      yahooBuzzArticleHeadline = "<data:post.title/>";
      yahooBuzzArticleCategory = "entertainment";
      yahooBuzzArticleType = "text";
      </script>
      <script type="text/javascript"
      src="http://d.yimg.com/ds/badge2.js"
      badgetype="text-votes">
      <data:post.url/>
      </script>

      <div style='clear: both;'/>
      </div>

    • Preview the results and save if you are happy.

  • To add the button at the bottom of each post, inside the summary section:

    • In the Edit Template window with all the code, search for <div class='post-footer-line post-footer-line-3'/>, which should be surrounded by code like:

      <div class='post-footer-line post-footer-line-3'/>
      </div>

    • Just below <div class='post-footer-line post-footer-line-3'/> paste the highlighted code so it ends up looking like:

      <div class='post-footer-line post-footer-line-3'/>
      <!-- yahoo buzz button -->
      <span class='post-author vcard'>
      <script type="text/javascript">
      yahooBuzzArticleHeadline = "<data:post.title/>";
      yahooBuzzArticleCategory = "entertainment";
      yahooBuzzArticleType = "text";
      </script>
      <script type="text/javascript"
      src="http://d.yimg.com/ds/badge2.js"
      badgetype="text-votes"><data:post.url/>
      </script>
      </span>

      </div>

    • Preview the results and save if you are happy.


The results should look something like this:

Friday, 4 July 2008

Site update(s)

On the advice of the Blog Azeroth site, I have added a search box to the left hand bit of the site, because searching using tags alone is rubbish and google searches rule. Blogger does provide a blog search on the bar at the top, but the google search also searches any sites I've linked to, including those on my blogroll.


I thought I'd post how I did this for those who are interested, as I couldn't find any info on the BA site itself.


  1. On the blog dashboard, click Manage Layout.
  2. On the column of boxes (blogroll, links, etc) click Add A Page Element. Make it a HTML/JavaScript: click Add To Blog next to HTML.
  3. In the popup box which appears, leave the title blank.
  4. In a different web browser window, go to http://www.google.com/coop/cse/onthefly; google custom search on the fly.
  5. In the box shown there will be a load of code. Copy this code into your system clipboard using Copy and Paste functions (eg on Windows select all then hit Control-C).
  6. Back to the HTML/JavaScript element, in the Content area, Paste the code from google custom search.
  7. Click Save.

If you're brave or know HTML, you can also add other handy links to the HTML/JavaScript panel, such as a subscribe link.
© 2008, 2009 FlameShock. All Rights Reserved.