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 ?
Here is a demo for the badge
Demo
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 ?
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 CSSHere is a demo for the badge
Demo
The HTML
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='http://www.printableworldflags.com/icon-flags/48/India.png' title='I am supporting my country for the Olympics'/> <h4 class='hsupport2'>For the London 2012</h4> </a>You need to make changes on couple of things in this HTML, main change is the flag image url in the <img> tag.
- 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
- 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.
- 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
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;
text-decoration:none;
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;
font-family:'georgia';
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;
text-decoration:none;
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.
