2011 ~ Easy HTML Tricks for Blogging

Blog Project: 30 Traffic Generation Tips

First of all a big “thank you” for every one who participated. As I said before the number of entries surprised me (and the quality as well, I will definitely apply some of those tips myself).

Now, without further delay, the 30 Traffic Generation Tips:

1. Sridhar Katakam

Keep track of blogs and leave comments on them. A good way to keep the conversation going is to install a MyBlogLog widget and visit the blog of people visiting your site.

2. Ian Delaney

Nothing creates long-term traffic more than value. Consider writing posts with resources or explaining how things work. Useful things get linked to and they get onto del.icio.us, which is far better long-term than a digg front page.

3. Scott Townsend

Inform search engines and aggregators like Technorati (using the ping functionality) when your blog is updated, this should ensure maximum traffic coming from those sources. (check the List of Ping Services)

4. Kyle

Simplify. Pay attention to complex issues in your field of work. It may be a big long publication that is hard to wade through or a concept that is hard to grasp. Reference it and make a shorter “for dummies” version with your own lessons learned and relevant tips. When doing this, I have been surprised to find that the simplified post will appear before the more complex version in search results. Perhaps this is why it results in increased traffic; people looking for more help or clarification on the subject will land on your blog.

5. Grant Gerver

Try to be polemic. I write obsessively about all-things political from the left-wing perspective in the form of humorous, sarcastic one-liners.

6. Daniel

A simple tip that will probably boost your page views: install a translator plugin. I decided to use a paid plugin for this, but if I am not wrong there are some free ones as well. The translation is not very good, as you can imagine, but it helps to attract readers that are not fluent in English.

7. Rory

Submit articles to blog carnivals (http://blogcarnival.com) that are related to your niche. Your article almost always gets posted, and it must generate a handful of visitors, at least.

8. Ramen Junkie

Newsgroups. I always see a spike when I post a review to a newsgroup.

9. Eric Atkins

Create a new design for your website. Not only will it be more attractive to your regular readers, but you can submit it to some CSS gallery showcase sites that feature great designs. This will give you exposure on those sites while generating a lot of traffic and backlinks from those types of sites.

10. Megan Taylor

Participate in conversations on related blogs. Start conversations on your own blog. Don’t just post about a story and leave it at that, engage your audience, ask questions and call to action.

11. Guido

Comment on blogs, write useful content and make good friends on forums.

12. Brian Auer

You must be active to generate traffic. I post comments on other blogs that are related to mine, and I post my site link in my signature at the forums. Spread the word about your blog and it will certainly attract readers.

13. Shankar Ganesh

Just browse around MyBlogLog.com and you will surely get visitors to your blog. Also try to join as many communities as possible that are related to your topic.

14. Andrew Timberlake

A great tip for generating traffic is off-line by including your url in all your off-line liturature from business cards, letterheads, pamphlets, adverts through in-store signage if applicable. I even have our website on my vehicle.

15. Cory OBrien

Read lots of other blogs. Leave trackbacks. Make sure your blog is optimized for search engines. Leverage social bookmarking sites like digg (both for new ideas and for traffic).

16. Jester

Leave comments on other blogs. If you’re already reading them, it takes

just a couple of seconds to leave a message agreeing or disagreeing

with the author, you get to leave a link to your site, and you will almost

ALWAYS get traffic from your comments.

17. Goerge Manty

Post 3-5 times a day. Use ping services like pingomatic or set up wordpress to ping some of the ping services. Engage your readers. Put up polls, ask them questions, give them quizes, free tools, etc. Make them want to come back and tell their friends about you.

18. Engtech

Community. It’s one word but it is the most important one when it comes to blogging. The only “blog metric” that makes sense is the vibrant community of readers it has. Building a community around your blog will bring you increased traffic, but how do you start? The boilerplate response to building traffic is always “SEO, social networking sites, and commenting on blogs” but it can be simplified to “be part of a community”. The easiest way to seed your blog is with an already existing community. But the only way to do that is to be part of the community yourself.

19. Chris

Squidoo Lenses are a good way to generate traffic. By using a lense,

you can generate your own custom “community” of webpages, including some

of the more popular pages in your “neighborhood.” Including your own

webpage in such a list is a good way of generating traffic.

20. Splork

I’ve had good success writing articles and submitting them to EzineArticles. Articles that have been written from well-researched keyword phrases and accepted by EzineArticles tend to rank very high in Google for that search term. Placing anchor text in the footer of those articles so the reader can visit my relevant website has always increased my site traffic.

21. Jen Gordon

I came upon some unexpected traffic when my blog popped up on some css design portals like www.cssmania.com and www.webcreme.com. If you can put some time into the concept behind and design for your blog, I’d recommend submitting your site to a design portal not only for

additional traffic but to build an additional community around your site.

22. Kat

I’ve recently gotten involved with several “MySpace-like” community sites that focus on my target audience. I share my thoughts in their forums, post intros to my real blog on their system blog and I’ve even created a group for my specific niche. It’s been very, very successful for me.

23. Inspirationbit

Well, obviously everyone knows that social bookmarking sites like Digg, del.icio.us, etc. bring lots of traffic. But I’m now submitting some of my articles to blogg-buzz.com (a digg like site for bloggers), and I always get not a bad traffic from there.

24. Mark Alves

Participate in Yahoo Answers and LinkedIn Answers where you can demonstrate your expertise, get associated with relevant keywords and put your URL out there.

25. Tillerman

Be the first to write a post about the ‘Top Ten Blogs’ in your niche. The post will rank highly in any general search for blogs in your niche and other bloggers in your niche write about the post and link to it.

26. Nick

Participating in forums is a great way to get loyal readers. Either link baiting people in your signature or posting great advice and tips will give you high quality traffic, which will result in return visitors.

27. Brandon Wood

A simple trick I’ve used to increase traffic to my blog is participate in group writing projects. In fact, that’s what I’m doing right now.

28. Alan Thomas

Don’t forget your archives. I just posted a roundup of all interviews I did over the past seven months. One of them generated a new link and a big traffic spike from a group of users that look like they will be loyal readers now.

29. KWiz

Write something controversial. I don’t think it’s good to write something controversial just for the purpose of getting traffic necessarily (especially if it’s only for that purpose and you’re being disingenuous), but it works.

30. Dennis Coughlin

Find the best blogs on your niche and contact the authors. Introduce yourself and send a link of your blog. This might help them to discover your blog, read it and possibly link to it.

Customizable recent comments widget (using JSON feed)

With this widget,
1. You can specify how many comments you want to display in your blog (defaults to 10)
2. You can specify the maximum number of letters that should be displayed in each comment (defaults to 100).

Here is how you add this widget to your blog.

Step 1: Goto Template->Edit HTML tab. Find the

</head>

tag in your template and add all the code from this page before it and save the template.

Step 2: Goto Template->Page elements tab and click on "Add a page element" in your sidebar. Choose HTML/Javascript element. Give an appropriate title and copy/paste this code.


<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>

You need to change the blog URL to yours. You could also change the number of comments/letters per comment to whatever fits your blog. Then, save the changes and move the widget to wherever you want. There, you have a customized recent comments widget!!

For those who are interested in the details, I am displaying the content of each entry in the comment feed instead of the title (after removing all the html tags). I display only the number of characters as specified and also control the number of entries displayed. All this is done in the callback function to which the JSON object is passed.

Simple CSS Blockquotes and Pullquotes

A user-friendly blog layout encourages mere visitors to become readers, so maybe you want to spice things up a little… How about some sweet blockquotes and saucy pullquotes?

There is usually more than one way to skin a cat when it comes to CSS, but here’s my suggestion:

Blockquotes

When to use blockquotes
A blockquote is used when quoting text from another source, usually another blog or website. Blockquotes are intended to accommodate alarger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences. Don’t forget to link back to the source.
Example
In an article on Wisdump, J David Macor writes:

Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.
As you can see, I went for the tried and tested over-sized quotation marks to give the blockquote some visual appeal.
Images
You will need to create two images – the opening and closing quotation marks. What they look like is up to you!
The CSS
.blockquote { background-image: url(images/open-quote.gif); background-repeat: no-repeat; background-position: left 5px; padding-left: 30px; font-style: italic; } .blockquote span { background-image: url(images/close-quote.gif); background-repeat: no-repeat; background-position: right bottom; display: block; padding-right: 30px; }
The HTML
<blockquote><span>Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.</span></blockquote>
Note the span to accomodate the closing quotation marks.

Pullquotes

When to use pullquotes
teasers intended to draw the attention of a viewerPullquotes are teasers intended to draw the attention of a viewer by giving a sneak preview of the content. They are quite common in magazines and newspapers and are usually short extracts from the article. Pullquotes are usually separated from the rest of the text by appearing in a bigger, or different font. They often contain surprising, interesting or important snippets, without giving too much away! A pullquote is a focal point on the page. Use them sparingly – more than one or two pullquotes per article, will defeat the purpose.
The problem…
Unlike blockquotes, there is no HTML element for pullquotes. Since the text of a pullquote appears twice on the page (once in the article and once in the pullquote) you should try and distinguish between the two in your markup. I suggest using a heading element for the pullquote.
The CSS
.pullquote { padding: 10px; float: right; width: 200px; margin-top: 10px; margin-bottom: 10px; margin-left: 20px; border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; border-top-color: #694e1c; border-bottom-color: #694e1c; font-size: 16px; text-align: center; line-height: 36px; font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: normal; }
The HTML
<h4 class="pullquote">put the text for the pullquote here</h4>

The overall layout of the header, sidebar(s), navigation and footer is important for the success of any blog, but that’s not where it ends – don’t forget the layout of your text! A user-friendly content layout will engage visitors, encouraging them to read your blog.

Add your thoughts below!

reff : http://blogsolid.com/ideas/2007/simple-css-blockquotes-and-pullquotes/

Six Ways Style Blockquotes

The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

Color and Borders

Applying a color change to the text and adding a border (along with some additional margins and padding) can really make the blockquote stand out, yet is subtle enough to retain a hint of sophistication.

blockquote {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

Background Colors

If you’d like something a little more obvious than just a text color change, you might considering altering your background color instead. This causes the blockquote to “pop,” making it immediately more noticeable. When applying background colors, be sure to account for any tags inside that might alter your margins (such as paragraph tags).

blockquote {
	margin: 1em 3em;
	padding: .5em;
	background-color: #f6ebc1; }
blockquote p {
	margin: 0; }

Background Colors and Borders

Of course, we’re not just limited to either-or, here. A background color in addition to a border in a complementary color is a nice effect, particularly on sites that are a little bit more “glossy.”

blockquote {
	margin: 1em 3em;
	padding: .5em 1em;
	border-left: 5px solid #fce27c;
	background-color: #f6ebc1; }
blockquote p {
	margin: 0; }

Background Images

We’re also not just limited to colors! Many websites make use of background images in their blockquotes to help distinguish them from the surrounding text. The background image might appear below the text, or perhaps off to the side (like we’ve done here) by way of a wider left padding.

blockquote {
	margin: 1em 20px;
	padding-left: 50px;
	background: transparent url(quote.gif) no-repeat; }

Drop-Caps and Styled Lines

Borrowing from my Book-Style Chapter Introductions article, we can also distinguish our blockquotes by using drop-caps, stylized text, or (in this example’s case) both at the same time. Here, we’re making use of the first-letter and first-line pseudo-classes, so browser support may not be 100% in older browsers.

blockquote {
	margin: 1em 2em;
	border-left: 1px dashed #999;
	padding-left: 1em; }
blockquote p:first-letter {
	float: left;
	margin: .2em .3em .1em 0;
	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
	font-size: 220%;
	font-weight: bold; }
blockquote p:first-line {
	font-variant: small-caps; }

Text and Color

Or, if you’d rather go the subtle-but-effective route, you might consider altering the color of the text in the blockquote, as well as the font style or variant. Also in this example, I’m making use of the :before and :after pseudo-classes to insert content into my document – namely, the quotation marks at the beginning and end of the text. Of course, :before and :after aren’t supported by all browsers, so… caveat emptor, and all that.

blockquote {
	color: #66a;
	font-weight: bold;
	font-style: italic;
	margin: 1em 3em; }
blockquote p:before {
	content: '"'; }
blockquote p:after {
	content: '"'; }

You can see all of these examples live here. And if you’ve seen any other great examples of well-styled blockquotes in the wild (or just have a wild idea yourself), I’d love to hear about them: leave me a comment!

reff : http://www.cssnewbie.com/six-ways-style-blockquotes/