Blog Tricks

Remove quick edit and wrench icons on Blogger

2010-04-12T07:36:00.000-07:00

Remove quick edit and wrench icons on Blogger

You might have seen the Pencil , Screwdriver and Spanner links on blogger. It seems like these icons appear only when you are logged in to your blog. But if you take a look at your Blog's Source From your Browser's View source option, then you will find that there are plenty of quick edit links on your blog even if you are not logged in(Do a Find for blogger.com ). These are the quick edit links and these will be hidden using CSS if you are not logged into your blogger account(but still be present in your blog as hidden links).

What is the use in Removing these Links?

You will be able to reduce the number of external links on your Blog and make it more Search Engine Friendly
Do u loose anything if i remove these Links ?

You will no longer see the Quick Edit pencil or wrench links on your blog. If you want to Edit a Gadget, you will have to go to the Layout > Page Elements Page.
How Do u remove the Wrench and Quick Edit?

1. Go to Layout > Page Elements and Click on the Edit Button on the Blog Posts Gadget. Uncheck the Show Quick Editing Option and Save the Settings

2. Go to Layout > Edit HTML and Click the Check box to Expand your Widget Templates
Replace all Occurrences of

<b:include name='quickedit'/>

with

3. Save The Template and look at your Page Source Once again. You will find that those links are no longer there.

4 The Wrench Link of the Followers Gadget Cannot be removed. If you really want to remove that, then remove the Followers Gadget and Add it as a HTML/ JavaScript Gadget with the Code from Google Friend Connect.
How do i get the Quick Edit and Wrenches back on my blog?

If you ever feel the need to get back these buttons, then just follow the reverse process.

1. Go to Layout > Page Elements and Click on the Edit Button on the Blog Posts Gadget. Check the Show Quick Editing Option and Save the Settings

2. Go to Layout > Edit HTML and Click the Check box to Expand your Widget Templates
Replace all Occurrences of

with

<b:include name='quickedit'/>

and Save the Template and it will be back to normal.

Blogger Actually provides an Option in Settings > Basic to Hide the Quick Edit Links. But this doesn't actually remove the Quick Edit links. They are just made invisible

Design Template Using Blogger Templates Designer

2010-03-18T06:20:00.000-07:00

I surprised by the new and great tool that added by blogger. Blogger has launched Blogger Template Designer to Blogger in Draft, the experimental playground where users can try out Blogger’s latest features. The Template Designer brings a new level of customization to your blog.

This tool allow you to use the new 15 blogger templates at your blog and customize it’s:

Colors,
Background,
Fonts,
Use hundreds of images as patterns,
Change layout,
Adjust width,
Customize Links,
Footer And Tabs.

Watch This Amazing Video:

How to Use it:
At First Before Starting Using it, I advice you to choose Minimma Template By Going to Layout and Click on Pick New Template, as it's simple and you can be customized Easy, and don't Use Templates that you downloaded from Templates Sites, as there will be a lot of options Disabled
To use it, you have to go to Blogger Draft because it's only avalaible at Blogger Draft, You can't find it at the normal Blogger
Now from the Blogger Draft Dashboard go to Layout and you Will find this button (Click on the Image to Enlarge it):

Then Click on Template Designer, you will go to page seprated into 2 parts:

Top --> Customization Frame,
Bottom --> Preview Frame

The important part is Customization Frame in which you can customize the following:

Templates,
Backgrounds,
Layout,
Advanced Settings

Start Customization:

Customize The Template:
You should start customization By choosing your template that found under 4 classifications:

Simple,
Picture Window,
Awesome Inc,
Watermark

You will find under everyone a number of styles in which you can choose the required style (Click on the Image to Enlarge it):

Customize the Background:

After Customizing the Template, Click on the Background tab on the left.
In Background Section you can change your main background Image or Color and customize the template elements.
Blogger has added hundreds of backgrounds that suite all the topics, niches and users
There's more than 20 Categories in the Background Image.
You can access it by clicking on Background Image in the Background Section. This window will appear to you:

Customize the Layout:

This is the most important Section in Customizing the Template, as you can customize the layout of your template and choose how many columns in the Body and in the Footer, You can also adjust the size of the body, sidebars, footer, and everything in your template.
There's 3 Sections in the Layout tab:

Body Layout,
Footer Layout,
Adjust Size

I will start explaining the function of each section:

Body Layout:

You can customize body layout as the number of columns 1, 2, 3, or 4 Columns and choose the sidebar position Right or Left as the following:

Footer Layout:

You can customize the footer layout as the number of columns up to 3 Columns as the following:

Adjust Size:

You can customize and adjust the size of the Entrie Blog (Post Body), Size of Left and Right Sidebars

Advanced Customization:

From Here you can customize everything in your blog and in each element you customize its fonts and colors and from this elemnets:

Page Text: This is the Normal Text in your Page
Background: There's 2 Sections, the Outer Background that customize the outer background of your template, and the Footer Background which customize the Footer Background Which found at the bottom of the Template
Links: There's 3 Sections, the Link Color, the Visited Link Color, the Hover Color that customize the color of the link when you pass on it (put the mouse on it)
Blog Title: Customize the Title of your Blog from Title Font, Title Color, Description Color
Tabs Text: This is the tabs element and you can customize it's Text Font, Text Color, Selected Color
Tabs Background: The Background of the Tabs which you customized in the previous section
Date Header: Date of the Published Posts, you can customize it's Font and Text Color
Post: You can Change the Title Font, Background Color of the Posts, and the Border Color which surrounds every post
Post Footer: This is the Footer of the post, which contains (Author, Time, Comments, Backlinks, EMAIL Post, Labels) and from here you can customize the Text color in the Post Footer
Gadgets: It's the Gadgets that found in the sidebars, From here you can customize the Title Font, Title Color, Alternate Color
Footer: You will change the Text Color in the Footer, and change the Gadget Title Color
Footer Links: You can customize the Link Colors in the Footer
Add CSS: You can add Custom CSS Style to the Template, You can know more about this from Google Help Click HERE

At Last:
At Last After Customizing Everything in your Template You have to save this change or apply it to your Blog, You will find Orange Button with text "Apply to Blog", Click on It and everything will be saved. as the following (Click on the Image to Enlarge it):

Hope it was a Good TOPIC :)
If you Liked it Share it :)

Automatic Add AdSense at the middle of the posts

2010-03-13T01:02:00.000-08:00

It's from the ways that makes people click on your AdSense Block.
That method required to add comment in every post to display post. This cannot be done if you have hundreds of posts already up on your blog. So i am posting this method of displaying ads in centre of the post automatically. Now to this method the only thing that changes from the last method is the code.

Go to Dashboard >> Layout >> Edit HTML then check on "Expand Widgets Template"
Then find the following code:

<data:post.body/>

Then Replace it by the following:

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">

</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementByIdundefined"aim1<data:post.id/>");
var obj1=document.getElementByIdundefined"aim2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substrundefined0,s.length/2);
var r=t.lastIndexOfundefined" ");
ifundefinedr>0) {obj0.innerHTML=s.substrundefined0,r);obj1.innerHTML=s.substrundefinedr+1);}
</script>

Don't Forget to change the Your AdSense Code with the AdSense code given by Google AdSense

Important for bloggers

2010-03-10T02:39:00.000-08:00

Definition Of A Blog:

It is a great source of constantly updated info. A weblog, web log or simply a blog: it is a web application which contains periodic time-stamped posts on a common web page. Weblog is a portmanteau of 'web' and 'log.' The term blog came into common use as a way of avoiding confusion with the term server log."

Let Your Blog Make A Splash:

You can choose a blogging service and set up the account, there are standard blog templates.

But this template will suffer from a cookie-cutter design, and if you don't personalize it your blog may become lost.

To be noticed your blog needs to make a splash - as there are more than ten million blogs out there. So what we'll concentrate on here is working with some design elements that can help you add more zing to your blog. At the end of the tutorial you'll find a list of free blog resources

Give The Top Logo/Banner On Your Blog A Personal Touch:

Whatever blogging software or service you decide to use, all of them will present you with a generic graphic for the top of your blog pages. This is the single most important element that you need to change.

What you will need is your own image, and a font to create a simple title, tag line or logo. If you are not good at drawing or feel design-challenged, then go straight to one of the online stock photo services and splurge. There are also lots of free sites (see our free stock photos page).

In just a 15 minutes only you can find a nice illustration from any site, and it cost just $3.

Then create your fictitious blog name.

To customize your banner, obtain the exact dimensions of your template banner from your blogging service and use the same dimensions to build a replacement. By using the graphic Photoshop for example, and then add some text using your own fonts, see our free fonts page for a list of great sites that offer them.

If you're not sure how to construct a banner using Photoshop layers and the type tools, have a peak at my website template tutorial, where you'll find all of this explained in detail.

When posting graphics and photos on your blog pages try adding a simple border to them by using Photoshop's stroke command. Not only will this help your photos to pop out from the page, but it will also add another design element for people to associate from your site.

To create your own border, with your photo open

Go to the Select menu

Choose Select All.

The Edit > Stroke command.

Photoshop will prompt you with a menu asking you to select a pixel width and a color.

To create a double color border, repeat these commands, but use a different color and width for the second stroke. This is one more nice touch that you can call your own.

Another important element in your design will be the overall color scheme of your blog.

If you're new to design this can be a real challenge, as it takes some training to understand how colors work together. But there's help sites. offers a great color scheme generator that will make selecting a color palette for your blog pages effortless.

These sites provide you with a color wheel to experiment with. Each time you select a new color on the wheel, complementary colors for your page are suggested. This allows you to choose from many different color schemes before you commit to one for your blog. Make sure to use the HELP where you'll find some valuable tips on how to generate the optimal color palette.

Build A Favicon And They Will Bookmark It: A Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser, and they are easy to make. Read through my favicon tutorial and you'll have one built and online in no time. And it is really nice touch

Pi Cubed

2010-03-09T07:39:00.000-08:00

Pi Cubed is a visual math application for the iPhone / iPod touch that lets you perform calculations as you would on a piece of paper. By using an animated, touch-based interface, even the most complex mathematical expressions can be entered and instantly evaluated.

These expressions are typeset as they would be in a textbook or on a blackboard. Calculations are displayed with up to 34 digits of decimal precision. Additionally, a library of over 150 equations ships with the application.

Equations can be easily edited onscreen using simple touch interactions. All editing and entry operations are animated through heavy use of the Core Animation framework. For fine editing or inspection, pinch-zooming gestures can be used to magnify the equations. Equations can be scrolled around using swipes of a finger.

Any calculation or equation can be stored to an internal database for later retrieval or editing. In addition, a built-in library of over 150 equations is provided covering fields as varied as finance, geometry, and fluid mechanics.

As an aid, tapping on a variable in an equation will display a text description of that variable. This is handy when dealing with complex engineering calculations or as an educational aid.

Equations that are entered or loaded from the library can be exported via email in plain text, LaTeX, or PDF formats for use in research papers or other documents. Equations expressed in terms of x, y, and z can be exported to Grafly for plotting. Additionally, equations can be copied to the clipboard and pasted in other applications on the device.

A diverse range of mathematical operations are supported. These include:

Numbers, including basic constants
Arithmetic operations (addition, subtraction, division, multiplication)
Parentheses and brackets
Logarithms (base 10), natural logarithms, and logarithms with arbitrary bases
Square roots, and roots with arbitrary powers
Exponentials
Trigonometry operations (sine, cosine, tangent, hyperbolic operations, inverse operations)
The error function
Factorials

If you want to try out the capabilities of the application before you purchase, Pi Cubed Lite is available on the App Store for free. The Lite version has many of the calculation capabilities of Pi Cubed, but lacks the built-in and user-defined equation libraries, can't export equations via email or for plotting, and can only store up to five recent calculations.

Pi Cubed uses two of the high-quality icons from the set published by Glyphish.

i(Pod) Touch the Math

2010-03-08T17:32:00.000-08:00

i(Pod) Touch the Math:

The iPod touch has a huge amount of potential in the classroom to revolutionize the way students learn and teachers teach. This exhibit is a living document to share in this vision and offer ways that the classroom teacher can use the iPod touch creatively and easily with their students.
This exhibit is a collection of stories by some educators who have joined together to share in this vision. Using the techniques here, they have aimed to model these techniques to show what is possible. Please enjoy the exhibit and put it to good use. Together we can make mobile learning come to life and change the world of education one pocket and set of earbuds at a time!

With the next posts I will explain more of this important uses

Setup your mobile blog design

2010-03-08T15:15:00.000-08:00

Setup your mobile blog design:

Log into your control panel and search for “wapple” in the Add New plugin screen.

Install “Wapple Architect Mobile Plugin for WordPress”: (The Wapple mobile plugin uses web services in order to provide such a great service, but in order to do this, you’ll need a dev key to authenticate who you are. It’s free, so head over to http://wapple.net/register/plugins-signup.htm, fill out the form and a dev key should land in your inbox within 5 minutes)

If you’ve been a bit eager and already activated the plugin, you would have seen an error message telling you that you need to enter your dev key. In the basic settings page of the Architect settings area, the top option is for your dev key – just copy and paste it into this option.

Upload your blog header logo to your mobile version

Select the “Basic settings” page and then set “Use mobile header image” to “Yes”.

Browse for your logo in the “Mobile Site Header Image” option and save it.

One thing to note here though is that the logo gets dynamically resized on the fly to fit any handset, no matter what the resolution, so it’ll fit an iPhone just as well as an old Nokia 6230. The bigger the better here as well – 1000×200 pixels is pretty good as you want to retain clarity when the image is resized.

There are some options available in the Wapple Architect that are set to be on or off by default. But obviously not every blog is the same so you’ll need to turn a few things on and a few things off so the options match.

The Wapple Architect plugin carries a number of styles from web to mobile and in this case, most colours were carried through, however, there were a few little changes that needed to be made

The world is moving to HTML5.

2010-03-08T14:07:00.000-08:00

There’s been a lot of discussion since the announcement of the Apple iPad over Apple’s decision to not include Flash support on the device

Apple hasn’t officially explained its decision – but it’s clear that the company wants to marginalize Flash and push a standards-based Web.

They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash.

No one will be using Flash, he says. The world is moving to HTML5.

Most technology analysts see the lack of Flash support on the iPad as a liability.
But most tech analysts thought the same thing about Apple’s decision to drop the disk drive from the iMac.
And – while Flash is notoriously absent from the iPhone – millions of users don’t seem to care.
Daring Fireballs’ John Gruber responded to the iPad Flash discussion by pointing out the logical direction ahead for developers and content publishers:

Many people will bemoan the lack of support for Adobe’s interactive software, Flash. It wasn’t mentioned, but eagle-eyed viewers would have seen the missing plugin icon on the New York Times site during yesterday’s demo, and given that Apple clearly hates Flash as both a non-open web “standard” and as a buggy, CPU-hungry piece of code, it’s unlikely it will ever be added, unless Apple decides it wants to cut the battery life down to two hours.

Who needs Flash, anyway? YouTube and Vimeo have both switched to H.264 for video streaming (in Chrome and Safari, at least — Firefox doesn’t support it), and the rest of the world of Flash is painful to use.

In fact, we think the lack of Flash in the iPad will be the thing that finally kills Flash itself. If the iPad is as popular as the iPhone and iPod Touch, Flash-capable browsers will eventually be in the minority.

iPad and its support for flash

2010-03-08T12:12:00.000-08:00

Building simple widgets image slider using HTML/CSS/Javascript (iPad and its support for flash):
And leave more interactive applications for flash. The html based image slider have its benefits with SEO and also degrade gracefully for those w/out js.

1^st step (Wireframe – HTML): Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls.

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
2^nd step: (Styling – CSS):

/*--Main Container--*/
.main_view {
   float: left;
   position: relative;
}
/*--Window/Masking Styles--*/
.window {
   height:286px;   width: 790px;
   overflow: hidden; /*--Hides anything outside of the set width/height--*/
   position: relative;
}
.image_reel {
   position: absolute;
   top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
   position: absolute;
   bottom: 40px; right: -7px;
   width: 178px; height:47px;
   z-index: 100; /*--Assures the paging stays on the top layer--*/
   text-align: center;
   line-height: 40px;
   background: urlundefinedpaging_bg2.png) no-repeat;
   display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
   padding: 5px;
   text-decoration: none;
   color: #fff;
}
.paging a.active {
   font-weight: bold;
   background: #920000;
   border: 1px solid #610000;
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

3^rd step (Setting up jQuery): For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Then

Directly after the line where you called your jQuery, start a new

Logo Pack

2010-03-08T08:14:00.000-08:00

Free Logo Pack 2 designed in Adobe Fireworks
In the fig I put a set of free logos that you can use for your projects.

Just download the source fireworks file so you can understand how to do them
Click here to download the file > free logo pack 2 (214)
The fonts have been converted to paths, you can find good free fonts at http://www.dafont.com

Make a Featured Post Carousel for WordPress

2010-03-08T06:15:00.000-08:00

Make a Featured Post Carousel for WordPress

It is important for blogs to show certain posts at the top of the page. I’m going to write today about how to implement this in WordPress. We’re going to be modifying the theme that comes prepackaged in WordPress to be able to feature posts at the top of the page. This tutorial has only been tested on WordPress 2.5.x but it should work on the 2.3.x series as well. We’re going to assume you’re using 2.5.x or above. By the end of the tutorial, you’ll have something like this:

1^st Step: Creating a default image such as this one (OR any other suitable with your theme:

2^nd step: Go to your themes folder of your WordPress installation (wp-content/themes/) and make a backup of the "default" folder. (The backup is in case you want to revert back to the original, unmodified theme. Keep it sweet and simple.)

3^rd step: Open up your preferred image editor and create a 233×130px rectangle with 10px radius rounded corners.

4^th step: Add the PHP code: for the code, open the “header.php” File inside the “default” folder. At the end of the file, you will see a div block and an hr tag like this:

Between the ending div tag and the hr, insert the following code:

<div id="featured">
<ul id="carousel">
<?php
$featured_posts = get_postsundefined'numberposts=3&category=1');
foreachundefined $featured_posts as $post ) {
$custom_image = get_post_custom_valuesundefined'featured_image', $post->ID);
$image = $custom_image[0] ? $custom_image[0] : get_bloginfoundefined"template_directory")."/images/no-featured-image.jpg";
printfundefined'<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalinkundefined$post->ID), $post->post_title, $image, $post->post_title);
}
?>
</ul>
<div class="clear"></div>
</div>

This code will output three images in an unordered list. Each image is a link to a featured post. We’ll talk about how to configure the code after we add the CSS

5^thstep: Open up the “style.css” file and put the following code below at the end of the file. All this does is float the list elements to the left and space them out evenly

/* Featured Post Carousel */
featured {
padding: 10px 10px 0 20px;
}
carousel {
list-style: none;
margin: 0;
padding: 0;
}
carousel li {
float: left;
padding: 0;
margin-right: 10px;
}

What is the meaning of code?

Inside the container div (id=”featured”) we have an unordered list and some PHP code to generate list elements.

First line:

$featured_posts = get_postsundefined'numberposts=3&category=<strong>1</strong>');

The first line shown above retrieves the post information using the get_posts() function and assigns the post data to the $featured_posts variable. The get_posts() function excepts a single parameter in the form of a query string similar to what you might see at the end of a URL (sans the initial question mark). The first parameter is “numberposts” which I’ve set to 3 for this tutorial. This parameter sets how many featured posts we will be showing.

The second parameter is “category” which I’ve set to 1. The value of the “category” parameter should be the ID of the category you are using for your featured posts.

You can find the ID of a category by going to the category management page and hovering your mouse over a category title. The status bar will show a link. The last number is the category ID.

Second line:
$custom_image = get_post_custom_valuesundefined'featured_image', $post->ID);

The second line is a foreach loop that will loop through the posts we’ve retrieved using the get_posts() function. The first line inside the foreach loop retrieves the URL of the image using the get_post_custom_values() function and stores the URL in the $custom_image variable.

The first parameter specifies the key of the custom value we’re using, “featured_image”.

The second parameter specifies what post we’re getting the value from.

The third line:

$image = $custom_image[0] ? $custom_image[0] : get_bloginfoundefined"template_directory")."/images/no-featured-image.jpg";

In the third line I do a quick check to see if an image was indeed specified. If no image was specified, we assign the $image variable the URL of the default image. If an image was specified, we use that.

The last line:

printfundefined'<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalinkundefined$post->ID), $post->post_title, $image, $post->post_title);

In the last line we actually output the list elements. Each element is an image that links to the featured post.

6^th step: Now, whenever you want to feature a post, assign it to the featured category and create a custom value with a key of “featured_image” and a value of the image URL. Images should be 233×130px.

How to Make Money from Blogger ( I )

2010-03-03T03:50:00.001-08:00

Making money from our blogs is an important goal for a lot of bloggers,
most of bloggers make blogs to make money not to help people,
but that's wrong just make your purpose helping people and you will get money from people :)
and most of us invested a lot of time and may so money too,
but usually we disappoint with the results.

And Some bloggers asked me if there's easy ways to make money, fast ways,
and here I posted what I know about making money from blogger and I will post more ways
Hope you make a lot of money

Advertising Programs

This is one of the most used ways to make money because it’s too easy to add it to your blog, and the most famous advertising Program is Google Adsense.
But for all blogger newbies don't use it in the start of the blog - i t will not be important
Use it after making traffic and attracting people
This programs is easy because you don’t have to do any thing but adding the program code to your blog, and then work on placement and traffic.
Advertising Programs:
- Chitika
- AdSense
- Adbrite

Affiliate Marketing

This programs is working in many ways,they provide you a banner that you can place on your blog, so your visitors can visit it, and your can earn if your visitors sign up for a website or Buy something for example , this programs give you a commission from 5% Up to 75% per lead.
Click Bank is the best Affiliate Marketing company as it gives up to 75%
and you can use Amazon Associates too in blogger but it's up to 15%

Affiliate Marketing companies
- Amazon Associates
- Commission Junction
- LinkShare
- Click Bank

Place a Donation Link or Button on Your Blog

and this way depends on your blog visitors, and how your blog useful for the visitors,
it won’t make you get alot of money but it may help you getting few dollars,

Sell Products On your blog

You can sell related products on your blog if you have got good amount of traffic, and this way is great when your concentrate on one niche.
you can sell e-books, soft wares, download able products,
and more,
you may sell your own products or other people products.

Sell Advertising Space On Your Blog.

This is a great way for making money and guaranteed way, because it’s easy and one step way, just try to sell your spaces and relax for next 30 days.
You may Use to have a good chance to sell your spaces like:
- BuySellAds.com

How to work with Google Analytics

2010-03-02T11:06:00.001-08:00

In this post I will show you How to work with Google Analytics, At first we should know that Google Analytics is an online program from Google that helps site owners to see everything happening in their sites, as it give them traffic sources ( from where visitors come to your site ), number of views, number of visitors, number of unique visitors, the average time on your site ( the time that visitors spend on your time ), popular keywords or the keywords that used in search queries, and a lot of more helpful and fantastic options in it

Really it will help you as you should know the best traffic source and start to pay attention to it and the traffic source with less people, you should leave it away and so on….
Now I think at first you have to register at Google Analytics ...

First go to Google Analytics Official Website ( new window ) then write your e-mail and password as shown in the following picture:

Now Click on Sign up button to register at Google Analytics as the following:

Now write your SITE URL and write your NAME then Click on Continue as the following:

After writing the information, it will give you a meta tag code copy it to clipboard as the following:

Then go to Dashboard -> Layout -> Edit HTML and paste your meta tag code before </body> as the shown image:

At Last, after verifying your Analytics at your blog it will give you OK Status with green right mark as the following on your Analytics page as the following:

Now after accessing your Analytics, click on View Report in the previous picture and you will see the Dashboard of your Analytics:

Visitors: this page is responsible for viewing everything about visitors, it gives you the number of visitors that visited your site and the average time on site, it give you also the number of page views and you can click on Map overall at the right of this page, it gives you also number of new visits.

Traffic Sources: this page gives you full detailed tables about from where people come to your site. in other words the traffic source to your site. it gives you how many people came from search engines, from referral (it give the link of the most referrals to pay attention to it) , Direct traffic (visitors that open your site directly by writing your URL in the address bar).

Content: this page gives you the number of page views and it gives you which content or which post they have viewed

Graph with the number of visits

Site Usage: number of visits, page views, average time on site and so on ..

Graph with the number of visitors not visits ..

That's a useful map to know from where people come all over the world you can click on view report to see full report

Thanks to all Readers and Visitors and I hope it was a good Post :)

How to Increase Alexa Traffic Rank of your Blog

2010-02-28T05:15:00.001-08:00

In this post I will show you How to Increase Alexa Traffic rank of your Site as a lot of people asked me how to increase it, I will post some ways to Increase your traffic rank.
Some People may Ask me what's Alexa traffic rank? I should say that Alexa traffic rank measures the number of visitors every 3 - 4 days and give you a rank between 20 million sites.
The Alexa Traffic Rank will tell you how popular the site is. Do lots of people visit this site or is it obscure?

Here's some ways that may increase your Alexa Traffic rank and I will write more Topics about Alexa traffic rank and you may also see ( How to improve your SEO ) But now Let's start My Suggestions to increase your Traffic rank ..

Installing Alexa Toolbar, the first one here should be the most famous advice when it comes to Alexa traffic rank increasing is installing Alexa toolbar.and when you browse your blog every day. Ask your friends to do the same. Every time you browse your blog, Alexa Toolbar will communicate your visits to the Alexa Ranking Engine, which will update your ranking.actually Alexa depending on the toolbar to arrange the rankings

Set you Blog as the Home Page for your browser, and try to do it with all your friends and every computer you can control.i mean if you work at big company and there is big number of computers there. if you can set all browsers home page to you blog URL, that’s going to be great.

Increase traffic to your blog That is what Alexa is all about. and when you visit any blog or forum with related content, leave your link there as comment or reply.

Put up an Alexa rank widget on your website. I did this a few days ago and receive a fair amount of clicks every day. According to some, each click counts as a visit even if the toolbar is not used by the visitor.

Write or Blog about Alexa. Webmaster and Blogger love to hear about ways to increase their Alexa rank. They’ll link to you and send you targeted traffic (i.e. visitors with the toolbar already installed). This gradually has effects on your Alexa ranking.

Encourage others to use the Alexa toolbar. This includes friends, fellow webmasters as well as site visitors/blog readers. Be sure to link to Alexa’s full explanation of their toolbar and tracking system so your readers know what installing the toolbar or extension entails.

How to Add Chat Box ( Cbox ) to your Blog

2010-02-28T04:21:00.001-08:00

In this post I will show you and learn you how to add Chat box from Cbox to your blog
Whatever was your blog, I think that you need this Chat box to connect people together.
I think that you saw this Box Before in any Blogs, This box is presented from cbox.ws and we should thank them for their help .. Thanks Cbox :D
This box at last will appear as the following ( you can change its color ) :

Now follow my steps:

Just go to this Site ( Cbox "new window")

Click on Sign Up , Write the form ( your name, email, etc.. ) you can choose the style you want from 12 different styles, check on " I have read and do agree .. " then click on Create my Box as the following:

Now After registering, It will give you Message that your Cbox has been created, Then write your e-mail and password as the following:

After writing your e-mail and password, It will redirects you to Control Panel Page, in this page Click on Publish to get your code as the following:

Here, Copy the following code to Clipboard as the following:

At last go to Dashboard -> Layout, then Click on Add a Gadget in the required place ( I prefer Sidebar ) then choose HTML/JavaScript then Paste your Cbox Code to the content of the Gadget as the following:

How to Improve your SEO ( II )

2010-02-27T03:18:00.001-08:00

In this Post I will continue my First post about SEO ( How to improve your SEO ( I ) ), I will show you some Tips for blogger newbies that will help you a lot to increase search ranking and improve the SEO of your blog

It's really very important for blog owners to improve their SEO.

Choose Relevant Subheading to Maximize SEO:

Subheading are important as it improves the appearance of the web page. Subheading make the page easier to read by organizing the information into small and easier blocks of information. Also Subheading help search engine spiders understand web page content and recognize the most important information on the page.

Readability:

Web page content should be written in a clear concise and understandable format. Content wording should be kept simple enough to be understood. Grammer should be excellent as it helps search engine spiders to find the required words

Writing Web Content that Improves SEO:

They are many things the admin can do to create content that improves SEO, Read the following Tips to consider:

Content length, Write articles that are between 400-800 words in length. This is a good lenght for keeping the attention of readers and is long enough to be picked up by search engine spiders that tend to ignore pages with less than 200 words

Content Updating, For Some organiztions, content is hard to Update on regular basis. For example, a company that sells one type of widget that never become obsolete may seemingly have no reason to update the content

Even If you've never done SEO, Chances are that improving and updating your content can help you to gain rankings for term that will drive traffic to your site. Although this can be argued espcially for competitive industries, the core of the belief is certainly sound. There are sites out there that have simply followed best parctices by including important content in tags as Mobile Blogs, Computer & Laptops Blogs Where there are always new content and discussions. Traffic is drived simply due to kepping the content fresh.

Write focused content, Write pages that focus on 1 or 2 competitive keyword targets to increase keyword density and provide tight pieces of writing that stay on-topic for readers

That last thing which is realy helpful is Linking to outside sources, linking to outside source that provide the same topics and content can help to provide useful information to readers, I mean it provides readers with other information and more information. Linking to outside sources that rank well in search engine can be good SEO as search engine pay attention to both incoming and outgoing links when ranking your website

How to Add Facebook Share Button to Blog Posts

2010-02-27T02:19:00.001-08:00

In this post I will show you How to Add FaceBook Share Button in your posts at the right of all posts in your blog not only the future posts. It helps people to share your Post Link on their FaceBook account

It will appear as the following on the right of all posts:

Now all what you have to do is to go to Dashboard -> Layout -> Edit HTML and check Expand Template Widgets then find this code:

Now Copy the following Code after It :

<div style='float:right;padding:4px;'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

How to Add Google Translate Widget with Flags

2010-02-27T01:43:00.001-08:00

In this post I will show you how to add Google Translate Widget with Flags, it's useful for bloggers as it helps foreign visitors to translate the blog to their own language.
If you want to Add Google Translate Widget without flags and with all Langauges then Click Here (new window)

At last this Widget will appear as the following in your sidebar :

All what you have to do is to go to Dashboard -> Layout then press on Add a Gadget in the required place ( may be sidebar the best place ) then click on HTML/JavaScript and copy the following code to the content of the gadget:

How to Add Google Buzz Button to Blog Posts

2010-02-25T22:35:00.001-08:00

In this Post I will show you How to add Google Buzz Button to Blogger Posts, Google Buzz is a Social Bookmarking Site as Facebook and twitter, It helps Bloggers to share their posts at Google Buzz and It's easy to Add

It will be like this at the right of the post body :

Go to Dashboard -> Layout -> Edit HTML -> then Check Expand Template Widgets
Find the following Code:

Write the following code bellow it:

Or this for the Large Button:

How to Change HTML Code Style

2010-02-25T21:19:00.002-08:00

From a week I posted How to add HTML Code to your blog post and it's responsible for adding codes because when you try to add code in your post as the following:

<body> <p>E-Blogtricks.blogspot.com</p> </body>

It will appear as this :
E-Blogtricks.blogspot.com
Here's the post that explains how to Encode HTML Code to post it in a new post
How to add HTML Code to your blog post

So What's New ????

The new and the Better is changing the style and the background of the Code by a very easy way that don't need any efforts :) ...
- 1st Step is Choosing the box style you need from the following 2 boxes:

First One:

Code:

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9
border : 2px solid #eeeeee;
color : #7D7D7D;
}

Second Box:

Code:

.code {
margin : 10px;
padding: 0px 25px 5px 50px;
background : #fff url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4WJqXLy5I/AAAAAAAAAUo/tl0XwXfvErQ/s1600/codesbg1.png) no-repeat top left;
code="" margin="" 0px="" 25px="" 5px="" background="">font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

- Now find the following code:

]]></b:skin>

- Last step is Copying the code of the box you have chosen and paste it Over ]]></b:skin>

At last, when Writing the code, write it as the following:

<div class="code"> Encoded Code </div>

How to add AdSense to Blog Posts

2010-02-25T15:40:00.001-08:00

In this Post I will show you How to add AdSense In Blog Posts, as I found that the AdSense Units on the Sidebar are less cost than the AdSense Units between Posts and they are always older, Older = Less Cost

So Today I got the trick to add Google AdSense At the top and bottom of All Posts in your blog, Just follow the steps and you will be Rich :D

At First of All you should register at Google AdSense, if you don't have your own Google AdSense account then go ( How to add Google AdSense to Blog - in new window)

Then you will have to go to Google AdSense Home Page (in new window) and log in to your account

After Logging to your AdSense account Click on AdSense Setup as shown:

In The next page click on AdSense for Content as shown:

Choose the Type of Ad Unit then press on Continue :

Choose your Fonts, Colors and other options then click on Continue as shown :

At this Page, Leave it clear :) then click on Continue:

Write the name of the Ad Unit then press on Submit and Get Code as the following:

Now, it will give you HTML Snippet as the following

Then copy it to any Text document and change the following:

"<" to "<"
">" to ">"

Or, Use Allblogtools HTML Character Encoder
Hint: Press on convert to Encode the code and it will make the required changes

Now, we should insert the code into post body, so i suggest to follow my steps :)

At the Dashboard -> Layout -> Edit HTML then check on Expand Widget Template and find the following code:

<data:post.body/>

You will find <p> before this code and </p> after it

After Encoding the HTML Snippet you should paste it After <p> if you want the Ad Unit to appear before the post body

Or Paste it before the </p> if you want the Ad Unit to appear after the post body

You can also paste the HTML Snippet of the Ad Unit in both place if you want it to appear Before and After the post body

In my Blog I made after and before the post body, In the HTML Template the one before the post body as the following:

and the one after the post body as the following:

After All If there's any questions Hope you tell me your questions and don't forget to tell me your results

Add Google Talk Widget to Blog

2010-02-24T17:32:00.001-08:00

The Google Talk Gadget lets you and your blog readers to send instant messages, with your google talk buddies. Google has relied on the integration with GMail to promote the IM client. First of all, all those whose addresses you have in the GMail contact list will also be available in Google Talk, and the talk window has aside from the Call button an e-mail button.

When clicked, it will open the GMail account directly in the Compose Mail window, which will close after the message is sent. Google Talk or GTalk is now one of the most popular IM clients with lots of advanced features.Google Talk Gadget is embedded within GMail and special Google Talk gadgets are available that can be added to your site.Here i am going to use a typical google talk gadget and use it as a widget for blogger /blogspot.

Here i am presenting a Google Talk widget or Google Talk plugin for blogger / blogspot.

To install the widget use the button below.

Add Google Talk

How to add "Contact Us" Form in your Blog

2010-02-24T02:12:00.001-08:00

I think that a lot of people need this option as it helps your visitors to email you and contact you through posting a message and sending it to you whatever was the purpose, it's really very important and don't tell me to make contact me at mymail@mail.com ,etc that's hell

You can make your contact us form as this and it's easy to make it, at last it will appear as this:

So at first You will go to this site Email Form and then follow my steps and you can click on the image to enlarge it:

When you open this Link press on Sign up and Fill the Sign up Page as the following:

EmailMeForm will send you message on your E-mail that verifies your account at EmailMeForm, Click on the Verification Code as the following:

Here's your account verified, now click on Click Here to go to Control Panel as the following:

At the Control Panel Click on " Create a new Form" as shown:

Write the wanted options or Leave it as default then press on next:

You can change what you want, Don't ask me what to do at this page :( , just fill up your fields or leave it as default:

You can change the size of fields but I advice you to leave it, then press next as the following:

At the next step leave all this advanced setting, you can change what you want, then press next :

More Settings, change what you want and press next:

Here's your Email Form, if you liked it press on Finish :) :

Click on "Click Here to Get HTML CODE" as the following :

You will get your HTML Form Code just copy it as the following:

Now the last step go to Dashboard -> Posting -> Edit Pages -> New Page and in the "Edit Html", Paste the copied Form Code and click on Publish page and view it then tell me the results :D

you may copy the link and hyperlink it in the place you want, As I made in the top Navigation Bar, Don't forget to tell me by the results

20 Read More Buttons to your Blog

2010-02-23T23:25:00.001-08:00

Here's a lot of Read More buttons in which you can choose your own button and your own style. If you don't know how to add Read More buttons in your posts, you can use this link ( How to add Read More button to Blog )

Here's the images choose your own and put it's link ( by right click on the image and click on Copy Image Location ) in the LINK_OF_IMG while Adding Read More button

How to add Tag Cloud Widget in Blog

2010-02-22T17:11:00.002-08:00

Here I will learn you how to add Tags Cloud Widget in your blog and it will be formed by Labels, you can change the number of labels and how it appears, at last it will appear as the following:

All what you have to do is to go to Dashboard -> Layout -> Press on Add a Gadget in the place you want to place the Tag Cloud -> Choose Label from the type of Gadget as the following:

At last change the following options as you want but choose Cloud Type for listing as the following:

That's everything, now I'm writing the new post about How to add Flash Animated Tag Cloud and if you liked this post please subscribe us