Follow Me:

Sunday, August 31, 2014

Google Style Logo Using CSS for Blog

Google Style Logo for Blog

Google has many types of logo for its site and keeps on updating some of the logo with its doodles, if you search for Google logos on search you may find different types of logos in images. Logos are created using images mostly on all the websites but some use CSS codes to add the logo one of which we have created it using the CSS adding font face and the <tnb> tag.


To add this style in your site or blog is very easy. Go to your blogger dashboard, Template > and click on Edit HTML after that find the ]]></b:skin> tag in your template and before it add the CSS code inside it.

@font-face {
font-family:tnb;
src: url(add you font face tag here);
}

.logo {
font-family:google;
font-size:0px;
white-space:nowrap;
}

.logo tnb {
font-size: 10vmax;
}

.black { color:#000000; }
.orange { color:#ffa500; }
.green { color:#32CD32; }

Go to google font face and add your custom tag in the src url and change the 10vmax to your custom number. Now lets add the tag to show up the logo in your site using <div> tag add this code should be added in the body tag of your template.

<div class="logo">
<tnb class="black">The</tnb>
<tnb class="orange">Next</tnb>
<tnb class="green">Blogs</tnb>
</div>
Note you can the the color code of your choice or you this as default. After adding the code save your template and you are all done. 

No comments:

Post a Comment

Creative Commons License