How to write HTML code in blogger blog post?

Want to write HTML code in one of your great code-editing-tutorial post but it is not showing up as you want? Well here is a simple solution.

html code blogger

How to write HTML code in Blogger blog posts as text?

It’s a nuisance in blogger, when you write HTML/JavaScript in the default post-editor it will not show up as text. Actually blogger by default tries to interpret the written code. To overcome this, you will have to alter your HTML/JavaScript as follows:

Replace all the < characters with &lt;
And all the > characters with &gt;
(Exactly the same including the semicolons).

For example if you want to write the below given code in your post
<b:skin><![CDATA[
Then it will be written as &lt;b:skin&gt;&lt;![CDATA[ in the Compose box.
It is better to write your post in a text-editor like Microsoft Word and use its “Find and Replace” feature to change the above characters with ease.

Update – Please read this updated post on this topic with some easier solutions to this problem. 

[How to] Manually submit a blog/website URL to Google, Yahoo and Bing Search Index?

The first thing you must do after creating your blog (and writing some good posts) is submit your URL to Google, Bing and Yahoo. In this post we will discuss how to do that –

1. Submit URL to Google search

Go to this page and enter your blog/site’s URL and a short and precise description and/or keywords in the given fields. Enter the correct Captcha and click “Add URL”

2. Submit URL to Bing search (formerly MSN)

Go to this page. Enter your blog/site’s URL in the given field. Enter the correct Captcha and click “Submit URL”.

3. Submit URL to Yahoo search

Go to this page and click “Submit a Website or Webpage”. Enter your blog/site’s URL in the given field and click “Submit URL”. You can also submit your blog/site’s feed address to Yahoo at this page. Feed can be in the form of RSS, Atom or even a sitemap.

NOTE: While typing in the above URL fields, remember to add full URL of your blog/site (including http and also www if applicable). For example it will be http://blogcollab.com rather than blogcollab.com (www is optional). The more (quality) content your blog has, the early your site will start to appear in search results. So to sneak into Google and Yahoo index fast, start adding more and more posts.

(How to) Automatically Tweet Blog Posts to Twitter via Feedburner?

Twitter has become an indispensable tool for web publishers (specially bloggers) to promote their content online. It is customary now to tweet the post after publishing. However manual submission is a tedious task (more so if you write posts too frequently) and considering the fact that twitter is one of the many social networking (SN) sites to submit posts. I always dream of a tool that automatically submits a post to all the SN sites after I publish it. Feedburner has provided this service for Twitter at least. How? Simple – you publish a post and Feedburer automatically submits it to twitter.

To activate this wonderful service, Login to Feedburner with your Google ID. At dashboard click on your blog name (I suppose you already have added your blog feed to Feedburner) and Go to Publicize tab. Under “Services” click “Socialize”/”Add A Twitter Account”. Here submit your twitter account’s login details and tweak “Formatting Options”. Click “Activate” and “Save” to initialize the service. As simple as that, next time when you post an entry at your blog, see it appear on Twitter instantly. This will also spare you some time to do more important things. Hope this helps you. Want to add something here?….please leave a comment.

[How to] Add Google and Yahoo verification Meta tags to a Blogger Blog?

Google and Yahoo are the biggest players in Internet search arena and once established, your blog will be getting most of the visitors referred by them (the organic traffic). So to get recognized by two giant search engines early, you need to add their verification (Authentication) Meta tags. These tags are basically required to verify that you are the owner of the site. Apart from this there are many other advantages of the same, as the Google itself says at Webmasters central “Improve your site’s visibility in Google search results”. Here is the complete guide discussing, how to add these Meta tags to blogger blogs?

1. Adding YAHOO Verification Meta tag to a Blogger Blog

You will need Yahoo ID to do this. Login to Yahoo and go to Yahoo Site Explorer.

Under “My Sites” type your Blog’s URL address (including http://) and click “Add My Site”.

At the Authentication page click at “By adding a META tag to my home page” – A Meta tag like <META name=”y_key” content=”f7b9180a81a10dba”> will be displayed with instructions to add it to site. But if you add it as such to blogger blog’s template, blogger will show an error message. To avoid it, add a slash (/) just before ending “>” in your above Meta tag.

Copy the modified code.

Now to add it to blogger blog follow the steps given below:

Login to Blogger and at Dashboard Go to “Layout/Edit HTML”

Find <head> in the template code (By pressing Ctrl+F). Paste the above copied tag JUST BELOW <head>. Save the template. Go to Authentication page and click “Ready to authenticate”, wait for the confirmation and done.

2. Adding GOOGLE Verification Meta tag

Login to “Google Webmasters” with your Gmail ID

Click on “Add a site”, enter your blog’s URL and click Continue

“Verify ownership” page will open. Choose Meta tag from “Verification method”.

Rest of the procedure is same as in the above Yahoo case: Copy the given Meta tag and paste below <head> in your blog’s template (it does not matter which Meta tag is above or below as both of Google and Yahoo will be there one after another) – now save the changes to Template.

Now go to the verification page (From where you copied the Meta tag) and click “Verify”, wait for the confirmation.

Note: These Meta tags are deleted when a new blog template is installed. So every time you change blog’s template, don’t forget to add both of the Meta tags again. Better save them in a text file. With the help of these tags you can also track your blog’s performance on several parameters (Indexed pages, in-links, external links etc).

Read also How to add your Blog/Site URL to Google, Yahoo and Bing Search Index?

(How to) Remove the Top Navigation Bar from a Blogger Blog

Have you noticed that all professional looking blogs using Google’s Blogger platform do not have that typical “Top navigation bar”. There is no option in blogger dashboard settings to remove this bar. So how do they do it? Actually its very simple and you too can do it yourself for your Blogger blog.

How to delete/remove the top Nav bar from a Blogger Blog?

For this, open your blog’s template HTML code editor (login to Blogger using Google account – go to Template – Edit HTML to access template code). Now search and find the following lines of code in your blog template (to find it press Ctrl+F at the keyboard and enter the following words and then press Enter)

<b:skin><![CDATA[

Now copy following lines of code JUST AFTER or BELOW the above code

#navbar-iframe {
  height:0px;
visibility:hidden;
display:none;
}

Preview the template. If everything is alright as desired, then save template and Bingo! your Navbar has just vanished.

List of Some Useful Blogging Resources

By now I believe, I have written enough in the preceding posts to get you started off on your blog. But, this is also equally true that there is at least a million times more info on the subject scattered all over the net. Here are some websites and blogs I believe you will find useful:

Professional tips for newbie-bloggers
Want to be a Pro-blogger?

1. Weblogs – A one-stop location to learn everything about blogging. Tips, tricks, and tutorials with information regarding every aspect of blogging that a beginner would be looking for.

2. CSS & Blog Design – Once you cross the chasm from being a plain old HTML hack, you will want to dive into the joys of CSS. To see what can be done with a little CSS magic, check out Design Shack’s collection of over 400 inspiring Web site and blog designs.

3. Blogger Dummies – A blog containing useful tips and tricks for Blogger and WordPress platform.

4. Blogger Buster – A very good blog providing tips, tricks and hacks for Blogger based blogs.

5. Blog Skins – If you are not yet ready to dive into the mysteries of CSS, XHTML, JavaScript, and Photoshop, then check out this site. Blog Skins is for those who “suck at design.” Or maybe you do have this great design idea in your head but you have no idea how to go about getting it out of the door. Browse through the vast collection of contributions and you are sure to find one you like. Supports most blogging platforms.

6. Blogger Templates – If you use Blogger, then this site has a collection of ready-made templates that you can use straightaway.

7. Blogger Jobs – A blog about blogging jobs. This is a frequently updated blog, listing various blogging jobs from different companies. Again, while it’s primary focus is the US, there are many purely online job postings that may be worthwhile to apply for.

8. Business Opportunities Weblog – Goes beyond just blogging opportunities. Looks at the latest in business opportunities with a special focus on online businesses.

9. Occam’s Razor – Avinash Kaushik is a self-confessed Web Analytics fan who has turned his passion into a blog. This is an informative blog that takes an in-depth look into the topic of Web site (and blog) analysis. May be useful in helping you optimise your blog.

10. Fab Freelance Writing – For those of you who prefer to get into freelance writing rather than blogging, this site offers tons of tips, suggestions and advice on how to break into the space.

11. Blogging Articles – A collection of articles devoted to the various aspects of blogging.

12. Problogger – A very popular and authority blog with huge repository of resource articles on how to become a professional blogger (and earn money blogging).

13. Shoe Money – A famous blog that discusses the issues involved in making money online, not just related to blogging.

14. Blog – Wikipedia – A comprehensive Wikipedia article covering the history of blogging and its present state. Contains a ton of links to other blogging resources.

15. Indiblogger – The most popular Indian blog directory

And the list goes on, on and on……If you have more such blogging resources, feel free to share via comments.

Basic SEO tips for a WordPress Blog

Here are simple steps to optimize your WordPress blog for search engines –

1. PERMALINKS: By default, links to posts in a WordPress blog will look like this: http://www.yourblog.com/?p=11. Search engines do not like this much, so go to Settings > Permalinks in your admin panel and in the Custom text box, enter “/%category%/%postname%” to change the link’s appearance to http://www.yourblog.com/technology/phone_review. This makes your blog not only SEO-friendly, but reader-friendly as well.
This applies to all CMSes, in fact—most of them support SEOfriendly URLs, either as an inbuilt feature or using a plugin—you just need to make sure that the Web server supports URL renaming.

SEO

2. Edit The Page Title: By default, your page title (the one you see in the search pages) goes thus: Blog Name | Archive | Post Title. You have to bring the post title to the beginning, so that search users can instantly know that they have found what they were looking for. This can be easily changed via WP SEO plugin in WordPress.

3. Get Sitemapped: Sitemap is usually an .xml file containing an index of all URLs of a blog neatly arranged in a chronological order. The sitemap file if present will make it easier for Google (and other Search Engine) bots to index your blog’s content. WP SEO plugin has an option to generate sitemap for WordPress blogs.
This tip applies even for non-WordPress blogs, and you can submit your sitemap to Google at www.google.com/webmasters/sitemaps

SEO Basics – Improve Blog’s Search Engine Rankings

A ridiculous number of books have been written about it, but there are few things on the Web as arcane as Search Engine Optimization (SEO) — you never know exactly what is going to boost your search engine ranking and when. Nevertheless there are certain things that can be said as truly important. SEO-ing your blog works better if you are using your own hosting and content management system (CMS)— the options available to you are far more comprehensive than free blog hosting. However, there are a few things you can do to enhance your free blog’s search ranking.

SEO

SEO-ing Free-hosted (Blogger/WordPress.com) Blog

Firstly, let go of any illusions you might have that Blogger users are at an advantage just because Google owns Blogger. The following tips apply almost universally too:

1. Choose your blog and post titles appropriately. It should be something catchy to grab potential readers, but search engines prefer that you include at least one keyword indicative of the post’s content in every post title.

2. Stick to a general theme for your blog. By their very nature, blogs are riddled with search keywords, and themed blogs more so.

3. Update your blog regularly. Search engines love the “live” Websites that are updated with new content on a regular basis.

4. Submit your blog(s) to popular blog listings/directories

5. Exploit the power of being linked to—make comments on high-traffic blogs (not the I-like-your-site-you-might-like-mine kind, mind you), start discussions, and get yourself blog-rolled on as many people’s blogs as possible.

6. Wherever available, always make sure that you have a permalink for each post—this helps search engines index them better.

7. Add your blog feed to your My Yahoo! and My MSN accounts. This will get you listed on Yahoo! and MSN.

SEOing A Self Hosted Blog

If you are using your own hosting, SEO becomes much easier thanks to the number of options you have. WordPress, for one, offers you its own CMS which you can deploy on your server, and there are a lot of things you can do with it. WP SEO by Yoast is the best (and free) plugin for WordPress to take care of your blog’s all SEO needs.

And lastly, DO NOT get obsessed about SEOing!!! remember once again “CONTENT IS THE KING”.

Blog Promotion Tools – FeedBurner

FeedBurner (feedburner.google.com)

Your blog-host no doubt creates an RSS feed for your blog (ditch it if it does not), to keep your readers updated about the new content from the comfort of their default RSS reader. FeedBurner takes the simple functionality of RSS and “burns” your feed by adding a host of options to help you snag more subscribers.

feedburner

Burning the Feed

Once you have completed the ridiculously simple registration process, you will be asked to burn your feed by submitting the URL of your blog’s RSS feed. Configure your feed title, and your feed will be assigned a FeedBurner URL instead— http://feeds.feedburner.com/yourfeedaddress, for example.
Once you have claimed your blog, FeedBurner enables the Browser Friendly and Standard Stats services to make your feed more readable in browsers and track your feed statistics respectively. The next page lets you configure Standard Stats, and I recommend checking the Clickthrough option. This lets you track the number of times a link in your post is clicked; if you are linking to corporate Web sites, these statistics should play a role in snagging advertisers.

Optimizing Your Feed

After login to FeedBurner, click on the title of your blog to go to the control panel, from where you can select the various ways to configure the way your feed looks in an RSS reader. Here following options are available:

SmartFeed: This has quite a simple purpose—to ensure that your feed is compatible with virtually any RSS reader available. Recommended, because you never know what RSS reader someone is using.

FeedFlare: Enabling this feature lets you put links into your feed posts that will help users give you feedback or tell their friends about your blog—“E-mail the Author”, “Digg This”, “Post to Del.icio.us”, and so on. Read more about FeedFlare in one of my previous post HERE.

Link Splicer: This lets you include your favourites from networking sites like Digg and Del.icio.us and tell your readers what you like to read about. It doesn’t play any role in driving traffic to your blog directly, but it will give people a sense of knowing you, which will in turn keep them visiting your blog with the same, if not greater, regularity. Overall, though, there’s no pressing reason for you to have this enabled.

Splicer: Much like the link splicer, this lets you include your photo feeds from Flickr, Buzznet or Webshots in your feeds. Again, no direct role in getting you more traffic.

Geotag your feed: This lets you add your geographical latitude and longitude to your feed. Mostly pointless; if you find any use for this, do write in.

Feed Image Burner: Lets you add a “Powered by FeedBurner” image or any custom logo to your feed.

Title/Description Burner: Lets you change the title of your feed without having to change the title of your blog (something you’d have to do otherwise).

Convert Format Burner: Lets you select a specific format (RSS or Atom) to convert your feed to. It’s best to avoid activating this—SmartFeed will do all the dirty work of making your feed standards-compatible anyway.

Content Type Burner: This lets you choose a custom MIME (Multipurpose Internet Mail Extensions) type for the feed. If you’re not sure what to do with this, leave it alone.

Summary Burner: This lets you add a little teaser about your blog to your feed. We recommend using this—a well-written description will draw in the crowds.

Publicizing Your Feed

FeedBurner also offers services to help you increase the number of subscribers for your feed.

BuzzBoost: This publishes your blog’s feed as plain old HTML, which you can then use on any site you control, and thus drive more visitors to your blog.

Headline Animator: The Headline Animator gives you the code for a scrolling display of your latest posts that you can paste in the template of your site, or better yet, in your e-mail signature. On online forums that allow it, use this code as your signature to get people to take note of your blog.

FeedCount: This is a simple bit of code that displays the current number of subscribers to your feed. It has little or no role to play in actually getting you traffic, but is good to use for bragging, nonetheless.

E-Mail Subscriptions: Enabling this option gives you the HTML code required to offer readers the option of subscribing to your blog’s feed via e-mail.

Feedflare – A Simple Social Sharing/Bookmarking Widget for blogs

feedburner

I have already discussed how social networking/bookmarking sites (Facebook, Twitter, Reddit, Digg etc) can help increase your sites popularity. To utilize their potential fully, it is necessary to add a “Submit to Digg, Reddit etc…” Buttons at the end of every post so that your readers can easily bookmark the post if they want. There are many such widgets and ways to add this functionality to your blog.

Feedflare is one such service offered by FeedBurner. I suppose, most of today’s bloggers are aware of Feedburner (A google service for generating and promoting feeds for your blog or site). If you are not aware of it still, then let me tell you that Feedburner is a must-have tool for promoting your blog, it offers some great services including analysis of your blog traffic, optimization, promotion (with the help of some wonderful widgets) and even monetization (through Adsense ads displayed in Feeds of the blog) – all this for absolutely free, so if you are a serious blogger then create an account now.

Login to your FeedBurner account (with Google ID) and click the name of your blog, go to Optimize page, there click Feedflare. Here you can customize which Social Networking Site you want to add to your widget (or “Flare” as it is called) and in what sequence, also you can add more such sites to your Flare through the option of “Add new Flare” by browsing through the catalog provided. It is also an option to choose different Flares for the Blog and the Feeds. After customization just copy and paste the generated code (according to your blogging platform) into your blog template as per instructions given and you are done. The look and layout of the widget can be further customized by tweaking the code.

A Complete Guide to Make Money Blogging, Wordpress and Affiliate Marketing