For all those who have been following up with my posts on modifying the Blogspot Template, today I will be telling you add some icons (pictures) to make your blog better in terms of professional looks. For this you will need a few icons. You can search for your own preferred set of icons but for those who do not want to waste time and get started right away, they can make use of the following icons.
List of Icons that I have used
Post Image
Sidebar Icon
Date IconNote
A point that I would like to mention before you start out searching for the icons, please note that the space on blogs is very less and you would love to save it for other purposes. So please search and download icons which are small in size. Generally, Icons with 16X16 pixels should be preferred but in case they are too small, go for 32X32 pixel icons.
For getting the things right you will need to have a space with Google Sites. For those who do not know what is this can read my earlier post Use Google Sites to Upload and Place Links. You can use any web space but it is my recommendation to use Google sites, just because it is with Google. You already have a set of utilities that Google provides for free. So why not use it!
In this tutorial we will be adding icons to our post headings, date stamps,..... For how your blog will look like after this exercise, you can have a look here.
Once you have got the icons ready and uploaded on your space provider, log in to the blogspot account and goto the Edit HTML page for your blog.
Placing The Icon for Date
Search in the CSS code for a section named h2.date-header. This is the block of CSS responsible for the display of the date stamp on the blog. You will have to put the following CSS in the existing block of CSS -
padding-left: 18px;padding-top: 0pt;background-color: transparent;background-image: url(the url of the Image / Icon as per your settings);background-repeat: no-repeat;background-attachment: scroll;background-position: left center;Placing the Icon for Posts
Search in the css code for the section named post h3. This is the block of CSS responsible for the display of the Header or Title of your Posts. You will have to put the following CSS in the existing block of CSS -
background-image: url(Place the Location of the Icon for Post Heading here);background-repeat: no-repeat;background-attachment: scroll;background-position: 10px 0.5em;Note
If your post heading already has an Icon and you want to change it to something else, it is easy. Simply replace the existing icon in the url property.
Placing the Icon for Comments
Locate the comment-link(s) section in the css code of your blog. This is the block of CSS that controls the look and feel of the Comments link on the blog. You will have to put the following CSS in the existing block of CSS
background-image: url(place the Location of the Icon for Comments here);background-repeat: no-repeat;background-attachment: scroll;padding-left: 14px;Note
There might exist multiple instances of comment-links in your template. You would have to change the css for all of these. This will display the same icon for comment-links at all places. In case you forget to do so, you may get different icons for comment links at different places.
Placing Icons for Sidebar Headings
The sidebar headings are marked with the h2 HTML tag. So you will have to locate the CSS code that says .sidebar h2. Place the following code in the section
background:url(place the Location of the Icon for Sidebar Headings here);background-repeat:no-repeat;padding-left:18px;A Brief Explanation
What is being done is that some spaces are added on the left of the date stamp. After this, the background image is set and lastly the repetition of this image is stopped.
0 comments :
Post a Comment