Support your country for London 2012 Olympic by your Blog

London 2012 Olympic is obviously trending up on the web and that's the magic of the Olympic games. As a blogger don't you feel like supporting your country by putting up a badge on your website or blog ?

If you are an ultimate lover of the Olympics and support you country to perform well in the games then you can do more to support them, if you are crazy about the London Olympics 2012 then you can run waving your country's flag  but that's just too tiring so if you are on Blogger and want to show love to the sports person of your country then why not put a badge in your blog ?

london olympics 2012 blogger badge for blog add

Badge for your blog

Adding the badge is easy, the badge is a logo of your country and it will link to anything you want, can be a blog post you made to support your country in the London 2012. We actually need just two things, HTML and CSS

Here is a demo for the badge



The first step is to the add the HTML in your blogger template. This is the HTML we will use for the badge
<a class='sprt-country' href='#' target='_blank'>
<h4 class='hsupport'>I Support</h4>
<img src='' title='I am supporting my country for the Olympics'/>
<h4 class='hsupport2'>For the London 2012</h4>
You need to make changes on couple of things in this HTML, main change is the flag image url in the <img> tag.
  1. Line 1 : If you posted something related to the Olympics games on your blog or just a blog post to support you country then you can put the link in href='' just replace the hash (#) with your blog post URL
  2. The <h4> tags contains some text, by default i have put it 'I support' for the first h4 and for the last it is 'For the london 2012', you can change it if you want it in your own language or just want to put your own words. 
  3. Line 3 : This is the most important one, as it's your country's logo that will appear in the badge. To change the picture URL, go to this link, find your country name and click on it. You will be taken to a page with different sizes for your country flag picture. Choose the 48*48 and copy the image url by right clicking on it and replace the link in src='' in the line 3 which is an <img> tag 
You have to place your HTML in the template. Go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Find </body> tag in your template and paste the HTML just above/before the </body> tag, that's it. Save the template.

    CSS for the badge

    To make the badge beautiful and attracting we will use CSS. Here is the style codes for the badge.
    .sprt-country {
        position: fixed;
        top: -10px;
        right: 15px;
        background-color: rgba(255, 255, 255, 0.87);
        text-align: center;
        padding: 12px;
        border: 2px solid #888888;
        width: 100px;
        border-radius: 0px 0px 20px 20px;
        color:grey !important;
        text-shadow:1px 1px 1px white;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    .sprt-country:hover {
        background-color: white;
        color:black !important;
    You can add the CSS in via the template designer to do that go to the Blogger Dashboard -> Template -> Click on the Customize button -> Advanced -> Add CSS -> Now paste the CSS in the custom CSS box and hit Apply to Blog. [Click here to know how to add CSS]

    Once the CSS is applied on your template you can see the badge in action on the top right corner of your blog. Now your readers will see you as a true lover of your country. 

    Liked this tutorial

    Did you find this badge useful and a good way to let your readers know about how you support your country in the London 2012 ? Then please share about this post. Drop your valuable comments below and enjoy discussing this post.