News Today

« »

Bishop Mar George Punnakottil and Mar Madathikandathil

Caricature made by Ignatious Kalayanthani

T C Mathew,Associate Editor,Deepika

Caricature made by Ignatious Kalayanthani.

Rev. Fr. Joseph Kochuparambil

Caricature made by Ignatious Kalayanthani

Thomas Jacob,Malayala Manorama

Caricature made by Ignatious Kalayanthani

Johny Lukose, news Director, Manorama News

Caricature made by Ignatious Kalayanthani

Ignatious Kalayanthani

Caricature made by Ignatious Kalayanthani

Dr Babu Sebastian, V C , M G University

Caricature made by Ignatious Kalayanthani

Jose Panachippuram, Malayala Manorama

Caricature made by Ignatious Kalayanthani

Ignatious Kalayanthani

Caricature made by Ignatious Kalayanthani

Tuesday, July 3, 2012

Stylise blog template with CSS?

3:03 AM   Kalayanthani   No comments


You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and examples, please see W3 Schools CSS Examples and The W3C Introduction to CSS.
Our default templates have all the CSS information towards the top, between <style></style> tags. You'll see a bunch of lines there that look like this:
Template CSS The highlighted line shows the style that is applied to every <h3> tag in your blog. What we're going to describe here are some options for how to style it. Any of the pieces of code below can be inserted between the { curly brackets } in the style sheet.
CodeExamples
Colors
color:blue;This text is blue.
background:yellow;This has a yellow background.
You can insert the names of many common colors here (e.g. red, green, yellow) or you can use hexadecimal codes for a greater range of colors (e.g. #0033AA). For more information on color, please see the Web Color Reference.
Borders
border:solid 1px red;
This has a red border.
A border can be solid, dotted or dashed. The width here is specified in pixels (px). Colors can be names or hexadecimal codes. To only do a border on one side, use border-top, border-bottom, border-right, or border-left.
Fonts
font-family:"Times New Roman",Serif;This is in a serif font.
font-family:Verdana,Sans-Serif;This is in a sans-serif font.
You can specify a list of font choices. If the first one isn't available on your reader's computer, the next will be used, and so on. Indicating "Serif" will use any available serif font.
font-size:24px;This text is 24 pixels high.
The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).
font-weight:bold;This text is bold.
Choices are bold and normal.
text-decoration:underline;This text is underlined.
The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links.
text-align:right;
This text is right aligned.
The alignment can be set to left, right, or justify.
Margins and Padding
margin:15px;
This has a 15px margin all around.
padding:15px;
This has 15px of padding all around.
Margin and padding both specify the amount of space around something. The difference is that a margin is outside the border and padding is inside. (The border here is just for illustration.)

As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with margin:1px 2px 3px 4px; where the order is top, right, bottom, left.

Notes:
You can also use inline styles, if you want to do one-time formatting for a specific piece of text in a post. Here is the format to use:
<span style="color:red;">This text will be red.</span>
Read More/തുടര്‍ന്നു വായിക്കുക

Fonts and Colors Tags for Layouts

3:01 AM   Kalayanthani   No comments


If you know HTML or CSS, you're welcome to modify the fonts and colors in your template any way you like. However, if you want them to work with the Fonts and Colors feature of Blogger Layouts, then there are a few guidelines to follow. Doing it this way will let you modify the colors more easily if you change your mind later. It also helps if you share your template with someone else who wants to customize their version a bit.
In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page. Here's a brief example of how it looks, before we get into the details:
<head>

...
<b:skin>
  <style type='text/css'>
  /*
   * Variable definitions:
   *  <Variable name='bgcolor' description='Page Background Color' 
       type='color' default='#fff'/>
   */
  body {
    background: $bgcolor;
    margin: 0;
    padding: 40px 20px;
  }
  </style>
</b:skin>
</head>
The first part of the CSS code is enclosed in /* and */ comment tags, so it won't be shown on your blog, but only used by Blogger internally. There will be a list of variables here, one for each font or color that you want to be editable from the Fonts and Colors tab. Each variable is required to have the information shown in the example above and described here:
  • name - This name may contain only letters or numbers, and each name in your template must be unique.
  • description - This can be a more descriptive name, and can include spaces. This is what will appear in the Fonts and Colors tab.
  • type - This can be either "font" or "color".
  • default - The default value. For colors, this should be a hexadecimal color code, e.g. #FF0066. For fonts, it will be a list of the form font-style font-weight font-size font-family.
After the variables are set up, the rest of the code looks like regular CSS, with one exception. Any time you want to use a color or font for which you made a variable, you'll enter $variable_name instead of the actual color or font. In the example above, you can see that we created a variable called bgcolor and set it to white (#fff). Then later on in the code, instead of setting the body background property to white explictly, we just said background: $bgcolor. This still has the effect of making the background white, with the difference that we can change it easily from the Fonts and Colors tab if we want to.
As you work on your template design, you'll add lots of variables for all the different fonts and colors you want to control. You do not, however, need to create variables for other types of CSS attributes. These can be included in the CSS just as they normally would be (as with the margin: and padding: attributes in the example above).
Read More/തുടര്‍ന്നു വായിക്കുക

Complete List of Blogger Tutorials

1:49 AM   Kalayanthani   1 comment



Here is a complete list of all the tutorials posted on Blogger Buster, organized by category. So please, dive in and read the tutorials which are most useful to you!

Categories


Click on a category heading to skip to this section of the article.

Back to Top

Blogger News and Issues

This section features important news and tutorials relating to your use of Blogger.com.
Back to Top

Custom Domains

This section features tutorials in regard to using Blogger's "custom domains" service.
Back to Top

Customizing your Blogger Template

This section features all the articles I have written with regard to customizing your Blogger templates.
I have further divided this category to help you easily find a particular customization for your needs.

Overall Layout/General Customizations

Here you will find links to posts which discuss general/overall aspects of customizing your Blogger template.
Back to Top

Header/Navigation

These tutorials can help you develop the header and navigational areas of your Blogger template.
Back to Top

Posts

Here you can find links to articles which discuss styling of the main posts area, including the comments and post-footer sections.
Back to Top

Sidebar(s)

These articles have particular relevance to designing your sidebar(s)
Back to Top

Footer Section

This section focuses on customizations for the footer section of your blog.
Back to Top

Feeds and Syndication

These articles discuss your blog feeds and blog syndication.
Back to Top

General Tutorials

This section features general articles of interest
Back to Top

Images, Icons and Badges

Here you will find articles regarding the use if imagery in your Blogger template and posts.
Back to Top

Labels Categories and Tags

This section contains articles discussing the use of labels, categories and tags in Blogger blogs.
Back to Top

Monetize your Blog

These posts feature information about adding advertisements or using Google Adsense in regard to your Blogger blog.
Back to Top

Resources for Bloggers

Here are posts discussing useful resources for bloggers.
Back to Top

SEO and Blog Traffic

This category features posts which discuss search engine optimization (SEO) and generating blog traffic.
Back to Top

Widgets and Add-Ons

Here are articles featuring widgets and add-ons which you can use to add functionality to your Blogger blogs.
Back to Top


http://flamingtext.in/All-Logos
Read More/തുടര്‍ന്നു വായിക്കുക

Styling Sections of your Blogger Blog with Borders and Backgrounds

1:45 AM   Kalayanthani   No comments


Borders and background colors help separate areas of your blog, and can be used to highlight important content, such as your blog posts, or features in your blog sidebar.
Most importantly, backgrounds and borders don't require you to have extensive knowledge and skill with creating and using images. Instead you can use simple colors, or generate tiled backgrounds to create a completely unique template for your blog.
Here are some of my favorite examples of how borders and backgrounds can be used to separate content:

Pro Blog Design
This is this excellent design exemplifies the theme of this post perfectly. Thick borders and simple backgrounds immediately convey which areas are important.
Mimbo ProHere colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.

Options Theme (By Justin Tadlock)
The border and background colors are varying shades of the same palette: subtle changes in color add depth to each element of this theme.
After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.

Different styles for borders

There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.
The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.
For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this: 
#main-wrapper {

border: 3px solid #000000;

[other properties here]

}
This will reproduce a 3 pixel wide, solid black border, like this:
A section with a solid black border, three pixels wide
Using this example, you could also change the color, and width of the border, like this:
A section with a solid red border, five pixels wide

Borders don't have to be solid!

Instead of solid borders, you could add different properties to create unusual effects such as:
Dotted
border: 3px dotted #000;
Dashed
border: 5px dashed green;
Double
border-style: double; border-color: blue;
Outset
border-style: outset; border-color: #404040;

Different styles for backgrounds

Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).
Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this: 
#sidebar-wrapper {

background: #ffcc00;

[other style properties here]

}
To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this: 
#sidebar-wrapper {

background: url(http://imagehost.com/yourimage.jpg);

[other style properties here]

}
You can also combine color and image background properties, like this: 
#sidebar-wrapper {

background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;

[other style properties here]

}
The example above would feature an image at the top left of the sidebar, while all other space would be yellow.You can read more about adding background images to your Blogger blog in this previous article.

Combining Border and Background Properties

This is where the border and background properties can become very stylish when applied to elements of your Blogger template.
By combining
A wide grey border
With...
A Paler Grey Background
You can create an effect like this:
A stylish section for your blog!
border: 5px solid #666666;
background: #333333;
You could even add a background image, repeating across the whole section, like this:
Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);

Where could you add border and background styles in your Blogger template?

The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.
The style properties for these sections in your template would probably look like this:
  • Header Section - #header-wrapper or #header-wrap
  • Main Posts Section - #main-wrapper, #main-wrap or #main
  • Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar
  • Footer Section - #footer-wrapper, #footer-wrap or #footer
If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!
Remember: you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.
Read More/തുടര്‍ന്നു വായിക്കുക

Add a "Top of Page" Icon Link

1:41 AM   Kalayanthani   No comments

 
While researching blog designs, I came across a really feature: an icon link to the top of the page which floats in the bottom right-hand corner. As a blog reader, I found this feature to be really useful as it enabled me to jump back to the top of the page after reading a long article or browsing through many posts on the home page. Take a look at the bottom right hand corner of this blog for an example of this in action.

This customization is surprisingly easy to install. You can simply add the code required into an HTML/JavaScript widget in your blog's layout or, if you use a Classic Blogger template, add this code directly into your template code.
So in this post, I'll explain how to add an icon link to the top of your blog with an example image and code for you to use this right away.

How this works

The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.
The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity): 
<a href="#"> <-- This link targets the top of the page
<img src="url-of-image" <-- The URL of your icon
alt="alternative text" <-- Alt text for accessibility
title="Back to Top" <-- This will produce the hover text
style="display: scroll; <-- This allows the image to scroll
position: fixed;<-- This fixes the image in place
bottom: 5px; <-- Makes the image appear 5px from the bottom
right: 5px;" /></a> <-- Makes the image appear 5px from the right, 
then closes all tags

How to install the "Top of Page" Icon Link

To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://bloggerbuster.com/images/arrow-up.gif"/></a>
If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the <body> and </body> tags instead.

Customizing the Icon Link

If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.
You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead: 
position: fixed;
bottom: 0px;
right: 0px;
To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.

Some Examples of "Top of Page" Icon Links

You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:
Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.
Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!
Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.
I hope this tutorial has been useful and helped you create your own scrolling icon links to the top of your blog.
If you have found this post useful, please consider subscribing to Blogger Buster for updates of new articles as they are published.  courtesy: http://bloggerbuster.com
Read More/തുടര്‍ന്നു വായിക്കുക

Tips and problems when installing templates

12:26 AM   Kalayanthani   No comments


Here are some tips you can use to improve reliability on using these templates and some problems you might encounter when installing and how to solve them.

Tips on using background images:
The background images (images of the header, main background, content background, title bar, list background, etc) are stored in my flickr account. I can't guarantee the reliability on fetching these images all the time. So I suggest that you upload the images for a particular template that you're using and store them somewhere else. Simply get the image URLs from the xml code and change the URLs in the code (in red) to point to the new address of the images.

Example of code:
background: #000000 URL(http://...........) repeat left top;

Check all URLs in the CSS styling section and not just the first one you see in the code.

Caution with Header section alignment:
If your Header section look misaligned the first time you upload any template into your blog, that's probably because your Header Title and Description is too long and wrapped into a second line. If this is the case, shorten them or make them smaller. If not, it might be that your Linkbar is empty or your own uploaded header image size is wrong.

Caution with uploading your own Header image:
When you upload your own header image from the Header Layout page, the whole section or some part of it can be misaligned or cut off if your image is not compatible (having the right size) with the template. Read here for more details.

Caution with Linkbar: If you use any template with linkbar, the Header section might look weird and cutoff the first time you upload it into your blog. It's because your linkbar is empty (without any links yet). So fill up you links and the Header section will turn to normal again.

When Blogger can't save your new template:
If Blogger can't save the template because there are more than one IDs (for example ID for LinkList, HTML, Adsense, etc), simply go back to your old template and delete all widgets (also called page elements) except the basic ones (like About Me, Labels, and Blog Archives) and reinstall the template. You can later add the widgets back on.

Read also some other common template problems here, or here if you fail to upload template.

Report your problems here:
If you face some new problems when installing my templates or if you want to share some tips, put your questions or tips in the Comment section. I'll try to answer them as soon as I can.
  Courtesy :http://www.ourblogtemplates.com
Read More/തുടര്‍ന്നു വായിക്കുക

How to upload your own header image

12:23 AM   Kalayanthani   No comments


This guide will show you how to upload a header image with Blog Title and Description as part of the graphic. For this to work, you have to hide the default Blog Title and Description texts.

*****

It's much better to use your own header image than the image already defined by the designer or just the simple plain background. For one thing, you can be sure to have a unique header compared to the rest of the blogs. The second reason is that you can write your blog Title and Description with much nicer fonts and color combinations.

Before that, you have to make sure that your image size will align well with the rest of the Header section. Turning the Title and Description text on or off can also mess up you alignment. For my templates, I've already given instructions for perfect alignment.


So, how to do this? Simple...

1. Go to the Layout > Template > Page Element. From there, click the Edit button for your Header. The screen below will pop up.

2. Upload an image from your computer. Make sure that your image size is correct or otherwise your Header will be misaligned! Save your changes. (Don't forget to fill in your Title and Description in the text box above! You can turn the text off later.)

3. To hide the default Blog Title and Description text, click the Header Edit button again. Another screen will pop up, but with a slightly different option (see the screen below). Select the 'Placement: Instead of title and description'. This will hide your Title and Description from showing up on the blog (but still kept as your blog's information). If you don't want to hide your Title and Description text, simply click the other option.

4. That's it. All you really have to do is make sure that you've got a nice image to put up as your blog's header.
  Courtesy :http://www.ourblogtemplates.com
Read More/തുടര്‍ന്നു വായിക്കുക

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites