Your Blog Guide

How to insert Codes and Scripts in Blogger Posts

2009-08-30T20:53:00.000+07:00

If you enter any Java Script or HTML code in your posts, Blogger will automatically execute that code considering it a regular part of your post. We just need to encode our HTML special characters like <, >, & into entities <, >, &. This is a really painful process but Beta Templates is here to help you.

1- Go http://www.blogcrowds.com/resources/parse_html.php or to http://www.eblogtemplates.com/blogger-ad-code-converter/ paste your code in the box there and press CONVERT AD CODE button.

2- The page will refresh and you'll see that the code you pasted in the box has changed. Don't worry, copy that code and paste it in your post.

3- Publish your post and you'll see that your original code will appear perfectly without execution.

Tip: When you're trying to directly copy-paste Adsense code in Blogger HTML, you'll first need to convert it otherwise you might receive an error.

Technorati Tags: blogger code,blogger tutorial,blogger hacks

Very Effective SEO tips for Blogger Templates

2009-08-30T20:34:00.000+07:00

Search Engine Optimization tips for Blogger Templates

These days, there is much discussion of how blog content can be optimized for search engines in order to receive better rankings. But have you considered how ~~your blog template can be optimized too?~~

Swap Title Tags for Better SEO

If you open a post on your blog and look at the top of your browser, you'll see that your blog title is shown first and then the post title comes. We can improve our SEO ~~(search engine optimization)~~ by swapping these two tags so that the post title should appear first and the blog title after it.

1- Log in to Blogger | Dashboard | Layout | Edit HTML.

2- Find:

~~<title><data:blog.pageTitle/></title>~~

3- Replace the above code with the following one:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

4- Save your template and see what appears first, your blog title or the post title.

Technorati Tags: blogger seo,blogger tips,blogger traffic,seo tips,blogger webmaster

5 STARS PREMIUM THEME is PROFESSIONAL BLOGGER TEMPLATE

2009-08-30T02:15:00.000+07:00

Are You looking for free professional and premium blogger template ?

Than absolutely you came to the right place !

~~DEMO IS HERE~~

PREMIUM AND HIGH QUALITY BLOGGER TEMPLATE !

NOT EASY TO GET EVERYWHERE … THAT IS WHY I HAVE CREATED THE ~~5 STARS PREMIUM THEME~~

PLEASE COMMENT BELLOW IF YOU LIKE THE TEMPLATE AND BE PATIENT FOR THE DOWNLOAD LINK BECAUSE THE TEMPLATE STILL UNDER TEST AND YOUR OPINION IS THE POST IMPORTANT FOR ME ! SO PLEASE IF YOU FIND SOMETHING NEED TO BE CHANGE OR YOU HAVE MORE SUGGESTIONS ABOUT THIS NICE THEME ! JUST WRITE YOUR COMMENT BELLOW PLEASE :)

Technorati Tags: blogger templates,blogger themes,professional theme,premium templates

Google Certified Ad Networks with AdSense

2009-08-26T10:51:00.000+07:00

Google has announced an interesting new feature in AdSense, Google-certified ad networks.

Ad networks are like the ad marketplaces where advertisers and publishers get together. Though the advertisers and publishers don't meet each other physically, the ad network works as the intermediary between these two parties who want to buy and sell advertising space.

Up until now, AdSense served only AdWords ads (except for some display ads from third party vendors). With this change, they are going to allow third party ad networks to serve ads to AdSense publishers. This feature will be initially made available to publishers in North America and Europe, but according to Google, will be rolled out to other regions in due cause.

This means that more advertisers will be competing for ad spaces and the additional competition is certainly good news for publishers.

For more information, see this post on the AdSense blog.

Very Effective 7 Social Marketing Resources to increase traffic !

2009-08-25T00:43:00.000+07:00

Top effective 7 Social Marketing Resources

1. Google Friend Connect

2. Facebook

3. MySpace

4. hi5

5. LinkedIn

6. Tagged

7. Ning

B. Blog Applications & Sites

1. Yahoo! Shortcuts

2. Blogger

3. WordPress

4. Kindle Publishing

5. TypePad

6. Wordpress for iPhone

7. Technorati

C. Bookmarking Applications & Sites

1. Digg

2. Stumbleupon

3. AddThis!

4. bit.ly

5. Delicious

6. diigo

7. Jumptags

Technorati Tags: traffic,seo Tips,seo,webmaster,socials,bookmark,bookmarking

Top six jQuery plugin: Accordion Resource

2009-08-24T22:54:00.000+07:00

Creating Simple JQuery Accordion menu is very easy !

If you are searching to Make accordion menu using jquery for your site than you need to check the following resource :

Dynamic drive Accordion menu | Demo

i-MarcojQuery Accordion Menu | Demo

Horizonal Accordion Menu | Demo

Bassistance jQuery Accordion | Demo

Designreviver Horizontal Accordion | Demo

Phatfusion Image Menu | Demo

HAPPY BLOGGING :)

Technorati Tags: Jquery,widgets,jquery accordion,slide menu,menu expandable,expandable

Give me a Reason to Start a Blog !

2009-08-24T01:38:00.000+07:00

Top Ten Reasons to Start a Blog immediately !

Why Should We Blog?

Actually Blogging is becoming more and more popular everyday. Should you join the blogosphere? Take a look at this list to help you make your decision about blogging.

1. To Express Your Thoughts and Opinions

You have something to say, and blogs provide a place to say it and be heard.

2. To Market or Promote Something

Blogging is a great way to help market or promote yourself or your business, product or service.

3. To Help People

Many blogs are written to help people who may be going through similar situations that the blogger has experienced. Many parenting and health-related blogs are written for this purpose.

4. To Establish Yourself as an Expert

Blogs are wonderful tools to help bloggers establish themselves as experts in a field or topic. For example, if you're trying to get a job in a specific field or hoping to publish a book on a specific topic, blogging can help legitimize your expertise and expand your online presence and platform.

5. To Connect with People Like You

Blogging brings like-minded people together. Starting a blog can help you find those people and share your opinions and thoughts.

6. To Make a Difference

Many blogs are issue-based meaning the blogger is trying to provide information to sway people's thinking in a certain direction. Many political blogs and social issues blogs are written by bloggers who are trying to make a difference in their own ways.

7. To Stay Active or Knowledgeable in a Field or Topic

Since successful blogging is partially dependent on posting frequency and providing updated, fresh information, it's a perfect way to help a blogger stay abreast of the events in a specific field or topic.

8. To Stay Connected with Friends and Family

The world has shrunk since the Internet has become more accessible. Blogs provide a simple way for family and friends to stay connected from different parts of the world by sharing stories, photos, videos and more.

9. To Make Money

It's important to point out that most bloggers don't make a lot of money blogging, but the potential does exist to generate revenue from your blog with hard work and commitment. There are many bloggers who bring in big bucks. With patience and practice, you can make money through advertising and other income-generating activities on your blog.

10. To Have Fun and Be Creative

Many people start a blog simply for fun. Perhaps a blogger is a fan of a particular actor or loves knitting and wants to share that passion through a blog. One of the most important keys to successful blogging is having a passion about your blog's topic, so you can write prolifically about it. Some of the best and most interesting blogs started out as blogs that were written just for fun and to give the blogger a creative outlet.

Technorati Tags: blogs,blogging,bloggers tips,bloggers,bloggers guide

What is the Social Web?

2009-08-24T01:25:00.000+07:00

The Social Web is currently used to describe how people socialize or interact with each other throughout the World Wide Web. Such people are brought together through a variety of shared interests. There are different ways in which people want to socialize on the Web today. The first kind of socializing is typified by "people focus" websites such as Bebo, Facebook, and Myspace. Such sites promote the person as focus of social interaction. To do this a profile is constructed by each user. In many ways the profile is similar to a passport.

The Early Days of the Internet and Web 1.0:

When the Internet first became a household word, the World Wide Web was very one-sided with most websites providing static information. From the mid-1990s to the early 2000s, the Internet remained fairly one-sided with primary offerings including informational and transactional (online shopping) websites.

The Internet Becomes Social with Web 2.0:

The second generation of the Internet came about in the early 2000s and was called Web 2.0 or the social web. No longer were people satisfied being talked at. Instead, they wanted to join the conversation and have a say in the World Wide Web. The evolution of the social web began with user-generated content. Personal websites, forums and online chats became just a few of the standard features of Web 2.0 and made way for blogs, social networking, social bookmarking and more.

Popular Tools of the Social Web:

Blogs
Social bookmarking: Digg, StumbleUpon, Reddit, etc.
Social networking: MySpace, Facebook, LinkedIn, etc.
Groups: Google, Yahoo, etc.
File sharing: YouTube, Napster, etc.
Wikis: Wikipedia, Google's Knol
Virtual worlds: SecondLife
Instant messaging
Online chat
Forums
Blogging and the Social Web:

Blogging is an integral part of the social web. A blog's success relies heavily on its community of readers. That community is typically built through online networking and promotion through the various tools of the social web. From bookmarking important posts to participating in relevant forums, a blogger's online activities within the social web can make or break a blog's success.

Technorati Tags: seo,Blogger Hacks,Google Webmaster,SEO Tips,blog traffic,traffic,free traffic

Top 15 effective Tips to Increase Blog Traffic !

2009-08-24T00:55:00.000+07:00

Every Blogger Should Read this tips to increase traffic !

Top amazing Tactics to Increase Blog Traffic

here are the best Simple Ways to Get Your Blog Noticed in the Blogosphere !

The blogosphere is a big and busy world with over 100 million blogs and growing. How do you attract visitors to your blog? Follow these simple tips to drive traffic to your blog.

1. Write Well and Write Often

Frequently updating your blog with useful content is the first step to building your blog's audience. The content you write is what will keep readers coming back for more. Make sure you have something meaningful to say to them and say it often to maintain their interest and keep them loyal.

Furthermore, post frequently to increase the number of chances you have for your blog's content to be noticed by search engines such as Google or Technorati.

2. Submit Your Blog to Search Engines

Get on the radar screen for the popular search engines such as Google and Yahoo! by submitting your blog's URL to them. Most search engines provide a 'Submit' link (or something similar) to notify the search engine of your new blog, so those search engines will crawl it and include your pages in their results.

It's important to understand that simply submitting your blog to search engines doesn't mean your pages will appear at the top of a Google search results screen, but at least your blog will be included and will have the chance of being picked up by a search engine.

3. Use and Update Your Blogroll

By adding links to sites you like in your blogroll, the owners of those blogs will find your blog and will be likely to add a reciprocal link in their blogrolls. It's an easy way to get the link to your blog in front of many readers on other blogs. The hope is that some of those readers will click on the link to your blog on the other blogs' blogrolls and find your content interesting and enjoyable turning them into loyal readers.

4. Harness the Power of Comments

Commenting is a simple and essential tool to increase your blog's traffic. First, respond to comments left on your blog to show your readers that you value their opinions and draw them into a two-way conversation. This will increase reader loyalty.

Second, leave comments on other blogs to drive new traffic. Make sure you leave your blog's URL in your comment, so you create a link back to your own blog. Many people will read the comments left on a blog post. If they read a particularly interesting comment, they are highly likely to click on the link to visit the commentor's website. It's important to make sure you leave meaningful comments that are likely to invite people to click on your link to read more.

5. Syndicate Your Blog's Content with an RSS Feed

Setting up an RSS feed button on your blog makes it easy for your loyal readers to not just read your blog but also know when you publish new content.

6. Use Links and Trackbacks

Links are one of the most powerful parts of your blog. Not only are links noticed by search engines, but they also act as a tap on the shoulder to other bloggers who can easily identify who is linking to their sites. Linking helps to get you noticed by other bloggers who are likely to investigate the sites that are linking to them. This may lead them to become new readers of your blog or to add links to your blog from theirs.

You can take links to other blogs a step further by leaving a trackback on the other blog to let them know you've linked to them. Blogs that allow trackbacks will include a link back to your blog in the comments section of the post that you originally linked to. People do click on trackback links!

7. Tag Your Posts

It takes a few extra seconds to add tags to each of your blog posts, but it's worth the time in terms of the additional traffic tags can drive to your blog. Tags (like links) are easily noticed by search engines. They're also key to helping readers find your blog when they perform searches on popular blog search engines such as Technorati.

8. Submit Your Posts to Social Bookmarking Sites

Taking the time to submit your best posts to social bookmarking sites such as Digg, StumbleUpon, Reddit and more can be a simple way to quickly boost traffic to your blog.

9. Remember Search Engine Optimization

When you write your blog posts and pages, remember to optimize your pages for search engines to find them. Include relevant keywords and links but don't overload your posts with too many relevant keywords or completely irrelevant keywords. Doing so can be considered spamming and could have negative results such as your blog being removed from Google's search entirely.

10. Don't Forget Images

Images don't just make your blog look pretty, they also help people find you in search engine listings. People often use the image search options offered by Google, Yahoo! and other search engines, and naming your images with search engine optimization in mind can easily boost your traffic.

The blogosphere is a big and busy world with over 100 million blogs and growing. How do you attract visitors to your blog? Follow these simple tips to drive traffic to your blog.

11. Consider Guest Blogging

Guest blogging can be done when you write a guest post on another blogger's blog or when another blogger writes a guest post on your blog. Both methods are likely to increase traffic as your blog will be exposed to the other blogger's audience. Many of the other blogger's readers will visit your blog to see what you have to say.

12. Join Forums, Web Rings or Online Groups

Find online forums, web rings, groups or social networking sites such as Facebook and LinkedIn where you can share ideas and ask questions of like-minded individuals. Add a link to your blog in your signature line or profile, so each time you post on a forum or participate in another online network, you're indirectly promoting your blog. Chances are many people will click on that link to learn more about you.

13. Promote Outside Your Blog

Promoting your blog shouldn't stop when you step outside the blogosphere. Add your blog's URL to your email signature and business cards. Talk about it in offline conversations. It's important to get your name and your blog's URL noticed offline, too.

14. Nominate Yourself and Other Blogs for Blog Awards

There are a number of blog awards given out throughout the year. Nominating yourself and other blogs and bloggers can draw attention to your blog and drive traffic to it.

15. Don't Be Shy

The most important part of the blogosphere is its community and much of your success as a blogger will be tied to your willingness to network with that community. Don't be afraid to ask questions, join conversations or just say hi and introduce yourself. Don't sit back and hope the online world will find you. Speak out and get yourself noticed. Let the blogosphere know you've arrived and have something to say!

Important free tips for you you don't want to miss !

Increase Page Rank for Blogger in No Time …

Technorati Tags: seo,Blogger Hacks,Google Webmaster,SEO Tips,blog traffic,traffic,free traffic

What's the Difference between Wordpress.com vs. Wordpress.org ?

2009-08-24T00:35:00.000+07:00

What is Wordpress?

Wordpress is a free software product that is quickly becoming the most popular blogging software on the Internet.

Wordpress.org vs. Wordpress.com:

Wordpress is available in two forms. Wordpress.com is an Open Source software meaning it's free for anyone to use and modify to meet their personal needs (in this case, to create blogs). Since it's free, it does have limitations. Alternatively, Wordpress.org provides the software to create your blog, but Wordpress.org does not host your blog on the Internet for you. You will have to pay a separate hosting provider to obtain a domain name and host your blog online. Using Wordpress.org with a paid hosting service provides maximum flexibility and customization.

Factors to Consider When Choosing Between Wordpress.org and Wordpress.com:

Following are some factors you may want to consider before you decide to start your blog on a paid host with Wordpress.org or Wordpress.com (free):

Monetization and Advertisements: Wordpress.com does not allow you to include advertisements of any kind.
Customization: Wordpress.com provides a limited amount of space and customization options (although enough for most beginner bloggers).
Knowledge: Wordpress.org requires more technical knowledge than Wordpress.com.
Future Requirements: If your blog becomes popular, switching to Wordpress.org requires moving your blog and obtaining a new domain name and URL address.

What Features Does Wordpress Offer Bloggers?:

Wordpress provides a simple interface to allow even the most technically-challenged people to start blogs. The software includes a variety of features including:

Custom themes
Integrated stats tracker
Spam protection
Auto-save
Spell check
Tagging
Automatic ping
Various sidebar widgets
Multiple authors
Plug-ins
Support
Wordpress.org also allows for advertising, a custom domain, custom email addresses and more

Wordpress Tip from Your About.com Web Logs Guide:

If you have trouble deciding between starting your blog on Wordpress.com or Wordpress.org, you may want to consider starting a practice blog on Wordpress.com first. If you've never started your own blog before, playing with features and testing effects on a practice blog is a great idea. Your practice blog could be on any topic you love simply to learn how to blog and learn the Wordpress software. After a few months, when you feel comfortable with the software, it should be easier to decide if you want to stick with Wordpress.com or switch to Wordpress.org for your 'real' blog.

Wordpress.com vs. Wordpress.org: Consider Your Blogging Goals:

Choosing between starting a free blog at Wordpress.com or paying for hosting so you can start a blog at Wordpress.org is a decision that should be based on your long term goals for your blog.

Technorati Tags: wordpress,bloggers,blogging,blog,blogs,blog tutorials,bloggers tips,blog info

Which Blogging Software do I need to choose ?

2009-08-24T00:01:00.000+07:00

Questions Bloggers need to know before Choosing a Blogging Software!

Before You Choose Your Blogging Software, Ask Yourself These Six Questions

Choosing a blogging software can be confusing because on the surface, the various blogging software products such as Wordpress, Blogger, TypePad, Moveable Type, LiveJournal and more are quite similar. Following are six questions to ask yourself before you select your blogging software to help you make the best choice to be a successful blogger.

1. What Are Your Goals for Your Blog?

Do you want to blog for fun or are you trying to make money or build a popular, highly-trafficked blog? The blogging software you choose is largely dependent upon your goals for your blog. Ask yourself the following questions to determine your goals for your blog:

How much space will you need to store your blog's images and content?
Do you want to display ads on your blog?
Do you want to add forums and other features to your blog?

2. Do You Need to Significantly Customize Your Blog's Design?

Blogging software varies in terms of its ability to allow bloggers to customize the appearance and layout of their blogs with logos, specific fonts, designs and more. It's important that you determine the amount of customization you want and need for your blog before you select your blogging software.

3. Are You or Is Someone You Know Technical?

Different blogging software platforms require varying amounts of technical skill and knowledge. While there are blogging software options that even the most technically-challenged people can navigate and use successfully, many of the blogging software packages that provide advanced customization and features require at least some technical ability.

4. Will Your Blog Have Multiple Authors?

Some blogging software platforms are easier to configure with multiple authors than others. Determine your author needs before you choose your blogging software.

5. Do You Need Custom Email Addresses Tied to Your Blog's Domain Name?

If you want to have email addresses customized to match your blog's domain name than your blogging software options are more limited. Even if this is something you may not need in the short term, it's important to think about it now before you choose your blogging software.

6. Do You Have Money to Spend Each Month on Blogging Software and a Blog Host?

Your budget will have a significant impact on the blogging software you choose. While there are many free blogging software platforms available online, those free blogging programs typically offer limited features. Although those limited features are usually adequate for the average blogger, they may not be enough for your blog depending on your long term goals for it.

Note :If you ask me on my opinion about which blog is to go for ! i could tell you my favorite is blogger !

Technorati Tags: bloggers,blogging,blog,blogs,blog tutorials,bloggers tips,blog info

Elegant Navigation Tooltip / Popup Bubble with fancy effects !

2009-08-13T20:48:00.000+07:00

View Demo | Another Demo

Side Navigation Tooltip and Popup Bubble !

The tooltip used on my blog was actually from www.jQueryForDesigners.com and the tutorial from http://www.sohtanaka.com.

Step1 – Create Wireframe

We will first start by creating the wireframe of the side navigation.

HTML”

<ul class="sidenav">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About Us</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
</ul>

CSS:

ul.sidenav {
    float: left;
    margin: 0;
    padding: 0;
    width: 200px;
    list-style: none;
    border-bottom: 1px solid #3373a9; /*--Bevel Effect--*/
    border-top: 1px solid #003867; /*--Bevel Effect--*/
    font-size: 1.2em;
}
ul.sidenav li {
    position: relative; /*--Add a relative positioning--*/
    float: left;
    margin: 0;
    padding: 0;
}
ul.sidenav li a{
    border-top: 1px solid #3373a9; /*--Bevel Effect--*/
    border-bottom: 1px solid #003867; /*--Bevel Effect--*/
    padding: 10px 10px 10px 25px;
    display: block;
    color: #fff;
    text-decoration: none;
    width: 165px;
    background: #005094 url(sidenav_li_a.gif) no-repeat 5px 10px;
    position: relative; /*--Add a relative positioning--*/
    z-index: 2; /*--z-index allows the popup to tuck underneath the nav--*/
}
ul.sidenav li a:hover {
    background-color: #004c8d;
    border-top: 1px solid #1a4c76;
}

Step2 – Styling Tooltip/Popup

Then we proceed to adding an extra div within the list item with a paragraph tag.

HTML:

...
<li>
    <a href="#">Home</a>
    <div><p>Go home!</p></div>
</li>
...

CSS:

The div parent contains the top portion of the bubble image, and the paragraph carries out the bottom half of the bubble. This way the tooltip bubble can be flexible in size.

ul.sidenav li div {
    display: none;
    position: absolute;
    top: 2px;
    left: 0;
    width: 225px;
    font-size: 0.9em;
    background: url(bubble_top.gif) no-repeat right top;
}
ul.sidenav li div p {
    margin: 7px 0;
    line-height: 1.6em;
    padding: 0 5px 10px 30px;
    background: url(bubble_btm.gif) no-repeat right bottom;
}

Step3 – Activating Tooltip with jQuery

From here we will add a simple hover event using jQuery.

jQuery:

<script type="text/javascript">
$(document).ready(function(){

    $("ul.sidenav li").hover(function() {
        $(this).find("div").stop()
        .animate({left: "210", opacity:1}, "fast")
        .css("display","block")

    }, function() {
        $(this).find("div").stop()
        .animate({left: "0", opacity: 0}, "fast")
    });

});
</script>

for any assistance or any error reporting while the installation in blogger templates ! just write me your comment and i will try to solve it for you ,thanks guys and happy blogging :)

Technorati Tags: free jQuery,free menus,blogger menus,professional menus,jQuery tutorials

Adding Google Analytics to Blogger BlogSpot with very easy steps !

2009-08-11T16:32:00.000+07:00

How to Add Google Analytics to Your Blogger !

Google Analytics is free service that lets you track the performance of your websites and blogs from one simple, easy-to-use interface.

1-Grab Your Google Analytics Code Block

-Login to Google Analytics at http://google.com/analytics/. The main Settings page loads.
-Click on Add Website Profile. A form displays.
-Select Add a Profile for a New Domain.
-Enter the URL of your site or blog.
-Select your country and time zone. Click Finish.
-Analytics provides you with a code block - a swatch of HTML - to add to your site's pages.
-Highlight the code block and then copy it by selecting Edit > Copy or Ctrl-C or Command-C.

2-Add the Google Analytics Code Block to Your Blogger Blog

-Login to http://www.blogger.com/. The Dashboard loads.
-Under the blog you want to add Analytics tracking to, click on Layout or Template.
-Click on Edit HTML. An editing screen for your blog template's HTML displays. Just scroll to the bottom.
-Look for the end of the template. It'll look like:

</div> </div>

~~(Google Analytics Code Block is going to go here!!!)~~
</body>
</html>

Put your cursor right before that </body> tag.
Paste the Google Analytics Code Block by selecting Edit > Paste, Ctrl -V or Command-V.
Click Save Changes.

You have now added the Google Analytics Code Block to Your Blogger Blog.

Check Your Work
To ensure that you have successfully added the Google Analytics Code Block to your Blogger blog, go back to http://google.com/analytics/.
Next to your blog's URL it will say either Receiving Data (you were successful) or Tracking Not Installed (something is amiss).
If it said Tracking Not Installed, click on Check Status. Google then checks your blog for the Analytics Code Block and reports back if it find it or not.
If not, try re-pasting the Code Block in.

Technorati Tags: google analytics,blogger seo,analystics intallation,blogger tips,seo,website tracker

Wonderful Gallery Style Blogger Template called “Showcase Light”

2009-08-10T18:47:00.000+07:00

Showcase Light - Free Premium Gallery Style Blogger Template

Due to the success of the other theme Showcase,and many people like this kind of design , and some people like lighter colors than darker colors. That's why Dante Araújo made Showcase Light, as nice as Showcase, but light!

Features:

Gallery Style
Well designed graphics
White / Light Gray / Blue
Custom comments, Blockquotes and Lists
Automatic Thumbnail
Custom icons for each sidebar widget

How to fix the thumbnail problems:

Note: This is only for those who are getting problems when the thumbnails are loading up
Just go to your Dashboard > Edit HTML. Click Expand Widget Templates, replace this line:

~~http://kfile.110mb.com/summary-post.js~~

For this one:

http://35pcka.bay.livefilestore.com/y1pAGb2Jh4-dUeqS1cN5QAYR87iYSSgRgTgAzY54aztiJCyIi2fNEfKhfrqVosCVuWN6NTj-Ls8E4kNToYQjlFEf3x9oXVTXVvT/summary-post.js

thanks again to the legend Dante Araújo ! bravooo for this nice template …

Technorati Tags: Showcase Light,tagland,photoplus blogger,photoplus theme,Photographers theme,pictures theme,blogger templates

Viluxus is Very Cool Blogger Template it gives you professional spirit

2009-08-10T18:32:00.000+07:00

DEMO | DOWNLOAD

Viluxus is a deluxe blogger template.
It has a serious dark background which gives the template a professional spirit. Also it's wide post area is great for photoblogging and portfolios. It is a very organized template, really neat.
Another wonderful template by dantearaujo.net

Features:

Minimalistic
White, Gray
Highlighted Author Comments
Easy to customize
Custom Welcome Message feature
Fast Loading

Technorati Tags: Viluxus theme,tagland,photoplus blogger,photoplus theme,Photographers theme,pictures theme,blogger templates

Tagland is Premium Blogger Template very elegant design !

2009-08-10T18:22:00.000+07:00

Very cool professional blogger template design called TagLand

DEMO | DOWNLOAD

Another wonderful template by dantearaujo.net !TagLand is a well designed Blogger template, It is also very organized and it's fast loading as well. Amazing for showing media content such as videos and pictures. The dark colors gives TagLand a serious looking which can be used to corporate blogging as well.

Features:

Well Designed Graphics
Red, Dark Gray
Cool Search Widget
Easy to customize
Left Sidebar
Fast Loading

THANK YOU dantearaujo.net FOR THIS WONDERFUL THEME !

Technorati Tags: tagland,photoplus blogger,photoplus theme,Photographers theme,pictures theme,blogger templates

Photographers Professional Blogger Template Called Photoplus Theme!

2009-08-10T18:09:00.000+07:00

Photoplus - Free Premium Blogger Template

DEMO | DOWNLOAD

Photoplus is a great theme for photographers that want to use Blogger as a portfolio. It is really a premium template. we thank dantearaujo that he came up with this idea and create This template has a premium jQuery feature called FullSize to show up a bigger version of each photo.
This template is for photography only, so if you need to show texts or anything else, It will not work.

How to post on Photoplus

Your posts on photoplus should be only an image tag. This means that the title will not be shown on the main page, it has only SEO purposes. Same thing with Labels, It will serve you only to organize the main menu.

Here's the post model:

Note: The thumbnail size should be 187x128 pixels.

i recommend you guys to save it as post model, it will make your life easier.

Features:

Photography
jQuery Special Feature
Web 2.0
Easy to customize
3 Column Footer

Thanks for this wonderful template which brought to us by dantearaujo !

Technorati Tags: photoplus blogger,photoplus theme,Photographers theme,pictures theme,blogger templates

Fancy jQuery Tabbed Content for blogger with beautiful images and background

2009-08-08T18:08:00.000+07:00

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

a lot of bloggers are using tab based content as a way to save spaces in a webpage. I have seen a lot of blogger websites using a tabbed interface for its category, posts, comments and random posts content. It's a good "space-saver" and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.

first let’s thanks queness.com for this beautiful widget with very nice icons and graphics!

1. Introduction

The ideas:

Buttons on the top, content reside in different DIV elements,
Click on one of the buttons, it shows the relevant content;
Click on other buttons, it hides the existing and display the correct one.

The Design structure:

* Thanks to WeFunction.com for the amazing icons

2. HTML

In case the image above doesnt load, allow me to explain the design structure again. The UL#tabMenu is the buttons on the top a.k.a. Tabs. This is where you click, and it will trigger the jQuery to loads the content.

Inside the boxBody, you need to specify 5 DIVs, the number of DIV will depend on how many items you defined in #tabMenu, in this case, we have 5, therefre, you need 5 DIV elements defined in .boxBody.

The javascript loads the content based on the DIV's index in .boxBody. For example, if you clicked o the first button (the star or index 0), it will load the first DIV in the .boxBody (DIV index 0).

Therefore, arrangement of DIV in .boxBody must match with the arrangement of button in #tabMenu.

<div class="box">   
  
  <ul id="tabMenu">   
    <li class="posts selected"></li> <!-- default button-->   
    <li class="comments"></li>   
    <li class="category"></li>   
    <li class="famous"></li>   
    <li class="random"></li>   
  </ul>   
  
  <div class="boxTop"></div>   
  
  <div class="boxBody">   
    <!-- default page-->   
    <div id="posts" class="show">   
      <ul>   
        <li>Post 1</li>   
        <li>Post 2</li>   
        <li class="last">Post 3</li>   
      </ul>     
    </div>     
     
    <div id="comments">   
      <ul>   
        <li>Comment 1</li>   
        <li>Comment 2</li>   
        <li class="last">Comment 3</li>   
      </ul>   
    </div>   
     
    <div id="category">   
      <ul>   
        <li>Category 1</li>   
        <li>Category 2</li>   
        <li class="last">Category 3</li>   
      </ul>     
    </div>   
     
    <div id="famous">   
      <ul>   
        <li>Famous post 1</li>   
        <li>Famous post 2</li>   
        <li class="last">Famous post 3</li>   
      </ul>     
    </div>   
     
    <div id="random">   
      <ul>   
        <li>Random post 1</li>   
        <li>Random post 2</li>   
        <li class="last">Random post 3</li>   
      </ul>       
    </div>           
  
  </div>   
  
  <div class="boxBottom"></div>   
  
</div>

3. CSS

You can always modify it to match your website.

<style>   
  
a {   
    color:#ccc;   
    text-decoration:none;   
}   
  
a:hover {   
    color:#ccc;   
    text-decoration:none   
}   
  
#tabMenu {   
    margin:0;   
    padding:0 0 0 15px;   
    list-style:none;   
}   
  
#tabMenu li {   
    float:left;   
    height:32px;   
    width:39px;   
    cursor:pointer;   
    cursor:hand   
}   
  
/* this is the button images */   
li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}   
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}   
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}   
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}   
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}   
  
li.mouseover {background-position:0 0;}   
li.mouseout {background-position:0 -32px;}   
li.selected {background-position:0 0;}   
  
.box {   
    width:227px   
}   
  
.boxTop {   
    background:url(images/boxTop.gif)no-repeat;   
    height:11px;   
    clear:both   
}   
  
.boxBody {   
    background-color:#282828;   
}   
  
.boxBottom {   
    background:url(images/boxBottom.gif) no-repeat;   
    height:11px;   
}   
  
.boxBody div {   
    display:none;   
}     
.boxBody div.show {   
    display:block;   
}    
.boxBody #category a {   
    display:block   
}   
  
/* styling for the content*/   
.boxBody div ul {   
    margin:0 10px 0 25px;   
    padding:0;   
    width:190px;   
    list-style-image:url(images/arrow.gif)   
}   
  
.boxBody div li {   
    border-bottom:1px dotted #8e8e8e;    
    padding:4px 0;   
    cursor:hand;   
    cursor:pointer   
}   
  
.boxBody div ul li.last {   
    border-bottom:none   
}   
  
.boxBody div li span {   
    font-size:8px;   
    font-style:italic;    
    color:#888;   
}   
  
/* IE Hacks */   
*html .boxTop {margin-bottom:-2px;}   
*html .boxBody div ul {margin-left:10px;padding-left:15px;}   
  
</style>

4. Javascript

<SCRIPT type="text/javascript">   
  
$(document).ready(function() {     
  
  //Get all the LI from the #tabMenu UL   
  $('#tabMenu > li').click(function(){   
           
    //perform the actions when it's not selected   
    if (!$(this).hasClass('selected')) {       
  
    //remove the selected class from all LI       
    $('#tabMenu > li').removeClass('selected');   
       
    //After cleared all the LI, reassign the class to the selected tab   
    $(this).addClass('selected');   
       
    //Hide all the DIV in .boxBody   
    $('.boxBody div').slideUp('1500');   
       
    //Look for the right DIV index based on the Navigation UL index   
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');   
       
   }   
  
  }).mouseover(function() {   
  
    //Add and remove class, Personally I dont think this is the right way to do it,    
    //if you have better ideas to toggle it, please comment       
    $(this).addClass('mouseover');   
    $(this).removeClass('mouseout');      
       
  }).mouseout(function() {    
       
    //Add and remove class   
    $(this).addClass('mouseout');   
    $(this).removeClass('mouseover');       
       
  });   
  
     
  //Mouseover with animate Effect for Category menu list  :)   
  $('.boxBody #category li').mouseover(function() {   
  
    //Change background color and animate the padding   
    $(this).css('backgroundColor','#888');   
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});   
  }).mouseout(function() {   
       
    //Change background color and animate the padding   
    $(this).css('backgroundColor','');   
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});   
  });     
       
  //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.   
  $('.boxBody li').click(function(){   
    window.location = $(this).find("a").attr("href");   
  }).mouseover(function() {   
    $(this).css('backgroundColor','#888');   
  }).mouseout(function() {   
    $(this).css('backgroundColor','');   
  });      
       
});   
  
</SCRIPT>

5. Finally

You will get a beautiful jQuery Tabbed Side Menu! However, in category page, if you were using IE, the LI can't be hightlighted when mouse hover it in (that's why we all hate IE). If you know what's the problem, please advise : ) now check out the demo or download the source code to play with it. Any questions. please leave your comment :) ~~Support me by bookmark this article and share it to your friends : ) Thanks~~

Update

14-4-2009: Remove click event in the LI, change the display attribute in #category to block.

note please : if you want support on how to install this widget for blogger ! than please comment bellow requesting the tutorial for the installation ! i will be happy to help you guys :)

Beautiful Sky Dashboard is my fifth Blogger template

2009-08-08T02:17:00.000+07:00

Demo | Download

Looking for professional simple blogger templates ! this is your choice .

well i have designed this template within these colors because I wanted to have different color choice for you guys ! many people prefer very simple design with lights colors .

anyways i don't think that i can say on my templates nice or not unless you say that !

this template looks very simple but it is very powerful ! because content the following widgets :

three columns blogger template
powerful colors picked
beautiful graphics combination
Related Posts widget included
Read more functions with png design
three footer columns added
adsense top banner 468x60 to increase your earning
beautiful social bookmarking added after each post
search bar with png design
nice effect menu
fancy RSS subscription button

FOR INSTALATION PLEASE GO TO THIS POST ! ENJOY THE TEMPLATE AND HAPPY BLOGGING :)

INSTRUCTION FOR THE SKY DASHBOARD BLOGGER TEMPLATE

Why the URL colors changed suddenly?

2009-08-07T22:14:00.000+07:00

Copying content from MS Word and pasting directly on to the Blogger post editor can upsets the template styles and on most occasions, it directly affects the URL colors (i.e. the link, visited link colors etc). Over the past six months or so I have observed this question getting raised on the Blogger help forums several times and on all occasions it was caused by the same reason. (see this one for example)

Here's how it happens.

The text editor in MS Word is referred to as a Rich Text editor, meaning that it support various rich formatting such as bold, italics, different fonts and colors and also many styles such as Heading 1, Heading 2, Body Text and so on. It's true that Blogger editor also gives some formatting options, but MS Word offers much much more style and formatting options. In order to support these additional formatting, MS Word keeps a whole lot of meta data in addition to the basic text you type. If you copy some text from a Word document, all the meta data also gets copied in the background and, when you directly paste that on to Blogger, you get that whole gamut of meta data as well. (Paste a single word directly from MS Word, go to the Edit HTML mode of Blogger editor and see the amount of meta information that get's pasted for that single word)

Once you publish such a post, your template styles get messed up due to the styles copied over from MS Word and the final result will be problems such as the one describe above.

If you draft your posts using MS Word, first pasting on to a simple text editor such as Notepad will strip off all the style information and will leave you with only the text you typed. Then copy from Notepad and paste on to Blogger editor. You will now have all what you typed minus all the formatting (such as bold, italics, fonts etc). This obviously has the problem of you having to reapply all the formatting using the Blogger's editor, but that is a safer approach as it will not mess up your template styles.

(Note: Same problem can occur with other Rich Text editors as well)

Beautiful Recent Posts with Thumbnails Widget for Blogger

2009-08-07T13:55:00.000+07:00

Searching for Recent Posts Widget with Thumbnails for Blogger !

This post explains how to add Recent Posts widget in Blogger with image thumbnails:

well they are many hacks up there on the net for RECENT POSTS BLOGGER !

and actually i have tried many of them ! and while i was surfing the net than i found this amazing hack !

finally i have got what i want ! this widget was made by the legend “bloggertricks” we thanks him for this amazing widget ,very simple recent posts …bravo for the great job !

Features:
Thumbails to Recent Posts
Comment Count

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard
2. Go to Layout » Add a gadget » html/javascript

3. Just copy and paste this code..

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://schemar-mag.blogspot.com/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

home_page : http://schemar-mag.blogspot.com/ (change this to your blog url)

Note : Make sure you selected YES in Settings » Site Feed » Full » Allow Blog Feeds

4. Save the Changes and happy widget :)

A Better Read More Option

2009-08-05T13:06:00.000+07:00

In a previous post I presented a simple technique to add a Read More option to hide a desired portion of long blog posts. But that method has a drawback because it shows the "Read More" link even for the posts that do not have hidden parts.

Here's an improved version of that technique which shows the Read More link only if you have decided to hide part of a post. [Note that the "Read More" link will be displayed only on the blog home page and archive (i.e. label) pages]

1) Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.

2) Locate the </head> tag and copy the code shown in red in the following snippet, above that tag.

]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style>span.fullpost {display:inline;}</style>
<script>function tbgHideReadMores() {}</script>
<b:else/>
<style>span.fullpost {display:none;}</style>
<script>
function tbgHideReadMores() {
var els = document.getElementsByTagName('*');
for (i = 0; i < els.length; i++) {
if ((els[i].className == 'post-body') || (els[i].className == 'post-body entry-content')) {
tbgHideReadMore(els[i])
}
}
}

function tbgHideReadMore(post) {
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
}

var lnks = post.getElementsByTagName('a');
for (var i = 0; i < lnks.length; i++) {
if ((lnks[i].innerHTML == "Read More") && (found == 0)){
lnks[i].style.display = 'none';
}
}
}
</script>
</b:if>
</head>

3) Locate the <body> tag and modify it as shown below.

4) Locate the <data:post.body/> element and add the code shown in red below.

5) Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)

This is a sample long post. Only these two lines are visible on the homepage.

<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>

Notes:

Instead of "Read More", if you want some other phrase such as "Continue...", then you have to put that exact string in the places in which "Read More" appears in steps (2) and (4).
The unnecessary Read More links get hidden only after the page is fully loaded. So you might see them initially, until the home page gets fully loaded in the browser.

Increase Your Blog's Technorati Backlinks very effectively !

2009-08-04T00:10:00.000+07:00

Does Anyone want to increase their number of backlinks on Technorati? If so, then join the movement on Blogger Dashboard and watch your blog grow with us.

Here are the Rules:

Copy the List into a blog post of yours.
Add your link to the bottom of the list.
Comment HERE so that we can update the list with your link.
Watch the backlinks to your blog increase dramatically via Technorati.
The sooner you join, the more backlinks you will receive.

*–Copy Here - Technorati Authority–*

Make Money Online | Money Blogging Tips

Blogger Dashboard | http://blogger-dashboard.blogspot.com

Indo Contest

Mga Kwentong Ma Alamat

Contest Love

It Blood

I Heart Contest

Nurse Jen Doll

Your Web and Graphics Design

My Blog Contest

Prize King Contest Blog

Computer Collections

Medan Blogger

Eiffel Tower

Programming the Life

John Doro Dot Com

Paco Contest

Couch Surfing Host

Erick's Blog

My Life 4 Hire

The Spirit of Blogging

EmTNester

Amori, poesi, arte, chat

Great Wall of China

The Painted Veil

FeeFiFoto Blog

I am Harriet

Phoenix2Life

Anurag Bhateja

Online Treasure

Gorilla Sushi

London Eater

News n' Tech Palace

Sherry Rambling

Blogging Tips and Tools

Selbst Management

Skip Ratt

Eljon

Heart Net

Just 4 You

Widgets For Free

Bubble Crush

GoGalavanting

Mesothelioma Cancer Help

How Things Do

Hardware Rig

Reality View

Utah Web Design

Hero Help Tutorials

Nub Lag Teh Server

Jobs Human Resources

Naeem's Blog

Facts For History

Prasdikatama

McPhee-Env

PeriPheryPoem

Writings of RYU

Heart Net

Cater Hater

Tech Recipe

Tech Boy UK

Internet Leashed

Tha Good Life Reviews

Solaris Photography

bSaves - Saving Energy Search Engine - Black Google

Sitfu

The All Rounder

The Science of Getting Richer

University Results

Surigao Digital Services

Senior BabyBoomers

Gazlo

Jessi & Ray Dream Life

Life Around Raymond

Susan Boyle

Get Any Thing

Exclusive Arena

The Star Girl

Tem Bolog

Trash XP

How Hero - How to Tutorials - Video Tutorials

Blog Darma

Money Central Online

Watch Free Online Movies

Zoom Your View

Hey I Want a Job

Dog Pet Grooming Supplies

Find Torrent Search Engine

www.jefusion.info

www.thegenerationv.com

http://beginlearn.blogspot.com/

byspace.blogspot.com

http://bangla-songs-music.blogspot.com

http://about-new-blogger.blogspot.com

http://www.theroadtovalor.blogspot.com/

ADD YOUR LINK HERE

LAST UPDATE WAS ON 8/3/2009

Note that as much we have links for friends and other sites which they would like to increase their backlinks as much as it is good for all of us !

Don’t forget to promote this article via social networking and word of mouth.. It only means better results for yourself and everyone on the list.
PLEASE GUYS I AM NOT THE ONLY WORKING HERE TO PROMOTE YOUR LINKS ON MY BLOG !!! YOU NEED TO HELP ME AS WELL TO PROMOTE THIS LIST ON YOUR BLOGS AND BETWEEN YOUR FRIENDS ! GOOD LUCK AND HAPPY BLOGGING :)

*–End Copy - Get Pasting! –*

Technorati Tags: seo,Blogger Hacks,Blogger Templates,Blogger tips and tricks,Blogger Tutorial,Google Webmaster,SEO Tips and Tricks

Tabbed Content Widget Box For Blogger

2009-08-03T15:21:00.000+07:00

A Professional tabbed navigation widget for blogger templates !

I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery ! but after my research on the net for blogger tabbed navigation content ! finally i came out with the following source THIS WIDGET CREATED BY THE LAGENT SOHTANAKA.COM :

Simple Tabs w/ CSS & jQuery

Follow These Step to Install this widget >>
1. Log in to your Blogger account
2. On your Blogger Dashboard, click on the "Layout" link as shown in the blow image

3. Click On "Add a Gadget" as displayed in the Below Image

4.Scroll down the list and find "HTML/ Javascript" and click on the "+" button

FINALLY INSERT THIS CODE WHICH IS BELLOW AND SAVE IT ! THAN PREVIEW YOUR TEMPLATE :) DONE

<style type="text/css">
body {
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}    
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
}
.tab_content h3 a{
    color: #254588;
}
.tab_content img {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});
</script>
</head>

<body>

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
    <li><a href="#tab3">NEWS</a></li>
    <li><a href="#tab4">FAQ</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
<div class="tab_container">
    <div id="tab3" class="tab_content">
        <!--Content-->
    </div>
<div class="tab_container">
    <div id="tab4" class="tab_content">
        <!--Content-->
    </div>
</div>
</body>
</html>

NOTE : THIS WIDGET IS MADE ON WIDTH 500px SO IF YOUR SIDEBAR OR THE PLACE WHERE YOU WANT THIS WIDGET IS LESS OR MORE THAN YOU NEED TO ADJUST THE SIZE TO YOUR NEED !

You may want to see here another tabbed widget for blogger !

Easy 5 tabbed Content Widget for Blogger

THANKS AND WELCOME : GO GUMGUM:)

Technorati Tags: tabbed content,navigation content,tabbed menu,css tabbed,blogger widget

REDHAT DASHBOARD IS MY FOURTH PREMIUM BLOGGER TEMPLATE

2009-08-03T13:27:00.000+07:00

DEMO | DOWNLOAD

REDHAT DASHBOARD IS professional blogger template

WELL IT IS MY FOURTH RELEASE FOR BLOGGER TEMPLATES DESIGN !

ACTUALLY REDHAT DASHBOARD WAS ON TEST FOR A WHILE BUT NOW AFTER MY VISITORS REVIEW I JUST DECIDED TO RELEASE IT FOR DOWNLOAD ! so enjoy this nice template :)

for more info on how to use this template please visit the instruction page here

Fluctuations in AdSense Earnings

2009-08-03T00:31:00.001+07:00

The AdSense earnings can vary from as few as two to three cents per click to as much as one dollar per click. These fluctuations are quite normal and are usually the result of one or more of the following reasons.

Drop in ad impressions due to reduced traffic or page views
Drop in the click-through-rate (or CTR) - A CTR of 1% to 4% is considered normal but I have seen days where it drops to as low as 0.5%
Lack of relevant contextual ads for the content of the pages - low relevancy would mean that AdSense would serve low paying ads
Reduction in advertising budgets of advertisers
Seasonal variations - for example, festive seasons may attract bigger advertising budgets and therefore there will be higher cost-per-clicks (CPC)

The advertisers seem to bid higher on the beginning and in the middle of a month. But, CPC seem to drop towards the end of the month, probably because advertisers run out of gas.

Further Reading:

Fluctuations in AdSense Earnings

2009-08-03T00:31:00.000+07:00

Drop in ad impressions due to reduced traffic or page views
Drop in the click-through-rate (or CTR) - A CTR of 1% to 4% is considered normal but I have seen days where it drops to as low as 0.5%
Lack of relevant contextual ads for the content of the pages - low relevancy would mean that AdSense would serve low paying ads
Reduction in advertising budgets of advertisers
Seasonal variations - for example, festive seasons may attract bigger advertising budgets and therefore there will be higher cost-per-clicks (CPC)

The advertisers seem to bid higher on the beginning and in the middle of a month. But, CPC seem to drop towards the end of the month, probably because advertisers run out of gas.

Further Reading:

Instructions for Premium Blogger Dashboard Template

2009-08-01T17:05:00.000+07:00

Premium Blogger Dashboard Template

DEMO ------- DOWNLOAD

It has many beautiful functions ! the first on is the rounded menu navigation on the top of the featured post and the search bar !

The second function is the automatic read more ! actually this hack was the latest and the most popular was made for automatic post summary till now !

another great function which is P.B.D. THEME has related post widget ! why do we need for related post widget ? actually we do need it for keeping our visitors on our site while we can provide them another posts related to ! which’s great function for me !

for the menu navigation you need to change the links to your needed links ! that’s is !

<ul>
<li class='current_page'><a expr:href='data:blog.homepageUrl' title='Home'><span>Home</span></a></li>
<li><a href='http://blogger-dashboard.blogspot.com/search/label/Blogger%20Templates' title='Blogger Templates'><span>Blogger Templates</span></a></li>
<li><a href='http://blogger-dashboard.blogspot.com/search/label/Blogger%20Tutorial' title='Blogger Tutorial'><span>Blogger Tutorial</span></a></li>
<li><a href='http://blogger-dashboard.blogspot.com/search/label/Twitter%20Tips' title='Twitter Tips'><span>Twitter Tips</span></a></li>
<li><a href='http://blogger-dashboard.blogspot.com/search/label/SEO%20Tips%20and%20Tricks' title='SEO TIPS'><span>SEO TIPS</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS'><span>Posts RSS</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'><span>Comments RSS</span></a></li>
<li><a href='http://www.blogger.com' title='Login'><span>Login</span></a></li>
</ul>

Update For Premium Blogger Dashboard theme!

Actually I wasn’t sure about the previous search bar ! than I created this new one :) and as per the first comment request than I have made some other changes for example the post title font !

another update which is Subscribe to RSS widget !

i forgot to post the subscription widget ! so here it is enjoy :)

<a href="http://feeds.feedburner.com/BloggerDashboard"><img alt="feedburner" style="border: 0pt none ; margin-top: 15px;" src="http://lh4.ggpht.com/_9b1traaMESE/SmDYssZpwFI/AAAAAAAAALs/g17Vr4lP_sY/Rss%20feeds%20icon%203222.png"/></a><!-- AddThis Button BEGIN -->

<div expr:addthis:url="data:post.url" class="addthis_toolbox addthis_default_style" expr:addthis:title="data:post.title"><a share="[object Object]" class="addthis_button_compact at300m" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=saer_gh" ost="1" conf="[object Object]"><span class="at300bs at15t_compact"></span>Share</a> <span class="addthis_separator">|</span> <a share="[object Object]" class="addthis_button_facebook at300b" ost="1" conf="[object Object]" title="Send to Facebook"><span class="at300bs at15t_facebook"></span></a><a share="[object Object]" class="addthis_button_myspace at300b" ost="1" conf="[object Object]" title="Send to MySpace"><span class="at300bs at15t_myspace"></span></a><a share="[object Object]" class="addthis_button_google at300b" ost="1" conf="[object Object]" title="Send to Google"><span class="at300bs at15t_google"></span></a><a share="[object Object]" class="addthis_button_twitter at300b" ost="1" conf="[object Object]" title="Tweet This"><span class="at300bs at15t_twitter"></span></a><script src="http://s7.addthis.com/js/250/addthis_widget.js?pub=saer_gh" type="text/javascript"></script><!-- AddThis Button END --><a alt="Subscribe using any feed reader!" href="http://www.addthis.com/feed.php?pub=saer_gh&amp;h1=http%3A%2F%2Fblogger-dashboard.blogspot.com%2Ffeeds%2Fposts%2Fdefault&amp;t1=" target="_blank" onclick="return addthis_open(this, &#39;feed&#39;, &#39;http://blogger-dashboard.blogspot.com/feeds/posts/default&#39;)"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" alt="Subscribe" width="125" src="http://s7.addthis.com/static/btn/lg-feed-2-en.gif" height="16"/></a><script src="http://s7.addthis.com/js/250/addthis_widget.js?pub=saer_gh" type="text/javascript"></script></div>

how to install the widget on your Blogger ?

On Blogger when you're viewing your blog: Select customize => Layout tab => add a gadget => basics => scroll down to HTML/Javascript => copy and paste the widget code and you should be set!

Very Important Update !

Referring to this comment from one of premium blogger dashboard template !some users had some error with lower section after the post where is the footer should be showing ! so here is the solution !

find the main-wrapper in your template and change the padding : 0 5px 0 5px; to padding:0 5px 10em; and your done ! but if u still having problem just let me know .thanx:)

notice : I advice you guys who download the template before 1 august 2009 !than you may need to download the template again for better improvements and fixed !

Actually Premium Blogger Dashboard Template is my first creation ! so be patient with me if you have any suggestion on the template just write your comment bellow and i will try to figure it out ! ok GUMGUMs :)

SHOW Backlinks and Trackbacks In Blogger SOLUTION

2009-08-01T03:27:00.000+07:00

Backlinks enable you to keep track of other pages on the web that link to your posts .They are just like Trackbacks, that enable you to keep track of other pages on the web that link to your posts.Finding backlinks or finding which sites are linking to you is quite easy. But different search engines will provide different results.The three most known and important search engines are Google, Yahoo and MSN. Here are a few examples on how to search for backlinks on each of them.

You can control backlinks in blogger through setting bu hiding and showing backlinks in yours blogspot webpage. To enable backlinks on your blog go to your Settings >> Comments tab and select Show

By turning on Backlinks, we include a “Links to this post” section on your post pages. This section is populated by links to that post that have been made from other blogs across the web. Blogger using custom templates have to add the code himself as Instructed for them here.

You can also try Blog Search with a query such as Link:your-blog-here.blogspot.Com, to find backlinks in yours blogs ,If you are using Google webmaster tool then you can also try that tools to find Internal and External links from yours Sites.

Technorati Tags: BACKLINKS,TRACKBACK,BLOGGER HACK,BLOGGER TIPS,SEO

What is the blogger dashboard?

2009-07-31T00:20:00.000+07:00

Originally a board used to stop mud from being dashed inside a vehicle, the word dashboard has evolved to mean a user interface that organizes and presents information in a way that is easy to read. Your Blogger Dashboard is your control panel, your main editing interface to Blogger.

Once you have signed in to Blogger you will arrive at the Dashboard page from which you will have editorial access to all your blogs and your profile as well as Blogger News, Recently Updated Blogs, and Blogs of Note.

Note: Whenever you're navigating around Blogger and you are not already on the Dashboard page, you will see a blue button in the top right side corner of the page that says "Back to Dashboard."

Technorati Tags: blogger dashboard,blog,blogger,blogspot,dashboard

Stikcy Posts

2009-07-27T23:09:00.001+07:00

Blogger's posts are by default displayed in the reverse chronological order (i.e. the most recent post is displayed first). This means that, as and when you write new posts, the visitors to your blog's homepage get to see those new posts.

A sticky post is a post that gets stuck to the homepage and remains at the top no matter how many other posts you write. This is very useful if you want to make your blog index page similar to that of a normal website, which has the same homepage all the time.

The trick is to manipulate the post date and time of the particular post that you want to remain as the homepage. All you have to do is to set the date and time of that post to somewhere in the future. For example, if this post is forward-dated to, say, July 26th 2010, it will remain on the index page for another year. The farther you set the post date, the more it stays stuck at the top.

The "Post date and time" settings are found at the bottom of the post editor window, and are illustrated in the figure below.

Remember to first publish your post in the normal way and then to modify the post date and time from the edit post mode. If you forward-date the post before its initial publishing, then it will go as a scheduled post.

Other than creating the pseudo homepage, this trick is useful to create notices that you want to stay on top for some time. For example, if you are organizing some event that occurs in two months time and you want all the readers to your blog during the next two months to see that notice, you can forward-date it by two months so that it will remain at the top until the event is over.

Another thing you might want to do is removing the displaying of the post date and time from the Post Page Options section. Otherwise, your visitors might get the feeling that they have time traveled to reach your blog.

Stikcy Posts

2009-07-27T23:09:00.000+07:00

Blogger in beta with new features

2009-07-25T19:41:00.000+07:00

Today we're launching a new version of Blogger in beta! You've been asking for ways to do more with your blog, and you can with this new release. With the beta you can:

* Categorize your posts with labels
* Control who can read your blog
* Change the appearance and content of your blog with your mouse instead of HTML

Take a look at the tour to see all the new things you can do (well, a lot of the new things ... they didn't all fit in the tour).

As we release this version, we're limiting the number of people who can switch over. (You'll see a link on your Blogger dashboard when you are able to move.) Eventually, of course, everyone will be able to transition their blogs to the new version. Thanks in advance for your patience as we roll it out.

If you can't wait, you can create a new account on the beta now and make a new blog to test out the new features. Because the new Blogger uses Google Accounts, you can use your existing Google login, or create a new one. (Later, you'll be able to merge your current and beta accounts, and have all your blogs in one place.)

We'll be posting more about the new version in the coming days, but for now, we really want to know what you think. You can post on the Blogger Help Group or via or feedback form.

HOWTO: Add a Read More Option

2009-07-25T07:57:00.001+07:00

Update:
Please follow this better Read More option, instead of the one described here.

If your blog contains long posts and you want to only show a selected snippet of each post on your homepage, here’s a simple method to add a “Read More” option to hide part of a post on the homepage (and also on archive pages).

Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.

Then locate the </head> tag and add the code shown in red in the following snippet, above that tag.

]]></b:skin>
<style><b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if></style>
</head>

Then locate the <data:post.body/> element and add the code shown in red below.

Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)

This is a sample long post. Only these two lines are visible on the homepage.
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>

Reference:
Expandable Post Summaries

HOWTO: Add a Read More Option

2009-07-25T07:57:00.000+07:00

If your blog contains long posts and you want to only show a selected snippet of each post on your homepage, here’s a simple method to add a “Read More” option to hide part of a post on the homepage (and also on archive pages).

Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.

Then locate the </head> tag and add the code shown in red in the following snippet, above that tag.

]]></b:skin>
<style><b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if></style>
</head>

Then locate the <data:post.body/> element and add the code shown in red below.

Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)

This is a sample long post. Only these two lines are visible on the homepage.
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>

Reference:
Expandable Post Summaries

Google Blogger begins monetization

2009-07-21T12:33:00.000+07:00

For years I am amazed at the generosity of Google Blogger in offering millions of bloggers this free blogging platform without asking for or expecting anything in return (other than the requirement to display the navbar which is never enforced). You can do many things with Blogger including putting not only Google Adsense ads in your free blog, you can even add competing ads like Yahoo

Aligning the Header Image

2009-07-19T13:12:00.001+07:00

In a previous post I talked about how the Blogger’s header image gets resized depending on the size of the image, the available space in the header and the configuration of the header widget. In this one, I will answer another question I get so often from my readers; “How can I center the header image?" This handy tip will help you not only to center align the header image, but also to right align it, if required.

First add the header image as you would normally do it. Then, to center Blogger’s header image, simply add the following CSS snippet to your template’s skin. (Read this to learn more about the Blogger template structure)

For placement “Behind title and description” add:

#header-inner {
margin-left: auto;
margin-right: auto;
}

For placement “Instead of title and description” add:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

You can add it anywhere inside the skin. But, to keep all header related styles close apart, add it after a style such as the #header-wrapper or #header.

To right align the header image, simply remove the “margin-right: auto;” statement from the above block.

This trick has been tested on Denim, Denim Stretch, Rounders and Scribe templates. (Minima has it by default). But it should work on all other default Blogger templates. If it doesn’t work on a particular template, please let me know.

Aligning the Header Image

2009-07-19T13:12:00.000+07:00

#header-inner {
margin-left: auto;
margin-right: auto;
}

For placement “Instead of title and description” add:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

Top 7 SEO tips

2009-07-18T10:18:00.001+07:00

SEOSearchEngines provides best seo tips for site promotion in top 10 search engines. By utilizing these general seo tips site owner can achieve higher ranking. The following seo tips also enhance your knowledge and boost up your mind for best search engine optimization.

1. Improve your site’s link popularity by growing your inside and incoming links.
• Inside links maximizing your Page Rank by appropriate linking with all important pages within each site.
• Incoming links can be control by creating various small web sites which are associated to main site. Each of these sites should contain few web pages for link crossing with most important keywords. Moreover, do not forget to add links back to the main site.

2. Exchange your links with other major web directories with appropriate search like: addurl.html, addlink.html and several others pages name.

3. At the time of seo web designing you must use the tag for page title like:<br /><br /><html><br /><head><br /><title><span style="font-weight: bold;">SEO</span> Tips

This tag keep great importance for search engines and also helpful for site promotion. For decorating this tag you should use any keyword with attractive information. On the other hand title is foremost information for your webpage. Only use 50-80 characters for this tag.<br /><br />4. Do not use stop words in <titl> tag such as; (but, he, she, his, him, a, an, the, it, or, on, of etc). Because all of these words skipped by top 10 search engines in favor of increasing quickness and relevancy of search results.<br /><br />5. After the <title> tag you must use <meta> tag for page description and for keywords such as;<br /><br /><html><br /><head><br /><title><span style="font-weight: bold;">SEO</span> Tips
SEO Guideline for improving your seo skills”>

align="justify">
You should use keyword phrase for META DESCRIPTION which are close to your page.

6. You must place the site map with all pages links because it assists the search engines and index all your pages.

7. Search engines give particular attention on page text. So you should use the header tags like:

and

on or more times for most important keywords. Presently use of CSS (Cascading Style Sheets) redefines the look of the text highlighted with these tags.

The Lazy SEO Manifesto

2009-07-18T09:56:00.000+07:00

I pledge to strive wholeheartedly to make the most amount of money while doing the least amount of work possible.

I pledge to develop passive revenue streams that maintain themselves using automated systems.

I pledge to outsource anything that possibly can be outsourced. My core competencies are thinking, planning and strategizing, and my time spent on those activities will yield the highest ROI.

I pledge to have a secretary/personal assistant and/or mistress to take care of pesky details.

I pledge to only give my phone number to very close associates. Everyone else will have to email me. I will compulsively check my email throughout the day, but it may take me up to a week to answer one, especially if the reply requires effort on my part.

I pledge to use Digg, Reddit, Delicious and the like as a shortcut to link building. The Digg community is a bunch of annoying little wankers but I will play the game until my sites all have TrustRank out the wazoo from dozens of successful link baits.

I pledge to get dressed only after the noon hour. Getting dressed implies putting on pajama pants or sweats instead of boxers only. It does not necessarily imply the presence of a shirt.

I pledge to extend myself outside of the SEO realm only into even lazier and more defensible areas. Namely, domaining.

I pledge to waste at least two hours a day on Threadwatch, WebmasterWorld and Bloglines. Not because I’m learning anything new, but because I’m bored.

I pledge to be a Lazy SEO
http://tropicalseo.com

Google's -30 Ranking Filter Penalty Spam Techniques Penalized

2009-07-18T09:50:00.001+07:00

Webmasters in online forums have discovered a new Google filter that Google uses to downrank web sites in its result pages. Has this filter been applied to your web site? How can you avoid that Google applies that filter to your site?

What Is Google's -30 Filter?

The -30 filter is a penalty that Google applies to web sites that use spammy SEO techniques. If Google applies the penalty to a web site, the rankings of that site are downgraded by 30 positions.

Many webmasters in online forums reported that they had top rankings on Google and now they cannot get beyond position 31 in Google. Some webmasters even have #31 rankings for all of their keywords on Google.

Why Does Google Apply The -30 Filter To Some Web Sites?

It seems that Google applies the -30 filter to web sites that use certain spamming techniques. It seems that the following techniques trigger the -30 filter on Google:

Guestbook spamming

If you try to get inbound links by spamming guestbooks and blogs then Google might apply the filter to your web site.

JavaScript redirects

JavaScript redirections might be misinterpreted as a spamming attempt. Better use 301 htaccess redirect if you must redirect URLs on your pages. For detailed instructions see: [Search Engine Safe HTML Page URL Redirect]

Doorway pages

Google doesn't like doorway pages. If you must use special landing pages for PPC ads and other ads, make sure that these pages cannot be spidered by Google and other search engines. You can use a robots.txt file to do that. Generate your robots.txt file with our robots.txt creator.

What Can You Do If Google Applies The -30 Filter To Your Site?

First of all, you should remove the spam elements from your web site. If you use JavaScript redirects or doorway pages, remove them from your site.

The -30 filter seems to be an automated filter. If you remove the spam factors from your site then you'll probably get your rankings back after some time. You can also send a reinclusion request to Google.

If nothing helps, then the only way to get reincluded in Google is to get a new domain name.

Google doesn't like spammers. If you want lasting results then you should focus on ethical search engine optimization methods.

Source:http://www.searchenginepromotionhelp.com/m/articles/search-engine-problems/google-minus-30-spam-penalty.php

How to set Blogger time zone

2009-07-17T09:20:00.000+07:00

Update: Your Blogger time zone can be set via Dashboard > Settings > Formatting and at the 5th item is a drop down menu to select your time zone. Ignore the rest of this post.A blogger complained that the time stamp for his post does not correspond to the time zone of the place he is posting to Blogger. If you want to change the time zone for Blogger which is tied to your Google account,

Variable for File Host Location

2009-07-12T20:25:00.001+07:00

This post explains how you can add a template variable to define a third party file host location. The file host defined here will be used to host all the custom images provided free with The Blogger Guide's various popular HOWTOs such as the three column and wider two column template conversions.

Go to Layout -> Edit HTML mode and add the variable as described below.

The template variable we add here is of type automatic. To incorporate it, simply add the code shown in red below, right to the end of your template's Variable declaration section. (Usually, the last variable on a default Blogger template is the endSide variable)

<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
<Variable name="imageHost" description="Image Host Location"
type="automatic" default="http://idssl.fileave.com/tbg"
value="http://idssl.fileave.com/tbg">

*/

To learn more about Blogger template variables, read the article shown in Related Posts below.

Blogger Template Variables

Variable for File Host Location

2009-07-12T20:25:00.000+07:00

To learn more about Blogger template variables, read the article shown in Related Posts below.

Blogger Template Variables

Google AdSense Program Policies

2009-07-07T11:01:00.000+07:00

Quated from Google AdSense Program Policies (https://www.google.com/adsense/policies)

To uphold the quality and reputation of Google AdSense, all publishers who apply are reviewed according to these program policies.

You may notice that some policies are only relevant to publishers who have elected to receive certain Google services. For example, references to "search box" only apply to publishers who have elected to receive Google search services, and policies regarding the placement of Google ads on a site are only relevant to publishers who have elected to receive contextual ads. Please read the policies carefully and assume that they all apply to you, unless the specific policy explicitly states otherwise.

Please note that we may change our policies at any time, and pursuant to our Terms and Conditions, it is your responsibility to keep up-to-date with and adhere to the policies posted here.

Bila ada hal-hal yang tidak dimengerti dari detail program policy di bawah ini, silahkan copy paste bagian tersebut dan posting ke thread ini untuk didiskusikan bersama.

Program Policies

1. Eligibility

What languages does AdSense support? (https://www.google.com/support/adsense/bin/answer.py?answer=9727&topic=140)
Are there eligibility criteria for my site in order to participate in Google AdSense? (https://www.google.com/support/adsense/bin/answer.py?answer=9724&topic=140)
Can I get a Gmail account if I sign up for AdSense? (https://www.google.com/support/adsense/bin/answer.py?answer=14233&topic=140)
Can I sign up if I am already a part of an ad network? (https://www.google.com/support/adsense/bin/answer.py?answer=9728&topic=140)
If I am a Google AdWords advertiser, can I sign up? (https://www.google.com/support/adsense/bin/answer.py?answer=9726&topic=140)
Does AdSense have a minimum age requirement for participation? (https://www.google.com/support/adsense/bin/answer.py?answer=14230&topic=140)

2. Copyright

What is copyright infringement? (https://www.google.com/support/adsense/bin/answer.py?answer=9893&topic=145)
What is your policy on copyright infringement? (https://www.google.com/support/adsense/bin/answer.py?answer=9892&topic=145)
What do I do if I have been falsely accused of copyright infringement? (https://www.google.com/support/adsense/bin/answer.py?answer=9895&topic=145)
How do I report a copyright infringement by an AdSense publisher? (https://www.google.com/support/adsense/bin/answer.py?answer=9894&topic=145)

3. Ad and Search Box Policies

Can I open the ads in a new window? (https://www.google.com/support/adsense/bin/answer.py?answer=9737&topic=8425)
Can I display more than one set of Google ads on a web page? (https://www.google.com/support/adsense/bin/answer.py?answer=9735&topic=8425)
How many referrals can I place on a page? (https://www.google.com/support/adsense/bin/answer.py?answer=25892&topic=1449)
Can I place more than one link unit on a page? (https://www.google.com/support/adsense/bin/answer.py?answer=15943&topic=294)
Can I display AdSense for search and Google ads on the same web page? (https://www.google.com/support/adsense/bin/answer.py?answer=9886&topic=8425)
Can I alter the AdSense ad code? (https://www.google.com/support/adsense/bin/answer.py?answer=9997&topic=8425)
Can I alter the AdSense for search code? (https://www.google.com/support/adsense/bin/answer.py?answer=10001&topic=8425)
Can I use other internet search services with AdSense for search? (https://www.google.com/support/adsense/bin/answer.py?answer=9887&topic=8425)
Can I place Google ads on the same page with other ads? (https://www.google.com/support/adsense/bin/answer.py?answer=32849&topic=8425)
Can I use my own AdSense for search box? (https://www.google.com/support/adsense/bin/answer.py?answer=32851&topic=144)

4. Invalid Clicks and Impressions

How do you prevent invalid clicks and page impressions? (https://www.google.com/support/adsense/bin/answer.py?answer=9718&topic=8426)
What can I do to ensure that my account won't be disabled? (https://www.google.com/support/adsense/bin/answer.py?answer=23921&topic=8426)
Will viewing my own site create invalid page impressions? (https://www.google.com/support/adsense/bin/answer.py?answer=18203&topic=8426)
Can I click on the link units on my site? (https://www.google.com/support/adsense/bin/answer.py?answer=18375&topic=294)
What is an invalid click? (https://www.google.com/support/adsense/bin/answer.py?answer=16737&topic=8426)
Can my account be reinstated after being disabled for invalid activity? (https://www.google.com/support/adsense/bin/answer.py?answer=14229&topic=8426)
Why do my reports show clicks with no associated earnings? (https://www.google.com/support/adsense/bin/answer.py?answer=14205&topic=8426)
What can I do to prevent sabotage? (https://www.google.com/support/adsense/bin/answer.py?answer=32869&topic=8426)
Can AdSense block certain IPs from clicking on my ads? (https://www.google.com/support/adsense/bin/answer.py?answer=32870&topic=8426)
How can I test my ads? (https://www.google.com/support/adsense/bin/answer.py?answer=32868&topic=160)

5. Policy Enforcement

How do I report a policy violation? (https://www.google.com/support/adsense/bin/answer.py?answer=18386&topic=8424)
What can I do to ensure that my account won't be disabled? (https://www.google.com/support/adsense/bin/answer.py?answer=23921&topic=8426)
I've received a policy violation email. What does this mean? (https://www.google.com/support/adsense/bin/answer.py?answer=14231&topic=8427)
How do you enforce the program policies? (https://www.google.com/support/adsense/bin/answer.py?answer=9725&topic=8427)

Screen Resolution and Template Size

2009-07-04T22:15:00.001+07:00

What is the best screen resolution to target a web site template design? This is an important question for those who are interested in designing templates and also who customize templates. That is because the screen resolution is a determining factor when it comes to what your website’s visitors see and don’t see.

Firstly, what is screen resolution? In simple terms, it is the number of pixels (or dots) that make up your entire screen. It is usually expressed as the number of pixels horizontal in to number of pixels vertical. For example, a screen resolution of 1024 x 768 means that a screen can display 1024 pixels across and 768 pixels down. The total number of dots that make up your entire monitor is the multiplication of those two numbers.

It is difficult to pick one right resolution to target your template’s size. Monitors used by Internet users around the world range in resolutions from 640 x 480 (very rare now) to 1600 x 1200 or higher. Further, as technology advances and hardware becomes cheaper, more and more people will move in to high resolution monitors. According to w3schools.com, in January 2009, 96% of its visitors had resolutions of 1024 x 768 or higher. The flip side is that 4% still has 800 x 600 resolutions.

Some time ago, websites were designed targeting an 800 x 600 resolution. But now that the share of that resolution has gone down significantly, the current practice is to optimize a website design for 1024 x 768, a fact even recommended by Jakob Nielsen, the web usability guru, back in 2006.

So what’s the use of this knowledge for the regular blogger? Well, if you want to use a custom third party template or go for a modification of the existing template by adding a new column or increasing its width, check whether the resulting template fits within the 1024 x 768 resolution. You should worry more about the horizontal resolution than the vertical one. Generally, if your custom or modified template has a width of less than 1000 pixels then you can safely assume that a very large percentage of your readers can see the entire width your site without having to scroll horizontally.

Screen Resolution and Template Size

2009-07-04T22:15:00.000+07:00

Scoring Higher On Google

2009-07-03T11:45:00.000+07:00

Beyond many of the techniques for good HTML accessibility practices, which are essential to scoring high on Google, there is an underlying concept that you can follow to greatly improve your Google Score. But first, use the HTML title tags, meta tags, title attributes on the Href tags, and avoid putting important information in images (use Alt attributes on the image tags when you do.). Most importantly: Avoid Shockwave, Real, MP3 or Flash (unless these formats are "in addition" to the HTML version of the information.) Don't use frames or pop-up new browser windows, or if you do, read the Google FAQ about how that effects your scores.

The most important rule for scoring higher on Google, however, is to make your site useful. Simply put, the best way to get your site to score higher on Google is to put something useful there -- have your site bring some benefit to someone. It is difficult to stress this enough.

Remember that the value of the web is the interconnection of it all (that begginingless and endless chain of consciousness.) Each connection has a pointer and a page that is being pointed to. A link that point to another site is only half the equation. If you point to other sites, it doesn't really help you score higher. However, if your site has other sites pointing to you, this is called a "back link." Back links will help your site score higher.

Therefore, seek to bring true benefit; not the propaganda, which your marketing people have told you that consumers should believe are the benefits of your product; and not some slick looking design that your CEO will benefit from when he shows the site to his golfing buddies and brags, "Hoity-Toity Agency did our web designs." When your site brings true benefit to the people who are surfing the web, people will link to your site. In a phrase: Be helpful to someone. It is that simple. It is the single most important thing you can do to improve your score on Google.

Google determines the benefit of a site based on the number of "back links". Google ranks the benefit of a your site is by the pages that are pointing to your site. If you put something useful on your site, people will definitely link to your site (especially if you ask them.) And if you find this article useful, please link to it.

Furthermore, Google ranks your web pages, not just by the number of links pointing to your web pages, but Google takes into consideration the scores of the sites which are linking to your web pages. So your goal, as a site designer who wants to increase your Google score, is to persuade other high ranking (i.e. helpful) web sites to link to your pages. And what's the best way to do that? Put something helpful or beneficial there.

Scamming Googlebots with simple link exchange tricks doesn't always work. Googlebots have methods of detecting links that are intended to trick Google. Remember, Google was designed by Stanford Graduate students. So your energies are better spent simply publishing useful information than attempting to fake out their band of super Googlebots.

Top 6 Joomla SEO Mistakes to Avoid

2009-07-02T04:34:00.001+07:00

1. Using your keyword list as a meta title. "Dogs, Boarding, Grooming, Pets, Pooches, Kennels, Food" is not a decent meta title because search engines see these as separate keywords. Dog Boarding - Dog Grooming - Dog Kennels is much better.

2. Not redirecting the www and non-www versions of your site to the same place. Barrie North blogged about this recently (http://www.compassdesigns.net/joomla-blog/joomla-seo/get-free-pagerank-for-your-joomla-website.html) and provided an easy .htaccess hack to avoid this.

3. Not checking to see how many pages you have indexed in Google, MSN and Yahoo. This is a simple way to test for potential crawling problems. We had one client recently with 2,000 Google pages, 16,000 in Yahoo and 24 in MSN. Something was amiss.

4. Treating headlines as an afterthought. David Ogilvy wrote that once only 20% of people read past the headline of an advertisement, so that you've spent 80 cents of your dollar once you've written it. This story about Wikipedia (http://digg.com/tech_news/U_S_senator_It_s_time_to_ban_Wikipedia_in_schools_ libraries) made the frontpage of Digg and Reddit on the same day with the headline: "U.S. senator: It's time to ban Wikipedia in schools, libraries." The story was almost nothing to do with Wikipedia but smart headline writing led to plenty of new traffic.

5. Being lulled into a false sense of security by Joomla. "It works right out-of-the-box! I don't need to worry about extra SEO!" Ron Liskey posted about this attitude on the Joomla! forums with regard to security (http://forum.joomla.org/index.php/topic,117767.0.html). Do install an extra SEF URL component. Do consider something like Joomlatwork's SEF patch (http://joomlatwork.com/). Do use Octagate's SiteTimer (http://www.octagate.com/service/SiteTimer/) to pinpoint modules, code and images that are slowing your site down. Do use external statistics such as Google Analytics to track your visitors and conversion rates.

6. Wasting your site's link juice with social bookmarking links, technorati tags, RSS Feeds for every component, print and PDF buttons and anything else that is cluttering up your page. Lets face it.....You're not going to get Dugg. If you're lucky people may subscribe to ONE of your RSS feeds - the rest are junk. Your Technorati tags are making those guys rich but bleeding your site's authority away. No-one downloads your pages as a PDF. On the other hand, your visitors and search engines do appreciate clean, uncluttered pages. More signal, less noise as those Web 2.0 folks say.

Google, Yahoo & Microsoft Launch Sitemaps.org

2009-07-02T04:33:00.000+07:00

Sitemaps consists of an XML file designed to crawling by allowing webmasters to list all their pages, notify search engines of changes or new pages, and identify unchanged pages to prevent unnecessary crawling and conserve bandwidth. Google, Yahoo and Microsoft have announced their common support for Sitemaps 0.90 as a universal method for webmasters to make their sites more search engine friendly. This initiative builds upon the Sitemaps 0.84, which was originally developed as a joint venture between Google and Yahoo.

"At industry conferences, webmasters have asked for open standards just like this," said Danny Sullivan, editor-in-chief of Search Engine Watch. "This is a great development for the whole community and addresses a real need of webmasters in a very convenient fashion. I believe it will lead to greater collaboration in the industry for common standards, including those based around robots.txt, a file that gives Web crawlers direction when they visit a website." Representatives from Google, Yahoo, and Microsoft each weigh in with their take on the announcement.

"Announcing industry supported Sitemaps is an important milestone for all of us because it will help webmasters and search engines get the most relevant information to users faster. Sitemaps address the challenges of a growing and dynamic Web by letting webmasters and search engines talk to each other, enabling a better web crawl and better results," said Narayanan Shivakumar, Distinguished Entrepreneur with Google. "Our initial efforts have provided webmasters with useful information about their sites, and the information we've received in turn has improved the quality of Google's search."

"The launch of Sitemaps is significant because it allows for a single, easy way for websites to provide content and metadata to search engines," said Tim Mayer, senior director of product management, Yahoo Search. "Sitemaps helps webmasters surface content that is typically difficult for crawlers to discover, leading to a more comprehensive search experience for users."

"The quality of your index is predicated by the quality of your sources and Windows Live Search is happy to be working with Google and Yahoo! on Sitemaps to not only help webmasters, but also help consumers by delivering more relevant search results so they can find what they're looking for faster," said Ken Moss, General Manager of Windows Live Search at Microsoft.

The protocol will be available at sitemaps.org, while will be hosted by Yahoo Small Business. Any site owner will be able to create and upload an XML Sitemap and submit the URL of the file to the participating search engines.

Search Engine Tips For Joomla

2009-07-02T04:30:00.001+07:00

The article is purely based on experience using Joomla over the past 2 years. The items covered in this topic are also only suggestions you may know of a better SEO approach and if so then please share your knowledge by submitting an article to the web site and we will be happy to publish it.

What not to do ?
I would strongly suggest you do not introduce the following for your CMS web site.
1) Do not include hidden text within your web site.
Some web masters have being known to include hidden text or targeting keyword to move up the rankings. Basically they hide the text from the real user IE ( white text on a white background ) and so on. Google can spot this and will penalize your web site.
2) Loading pages with keywords.
Avoid spamming the search engines by including lots of keywords which have little relevance to the content of you web site or make no sense if a real user was to visit and read the content on your web site.
3) Avoid Doorway pages
Do not use doorway pages IE - individually optimization pages for specific search engines.
4) Avoid cloaking
Cloaking involves dynamically generating thousands of keyword rich web page's using server side scripts which only the search engine Bots can see but the end user can not. Some Webmasters have introduced this approach to gain a high ranking which may work in the short term but in the long term it will fail and your site ( domain ) will be banned or removed from the index.
5) Avoid automated submission web sites.
You may have seen many SEO sites selling services which include submitting your Joomla web site to hundreds of search engines, FFA link farms and directories. If you do decide to use this service you could get banned for " spamming the search engines " I would strongly advise you avoid using such sites but instead manually submit your site to the relevant search engines Google, Yahoo, MSN and so on. Another approach is not to submit your site directly to the search engine but let them find you. This involves creating a linking strategy based on exchanging links with sites who are both established and have a good PageRank. The Bot will then index the high ranking site and follow your link therefore indexing your web site.

What to do ?
1) Create high quality keyword rich content
When writing content for your Joomla web site create it for users not search engines. Focus on creating content which is relevant to your web site (IE) if you run a Joomla template site then focus on writing content for joomla templates. Also Make use of your targeted keywords within the content and use H1 and H2 "bold" to highlight and reference keyword phrases. Use hyperlinks to reference the relevant web sites and also use anchor text.
2) linking strategy
Think about who your target audience and web sites who have a similar interest to the service or content your are offering via your web site. Do your research, Search Google, Yahoo, MSN or visit the communities and build up a list of sites with similar interests. For example if you run a Joomla web site dedicated to Joomla open source then build up a relationship with other sites based on exchanging web links with them or news articles. Also when submitting your web link to a web site make sure the title and keywords relating to the web site are referenced in the web link, news article.
3) Title, description and Metatags
Joomla incorporates some very useful functionality which compliments your content to ensure the title, description and metatags are relevant to each specific document. Make sure you make use of the functionality available within Joomla.
For example once you have written your news item complete the following.
A) Associate the news item with the relevant news category.
B) click on the Meta Info tab.
C) In the description field enter a relevant, clear and concise meta description which clearly reflects the content of the news item.
D) In the keywords field click on the Add/sect/Title which will automatically assign the news category, keywords to your news item. You may need add additional keywords.
5) Site Title Tag
The site Title Tag play's one of the most important role's in achieving a high ranking web site. Search engines including Google, Yahoo, MSN and AltaVista place alot of focus on the site title tag. From the Global configuration option via the Joomla Administrator you can change the site name, Global Site Meta Description, Global Site Meta Keywords.

Think about the following when creating your site title.
A) Ensure the site title is specific and relevant to the content of your web site.
B) Your site title ideally should be between 64 and 66 characters which makes it Google friendly.
Yahoo will accept up to 120 characters as per the W3 standards
C) Add one or more of your targeted keywords in the site title.
6) Global Site Meta Description
a) Write a brief description which clearly reflects the content of your web site
b) The Meta description should be between 170 characters or 200 characters
c) Include one or more of your targeted keywords which are included in your site title and keywords.
7) Keywords
Some Search engines do not give as much weight to The keyword metatag as the site title or site description but it is recommended that you make use of it.
a) Avoid keyword stuffing ( IE ) repeating your keywords.
b) Add your one or more targeted keywords contained in your site title, site content within your Global Site Meta Keywords.
c) Place your targeted ( most important ) keywords at the start of your Global Site Meta Keywords which gives the keyword more weight
d) Separate keywords with a comma and no spaces.

The 52 Top SEO Tips

2009-07-02T04:28:00.001+07:00

From the obvious to the "Hey-I-never-thought-of-that-great-idea-before", here are 10 of the top 52 tips on how to optimize your website for its turbo-charge rocket ride up the search engine rankings. Be bold. Use the tags around some of your keywords on each page. Do NOT use them everywhere the keyword appears. Once or twice is plenty.

Deep linking. Make sure you have links coming in to as many pages as possible. What does it tell a search engine when other web sites are linking to different pages on your site? That you obviously have lots of worthwhile content. What does it tell a search engine that all your links are coming in to the home page? That you have a shallow site of little value, or that your links were generated by automation rather than by the value of your site. Here is an example of deep linking, in this case to my personal happiness workbook.

Become a foreigner. Canada and the UK have many directories for websites of companies based in those countries. Can you get a business address in one of those countries? Newsletters. Offer articles to ezine publishers that archive their ezines. The links stay live often for many years in their archives.

First come, first served. If you must have image links in your navigation bar, include also text links. However, make sure the text links show up first in the source code, because search engine robots will follow the first link they find to any particular page. They won't follow additional links to the same page. You can see this in action at the link to the home page on this web site monitoring page

Multiple domains. If you have several topics that could each support their own website, it might be worth having multiple domains. Why? First, search engines usually list only one page per domain for any given search, and you might warrant two. Second, directories usually accept only home pages, so you can get more directory listings this way. Why not a site dedicated to gumbo pudding pops?

Article exchanges. You've heard of link exchanges, useless as they generally are. Article exchanges are like link exchanges, only much more useful. You publish someone else's article on the history of pudding pops with a link back to their site. They publish your article on the top ten pudding pop flavors in Viet Nam, with a link back to your site. You both have content. You both get high quality links. (More on high quality links in other tips.)

Titles for links. Links can get titles, too. Not only does this help visually impaired surfers know where you are sending them, but some search engines figure this into their relevancy for a page. Not anchor text. Don't overdo the anchor text. You don't want all your inbound links looking the same, because that looks like automation – something Google frowns upon. Use your URL sometimes, your company name other times, "Gumbo Pudding Pop" occasionally, "Get gumbo pudding pops" as well, "Gumbo-flavored pudding pops" some other times, etc.

Site map. A big site needs a site map, which should be linked to from every page on the site. This will help the search engine robots find every page with just two clicks. A small site needs a site map, too. It's called the navigation bar. See how the second navigation bar at the bottom of Last Minute Florida Villas is like a mini-site map?

How to remove Header borders

2009-06-28T18:28:00.000+07:00

A blogger request help for removing the Header border (she called it title). This is easily done. First, sign into your Blogger account (Dashboard). Then click on the LAYOUT tab followed by EDIT HTML to get to the template editor. Look for this in the template:#header-wrapper { width:100%; margin:0 auto 10px; border:1px solid $bordercolor; }#header-inner { background-position: center;

Three Steps To Replicating AdSense Earnings

2009-06-27T09:08:00.004+07:00

To get more clicks on ads on Google AdSense (GA), you need to do the optimization. One of the key optimization is a blind ad that does not look like ads. Make your Ads look less like Ads. There are three practical steps to disguise the AdSense ads on your site:

1. Use ad formats that invite a lot of clicks.
Following performance of a variety of formats based on the AdSense Click Through Rate (CTR), which takes from a source.

Format |CTR

336x260 | 7.46%
300x250 |5.58%
728x90 | 3.16%
120x240 | 2.996%
160x600 |2.44%
120x600 |1.33%
468x60 |0.53%

2. Positioning of both
GA position placement on your site also influence the number of clicks you get. Best location, of course, the most frequently seen or seen by visitors. Please refer to post before its position to know some of the GA to provide ad CTR best.

3. Color adjustment
So that integrates with the overall site content, use a color block ads GA accordingly. We recommend color ad border and background colors in accordance with the GA border and background of your site. Color GA link in the ad should also equated with the color of the links on the site

Best Ad Formats

2009-06-27T09:02:00.003+07:00

The following statistics from a source that shows the ranking of color combinations of Google Adsense. Of course, the effectiveness of a combination of colors is also very dependent on the design of your site.

Link Color | URL Color | Border Color | Background Color |Text Color | CTR (%)

000080 | 008000 | 333366 | FFFFFF | 000000 | 15.00
0000FF | 000000 | FFFFFF | FFFFFF | 000000 | 11.86
0000FF | 008000 | FF9900 | FFFFFF | 000000 | 11.47
0000FF | 999999 | FFFFFF | FFFFFF | 000000 | 9.48
0000FF | 0000FF | F9DEFC | F9DEFC | 000001 | 9.00
000000 | 000000 | 993300 | FFFFFF | 000000 | 8.42
0000FF | 0000FF | F4F4FF | F4F4FF | 000000 | 7.40
0000FF |0000FF | F7FDFF | F7FDFF | 000001 | 7.26
0000FF |0000FF | F7F7F7 | F7F7F7 | 000001 | 6.92
000080 |008000 |000080 |FFFFFF |000000 |6.69
0000FF |CCCCCC |FFFFFF |FFFFFF |000000 |6.52
0000FF |AAAAAA |FFFFFF |FFFFFF |000000 |6.03
000080 |008000 |999999 |FFFFFF |000000 |5.50
003399 |000000 |D9D9D9 |D9D9D9 |000000 |5.13
000099 |000000 |FFFFFF |FFFFFF |000000 |4.88
000000 |006633 |993300 |FFFFCC |000000 |4.74
0000FF |008000 |336699 |FFFFFF |000000 |4.56
003399 |000000 |FFFFFF |D9D9D9 |000000 |4.16
0000FF |FFFFFF |FFFFFF |FFFFFF |000000 |4.13
006600 |AECCEB |0099FF |CCCCCC |006600 |3.19
000000 |FF0000 | FFA07A |FFFFD8 |000000 |3.09
0000FF |FF0000| FFFFD8 |FFA07A |000000 |2.76
0000FF |008000 |336699 |FFFFFF |003366 |2.51
0000FF| 003366 |FFFFFF | FFFFFF |003366 |1.67
FF6600 |FF6600 |3366CC| FFFFFF| 000000 |1.61

Google Default Layout

CTR = 1.25 %

Search engine optimization strategies

2009-06-27T08:59:00.000+07:00

We have a personal question for you.
Have you ever "Googled yourself?"
More to the point, when patients from your town search online for the services that you provide, does your practice website make the Google or Yahoo short list?
Sadly, if you are like most practitioners, your own patients would probably have a hard time finding your practice website online, even if they were to search for you by name.
And since most searchers never get beyond the "top 10" search results (in fact many never get past the first one or two listings), a poor search engine showing means you are missing out on over 80% of patients who search online.
In many cases, that translates into a lot of lost patients – and revenue – forever.
In our last article we covered pay-per-click advertising, which is ideal for doctors who want to ensure that they can be found on major search engines, right away.
In this article, we will cover Search Engine Optimization (SEO), which is ideal for practitioners who want to eventually get found online in the organic section (true search results), for free.
Also known as "pray-for-click" marketing, SEO remains a mysterious marketing "black box" to most people.
Many SEO vendors would either have you believe that SEO is far too complicated for a poor amateur like you to understand, or, that they have some special "tricks" that they will use to fool the search engines into ranking you highly.
Both assertions are not only dead wrong, but they are actually dangerous.
It turns out that all the major search engines have teams of brilliant PhDs who do nothing else but create search algorithms in order to rank results. They have seen every trick in the book, and they sometimes will "blacklist" websites which are attempting to game the "fairness" of their results.
"But do local patients even search online for my profession or specialty?"
While in the early days of the Internet doctors typically overestimated the number of searchers online, today we notice that most doctors underestimate the number of potential patients they could reach through their Web searches.
Even doctors who practice in rural, blue collar areas can get excellent patients from the Web these days. While naturally the percentage of patients searching the Internet is lower for rural areas than in urban centers, doctors in blue collar areas notice their highest income, most educated patients do, in fact, find them on the Web.
Moreover, the higher risk, serious, scary and/or expensive treatments are particularly likely to be searched. (E.g., patients considering surgery are more likely to search online than those who are considering upgrading the style of their eyeglasses.)
Finally, patients often use the web as a way of doing due diligence. So even if their PCP referred them to you, they still may want to "check you out" before coming in for an appointment.
Keywords are everything
The first thing you need to do is think like a patient and come up with a list of keywords that he or she would choose.
For example, a prospective dental patient in San Diego might look up "San Diego dentist," "San Diego dental implant," "San Diego tooth whitening" and/or "San Diego cosmetic dentistry."
In fact, last month on the Yahoo network, San Diegans actually did search those exact keyword phrases, respectively 6,103 times for "dentist," 872 for "dental implants," 4,866 times for "tooth whitening" and 1,044 times for "cosmetic dentistry."
For the first phase of your SEO, we recommend you make your website "search engine friendly"
One of the dirty little secrets of the Web is the fact that 95% of web designers are absolutely clueless about how to create your website so that search engines can easily "spider" and catalog your website. As a result, most private practitioner websites are dead on arrival when they are launched, at least in terms of search engines.
In fact, if your website has been online for over a year and is still invisible, chances are your web designer has failed you.
Why?
Oftentimes it is because web designers are artists who spend all their time thinking about the visual world. They typically love technical gizmos that make websites look pretty, and they like to brag to all their arty friends about how attractive their sites are. (But who cares if no one sees it!)
One of the worst culprits is wanton overuse of Flash technology, which usually appears as "splash pages" or simply "cool animation." While there are some tricks to use Flash, and it certainly has a place in web design, Flash remains virtually invisible to search engines.
Worse, most web designers completely overlook easy ways to make your website search engine friendly. For example, most search engines highly value the "title tags" of a web page. If you are wondering what a title tag looks like, look in the upper left hand corner of your browser window on this page, and you will see "Search engine optimization for doctors." We put that there for a reason.
Web designers should also incorporate appropriate keywords, descriptions and "meta tags" into their source code, which can further help you to get found. Even descriptions associated with your photos, your URL name, headline choices and text count tremendously.
You should also make sure you get your website listed in the two most important directories, Yahoo’s directory (https://ecom.yahoo.com/dir/submit/intro/) and Dmoz.org (http://dmoz.org/). You should know that a directory is not a search engine. Rather, it is a human categorization of web content. However, once you are listed in these directories, you are much more likely to get noticed by search engines websites.
Incidentally, you can forget about those automated online services that charge $75-$200 to "prime" your website for thousands of search engines. About 90% of searches are done on Yahoo, Google, MSN and their associated networks. The heavy weight sites will at best ignore your attempts at "priming," and at worst will blacklist you.
Second phase SEO: For more advanced needs
The basics outlined above are all that most practitioners need to eventually get found by search engines. FYI, it usually takes about 6 months for the ball to start rolling and your site to become prominently displayed for local searches.
However, if you are in a highly competitive category and city (like Plastic Surgery in Dallas), you are going to need to call in the heavy artillery.
For our clients in those situations, we often partner with specialists, namely, one of the several search engine optimization companies that we hold in high regard.
(As in medicine, marketing has many subspecialties, and when appropriate, we refer out.)
In addition to all we have discussed so far, there are two secrets to advanced search engine optimization.
The first is content. Search engines love written text (they cannot read images), especially content that increases regularly and is laden with keyword phrases. For competitive markets, we recommend you build, into your budget, ways to generate a lot of ongoing content.
The second "secret" is "back links," especially as far as Google is concerned. It turns out that Google highly values sites which have a lot of links to them (not from them). In other words, if many relevant sites link to your site, it must be important. Keep in mind that it isn’t particularly effective to simply get links from anyone who is breathing. Google somehow is able to measure the relevancy of links, as well as the relative importance of the referring site. So a link from your brother the plumber is not very valuable to you, but a link from the New York Times would be.
Conclusion
If you truly want to maximize your efforts, we recommend both pay-per-click and search engine optimization. The former will get you traffic right away, and the latter is a long term investment in the health of your practice.

7 Ways to Know that Search Engine Optimization Isn't for You

2009-06-27T08:55:00.001+07:00

Truth be told, search engine optimization (SEO) may not be for you.

Regardless of the product or service and company size, SEO just may not be something you can handle - at least for now. If you fall into one of these areas, you may want to just skip the online marketing rage.

1. You don't want to edit your content.
If you're not willing to change your content, an SEO consultant really can't do much to help you. Really, the keywords people use need to be in your content. It's that simple.

2. You love graphics - lots of graphics.
Partial to graphics? Excellent. If you have plenty of business and a pretty Web site, SEO may not be in your future. Again, text helps - if you can work it into your Web site. But if you love static graphic or Flash and "skip" intro buttons, you may want to save SEO for another day.

3. Pages short on copy.
It's not really a repeat of #2. We've some rather barren Web sites with hardly any graphics and not enough copy. Honestly, it sometimes seems like a hunting expedition may be needed to track down more than a paragraph. How many words do you need? No one knows the magic number. But 25 words usually doesn't help.

4. You change your content a lot.
So you want to keep your home page fresh and exciting? Unfortunately, major changes often conflict with the SEO strategy. In other words, if you keep wiping out the keywords an SEO firm inserts, the program is pointless.

5. You want to wait on the redesign.
Some companies get excited about SEO - high rankings and increased traffic can pay off. But don't get started on a program if you're just going to let your current Web site miss out on search engine optimization. Some businesses just want to gear up keywords for a new design months down the road while neglecting their current Web site.

6. You can't stand the thought of your page titles changing.
The title appears in that blue bar in Internet Explorer - the one way up there above "Favorites." If you prefer to say "About Our Company" instead of keywords that actually BRING traffic, you might want to put SEO on the back burner.

7. You're not willing to address other business problems.
SEO consultants can get you traffic, but they can't make your Web site more user friendly unless you let them. Maybe your product page is too busy or your shopping cart is confusing.

by Michael Murray, VP of Fathom SEO

5 Simple Search Engine Optimization (SEO) Techniques

2009-06-27T08:52:00.001+07:00

The lifeblood of any website/ecommerce business is traffic, and every webmaster knows the best type of traffic is natural, organic search engine traffic. There are two very important reasons for this: (1) it is extremely targeted, and (2) It is FREE! The hard part is getting top ranking for your sites keywords... or is it? The purpose of this article is to provide a few simple, effective, and most important, search engine friendly strategies to help boost your websites' ranking and ultimately your traffic.

1. We will start with the Meta Tags. I know you have already heard of, and are probably currently using meta tags on your site. This is great. I just want to make sure you are using them effectively. We will only go over 2 tags: the "title" tag, and the "description" tag. We will not go over the "keywords" tag, as the major search engines have placed less and less weight on this one, and some would argue this tag has no weight at all. I still use this tag however, as I feel there is some merit and no drawbacks to using this tag.

I have found it effective to use similar text in the "title" and "description" tags, and to place your keywords prominently in these tags (near the beginning and more than once). I have seen sites with "sitename.com", "New Page 1", or "Welcome to my site" in the "title" tag, which really does not help in their quest for higher rankings for their particular keyword. Also, try not to use words such as "and", "or", or "the" in these tags.

**Important note about your keywords. Search engines evaluate keyword prominence, keyword weight, and keyword density when determining a site's ranking. All three are calculated individually for the page, the title tag, the description tag, as well as other areas on a page. Keyword prominence means how close the keyword is to the beginning of your page. Keyword weight refers to how many times a particular keyword or phrase can be found on the page. Keyword density is the ratio of the keyword to the other words on the page. You do not want the keyword weight or density to be too high, as this can appear to the search engine as "keyword stuffing" and most search engines penalize sites that stuff their keywords.

2. Place your navigational links (and JavaScript) at the right or at the bottom, but not on the left, of the page. When the search engines "read" your site, they read from the top left to the bottom right. Search engines place an emphasis on the first 100 words or text on the site. You do not want these words to be navigational links or Javascript. Ideally, you want to have your "heading" tags with your keywords in the beginning of your page. This being said, placing your links/JavaScript on the right or bottom of your page ensures the search engine spiders get to the text first, giving more weight to what's important on your page.

3. Place alt tags on all of your images. Search engine spiders cannot "read" pictures or images. The only way a spider knows what an image is about is by reading the alt tag. This is also another chance to place more of your keywords in your HTML, improving your page's keyword weight/density. Alt tags are easy to make and they can make a big difference in your sites keyword ranking. A simple alt tag looks like this: alt="put your keyword phrase here." Search engines separately calculate keyword prominence, density, and weight in alt tags as well, so optimize your tags.

4. Place your keywords at the bottom of your page. Just as search engines place more weight on the first words of your page, they also do the same to the last words. The general thinking is this, if your site is about a certain subject, then the main points, or keywords, should, appear at the beginning, be spread throughout the page, and be prominent at the conclusion. But if you have all of your navigational links and JavaScript at the bottom, your relevant page text could end well before the HTML does. An easy way to have your keywords at the bottom of your page is to include them in the copyright information. For example, if you have a dog food website, you could have something like this at the very bottom of the page:

copyright 2005 yoursite.com World's best dog food

Search engines are not (as of this writing), penalizing sites using this technique, and it wouldn't really make much sense for them to do so.

5. The Anchor Text of your links. Anchor text is the actual linking text on a site. It is what the user clicks on to navigate to that particular site or page. If a search engine finds many links to your site using the term "dog food", then the search engine concludes your site is about "dog food". This is overlooked quite often, but it seems to have a very large impact on your search engine rankings for a particular keyword. Your anchor text needs to be the keyword or phrase you are trying to target. Try to avoid anchor text such as "Click Here" or "www.yoursite.com"

Also, if you're running a reciprocal link campaign, be sure to use variations of your text. If an engine notices every link to your site is identical, it could place less weight on these links or potentially penalize your site. This is because search engines generally give more weight to "naturally occurring" links, and less to "reciprocal link exchange campaigns". Using different, but relevant anchor text can dramatically affect your targeted keyword rankings, by making your links appear more natural.

Effective SEO may seem difficult at first, but as you have read above, little tricks that require little or no programming knowledge, can make a huge impact on your website's keyword ranking.

About the Author
Noah Ulrich is webmaster of http://www.informativeresources.com His site provides top quality resale rights, guaranteed signups, and web traffic.

Technorati

2009-06-25T18:31:00.000+07:00

this for approve to technorati.
code :6yng2fh4bd

ColorZilla Firefox Add-On, Select Color Be Easier

2009-06-24T06:09:00.001+07:00

I believe a lot of friends that follow-up program earning online, Google Adsense is particularly difficult to adjust the color of the ad with color fromat page where the ad will be placed, this is due to the number of color options when I have the code to install on the web / blog is very limited, especially for memorize the colors on the web are many and very difficult.

Adjust color and page color ad is very influential on the percentage of ad clicks, this has been evidenced. Even Google Adsense also suggest to set the colors according to the color on the web page / blog where the ads will appear.

For this purpose, you need the plugin or add-on that my Firefox is very useful, namely ColorZilla. ColorZilla working with the Eyedropper we used to know the code of a certain color. That do not use Firefox, please bite finger:).

How to use ColorZilla:
Install colorzilla with the download of http://www.iosart.com/firefox/colorzilla/, follow the instructions to install. after the install is complete, usually in the requested restart firefox. close Firefox and then open again. Statusbar then in the left bottom of the Firefox browser you will be a small icon appears ColorZilla.

To know the code of the color (see screenshot), click once on the icon colorzilla (blue arrows) in the statusbar, and navigate the cursor shape + sign and click on any posts or image or background (red arrow) that you want to get the color code. Automatic in statusbar will show you the color code in RGB and Hex version, for the web, the color code is the usual use Hex Color, the color format is usually like this # 663300.

To direct the copy, for example, will be included when selecting colors in google adsense, right-click on the icon ColorZilla (blue arrow) and click on any posts copy "663300" as the code for adsense, a # sign is used.

Complete info, please read and learn the official website ColorZilla http://www.iosart.com/firefox/colorzilla/. Happy Testing!

Alexa Update site ifo

2009-06-24T06:02:00.000+07:00

Because of some online earning programs are BASED on the Alexa traffic ranking for a web traffic then this will affect how we value web selling, some programs that BASED on Alexa rank, among others, TLA, Chitika and Adbrite.

To be more convincing about the ownership of a website, it is necessary to include a Site Info or information about a website owner. not important, but what if one data-data on the web we can be more complete with the contact details for our website. Traffic detail so than would be better if the advertiser can also see our contact information web.

Contact Info How to update the website on Alexa:

Enter the domain name you in the search box alexa, after tarffic detail search page appears, on the left there is a link Edit Site Info, enter the full information, then click Continue. To avoid changes in information by people who do not have the right, then there are 2 ways of verification are required, you can select one of them. the first verification using the email you are under the domain that you want to change, I do this for you, enter your email under your domain name, click Continue and then check your email for verification.
Second way is to upload a file info.txt before you download the first and the info.txt file that you uploaded to the hosting of your web root folder. after the upload, click on the link Go fetch.

After verification, it is necessary to take several days to several weeks to make alexa web crawling to you.

If you add-on for Firefox's Search, you can directly see the Google Page rank and Alexa info website / blog that you visit, so I need to deh difficult to check Google Page Rank or Alexa Rank.

How to Campaign Blog

2009-06-24T05:45:00.002+07:00

In particular I do not have a campaign web / blog, submit to the directory or submit to search engines. Typically for a new blog just submit it to google webmaster tools and my explorer.

For blogs I What a money on the internet, I also had a campaign. How can I get a good backlink and PR? I do this: Create a few blogs, for example you have 10 blogs, you make all 10 of nge blog-link to one another. The more blogs or web better to add a backlink, so no need to fuss What backlink with spam comments on blogs people.

Some people are diligent comment on blogs other people can only make the traffic, I can backlink intention? no comment as useless, because of the default wordpress or other blogging software such as blogspot or other link in the comments is set to nofollow, meaning that the link can be considered "important" by the search engine robots. In fact I wiriness any comments or spam, which usually have a blog also delete or mark us as spam.

How secure is it just now, a lot of blogs, the content of the content that routine. In addition to install can create adsense or other programs, plus a sizable backlink to another blog. I have a PageRank update, possibly more likely to be a good PageRank, than I have a blog backlink. Create a blog much better, as long as all can be maintained.

Start now ready-ready content and backlink building.

Post from Handphone (HP) to Blog

2009-06-24T05:37:00.003+07:00

Blogger features have Mail-to-Blogger (posts from the email to the blogger) that can use email to post to blogger. I want the criticism here is the post from the phone to use the facilities with the blogger Mail-to-Blogger is through HP. Requirements, HP you should be able to use email (POP3). I am here I will study how the GPRS settings or other settings in the HP.

Log in to Blogger, select one of the blogs that you will post on the HP via email, click the Settings link to open the Settings page and select the sub menu Email.

At the BlogSend Address, Enter the email address you will send an email to a posting. And then make a confidential email address as the destination address to allow bloggers posting on the Mail-to-Blogger Address.

Select Publish emails immediately I sent my email and pitch directly to the blog post, or select Save emails as draft posts you know what I sent email saved as a draft before posting. Finally, click the Save Settings button to save the settings.

To post, please email as usual, fill in the address of the recipient with the secret email that was made before. Fill in the email subject title with the blog posting. Content on the email contents in the content of our posting. After all complete, send email as usual. check the blog for you, whether I post or not appearing on the blog for you.

For free email services do support POP3, you can be a Gmail. Happy trying!

Source Code Recent Comments

2009-06-24T01:48:00.007+07:00

Some colleagues send me a email and asking if I have any source code for the "Recent Comments" or that we call common with the "Comments". If one does not have 5 email asking the same thing, from my reply on the email one at a better post on my blog only, source code is not made but I made Hans Oosting. With this source code we can edit their own "Recent Comments" in accordance with the desire, clearly if we already have basic programming can certainly edit the code easily, do not forget the origin do not alter the source code of the author is ...

the first part of the code in this code can be entered during where we have a storage directory on the web. if I have a storage directory on the web site we can use a free service such as http://www.geocities.com or http://www.tripod.com Before making the upload process is a good idea first open notepad tools or any text editor, then copy-paste the code below with the store name (eg recentcomments.txt). If the file has been created to do the upload as usual, surely I can do khan:). If we use the services http://www.geocities.com stay logged onto then File Manager - typing its file name and click the new button, delete all and then copy and paste any posts on the page and do not forget the last saved:)

The first part of the code:

// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version : 2.1
// Date : 2007-02-02
// Author : Hans Oosting
// ----------------------------------------

function showrecentcomments(json) {
for (var i = 0; i <>
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k <>
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('
');
if (standardstyling) document.write('
');
if (showcommentdate == true) document.write('On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
document.write(' commented');
if (showposttitle == true) document.write(' on ' + posttitle);
if (!standardstyling) document.write('
');
if (standardstyling) document.write('
');
if (comment.length <>
if (standardstyling) document.write('');
document.write(comment);
if (standardstyling) document.write('');}
else
{
if (standardstyling) document.write('');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment );
if (standardstyling) document.write('');}
if (!standardstyling) document.write('
');
if (standardstyling) document.write('
');
}
if (!standardstyling) document.write('
');
if (standardstyling) document.write('
');
document.write('Widget ');
if (!standardstyling) document.write('
');
}

To make the above code in the code we live under this, I live copy and paste the code and input on the blogger page element.

565 with a Wider Post Area

2009-06-21T19:54:00.001+07:00

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the 565 template by a desired amount. If you need to upload images/embed videos etc that are wider than the default width of the post column, this modification will give you more room in your posts.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

Go to Layout -> Edit HTML
Locate the #main-wrapper CSS selector (Do a Find using your browser)
Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 660 by adding 200 to the default width of 460 pixels.

#main-wrapper {
width: 660px;
...
}

3) Increase the width of the outer wrapper to accommodate the expanded main wrapper.

Locate the CSS section called #outer-wrapper
Expand its width property by the same amount of pixels selected in step (1)

#outer-wrapper {
width: 744px;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

565 with a Wider Post Area

2009-06-21T19:54:00.000+07:00

Go to Layout -> Edit HTML
Locate the #main-wrapper CSS selector (Do a Find using your browser)
Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 660 by adding 200 to the default width of 460 pixels.

#main-wrapper {
width: 660px;
...
}

3) Increase the width of the outer wrapper to accommodate the expanded main wrapper.

Locate the CSS section called #outer-wrapper
Expand its width property by the same amount of pixels selected in step (1)

#outer-wrapper {
width: 744px;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

Google account deleted, cannot access blog - What to do

2009-06-18T21:06:00.000+07:00

A Blogger account is associated with a Google Account. Never delete your Google Account. If you delete your Google Account, your blogs will become inaccessible to you. If you have accidentally deleted your Google Account, go to Google Account Help and fill in the form as soon as possible. Then pray.Acknowledgement: Thanks to Mishka for pointing this out.

How I got a Page Rank of 4

2009-05-28T23:39:00.001+07:00

Today is an important day for The Blogger Guide (TBG). Its Google Page Rank has gone up to four 4! (It might have been updated a couple of days ago, but I noticed it only today). It took approximately a year and four months to get to this level. Of course, Page Rank will not simply go up as time goes by. One needs to put a significant effort to earn such a rank and, in this post, I will share some tips about how I got there.

Content with Value

In the SEO circles, it is said that content is king. Although good content alone won’t attract much success, it is a vital ingredient. All most all articles on TBG are written after lot of research to ensure accuracy and completeness. Simple copy-and-paste type of articles don’t really add any value to the readers and also don’t give any authority to a blog.

Good content is the key in attracting incoming links, which are vital for a good page rank.

Niche Blogging

This is another advice that bloggers hear very often. It is easier said than done, but staying focus on an adequate size niche increases the value of a blog. I used the word adequate because, if your niche is too narrow, then you can soon run out of ideas to write content.

TBG’s focus, as the name suggests, has been on Blogger. While being more specific about Blogger, I have also touched upon more general topics that all bloggers are interested, such as monetization and blog promotion.

Use of Illustrations

A picture is worth a thousand words. Being a blog about technical stuff, it is very important that what I write is easily understood by the readers. Explaining technical stuffs in simple, non-technical language, amply supported by illustrations is another reason for the success of TBG. I spend quite a lot of time in developing these illustrations either by drawing from scratch or by annotating screenshots. (See the article series on the Blog widget for example)

Offering Genuine Help

Helping Blogger users in forums such as the official Blogger Help Group, Blogger Forum and Blog Catalog etc to solve their problems was another reason. Staying focused on a niche is advantageous here because most niches have online forums of users who are interested on that topic. You must locate the most active forums for your niche and participate in them. An active forum will drive you more visitors and leaving the URLs of your articles there will count towards your page rank as well. But be careful to not to spam the forum with unrelated URLs.

Respond to Readers

I reply to my readers who leave comments or directly email me, mostly within a day. Fast responses are really appreciated by them as evident from the replies I get back. Most of them really don’t expect me to reply that soon. Responding quickly tells the readers that this is a lively blog and that it is not an old unmaintained one.

Posting Regularly

Google doesn’t like blogs that don’t update frequently. Posting new content at least once a week is also required to run a successful blog. There was a period of 3 months in which I could not write a single article, and I noticed a sharp decline in visitors during that time.

Not Relying on Short Cuts

Last but certainly not the least, I relied on working hard based on the tips listed above and did not resort to short cuts such as spamming forums or other blogs, link exchange etc. Today’s search engines don’t just look at the link, but they also evaluate the context in which it appears. If the link appears in a meaningful and relevant context, that will score more in their ranking algorithms. In contrast, they are also smart to identify blogs that employ short cuts such as the ones mentioned above.

That's it for now. I hope you will find them useful.

How I got a Page Rank of 4

2009-05-28T23:39:00.000+07:00

Content with Value

Good content is the key in attracting incoming links, which are vital for a good page rank.

Niche Blogging

Use of Illustrations

Offering Genuine Help

Respond to Readers

Posting Regularly

Not Relying on Short Cuts

That's it for now. I hope you will find them useful.

3 Columns : 565 : Left and Right Sidebars

2009-05-24T22:46:00.001+07:00

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives step by step instructions to convert a default 2 column 565 Blogger template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #left-sidebar-wrapper
Change the float: $endSide to float:$startSide of this newly copied section
Change the occurrences of $startSide in the background property to $endSide. (See the code snippet below)

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#left-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$endSide.gif")
no-repeat $endSide top;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 1006 pixels

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a left margin of 12 pixels. (add the line shown in red)

#main-wrapper {
width: 460px;
margin-left:8px;
float: $startSide;
...
}

5) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #left-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Three Column Templates Explained

3 Columns : 565 : Left and Right Sidebars

2009-05-24T22:46:00.000+07:00

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #left-sidebar-wrapper
Change the float: $endSide to float:$startSide of this newly copied section
Change the occurrences of $startSide in the background property to $endSide. (See the code snippet below)

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper
Change its width property to 1006 pixels

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a left margin of 12 pixels. (add the line shown in red)

#main-wrapper {
width: 460px;
margin-left:8px;
float: $startSide;
...
}

5) Modify the CSS rules for the wire frame layouts editor.

Locate the end of the skin denoted by "]]>"
Add the following code shown in red, above that line.

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Three Column Templates Explained

Technorati Authority

2009-05-16T23:07:00.001+07:00

In a previous post, we looked at the Alexa Traffic Rank and its importance. This one will take a peek at another popular blog ranking method called the Technorati Authority.

Technorati is a blog search engine that indexes millions of blogs around the world. Because of its massive index, it can instantly identify which blog is linking to which other blogs in the blogosphere. This data is used by Technorati to calculate a metric which they refer to as authority.

Stated simply, Technorati Authority is the number of blogs linking to a website in the last six months. Higher the blogs that link to a given blog, higher the authority it has. A blog will get more incoming links if it is writing quality, authoritative content that is accepted by others.

Because only the links that are made during the last six months are counted towards authority, one needs to keep producing better content to be able to get new links. But even old articles which are discovered by new visitors to a site may attract new links. Multiple links from the same site are counted only once. But a recent link from such a site will refresh its vote for another six months.

One problem though is that only blogs which are on Technorati, or in other words, which are indexed by Technorati will add to your authority. If a blog which is not listed on Technorati links to your blog, Technorati is not able to count it.

Technorati Authority

2009-05-16T23:07:00.000+07:00

Fixed width template horizontal scroll bar

2009-05-08T18:05:00.000+07:00

A blogger told me that some of his readers complained of seeing a horizontal scroll bar (at the bottom of the screen) while he himself found no issue. I am guessing that he must be using a fixed width template optimized for screen resolutions greater than those of his readers while he himself is using the wider screen so see no horizontal scroll bar. These are the standard screen resolutions -

Alexa Traffic Rank

2009-05-08T13:30:00.001+07:00

There are many ranking systems that measure the popularity and the quality of websites and blogs. Google Page Rank, Alexa Traffic Rank, Compete and mozRank are some examples of such systems. There are some other ranks such as the Technorati Authority and BlogCatalog Rank, which are more focused towards blogs. This post will take a look at the Alexa Rank which has established itself as a popular and reliable website ranking system.

The Alexa Traffic Rank is derived from the website traffic data collected from millions of Internet users who have installed the Alexa Toolbar and also from other traffic sources. These data are analyzed over a moving three month period and therefore, the rank on any given date is based on the traffic data during the past three months.

The traffic rank is a combined measure of a website’s reach and page views. The reach is the percentage of all Internet users who visits a given site. If a website has a reach of 1%, it means that out of all users who browsed the Internet, 1% has visited that site. Page views are the total number of pages viewed by the visitors to a given site during the period of statistics calculation (i.e. three months).

The popularity of a site is inversely related to the rank number. A site with a lower rank number ranks better than a one with a higher rank number. In other words, the closer a rank gets to #1, the better that site is. Alexa considers the top 100,000 sites as the special ones out of the zillions of sites on the Internet and getting included in that list is quite an achievement.

The Alexa rank has gained a reputation as an important yard stick in measuring the value/worthiness of a website or a blog. This is especially important when it comes to website advertising. A site with a higher rank can enjoy better ad pricing among the advertisers and ad networks. If you are concerned about monetizing your site, then keeping an eye on, and working towards improving, your Alexa rank is a prudent thing.

Like most measurements, the Alexa rank is not a perfect gauge of the quality/popularity of a site. The sample size used by Alexa (which is several millions according to them), may not be representative of the entire Internet population. The Internet World Stats sites reports that, as of March 31st 2009, the total Internet users have gone beyond 1.5 billion! A sample of even 1% of such a massive population amounts to more than 15 million users. But, in the absence of perfect data, Alexa rank works as a formidable measure.

The rank of The Blogger Guide as of today is 430,987 and is nothing much to write home about. However, the three month change (i.e. the difference between the rank three months ago and that of today) shows a gain of over hundred thousand, which is a positive sign. This gain is in accordance with the growth in traffic seen over the same period.

For more information, see this FAQ page on the Alexa website and this good article on doshdosh.com.

Alexa Traffic Rank

2009-05-08T13:30:00.000+07:00

Monetization - A Reality Check

2009-05-04T22:32:00.001+07:00

Blogging for Money is not as easy as the hype that goes around. It is certainly not a matter of simply starting a blog, putting some ads on it and waiting for the monthly checks to arrive at your post box.

This recent post on the Alexa Blog presents an estimated calculation on possible earnings from blog monetization, serving as a reality check on money blogging. It is estimated that, despite the economic setbacks, the online ad spending in US alone will expand to an impressive $24.5 billion in 2009. The figure worldwide will be much more and a portion of that money can be grabbed by all the bloggers out there. The problem, however, is that it needs lot of hard work from the part of the bloggers, to be of any success. The above mentioned calculation is somewhat narrowly scoped in that it only considers CPM (Cost per Thousand Impressions) ads, but the overall message it conveys is still true.

So remember, if you want to monetize your blog, don't expect anything soon. Be prepared to invest lot of time and effort to build up your visitors by offering quality content and being responsive to their questions etc. It may require a year or two for you to be successful. (The time period will, of course, vary depending on your blogging niche and the amount of effort put)

Monetization - A Reality Check

2009-05-04T22:32:00.000+07:00

Header Image in Widened Blogs

2009-04-26T13:57:00.001+07:00

This is a question I get from time to time from the people who have widened their blog by following one of the three column conversion or wider post column guides. This post is an answer to that question.

The header image is uploaded via the Header element in the Layouts -> Page Elements section.

The available size for this image depends on the size of you header. For example, in the Minima template, it is the width of the #header-wrapper CSS selector. If the image you upload is smaller than this maximum available size, Blogger will upload it as it is. But if the image you upload has a higher width than the available size, Blogger's action will depend on whether you've selected the Shrink to fit option in the Configure Header dialog box. If that option is selected, the width of the image you upload will be resized to the maximum possible size. (The height of the image will also be adjusted to the same scale to avoid distortion. But the reference dimension is the width). If Shrink to fit is not selected, the image will be uploaded as it is despite it being bigger.

When you customize your blog either by adding a third column or by expanding the size of the post area, the header size will also be widened to match the new blog width. Therefore, you will have to re-upload the header image. If the current header image is smaller than the new blog width after the expansion, then you have to widen the header image as well. For that you need to use some image processing software such as Photoshop. If, however, the image you uploaded had an actual width that is bigger than the new expanded header size, a simple re-uploading will do.

Header Image in Widened Blogs

2009-04-26T13:57:00.000+07:00

Blogger for Dummies is not my main blog. Blogger Tips and Tricks is

2009-04-17T20:53:00.000+07:00

I see that there are 35 followers of this blog on Blogger. If you happened to be a follower, perhaps you might be interested to know that while this is my first Blogger related blog, this is not my main Blogger related blog and is not updated often. The main Blogger related blog is Blogger Tips and Tricks of which the URL is http://www.bloggertipsandtricks.com/. The reason this is not my main

3 Column Templates : Rounders 3 : Two Right Sidebars

2009-04-10T10:39:00.001+07:00

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template of Blogger comes by default with only two columns. However, most bloggers want to have three column templates as they give more options in arranging the many gadgets on a blog. If you are one of them, this tutorial will give you the steps on how to modify a default 2 column Rounders 3 template in to three columns with the two sidebars on to the right hand side of the main column.

(For the more interested readers, the article series Three Column Templates Explained will explain the under the hood details of what's happening here.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need custom size templates, please contact me.

1) Add a new CSS id selector for the new second sidebar.

Switch to Layout -> Edit HTML
Find the #sidebar-wrap selector
Copy that full section and paste below the existing sidebar section and rename it to #right-sidebar-wrap
Change the float property of the existing #sidebar-wrap selector to $startSide (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for ... float */
}

#right-sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Add a new div element, which will be the placeholder for the second sidebar

Locate the <div id='sidebar-wrap'> element
Copy the code shown in red, below that section

3) Adjust the parent wrappers to accommodate the newly added sidebar

Find the CSS section called #outer-wrapper
Modify its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Change the required margins, padding etc

Locate the #sidebar-wrap section
Change the left margin to 7 pixels

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 ;
...
}

5) Add the required CSS selectors for the second sidebar.

Locate the #sidebar h2 selector
Copy the code shown in red below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#right-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#right-sidebartop a {
color: #ffffff;
}

#right-sidebartop a:hover {
color: #ffffff;
}

#right-sidebartop a:visited {
color: #ffffff;
}

#right-sidebar a {
color: #99ddbb;
}

#right-sidebar a:hover,
#right-sidebar a:visited {
color: #ffffff;
}

#right-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded ones as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

#header-wrapper {
background: url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:830px;
}

body#layout #main-wrap1 {
width: 485px;
margin-right:10px;
}

body#layout #sidebar-wrap,
body#layout #right-sidebar-wrap {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://bguide.blogspot.com/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://bguide.blogspot.com">The Blogger Guide</a>

</body>
</html>

3 Column Templates : Rounders 3 : Two Right Sidebars

2009-04-10T10:39:00.000+07:00

Switch to Layout -> Edit HTML
Find the #sidebar-wrap selector
Copy that full section and paste below the existing sidebar section and rename it to #right-sidebar-wrap
Change the float property of the existing #sidebar-wrap selector to $startSide (See the code snippet below)

2) Add a new div element, which will be the placeholder for the second sidebar

Locate the <div id='sidebar-wrap'> element
Copy the code shown in red, below that section

3) Adjust the parent wrappers to accommodate the newly added sidebar

Find the CSS section called #outer-wrapper
Modify its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Change the required margins, padding etc

Locate the #sidebar-wrap section
Change the left margin to 7 pixels

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 ;
...
}

5) Add the required CSS selectors for the second sidebar.

Locate the #sidebar h2 selector
Copy the code shown in red below, after that selector.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

7) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

Post Date Header

2009-04-06T00:26:00.001+07:00

The Date Header is that part of a Blogger blog which displays the date in which a post was created. This is sometimes referred to as the date stamp as well. We can easily control whether the Date Header should be displayed or not, and if displayed, in what format should it be displayed.

First let’s see how the appearance of the Date Header can be controlled. In Layout -> Page Elements view, if you open the Blog Posts widget in Edit mode, you get the Configure Blog Posts dialog. In that, the first check box under Selected Items is the button to ON/OFF the display of the Date Header. This is illustrated by the first red arrow in the figure below.

The format of the date stamp can be controlled from the drop down next to the check box mentioned above. However, it can also be set from the Settings -> Formatting section as shown below.

The Date Header is displayed only once for a given date. i.e., if you do more than one post per day, all of them will get only one date stamp when they are displayed on the blog’s main page. (Each of them, however, will have a date header on their individual post pages.) This is because the layout data tag (data tags are bits and pieces of information held in the Blogger database with respect to each blog) for the Date Header is set only once for all the posts in a given day.

This data tag is the post.dateHeader tag and this Blogger Help page says that it is “only present if this is the first post in the list that was posted on this day”.

Post Date Header

2009-04-06T00:26:00.000+07:00

CSS Basics – Part 4

2009-03-28T11:04:00.001+07:00

This will be the final part of a series of articles which introduced the basics of Cascading Style Sheets (CSS). In this one, we will take a look at what makes up a style sheet. One might think that this is something that we should have looked at the very beginning of an article series for CSS basics. However, I took a different approach here in first explaining the why before looking at what.

First a quick reminder; part 1 was about how CSS got its name, part 2 covered its use in separating content from presentation and part 3 was about how the separated presentation (i.e. style) is hooked up with content with the use of selectors.

A style sheet is nothing more than a collection of rules. Each rule has a name (or selector to be precise) and a declaration block. A declaration block is a collection of declarations enclosed within a pair of braces (i.e. “{}” ), where each declaration consists of a property name, followed by a colon, followed by one or more comma separated values. Each declaration in a rule should be separated with a semicolon.

If the above sounds complicated, take a look at the following figure, which illustrates the anatomy of a CSS rule. What is shown on top there is an exploded view of a rule marked with Label (1). This exploded view highlights the important elements of a rule described above; i.e. the selector, the block delimited by opening and closing braces, the declarations and their constituent parts property name, colon, values and the semicolon.

You normally see rules as shown by Label (1). However, the whitespaces (i.e. tabs, spaces and line breaks) have no significance to the computer program (usually a browser) that processes these rules. Therefore, rules shown by Labels (2) and( 3) also have the same effect as the rule tagged as Label (1).

This format is technically referred to as the syntax of a CSS rule. Think of it as the grammar of a natural language, say English. To write proper English you must use its grammar correctly. Likewise, proper adherence to CSS syntax is a must. When you define a CSS rule, you have be very careful to put the braces, the colon and the semicolon in the required places. If you miss any or add more than what is required, your style sheet can go haywire and as a result you web page or blog can end up in a mess.

All right, this brings us to the end of this four part series covering the basics of Cascading Style Sheets in simple, non-technical English [as much as possible :)]. Hope you found it useful. For the more interested readers, I recommend the CSS Tutorial at W3Schools and the more comprehensive CSS Guide by Westciv.

CSS Basics – Part 4

2009-03-28T11:04:00.000+07:00

CSS Basics – Part 3

2009-03-22T00:49:00.001+07:00

In the two previous parts of this series, we looked at why CSS is called by that name and the importance of CSS to web designing. In this part, we will cover selectors, which is absolutely crucial in understanding how CSS works.

Linking Presentation and Content
In part 2, we learned that CSS helps us to separate the content of a web page from the presentation of that content. This separation is a very much desired technical feature that enables web designers to vary the presentation (or style) of a web page without much of a hassle.
Though this separation is technically better, it becomes useless if we don’t have a way of attaching a given presentation aspect (i.e. a CSS rule) to some given content (i.e. an HTML element). This is where the selectors come in handy. Selectors are the means by which we link the separated content and presentation.

What is a Selector?
A selector identifies an HTML element in a web page. In other words, a selector selects an HTML element and applies the style rules defined in it, to that selected element.

If you open your Blogger template in Edit HTML mode and scroll to the template skin area, you find many CSS selectors applicable for that template. a, .sidebar, #main-wrapper are some examples for selectors found in most of Blogger’s templates.

Types of Selectors
There are many types of selectors in CSS. Out of them, the following three are very important.

Type (Element) Selectors
Class Selectors
ID Selectors

Type or Element Selectors identify basic HTML elements. p (paragraph), a (anchor), body, table are all examples for basic HTML elements. An Element Selector is defined simply by using the element's name as the name of the CSS rule. For example, the following CSS rule selects the entire body element of an HTML page and changes its background color to black.

body {
background-color:black;
}

A Class Selector is applied to one or more HTML elements which have their class attribute set equal to the name of the Class Selector. A Class Selector is defined using any name with a dot ( . ) in front. There should not be a space between the dot and the name of the CSS selector.

A Class Selector called “myclass” is shown below.

.myclass {
color: red;
font-size:10pt;
}

To apply the above CSS rule, we have to add the required HTML element to that class using the class attribute.

<p class=”myclass”>
This paragraphs text will be in red color size 10 fonts.
</p>

An ID Selector is applied to one and only one HTML element in a web page that has an ID equal to the name of that selector. The name of an ID selector is preceded by a hash ( # ) character.

#outer-wrapper is an example for an ID Selector with the name outer-wrapper and the following div element has its ID set to outer-wrapper so that the #outer-wrapper CSS rule gets applied.

Note that when Class and ID selectors are applied to HTML elements, the values given for the class and id attributes include only the name of the selector. The dot or the hash characters are not used for the attribute value.

The Class and ID selectors are functionally similar. They differ due to the fact that a Class Selector can be applied to a group of HTML elements whereas an ID Selector is limited to a single element.

There is a lot more about CSS selectors. Pseudo selectors, descendant selectors, child selectors and specific class and ID selectors are other important concepts. However, as this article series is about CSS basics, I will limit the discussion to the above three.

CSS Basics – Part 3

2009-03-22T00:49:00.000+07:00

Type (Element) Selectors
Class Selectors
ID Selectors

body {
background-color:black;
}

.myclass {
color: red;
font-size:10pt;
}

To apply the above CSS rule, we have to add the required HTML element to that class using the class attribute.

<p class=”myclass”>
This paragraphs text will be in red color size 10 fonts.
</p>

CSS Basics – Part 2

2009-03-15T10:45:00.001+07:00

In the first part of this article series, we looked at how CSS got its name. Cascading Style Sheets are a set of style rules that describe the look and feel (i.e. presentation) of a web page and these rules can be defined at four different levels, which get cascaded to a single virtual rule set when a web page is viewed in a browser. Now that we know why CSS is called that way, let’s try to understand the value of style sheets.

Content vs Presentation
CSS is used to define how a web page should look like. As we already know, this aspect is technically called the presentation of a document. The other main aspect of a document is its content. Content is the actual body of information carried by a document. The aspects of content and presentation are not limited to web pages; they are common to any document.

Let’s spend a little bit more time trying to understand the difference between content and presentation. Say you are typing a document in MS Word. You will start off with a title and perhaps a sub title. And then you keep on entering your ideas and soon you’ve filled a couple of pages. Now you see some structure emerging in your ideas and therefore you put in some headings and sub headings. Then you apply various styles such as Heading 1 and Heading 2. You make certain text bold, use different fonts, colors and so on.

Once you are done you have a document with some content formatted nicely as well. If you now do a Select All (Ctrl + A), open Notepad and paste what you copied, you will be left out with the content of your document. In other words, Notepad will strip off all the presentation aspects from your document. So what you have in the Notepad is the content and the Word document has the same content with some presentation aspects applied.

This example should help you to understand the difference between these two aspects. (However, in a strict technical sense, the fact that a certain piece of text is Heading 1 and another portion is Heading 2 is also part of the content. What belongs to the presentation is how Heading 1 and Heading 2 look. i.e. the fonts used, its size and color etc. When we copy to Notepad we lose this structural information as well)

Why CSS?
Mixing the content and the presentation of a document is considered a bad practice in a technical sense. HTML had this technical problem. Though HTML was originally designed to describe content that can be linked to form a web of documents, due to the immense popularity it received, it developed certain markup to define presentation aspects as well. The font and b (bold) elements are examples.

With CSS we can correct this problem. In other words, CSS helps us to separate the content from presentation. That way, we can use HTML to define the pure content of a web page and then style it (or define its presentation) using CSS. Now this is the reason why CSS is so critical in today’s web site development.

To understand how this works, let’s consider an example. Consider a first level heading in a web page defined using an h1 element.

We will write a simple HTML document with a plain h1 element and two more h1 elements with the same content, but styled using two different CSS rules named H1A and H1B. The HTML part of that page will be as follows.

<body>
<h1>This is a Level 1 heading</h1>

<h1 class="H1A">This is a Level 1 heading</h1>

<h1 class="H1B">This is a Level 1 heading</h1>
</body>

The two styles H1A and H1B are defined as follows. As you can see, these two styles define different fonts, sizes and colors which can be applied to the h1 element.

.H1A {
font-family:Verdana;
font-size:14pt;
color:red;
}

.H1B {
font-family:Monotype Corsiva;
font-size:36pt;
color:blue;
}

The result is shown below. The same content is made to look different just by applying two different styles. This is the power of CSS! (The full example is available here)

We applied the styles H1A and H1B to the h1 element using an attribute called class. This is where the CSS selectors come in to play and it will be the focus of the next episode of this series.

Your Blog Guide

How to insert Codes and Scripts in Blogger Posts

Very Effective SEO tips for Blogger Templates

Search Engine Optimization tips for Blogger Templates

Swap Title Tags for Better SEO

5 STARS PREMIUM THEME is PROFESSIONAL BLOGGER TEMPLATE

Are You looking for free professional and premium blogger template ?

PREMIUM AND HIGH QUALITY BLOGGER TEMPLATE !

5 STARS PREMIUM THEME CONTAINED THE FOLLOWING FUNCTIONS :

Google Certified Ad Networks with AdSense

Very Effective 7 Social Marketing Resources to increase traffic !

Top effective 7 Social Marketing Resources

Top six jQuery plugin: Accordion Resource

Creating Simple JQuery Accordion menu is very easy !

Give me a Reason to Start a Blog !

Top Ten Reasons to Start a Blog immediately !

Why Should We Blog?

1. To Express Your Thoughts and Opinions

2. To Market or Promote Something

3. To Help People

4. To Establish Yourself as an Expert

5. To Connect with People Like You

6. To Make a Difference

7. To Stay Active or Knowledgeable in a Field or Topic

8. To Stay Connected with Friends and Family

9. To Make Money

10. To Have Fun and Be Creative

What is the Social Web?

The Early Days of the Internet and Web 1.0:

The Internet Becomes Social with Web 2.0:

Popular Tools of the Social Web:

Blogging and the Social Web:

Top 15 effective Tips to Increase Blog Traffic !

Every Blogger Should Read this tips to increase traffic !

Top amazing Tactics to Increase Blog Traffic

here are the best Simple Ways to Get Your Blog Noticed in the Blogosphere !

1. Write Well and Write Often

2. Submit Your Blog to Search Engines

3. Use and Update Your Blogroll

4. Harness the Power of Comments

5. Syndicate Your Blog's Content with an RSS Feed

6. Use Links and Trackbacks

7. Tag Your Posts

8. Submit Your Posts to Social Bookmarking Sites

9. Remember Search Engine Optimization

10. Don't Forget Images

11. Consider Guest Blogging

12. Join Forums, Web Rings or Online Groups

13. Promote Outside Your Blog

14. Nominate Yourself and Other Blogs for Blog Awards

15. Don't Be Shy

Important free tips for you you don't want to miss !

Increase Page Rank for Blogger in No Time …

What's the Difference between Wordpress.com vs. Wordpress.org ?

What is Wordpress?

Wordpress.org vs. Wordpress.com:

Factors to Consider When Choosing Between Wordpress.org and Wordpress.com:

What Features Does Wordpress Offer Bloggers?:

Wordpress Tip from Your About.com Web Logs Guide:

Wordpress.com vs. Wordpress.org: Consider Your Blogging Goals:

Which Blogging Software do I need to choose ?

Questions Bloggers need to know before Choosing a Blogging Software!

Before You Choose Your Blogging Software, Ask Yourself These Six Questions

1. What Are Your Goals for Your Blog?

2. Do You Need to Significantly Customize Your Blog's Design?

3. Are You or Is Someone You Know Technical?

4. Will Your Blog Have Multiple Authors?

5. Do You Need Custom Email Addresses Tied to Your Blog's Domain Name?

6. Do You Have Money to Spend Each Month on Blogging Software and a Blog Host?

Elegant Navigation Tooltip / Popup Bubble with fancy effects !

Side Navigation Tooltip and Popup Bubble !

Adding Google Analytics to Blogger BlogSpot with very easy steps !

How to Add Google Analytics to Your Blogger !

1-Grab Your Google Analytics Code Block

2-Add the Google Analytics Code Block to Your Blogger Blog

Wonderful Gallery Style Blogger Template called “Showcase Light”

Showcase Light - Free Premium Gallery Style Blogger Template

How to fix the thumbnail problems:

Viluxus is Very Cool Blogger Template it gives you professional spirit

Viluxus is a deluxe blogger template.