How To Define Custom Variables In Blogger

By // No comments:
Today you are here to learn how to define or create custom variables in blogger.Have you ever heard of custom variables in blogger and what is its purpose?Don't worry you are now here to learn about those very clearly.Before I used a premium template to my blog,and i changed the template due to some reasons(Don't ask me why).When i'm using that template,i'm able to change my Navigation menu,border colors as well as fonts via Blogger template designer through Advanced option.I changed my templates colour and fonts without touching the template code.This makes our work easy right? :) .All these things are possible only when we define custom varibles in your template code and use them according to our purpose.Almost every free blogger template doesn't have any custom variable definations in turn we dont have access to Blogger template designer.Don't woory we can still able to do that.Now start our tutorial about how to create custom variable definations and how to use them.

What are Custom variables

Custom variables are those when defined allows us to use on various places like background,border,navigation etc and in turn which helps us to change our templates background colour,navigation menu font etc via Blogger template designer>Advanced option which modifies the values of custom variables.By using custom variables we don't need to modify any code.As you create many number of custom variables the more we can change colour and fonts on every part of the template.It saves our time. :)

How To create custom variable definations in blogger

Custom variables are created using CSS and added in header section of our template between <b:skin><![CDATA[ and ]]></b:skin> tags.There are two types of custom varibles.They are
1)Color Variable:
  <Variable name="body.background.color" description="Background color" type="color" default="#FFFFFF" value="#FF8C55"/>

The above variable is a color variable which is used to change the background color of the template.Let me explain each term.
  • The Green highlighted is the variable name.Here we can put any name you want but you are not allowed to use spaces instead i used '.' symbol for convinience.
  • The Orange highlighted is the description for the variable and tis description is going to appear in Blogger template designer.Here you can use space and give any description.
  • The Pink highlighted is the used to define the type of variable.As it is a color variable we are using the type as color.
  • The Red highlighted is used to assign a default value to the color variable which appears in the absense of custom color.
  • The yellow highlighted is to provide a selected custom value to that variable.
2)Font Varible:
<Variable name="main.font.type" description="Font Type" type="font" default="normal normal 12px Verdana, Geneva, sans-serif" value="normal normal 12px Verdana, Geneva, sans-serif"/>
The above variable is a font variable which allows to change font styles.
  • The Green highlighted is the variable name.Here we can put any name you want abd spaces are not allowed.
  • The Orange highlighted is the description for the variable which we can give any description and spaces are allowed.
  • The Pink highlighted is the used to define the type of variable.As it is a font variable we are using the type as font.
  • The Red highlighted is used to assign a default value to the font variable which appears in the absense of custom font.
  • The yellow highlighted is to provide a selected custom value to that font variable.
Note:Here name of the variable is used in template code and description is going to appear in Blogger template designer and Advanced tab.
Now these custom variables are inserted inside <head> section within <b:skin><![CDATA[ and ]]></b:skin> tags.Just paste the custom variable code below <b:skin><![CDATA[.

Grouping the custom variables

We can also allowed to group the similar or related custom variables into a single category,so that we can through our confusion and makes our work easy.We can group custom variables like this
<Group description="Main Color" selector="body">
  <Variable name="topnav.background.color" description="Top Navigation Color" type="color" default="#1A1A1A" value="#1A1A1A"/>
  <Variable name="midnav.background.color" description="Middle Navigation Color" type="color" default="#2E2E2E" value="#2E2E2E"/>
  <Variable name="content.background.color" description="Content Area Color" type="color" default="#FFFFFF" value="#FFFFFF"/>
  <Variable name="footer.background.color" description="Footer Area Color" type="color" default="#2E2E2E" value="#2E2E2E"/>
</Group>

Here we are wrapping the custom varibles which are related within <Group> and </Group> tags.Let me explain the terms in it
  • The Green highlighted is the description for the group.Here you can give any name andcan contain spaces.
  • The Pink highlighted is the selector for the group and only applicable to a particular kind of selector.Here we can use any kind of selector such as #header,#menu etc.
Note:Grouping of variables is an optonal step.It is just provided to makes things better.

Using The Custom variables

We now completed defining custom variables and its time to use in our template at desired locations.Let us take an example if i want to change my background colour of Menu then i just use like this
menu
{
background-color:$body.background.color;
}
In the above code i used the color variable with its name and used a $ infront of it for correct results.We must to add $ symbol every time we use custom variables name.
Similarily we can define any number of custom varibles according to purpose and use them as shown above. We can apply same method for fonts also like
post
{
font:$main.font.type;
}
.

Modification of values of custom variables through template designer.

Now you have defined and used the custom variables in your template.To modify the values of custom variables with toching any code.Follow the following steps.
  1. First move to Blogger dashboard and click on Template.
  2. Now click on customise button and click on Advanced tab and now you can see your custom variable descriptions like Background color and Font Type as we defined above ad you can change color and font directly from the Advanced tab.
  3. After completing all the modifications click on Apply to blog

How To Show/Hide Widgets On Specific Pages In Blogger

By // 2 comments:
There are some situations where you want show or hide certain widgets on particular pages such as home page,post pages,static pages,archive pages and even on particular posts.So many people have question such as "How to show/hide widgets on paricular pages".Because there are some widgets which are meant for home page and some for static pages or post pages.Let us take an example of adsense widget.A normal adsense publisher is allowed to show maximum of 3 ads(display ads) on each page,if you show more than that it may lead to ban.Also we are not allowed show adsense ads inside contact us,privacy policy page.So i'm here to explain you how to do it,so lets start jump into the topic.Follow the steps below.

Step 1:
Go to Blogger Dashboard>Layout and find a widget which you want to show or hide.After finding just give it a unique name which doesn't match any other widget name and click on save.Generally we add custom widgets using Html/Css widget and use with particular name to it.
Step 2:
Now click on Template>Edit html and check the expand widget in the template or html editor.
Step 3:
Next click ctrl+f and enter the name which you have given in step 1.Let us consider the widget name as Popular posts and click Enter until you find the code which is simailar to below code.
<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
      
    Widget code
  </b:includable> </b:widget>

Here Green highlighted name is the Title of widget which we are finding and the Red highlighted code is the widget code(bunch of code for widget) which is different for different widgets.In the above code id,title and type are also different for different widgets.Don't bother about widget code because we are not going to change it. :)
Step 4:
Now we need to show or hide widget on particular pages.We have to just use a conditional statement to do this job as shown below.
<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "Page_type"'>
Widget code
    </b:if>   </b:includable> </b:widget>
The above code is just a sample code with a conditional statement which is highlighted by Orange color.

Step 4:
Now i will give you the exact way(code) to show or hide widgets on different pages.

To Show Blogger Widget only in Homepage

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == data:blog.homepageUrl'>
Widget code
    </b:if>   </b:includable> </b:widget>

To Hide Blogger Widget only in Homepage

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != data:blog.homepageUrl'>
Widget code
    </b:if>   </b:includable> </b:widget>

To Show a Widget only in Post Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
Widget code
    </b:if>   </b:includable> </b:widget>

To Hide a Widget only in Post Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "item"'>
Widget code
    </b:if>   </b:includable> </b:widget>

To Show a Widget only in a Specific Page or post

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "URL of the page or post"'>
Widget code
    </b:if>   </b:includable> </b:widget>

Replace URL of the page or post(which is highlighted with Blue colour) with URL of the page or post where you want to show the widget.

To hide a Widget only in a specific Page or post

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "URL of the page or post"'>
Widget code
    </b:if>   </b:includable> </b:widget>

Replace URL of the page or post(which is highlighted with Blue colour) with URL of the page or post where you want to show the widget.

To Show a Widget only in Static Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "static_page"'>
Widget code
    </b:if>   </b:includable> </b:widget>

To Hide a Widget only in Static Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "static_page"'>
Widget code
    </b:if>   </b:includable> </b:widget>

To Show a Widget only in Archive Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "archive"'>
Widget code
    </b:if>   </b:includable> </b:widget>

To hide a Widget only in Archive Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "archive"'>
Widget code
    </b:if>   </b:includable> </b:widget>

After adding the code of conditional tags save your template. :)
You can also nest the conditional tags to show or hide widget on specific pages.
If you have any queries or getting some problems feel free to comment.

Vital SEO Tips For Web Design

By // 5 comments:
Search Engine Optimization and web design go hand in hand. SEO web design tips help our website to get found in Google and other major search engines. SEO tips for web design discuss SEO copywriting, link building strategies, maximizing social media outlets for SEO benefits, properly structuring and optimizing website content, ranking high in search engine results etc. Professional SEO and web design teams know which design elements enrich SEO performance and which ones hinder it. The elements that can enhance the SEO potential of a website are also known to them.

Link building


Substance and connection are like two building blocks of the building “internet”. Without substance there is nothing to connect to and without connection the substance will be discovered and seen much less than that with connection. Top quality substance discovers an open environment for connections. The more connections you get, the more significant your substance gets to be. Outer connections help your substance immensely and they act as an important element in how web indexes rank your substance. This is how link building for SEO works in internet. Buying linkages and taking alternate routes are not advisable in external link establishment.

Backlinks


One has to design a website or a blog of one’s own and then get involved in online groups. You may not need to sound one of the boasting types, but you definitely need to be the spokesman of your capabilities. You also have to specify your need for back links. Do give crisp, great substance continuously. Back links are actually the rewards for your hard work. They enhance your search engine rankings and help to produce immediate activity. People cannot help talking about and referring to extra ordinary content. Therefore, writing great substance is an effective way to get more visits, comments and back links.
SEO is the cornerstone of any successful website. Earlier web designers took SEO to be a separate part of the internet marketing strategy. But now web design has become an integral part of optimizing a website for the search engines. Knowing some basics of SEO is very much essential for web designers especially when setting up a web site or when updating an already existing website. These SEO tips help web designers to ensure that a website is quickly indexed and ranks well in search engines. Let us go through some SEO tips for web design.

Userfriendliness of the page for searchers


Looks are not everything. But a page should not look clumsy at the first place. A good site should use proper HTML structure with a focus on on-site SEO for indexing and search engine ranking. It is better not to use Flash. Javascript also should be avoided as far as possible. If it cannot be avoided by any means, give a HTML link of that page elsewhere on the site.

Appropriate use of keywords


Make an adequate, but intelligent use of key words. SEO keywords must appear at URL, title and header tags, and throughout the web content. Do not make excessive use of keywords.

Page redirects


Page redirects are necessary to get link authority and search ranking. This helps to avoid signals of duplicate content. The knowledge of the fundamental principles of SEO possibly safe guard a web designer from the possible mishaps that is common in the web world. It enriches the functioning and search engine ranking of websites as well.

Author Bio:

Shirley Burrill is a renowned writer, working in an essay writing company. She is completely recommending the USA writers original essays for the college students and also she is clarifying the student’s doubts about essay writing.

Stable365:Unlimited Web Hosting For $15 Per Year

By // 1 comment:
In present situation it is very hard to decide a best hosting provider.There are a lot of hosting providers who offer different plans but choosing right hosting provider is a big challenge.Today i'm going to reveal about a leading hosting company stable365,which is now offering unlimited web hosting as low as $15 per year.There is no doubt about this hosting company because the company has lots of customers.Really stable365 rocks.Lets go into further details of $15 per year plan.

What is stable365?


Stable365 is India's leading web hosting company with a great customer support.There support team will help you in any situations and solve your problem.Stable365.com has powerfull servers which are well maintained.So,there is no need to worry about security.They provide cpanel hosting at an affordable price.

stable365's $15 per year plan


Coming to the offer,stable365 is now providing unlimited web hosting at $15 per year.Yes what you heard is right $15 per year,quite interesting right?But this is a limited period offer.So grab your offer soon.This offer is applicable to customers only and this is a great oppurtunity for newbies.Following are the features of stable365's stable web hosting plan.
  • Unlimited Disk Space.
  • Unlimited Bandwidth.
  • Unlimited Emails.
  • Unlimited Databases.
  • Unlimited FTP accounts.
  • Unlimited Parked domains.
  • 24/7 customer support.
  • 99*.9% uptime guaranteed.

How To Avail This offer?


Inorder to avail this awesome offer you need to have a coupon code.But don't worry,i asked the stable365 team to offer a coupon code for my readers.But the coupon code which i'm going to give you is for limited number of users.So grab the offer soon.Anyway i'll inform you if we fill the limited users,so don't worry.This offer is available now.So here is your coupon code.
Coupon code:TRICKSLADDER
You must use the above coupon code while signing up to avail this offer otherwise you will not get this offer.

Why they are offering?


Stable365 is offering unlimited hosting at $15 per year because they recently reached 100+ premium clients in their hosting server.So in order to celebrate this achievement they are giving next 100 hosting accounts for $15 per year.So it is for limited number of users,grap this offer before the offer ends.So signup here.
If you availed this offer by using our coupon code,comment below so that i can know how many members are using.

If you like our work,share this with your friends and subscribe to our newsletter to get instant updates for free.

How To Make Your Post SEO Friendly

By // 2 comments:
I'm back after a long gap,today i will explain you the best ways to optimise a blog post.Before this going to our topic i will clarify the doubt which you have about the title,SEO friendly doesn't mean that you must write the post for robots.The post you are are writing must be first user friendly then SEO friendly,because users are our major source of traffic.By not wasting much time lets jump into the actual topic.Follow all the steps which is presented below,then you will definately improve your traffic by optimising your post.

Attractive title


Select a small and unique title for your post.The title must be attractive,so the title must create eagerness in the reader to read it.Small title are alwys user and SEO friendly.

Optimising links in the post


There are majorly two types of links which we use,they are external and internal links.External links are the links which points to other sites and internal links are the links which points to posts and pages of our blog.You must differentiate these two types of links from each other.First comming to external links,use must use rel="nofollow" in the anchor tag bacause if you link an external site from your blog without using nofollow relation then your PageRank(PR) juice is fed to that site indirectly.If you have a guest post from other site then use rel="Dofollow" only in author bio.Second comes internal links,it is very good to use internal links because it makes user to navigate from one post to other easily.Use rel="Dofollow" for this kind of links.By using rel="Dofollow" you can inject your pagerank to the other posts constantly.By internal linking of posts will improve your traffic.

Optimising images


Usage of images in posts is a good practice but dont use more number of images unnecessarly.This will increase your blog load time.Use alt attribute in image tag with a good name and use some keywords in it.Search engine always look for alt attribute in images because they don't understand what your image is about,so give a correct description to it in alt attribute.

Proofread your post


Always proofread your post before posting it.Use correct grammer with simple words,dont use complex words it makes difficult to user to understand.Check for speeling mistakes properly.Proofread your post for atleast 2 to 3 times before publishing it.

Usage of keywords


Before writing a post research for appropriate keywords for your post.Choose high density keywords,which means that the keywords which are searched the most.For example,in this post i'm using a keyword "SEO",which has high density.Don't use huge number of keywords in your post because it may be treated as spam by google.By using keywords you can get search engine traffic.You can use keyword generator tools for choosing a best keyword.Remember don't repeat the keywords more number of times.

Use header tags


Usage of header tags in posts has greate impact on blog SEO.Use <h3> or <h4> for headings in your post.It will both user and SEO friendly.

Final words


Remember one thing if you have unique post in your hand and by followed above tips then you be the king in search results because content is always king not anything else.Happy blogging.