make your blog highest rated: tricks

Better Commenting System And Form For Blogger, IntenseDebate.

Step 1.

go to IntenseDebate.com and click sign up, fill the form with a true mail, username, and password, then click signup.

you’ll need to verify your e-mail, so please go to the email account that you used to register, you’ll find a message from IntenseDebate.com, please check it, you’ll find an activation link, click on it, and you are done.

Step 2.

now go to your blogger account, and navigate to >> layout >> edit html >> and click Download Full Template, and save your template in a convenient place on your hard drive.

Step 3.

now go back to IntenseDebate.com and on the top right area click login, and log on to your account, after you are loged in your account, on the right side bar
you’ll see this title, Manage blogs/sitesbelow it please click Install IntenseDebate.
then you’ll be taken for a page asking you to type your blog url,
enter your blog url and click next step.

Step 4.

After clicking next step. in step 3, you’ll go to page separated for 2 parts. on the left hand, there is a sidebar contain 2 questions,

- How would you like to install IntenseDebate?
- Widget
- Template
please choose Template, ( check the box next to it )
- Which blog posts should have IntenseDebate comments enabled?
- Only on new posts
- On all blog posts
please choose On all blog posts ( check the box next to it )

and then scroll down till you see a button titled ” Browse ” click on it, and choose your blogger template that you downloaded in step 2, then click Upload file.

Step 5.

IntenseDebate.com will modify and generate your new template automatically , and on the next page, you’ll see your new template code, please see the next image.

Better Commenting System And Form For Blogger

as you see in the above image, please click on the box, then copy the new generated template code.
then go to your blogger account and once more again, navigate to >> layout >> edit html >>
but this time select all the current template code ( ctrl + A ), delete it, then paste ( replace ) your new template code, and click, Save Template now go to check any of your blog posts.

How To Use Google Custom Fonts For Blogger.

For years, Bloggers and web-designers were using those simple web fonts to style their blogs and templates. They didn’t had an option to change those fonts as there were only some fonts accepted world-wide as web fonts. It was impossible to use another fonts on web pages as they would appear in ten monitors in ten different styles ! Their appearance may change in respect of the change in the OS, softwares … etc of that computers. So web-designers were trapped under those countable fonts…

But now Google has launched their new service Google web fonts with the slogan – ‘Making the Web Beautiful!’. This service will allow you to use custom fonts on google font directory on our blog/ websites without any sign-up or anything else. As it’s from ‘Google’, It doesn’t have any complications and it’s also completely free for commercial and private use.,No restrictions held or no harsh laws. This could make your blog look more stylish and is applicable for blogger blogs too. Don’t get amazed, It’s True ! I’ll show you how to do it with blogger.

Step 1 : Back-up Your blogger template

It’s always the first step for any blogger tutorial. I’ll be using this step as the first step for all my tutorials on allblogtools. You should always take a back-up of your blogger template before testing any hacks on blogger.

For this, go to Design or layout -> Edit HTML -> Download full template

Step 2 : Select your Font

For this, Go to Google Font directory and select any one of those stylish font, which you want to use on your blog.

How To Use Google Custom Fonts For Blogger.

Step 3 : Get the Code for your Font

In this tutorial I’ll be using the Tangerine font, Which I liked the Most. For this just click on the name Tangerine and a new windows will open. Select The tab named ‘Get the code‘.

Step 4 : Add the Code to your Blogger template

Now you have to copy the Code they provide and you have to add the code to your blogger template, just after

<head>

tag of your blogger template.

The code may look something like;-

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.

Now Copy the code and paste it just after

<head>

. It should be the first code after the

<head>

section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.
Please remember to add the forward slash before the end tag. and now please click Save Template

now the code required for Google web font has been added to your blog. Now you have to can use google fonts in your blog by applying it on any widget tags.

Step 5 : Add the CSS code for Font to your Blog.

Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it.

If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-

<div style="font-family: 'FontName', serif;">Your text</div>

in the above code change

FontName : to the font name that you chosen it from google.

Your text : to any text you want.

If you want the font to appear for your

Blog titile
Post title
post body
sidebar fonts

you have to add the CSS code for it. Don’t worry, It’s very very easy.

Here I’ll tell you How you can change your post title. For this you have to search for the title css code

.post h3

.post-title h3

This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.

font-family: 'Your Font Name';

The code should look something like ;-

.post h3 {
font-family: 'Your Font Name';
}

Here I had added the css code for Tangerine. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.

Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.

Title : h1
Post title : .post h3 or .post-title
Post font : .post-body
Sidebar : .sidebar h2

the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font,
in the above table, you can see that the tag to edit for the post font, is .post-body
so you have to search for .post-body in your template, and below it, add the following line.

font-family: 'google Font Name';

the final code should looks like

The code should look something like ;-

.post-body {
font-family: 'Your Font Name';
}

These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.

What is the QueryLoader (LazyLoad).

QueryLoader is a blank black ( can be changed ) screen that covers your blog till all content loaded, which means that your visitors won’t see the actual loading of your blog, instead of that, they will see a loading page with a bar and percentage of the overall blog loading, it’s build using j-query and css. easy to apply to your blogger blog, and customize able.

Step 1, adding the jave files.

In this step we will add a scripts files to your blogger template.
Please navigate to your dashboard >> Design >> edit html , and please find the following code,

</head>

And exactly before it add the following code

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

Step 2, adding the jave Codes.

And on the same page, please find the following code,

</body>

And before it add the next code,

<script>
 QueryLoader.selectorPreload = &quot;body&quot;;
 QueryLoader.init();
</script>

Step 3, adding the Css Codes.

now on the same page too, find this code,

]]></b:skin>

And before it , add this code,

.QOverlay {
 background-color: #000000;
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC;
 height: 1px;
}

.QAmt {
 color:#FF530D;
 font-size:50px;
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px;
}

now Click Save Template
And your blog now have the script installed and ready, click preview or view your blog to see the script in action.

Additional Step, Customize the colors.

Now this is an extra step and you can do it or not, as you like,

If you want to change the colors, you have to change values in the css code, “step 3″
Please look at the following image to know what what you should change to get your own style.

If you wondering about how to get your own color codes, i think you should have a look at our amazing color codes tool here.

make your blog highest rated

Tuesday, 8 March 2011

Better Commenting System And Form For Blogger, IntenseDebate.

Better Commenting System And Form For Blogger, IntenseDebate.

How To Use Google Custom Fonts For Blogger.

How To Use Google Custom Fonts For Blogger.

Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.

Blog Archive

About Me