Showing posts with label sidebar. Show all posts
Showing posts with label sidebar. Show all posts

Sunday, 23 May 2010

Use Google Font API for decorating your Post Title and sidebar title

Google announced their new Font API yesterday, including a font directory and preview tool to make open sourced fonts  available to everybody on the web.You can get more such blogger tricks directly to your mailbox os you can subscribe to my RSS feeds.
Some more Tutorials on This Blog-


Steps for Adding Google Font to change Blogger Post Title 
Step[1] Choose Your Font
Just go to the Google Font Directory and pick the desired font there are already prety nice font and will be expanded with the popularity and time.
Use preview tool to Test different Fonts with all available options.You can Capitalize,Lower Or upper your text.Use this preview tool to check how your text look with letter spacing,line spacing,and word spacing.And don't forget to check the shadow option.

Step[2] Get Code
Once you have selected Font from Google Font Directory click on Get Code .

just copy it and paste between your <head> and </head> tags. Like this:
 <head> 
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'> 
</head>    

Cantarell was selcted by me.

Note-This code will not be excepted by blogger and might give you an error to close the link tag, just add a little "/" in the end like this:
 <head> 
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/
</head>  

Step[3] Decorate your Post Titles
From Your Dashboard. Go to Layout > Edit HTML And .
Use your Browser search to find .post h3 or .post h2 which ever present in your template.This post h3 or h2 defines your post Title properties.
Look for Font-family in your post h3 and add the font name you have selected from Google.

font-family: 'Cantarell',Tahoma,Verdana, Arial, Lucida Grande, sans-serif;

Click on Save Template

This Is It.

Do you like this tutorial? Do you like Google Font ? Use below comment form to send your suggestions or queries to me.

Friday, 14 May 2010

Add icon or image beside your sidebar title

To make your blog interesting and attractive you can add small icons beside your sidebar title.This is most common in wordpress themes and many of the premium blogger templates .We can do this by adding CSS to individual widget title(h2). It surely will give a new look to your template and keeps your blog refreshing.

subscription box


Adding icon beside sidebar title involves for steps.
[1] Finding icons /image.
[2]Uploading to any free image hosting like tinypic.
[3] Making CSS for the sidebar heading title(h2)
[4]Customizing CSS.

Before going further deep in the tutorial i am expecting that you have found a suitable image and hosted it yourself.
Coming directly to step 3.Under Edit HTML tab Expand Widget template and look for ]]></b:skin> and insert the new code above ]]></b:skin>

.widget id h2 {background:url(URL OF HOSTED PIC);
background-repeat: no-repeat;
background-position:left center;
height:25px;margin:0;
padding:10px 3px 0 30px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}
]]></b:skin>
</head>

Now change widget id with the unique widget id in your template.

How do i know my widget id? 
Under Layout > > Page Element section.Click On edit Button of any widget/gadget to find its ID.
A new window will open with customization option .Look for the URL of the widget .Examine the url and you will find the widget id at the end of the url.
 edit widget blogger
 widget url blogger
Customizing CSS
You can customize the CSS according to your template by adding or removing properties to your css.One thing that will be most important in your customization is padding

padding top right bottom left