Internet Tech Column

Saturday, 26 May 2012

Structure of Blogger Template | Mission 1

Saturday, May 26, 2012 Article By Posted by Vinod Suthersan

Lesson 1: Understanding the skeletal structure of the Blogger layout and Blogger template HTML.

Mission 1: Before we take on any of the in depth of the technical stuffs. It is very much necessary for the newbies to understand the skeletal structure of a typical Blogger site and the corresponding Blogger template HTML. This post is mainly focused for the newbies to get a clear cut basics and foundation on the understanding of the Blogger Layout structure.

A pictorial representation of the Blogger website layout:

Though, there are other variations where the two sidebars are at one side, only one sidebar, and so on. A typical blog should have these in general.

1) Header - This name is obvious, where you place your LOGO, NAVBARS/MENUS, TITLE & DESCRIPTION.

2) Left/Right Sidebar - This is where you place your About me, Social Elements, Labels, Archive and so on. It is up to you to place what would be best.

3) Main Post Content Area- The name itself says. This is where your blog articles appear with all other customizations.

4) Footer Area - This section you can place your about me as in my blog, recent posts, recent comments, twitter feeds, followers widget and so on.

5) Credit Section - This is where you place all the credits for your theme/blog/icons/images and about the copyrights specifications of the blog.

A typical HTML page structure is:


<html>

<head>

All the initialization for the blog/page like variables, meta tags and CSS stylings.

</head>

<body>

Your elements and HTML stuffs that needs to appear on the page

</body>

</html>

Let's take this Blogger template for explaining the below comparison-

http://probloggerdesigning.blogspot.com/

-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */

Important Blogger Template HTML Comparisons:

1) Body Tag -


<body> </body>

This is a normal HTML tag also found on your blog, where all the elements which needs to appear on your blog on the internet needs to be placed.
In the above mentioned blog, you can find this as the body tag:
<body expr:class='"loading" + data:blog.mobileClass'>
and
</body>

2) Content -


<div class='content'>

</div>

This is where the complete elements are placed on your blog - Posts, Sidebar and Footer.

Note: Different templates would have different naming for the content attribute.
To test the content attribute, just after <div class='content'>
Place some junk words like "HIIIIIIIIIIIIIIIIIIII Am in Content"
as shown:
<div class='content'>
HIIIIIIIIIIIIIIIII Am in the Content

3) Header -


<header></header>

This tag may be different for different templates.
Sometimes it may be


<div class="header"></div>

Within <header></header> you place all the header elements for the blog like blog logo, Blog title, blog descriptions and menus.

4) Main Wrapper -


<div class="main-outer"></div>

This is where the content and sidebar is placed.
Other templates may have something like:


<div class="main-wrapper"></div>

OR

<div id='main-wrapper'></div>

5) Post Content Entry Point-


 <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

That is the tag which says that we have entered the post body or contents.

6) Post Header -


 <div class='post-header'>

We are right now under the post title.

7) Sidebar -


<b:section-contents id='sidebar-right-1'>

That is where your sidebar contents start for this template.
We sometimes have div elements for right side or left side sidebar as <div id="rsidebar"> or <div id="lsidebar"> respectively.
Other names for div are


<div id="sidebar">

<div class="sidebar">

<div class="sidebar-wrapper">

<div id="sidebar-content">

and so on.

8) Footer -


<footer></footer>

and

<div class='footer-outer'>

That's it for today. If you have any doubt on this comparison you can ask on the comment section. Please let me know. We will be seeing more on the structure diagrammatically in the next tutorial series.

Thanks for learning along with me. Enjoy!!

~iTechColumn

Continue>>

Wednesday, 23 May 2012

10 Simple On Page SEO Techniques

Wednesday, May 23, 2012 Article By Posted by Vinod Suthersan

Describes the most easy ways of on page SEO techniques for effective traffic from search engines. Learn "On Page SEO Techniques" today.

SEO has become an important part for webmasters to bring in some search engine traffic, as Google is making it tough by releasing lots of Panda updates. Today, we are not going to fight back Panda, but learn some simple techniques for your website pages and content.

Without wasting further of your time, lets go to the list of on page SEO techniques.

10 Simple On-Page SEO Techniques

1. Title Tags / Page Titles

This is the foremost important thing for your web contents and articles.
Title tags are nothing but, title of your article or content.
It is important to have an unique catchy title which no one has used it on the internet and also well targeted to your expected audience.
It is wise to bring in most of the target keywords in your title.
The title tags are implemented using <title>Your Unique Title</title> in the HTML.

2. Meta Descriptions

Also called "Search Description" on Blogger. A meta description is a short and unique description of what your article is all about. This is targeted to the search engine results. It is wise to put in something really sensible out there.

3. Meta Keywords

Meta keywords are again instructions to the search engines saying what this article or site is all about.
The meta tags are not supported on Blogger as you see a feature for Meta Descriptions/Search Descriptions.
Meta tags though can be implemented using the article here.

4. No Follow For URLs

You should try to use "nofollow" attribute for the links which you don't trust and don't want the search engine to consider.
<a href="www.itechcolumn.com/search/label/Blogger" rel='nofollow'>Text</a>

Learn from Google how to use it on your Blogger.

5. Content of the page or article

You need to write the article or content of a page keeping in mind how the users may search for a topic targeted. A rich, unique and well written content should be good for the search engines.
Note: Don't stuff your contents with keywords which will lead to negative SEO.

6. Create Internal links

If you have some other article related to the current article, make some connections with a good anchor keywords. It is a way to gain some portion of your traffic from such links as well. It is a actually a good practice.

7. Image SEO

A very important substance if your content has images and photos. We have already discussed on image SEO in our earlier article. Please refer the article to gain some knowledge.

8. Body Tags

Body title tags are very important for SEO as well. Split your article or content into Main title, sub title, and minor title as you see with Blogger.
These are nothing but the H1, H2, H3 tags and so on.
Use them wisely, and don't fill your articles with H1 tags.

9. URL Permalinks

Design your article's URL permalinks wisely.
Learn about Permalink here.
Permalinks are the links which once used can't be changed on Blogger but can be changed on Wordpress. If you are using Blogger design it wisely with the target keywords. If with Wordpress, design it wisely again because if you change the permalink URL after publishing the article it will be difficult for the search engines to crawl again and index.

10. Internal Keywords

It is recommended to repeat the title keywords in your article scattered at least 2 times for a 400 words article.

Warning: Don't copy paste other's articles and use these strategies, as Google has given us some Panda refreshes which are powerful in detecting copied contents.

Hope you would definitely give a hand on those techniques on your websites. Thanks for having a look at these.

Enjoy the rest of the blog.

~iTechColumn

Continue>>

Monday, 21 May 2012

Mission To Design A Professional Blogger Blog

Monday, May 21, 2012 Article By Posted by Vinod Suthersan

A Weekly tutorial edition to create an professional looking Blogger layout or site. Table of contents to create a professional Blogger layout from scratch.

"Mission to Design Blogger" - A weekly edition on creating a professional Blogger blog is on!!!

Am happy to announce, that I'm creating a weekly edition on how to create or design a professional Blogger blog from scratch. This page will be dedicated to the articles which will be posted as part of this edition. Even if you miss a part of the edition, you can still find them on my home page linked always. I hope our mission will be successful as we move towards the goal.

This mission of designing the Blogger blog is not only to help the newbies but it would make myself a better designer than before. I don't want to boast that am a professional designer, so I take the opportunity to learn some for myself and teach others.

Blogger is becoming more and more powerful with Google's upgrades and enhancements we are seeing. Blogger platform has turned out to be a much preferable platform for blogging in the recent times with lakhs of daily blogs being created.

These tutorials can be used by anyone - Newbies, Intermediates, Myself(Of course) and Already professionals as a reference.

10 Things may you need before proceeding to Design A Professional Blogger Template yourself:

1) A Google Account to access Blogger.com

2) A Blogger blog up and running with some contents in them(Posts, Pages and Gadgets)

3) Little bit of HTML and CSS knowledge - If you don't know, we shall learn them as part of the lessons as and when HTML and CSS are encountered :-) Learn on HTML and CSS from w3schools.

4) A Test Blog with simple template like Minima to test your learning before implementing them on your primary blog.

5) A Text Editor - Windows Live Writer / Notepad++. Better to use Windows Live Writer.

6) An Image Editor - Gimp is the most preferred as it is open source and gives equal competition to Adobe Photoshop. I personally use Gimp software to create my images. This is an excellent software. You can easily design your website's logo using this software. Check other similar tools for reference.

7) Some Royalty Free Image Sites handy.

8) External file hosting for JavaScripts, CSS, jQuery. I use Google Codes. To upload other files like images, zip files and videos, there are number of free file sharing sites like Dropbox.

9) Better to install 3 different browsers in your computer/laptop. I've 3 major browsers to check the compatibility of the designing I do - Chrome, Firefox and IE. IEs are the most incompatible browser which I've faced problem while designing. All your hard work will come to an end if you happen to check your website on IE8 and lower.

10) Willingness to learn :-)

The above tools and support is used by myself. I strongly recommend my audience to use them during your designing course.

Check out all the tutorials already published on this website on Blogger.
Many tutorials will be referenced during the future editions, so you can learn them then as well.

LESSONS:

1) Lesson 1: Structure of Blogger Template & Overview of HTML Template

Continue>>

Friday, 18 May 2012

35 Link Styling And Link Hover Effects Using CSS

Friday, May 18, 2012 Article By Posted by Vinod Suthersan

Tutorial explaining the possible styling of the text links along with some link hover effects using CSS and CSS3.

In one of the previous articles, we had seen how to create some cool link hover effects using CSS3. Here we shall see some tricks possible on text links using CSS plus CSS3.

Check out the demo in the dabblet I've created. The corresponding codes are available in the dabblet itself. You can view the HTML, CSS/CSS3 and the corresponding Results.

DEMO DOWNLOAD

These tricks contain the most basic text styling codes as well as some advanced codes using CSS3. I've not included the trick using the background images on hover for some reason.

There are a total of 35 different text link styles with some cool looking hover effects.
Here are the codes which does the magic:

CSS codes in order of the demo:


.link-style a:link, a:visited, a:hover{color:Darkblue;}



.link-style li:nth-of-type(2) a { text-decoration: none;}



.link-style li:nth-of-type(3) a{ text-decoration: none;}

.link-style li:nth-of-type(3) a:hover { text-decoration: underline;}



.link-style li:nth-of-type(4) a{text-decoration:underline;}

.link-style li:nth-of-type(4) a:hover{text-decoration:none;}



.link-style li:nth-of-type(5) a{}

.link-style li:nth-of-type(5) a:hover{cursor:help;}



.link-style li:nth-of-type(6) a{text-decoration:none;}

.link-style li:nth-of-type(6) a:hover{text-decoration:overline;}



.link-style li:nth-of-type(7) a{}

.link-style li:nth-of-type(7) a:hover{color:#ee3930;}



.link-style li:nth-of-type(8) a{text-decoration:none;}

.link-style li:nth-of-type(8) a:hover{background:#000;color:#fff;}



.link-style li:nth-of-type(9) a{text-decoration:none;}

.link-style li:nth-of-type(9) a:hover{border-bottom:solid 1px #000;}



.link-style li:nth-of-type(10) a{border-bottom:dashed 1px;text-decoration:none;}

.link-style li:nth-of-type(10) a:hover{border-bottom:solid 1px #000;}



.link-style li:nth-of-type(11) a{text-decoration:overline underline;}



.link-style li:nth-of-type(12) a{text-decoration:none;}

.link-style li:nth-of-type(12) a:hover{text-decoration:overline underline;}



.link-style li:nth-of-type(13) a{text-decoration:none;}

.link-style li:nth-of-type(13) a:hover{text-decoration:none;color:#ee3930;}



.link-style li:nth-of-type(14) a{text-decoration:none;}

.link-style li:nth-of-type(14) a:hover{border-bottom:solid 1px;border-top:solid 1px;}



.link-style li:nth-of-type(15) a{text-decoration:none;}

.link-style li:nth-of-type(15) a:hover{border:dashed 1px;}



.link-style li:nth-of-type(16) a{text-decoration:none;}

.link-style li:nth-of-type(16) a:hover{-webkit-background-clip: text;

 color: white;

 -webkit-text-fill-color: transparent;

   background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));

 background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);

 background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);

 background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);

 background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);}



.link-style li:nth-of-type(17) a{background-color:#efefef;text-decoration:none;}

.link-style li:nth-of-type(17) a:hover{text-decoration:none;background-color:red;color:#fff;}



.link-style li:nth-of-type(18) a { -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }

.link-style li:nth-of-type(18) a:hover { color: #e06c1f; }



.link-style li:nth-of-type(19) a{text-decoration:none;}

.link-style li:nth-of-type(19) a:hover{text-decoration:line-through;}



.link-style li:nth-of-type(20) a{text-decoration:none;}

.link-style li:nth-of-type(20) a:hover{font-style:bold;}



.link-style li:nth-of-type(21) a{text-decoration:none;}

.link-style li:nth-of-type(21) a:hover{font-style:italic;}



.link-style li:nth-of-type(22) a{text-decoration:none;}

.link-style li:nth-of-type(22) a:hover{font-variant: small-caps;}



.link-style li:nth-of-type(23) a{text-decoration:none;}

.link-style li:nth-of-type(23) a:hover{border-left:solid 1px;border-right:solid 1px;}



.link-style li:nth-of-type(24) a{text-decoration:none;}

.link-style li:nth-of-type(24) a:hover{border-bottom:dotted 1px;}



.link-style li:nth-of-type(25) a{text-decoration:none;}

.link-style li:nth-of-type(25) a:hover{border:grey 4px outset;text-decoration: none;}



.link-style li:nth-of-type(26) a{text-decoration:none;}

.link-style li:nth-of-type(26) a:hover{border:grey 4px inset;text-decoration: none;}



.link-style li:nth-of-type(27) a{border-style: solid;border-width : 1px 3px 3px 1px;text-decoration : none;}

.link-style li:nth-of-type(27) a:hover{border-color:green;text-decoration: none;}



.link-style li:nth-of-type(28) a{text-decoration:none;}

.link-style li:nth-of-type(28) a:hover{cursor:help;text-decoration: none;}



.link-style li:nth-of-type(29) a{text-decoration:none;}

.link-style li:nth-of-type(29) a:hover{text-shadow: 2px 2px 2px #444; text-decoration: none;}





.link-style li:nth-of-type(30) a { text-decoration: none; }

.link-style li:nth-of-type(30) a:hover:after { content: " (" attr(href) ") "; }



.link-style li:nth-of-type(31) a{text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}

.link-style li:nth-of-type(31) a:hover{color:#fff;background:#e12000;text-decoration: none;}



.link-style li:nth-of-type(32) a{text-decoration: none; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}

.link-style li:nth-of-type(32) a:hover{color:#fff;background:#e12000;text-decoration: none;}



.link-style li:nth-of-type(33) a{text-decoration: none; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}

.link-style li:nth-of-type(33) a:hover{border-bottom:dotted #fff; color:#fff;background:#e12000;text-decoration: none;}



.link-style li:nth-of-type(34) a{text-decoration: none; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}

.link-style li:nth-of-type(34) a:hover{text-shadow: 2px 2px 2px #444;border-bottom:dotted #fff; color:#fff;background:#e12000;text-decoration: none;}



.link-style li:nth-of-type(35) a{text-decoration:none;}

.link-style li:nth-of-type(35) a:hover{background:url(http://2.bp.blogspot.com/-TTyBjn-mQgs/T7XulBXJD7I/AAAAAAAADZM/TUbJleQaSQQ/s200/absctract-patterns.jpg);text-decoration:none;}

DEMO DOWNLOAD

Things used in the demonstrations:

1) Most of the CSS uses text-decoration:none;
This says that there are no possible decoration for that particular text link.
The possible text-decoration attributes are here.
text-decoration:blink; is not supported on most of the browsers.

2) The CSS3 attributes like border-radius , transitions, text-shadow, background-clip, gradients and other related CSS3 properties are not supported on older browsers and IEs.

3) cursor:help; is used to change the cursor type. All other cursor attributes of CSS are here.

4) The transition effects in Demo 18 doesn't work again on Chrome, once clicked on the link.
This is a known bug.

5) Don't use text-decoration:underline extensively because some letters are slightly brushed across. Eg is "g" and "s" they may look alike.

6) The Demo35 won't work if you are not connected to the Internet, as the image is fetched from Google servers. Replace it with your own image URL.

Hope you liked these basic tutorial. Please report us if anything doesn't work so that it can be fixed. I would like to thank Impressive Webs for showing me these tricks.
Enjoy trying the tricks on your website.

Continue>>