Browsing "Older Posts"

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

Structure of Blogger Template | Mission 1
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.

NEXT MISSON - Mission 2 - Understanding the Blogger HTML template 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='&quot;loading&quot; + 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

Structure of Blogger Template | Mission 1

By Vinod Suthersan → Saturday, May 26, 2012
Describes the most easy ways of on page SEO techniques for effective traffic from search engines. Learn "On Page SEO Techniques" today.

10 Simple On Page SEO TechniquesSEO 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

10 Simple On Page SEO Techniques

By Vinod Suthersan → Wednesday, May 23, 2012
A Weekly tutorial edition to create an professional looking Blogger layout or site. Table of contents to create a professional Blogger layout from scratch. 

Design Professional Blogger
"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
2) Lesson 2: Structure of Blogger HTML coding/template
3) Lesson 3: Structure of Blogger CSS
4) Lesson 4: Creating a Simple Blogger Skeletal Template
5) Lesson 5: Five Customization of the Simple Blogger Template newly Created
6) Lesson 6: Understanding Blogger Specific Tags
7) Lesson 7: Create a 3 column Blogger Template from existing Simple Blogger Template
8) Lesson 8: Understanding Footer Layout and Organizing
9) Lesson 9: How to create 3 Column Footer for Blogger
10) Lesson 10: Menu & Logo For Blogger
11) Lesson 11: Understanding Blogger Comment System and Enabling Embedded Comment Form
12) Lesson 12: Restyling the Blogger header section to make it professional
13) Lesson 13: Restyling the Blogger Content Area Section to make it professional
14) Lesson 14: Restyling the Blogger Footer section to make it professional
15) Lesson 15: Bringing the Comment count, Author info and Article Time Stamp below Blogger title
16) Lesson 16: Enabling Threaded Comments For Blogger
17) Lesson 17: Styling Blogger elements with colors

Mission To Design A Professional Blogger Blog

By Vinod Suthersan → Monday, May 21, 2012
Tutorial explaining the possible styling of the text links along with some link hover effects using CSS and CSS3.

35 Link Styling And Link Hover Effects Using CSS
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.




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;}



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.

35 Link Styling And Link Hover Effects Using CSS

By Vinod Suthersan → Friday, May 18, 2012
Easy way to create a full width background image using only CSS.

Full Page Background Image Using CSS Only
Sometimes, it is common to see some websites where the contents are scrolling whereas the background is stationary. It looks nice to set the background image to something cool like a scenery or nature photography. The problem with a non-fixed background image is, the images needs to be scaled down or the images needs to be repeated in order to cover the entire length of your website's contents. But, with the CSS method am going to show will definitely save you from that problem.

What are we going to achieve?


The CSS code:


<style>
  img.background {
   /* Set rules to fill background */
   min-height: 100%;
   min-width: 1024px;
 
   /* Set up proportionate scaling */
   width: 100%;width:auto;
   height: auto;
 
   /* Set up positioning */
   position: fixed;
   top: 0;
   left: 0;
  }

  #content-wrapper { position: relative; width: 430px; margin: 30px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
</style>


HTML Markup:


<img class="background" src="http://background-image.jpg" />
<div id="content-wrapper">
Your content here
</div>


Explanation:

We set the background using the <img> tag of HTML. We also assign the tag with a class name as "background".
Now using CSS, the background image is set to fixed with the attribute position:fixed; top:0; and left:0;
Scaling of the width and height is made to auto with width set to 100% for IE fix.
Similarly, the min-height and min-width are set.

Note: don't forget to replace the code in blue(http://background-image.jpg) to your image URL.


Please share your thoughts on this tutorial via comments. Please don't forget to subscribe to my RSS feed from the below box.

Thanks,
~iTechColumn

Full Page Background Image Using CSS Only

By Vinod Suthersan → Wednesday, May 16, 2012
20+ free vertical ribbons for inspiration. This collection has PSD files, Icons, and other formats supported on Photoshop. 

20+ Free Vertical Ribbon Icons And PSDs
As a part of my webdesign experience online, I keep doing research on many design elements and tricks. Again these are some of my findings for your inspirations. I hope you guys would love these vertical ribbons and try them for free on your websites. 

Enjoy!!

20+ Free Vertical Ribbons Icons Download:



Vertical Pretty Banner


Vertical Ribbon 1

Little Black Ribbon


Vertical Ribbon 2


Reb Ribbon PSD


Vertical Ribbon 3

Pretty Little Red Ribbon


Vertical Ribbon 4

Vertical Ribbons PSD


Vertical Ribbon 5

Vertical Ribbon Header PSD


Vertical Ribbon 6

RGB Vertical Ribbons


Vertical Ribbon 8

535 Vertical Ribbons Collection (PSD File)


Vertical Ribbon 9

6 Different Stylish Vertical Ribbons Set


Vertical Ribbon 10

Vertical Ribbon - PSD Freebie


Vertical Ribbon 11

Ultimate Colored Vertical Ribbon (PSD)


Vertical Ribbon 12

Beautiful Ribbons in 3 Colors (PSD)


Vertical Ribbon 13

Hope you enjoyed downloading the collection. Thanks for stopping by. Don't forget to subscribe to my RSS feed using the below box. Thanks.

~iTechColumn

20+ Free Vertical Ribbon Icons And PSDs

By Vinod Suthersan → Tuesday, May 15, 2012
Fading a Div element or images using jQuery opacity animation trick. Awesome looking simple opacity effect on Div elements.

jQuery Hover Opacity AnimationIn one of the earlier articles, we had see how to achieve fade effects using CSS3. But, using CSS3 can lead to problems on quite older browsers and IEs which don't support them fully yet. The alternative would be to use JavaScripts/jQuery to achieve the fading opacity effects.

In this tutorial, jQuery does most of the magic to achieve the fading opacity effects on the div elements. The same effects can be applied to the images as well.

Let's go into the tutorial before wasting any more time. Check out the demo before you implement it on your website:

The HTML Markup:


<div id="forest">
<div class="opacity" id="forest-slot-1">
<h2>The Forest</h2>
THE CONTENT1 TO APPEAR
</div>

<div class="opacity" id="forest-slot-2">
<h2>The Jungle</h2>
THE CONTENT 2 TO APPEAR
</div>

<div class="opacity" id="forest-slot-3">
<h2>The Wildlife</h2>
THE CONTENT 3 TO APPEAR.
</div>

<div class="opacity" id="forest-slot-4">
<h2>The Vegetation</h2>
THE CONTENT 4 TO APPEAR
</div>
</div>



The CSS:


<style type="text/css">
  #forest  { font-size:12px; width:800px; height:540px; position:relative; background:url(http://backgroundimage.jpg) 0 bottom no-repeat; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
  .opacity { background:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:20px; }

  #forest-slot-1 { height:260px; position:absolute; top:20px; left:20px; width:340px; }
  #forest-slot-2 { height:100px; position:absolute; top:20px; right:20px; width:310px; }
  #forest-slot-3 { height:100px; position:absolute; top:180px; right:20px; width:310px; }
  #forest-slot-4 { height:100px; position:absolute; top:350px; left:80px; width:600px; }
</style>


The jQuery:


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
  <script type="text/javascript">
   $(document).ready(function() {
    //settings
    var opacity = 0.7, toOpacity = 0.9, duration = 250;
    //set opacity ASAP and events
    $('.opacity').css('opacity',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
     }, function() {
      $(this).fadeTo(duration,opacity);
     }
    );
   });
</script>



Explanation:

The JavaScript above initializes an initial opacity of 0.7 and a opacity on hover of 0.9!!!
When the mouse is hovered, the initial opacity of 0.7 is reset to 0.9 that's how you see the effects on the div elements. The JavaScript used is very simple, as the jQuery plugin does most of the trick here.
Rest all has been aligned and designed using CSS and little CSS3.

Hope you enjoyed trying this tutorial. Please share your thoughts on the same.

The credit for this tutorial goes to David. Thanks to David for teaching me this wonderful tutorial.

~iTechColumn

How to Fade Div Elements Using jQuery Opacity Animation?

By Vinod Suthersan → Monday, May 14, 2012
Web designing inspiration on tileable and seamless patterns for free download. 23 sets with over 50 patterns for your web designing quench.

50+ Tileable And Seamless Patterns Free Download      During my designing experience for this very website, I came across different types of seamless patterns. Though, I couldn't use all of the wonderfully designed textures and patterns, but thought I should let the web community know about these seamless patterns.

Seamless patterns
- These are a type of pattern which when used on a large scale would look similar even though they are being multiplied and applied many a times on the background.

Here are some of my findings on the Internet which I found interesting and cool while designing for your website. Hope you will enjoy this collection. 
There are 23 sets of more than 50 different tileable patterns for your free use. The download links are under the images. 

Grungy Seamless Mauve Brown Textures Part 1


Seamless Pattern

Grungy Seamless Mauve Brown Textures Part 2


Seamless Pattern 2

Ornament Seamless Pattern


Seamless Pattern 3

Paper Pattern Collection - Blue, Brown and Grey


Seamless Pattern 4

Seamless Two Bubbles Patterns


Seamless Pattern 5

Cloud Seamless Patterns 


Seamless Pattern 6

Handmade Seamless Paper Patterns


Seamless Pattern 7

Antique Engraved Seamless Pattern


Seamless Pattern 8

Grungy Floral Pattern


Seamless Pattern 9

Tileable Midnight Blue Patterns


Seamless Pattern 10

Tileable Music Grunge Patterns


Seamless Pattern 11

12 High Resolution Grunge Stripes


Seamless Pattern 12

Grungy Teal Tileable Patterns Collection


Seamless Pattern 13

Seamless Cloud Patterns


Seamless Pattern 14

Seamless Photoshop Grids


Seamless Pattern 15

Vector Seamless Patterns


Seamless Pattern 16

Back to School Patterns


Seamless Pattern 17

Different Seamless Patterns


Seamless Pattern 18

Seamless Geometric Vector Patterns


Seamless Pattern 19

New Seamless Pattern Background


Seamless Pattern 20

Seamless Flower Vector Patterns


Seamless Pattern 21

Change Color & Opacity Seamless Patterns


Seamless Pattern 22

Seamless Pixel Patterns


Seamless Pattern 23

Seamless Brown Swirls


Seamless Pattern 24

Enjoy downloading all of them and do let us know your experience when you design using these wonderful seamless patterns. Enjoy!!!!

~iTechColumn

50+ Tileable And Seamless Patterns Free Download

By Vinod Suthersan → Friday, May 11, 2012