Become our Fan on Facebook

Meta tags are very helpful for search engines to find your site. Actually they describe your site. You can add meta tags to blogger blogs too.

Here is step by step on how to add meta tags to blog spot blogs.

1. Login to your blogger account

2. Go to Blogger Dashboard – Design – and click Edit HTML

3. Search(Ctrl+F) for the following code in the header at the top:

<b:include data=‘blog’ name=‘all-head-content’ />

4. Now paste the following code right after the above line:

<meta content=‘YOUR BLOG DESCRIPTION HERE’ name=‘description’ /> <meta content=‘YOUR RELEVANT KEYWORDS HERE’ name=‘keywords’ /> <meta content=‘YOUR NAME HERE’ name=‘author’ /> <meta content=‘ALL’ name=‘ROBOTS’ /> <meta content=‘blogger’ name=‘generator’ />

5. Save the template and you are done

Become our Fan on Facebook

Facebook timeline is a great way of displaying your old photos, memorable posts and apps with your friends and family. This feature changes your entire Facebook Profile layout into a more attractive look. today I am sharing the tutorial on how to completely remove the timeline app from your profile and revert to older Facebook profile layout. Since this time-based story telling did receive mixed feedback therefore it would be really helpful for most of you to learn how to undo/delete this application.
UPDATE: Facebook Timeline has been officially activated on all old layouts. Know why you can't undo Facebook Timeline?

How To Disable Facebook Timeline Layout?

4. Click the Edit Settings link,

5. Then on the settings page towards bottom-left you will see many options under related links, Choose Delete App. Which will delete the timeline app.
6. Confirm to delete the app and Bingo you have successfully shifted back to the older Profile view.
Visit your profile to see it in its exact previous look and layout. Do let me know if you needed any help pals. Hope you find this helpful. :>

Become our Fan on Facebook

Today I am going to tell you how to change opacity (transparency) of the image and add image hover effect using CSS3 in Blogger.
See an example:
You will find that whenever you place your mouse pointer over the image, it will hover with full transparency and with some transition effect. Interesting! Now let us start with a small tutorial.
To add hover effect in your Blogger template, go to Design > Edit Html tab and backup your template first.
Now find  ]]></b:skin>  and just before it add the following styling codes:

.hovereffect img {
opacity:0.5;
filter:alpha(opacity=50);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.hovereffect:hover img {
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}

Save your template.
To use this effect you have to add class="hovereffect" to your images. For example, when you add an image, it generally looks like:

<a href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>

But, to add the hover effect, you need to add the class as shown below:

<a class="hovereffect" href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>

Let's have an explanation. To make the images opaque and mouseover effect, definitions .hovereffect and  .hovereffect: hover are added while property codes like  opacity, filter: alpha, -moz-opacity and -khtml-opacity  are used.
Property  “opacity”  is used for the browsers which supports  CSS3  standard (most of the modern browsers do).
While  “filter: alpha”  is for Internet Explorer,
“-moz-opacity” is for Firefox,  “-khtml-opacity”  is for Safari and Chrome are used for backward compatibilities.
Transition effects are also added so that while hovering and changing effects, it makes a delay. It's totally new CSS3 property.
“0.5” and “1.0” are used to tell the browsers the quantity of the opacity. You can change this.
Note;This tutorial is not only for Blogger, but can also be used in any blog platform which follows CSS rules, like Wordpress. Feel free to give your feedbacks.

Padding is used to clear the area around the content of an element within the border and is affected by the background color of the element.
While, margin clear the area around an element which is outside the border and do not have a background color.

So it is now clear how the CSS properties: margins and paddings work.

Now let’s have an explanation how these are used to style and customize the CSS and Blogger templates, taking margins as an example. We see in the picture that margins have been used to clear the area around the box. So (let) the CSS styling properties used are:

box {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

We can also write this as:

box {
margin: 10px;
}

This is because we are using 10 pixels for all the sides of the margin.

box {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 7px;
margin-left: 8px;
}

We can write this also as:

box {
margin: 5px 10px 7px 8px;
}

Notice the order of the values used. First comes the top margin, then the right margin, the bottom and then the left.

Let’s see another example:

box {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}

Notice that the top and the bottom margin have same values while the left and the right are same.
So:

box {
margin: 10px 5px;
}

The same thing happens when it comes to use the padding properties within CSS. Thus we got a general idea about how the margins and paddings are used to style CSS and Blogger templates.
For more references: W3 school CSS margin and W3 school CSS padding