I was recently talking with a few buddies about the Web 2.0 “wave” of themes hitting the blogosphere, and we were chatting about the types of new tricks that can be done with CSS to stylize your blog. To me, what is considered “Web 2.0″ are themes and colors that are light, simple and easy-to read. I’d say that “fresh” is the new “professional“… and making your blog “fresh” isn’t as hard as it seems.

One really neat trick that I will now share with you involves adding simple “boxes” to your normal post structure, allowing you to add a beautiful flare to an otherwise ordinary blog post. As a note: I want to attribute this trick 100% to the designers at WooThemes . WooThemes is one of the pioneers of these great looking templates, so I am borrowing a piece of their code that a buddy and I were looking at to encourage you to change your website to fit a more natural “Web 2.0” feel.

Let’s Look at Some Examples

The first is an “alert“-type box, that could be used to warn users of some kind of exception to a rule or a potential downside/side-effect to a strategy:

WARNING! The Nuclear Reactor Is Set To Explode!

Let’s offer our users a free download with our “download“-type style:

Check out our FREE eBook: DOWNLOAD HERE

Why not give our users the green light with the “tick“-type box:

“It’s A Green Light Go” – Gorilla Zoe

Add some additional information or an expert tip with the “info“-type styling:

FUN FACT: The collecting of beer coasters is called “tegestology.”

Adding a little note here or there is convenient when you have a “note“-type box:

Grocery List: Milk, Eggs, Baking Soda, Chocolate Chips, Flour, Sugar

Awesome Styles, How Do I Use Them On My Blog?

I’ve compiled the coding you need to add this to your WordPress style, and the great thing about these is that they are really 100% plug-and-play! If you know your way around, you can have these styles working in under a minute.

STEP 1: Download the five different icons that you will need to designate a different style when you enter a new type of “box.”

Grab the icon series from Jimvesting.com:  DOWNLOAD ICON PACK

STEP 2: Upload the image files directly to the “images” folder within your theme (will most likely be located here: “/ROOT/wp-content/themes/THEMENAME/images/“) via an FTP client or web-based file uploader.

STEP 3: Add the following code anywhere in your CSS file (by default, this will be “style.css”) by editing your theme in WordPress (“Appearance” –> “Editor”)

/* CUSTOM IN-POST BOXES */ p.alert, p.download, p.info, p.note, p.tick {  margin:10px 0 20px 0; padding:9px 10px 9px 50px; } p.alert { border-top:1px solid #f0baa2; border-bottom:1px solid #f0baa2; background:#ffd9c8 url(images/ico-alert.png) no-repeat 20px 13px; } p.download { border-top:1px solid #d4ebaf; border-bottom:1px solid #d4ebaf; background:#edfcd5 url(images/ico-download.png) no-repeat 20px 13px; } p.tick { border-top:1px solid #d4ebaf; border-bottom:1px solid #d4ebaf; background:#edfcd5 url(images/ico-tick.png) no-repeat 20px 13px; } p.info { border-top:1px solid #ccc; border-bottom:1px solid #ccc; background:#eee url(images/ico-info.png) no-repeat 20px 13px; } p.note { border-top:1px solid #efe3ae; border-bottom:1px solid #efe3ae; background:#fef6d2 url(images/ico-note.png) no-repeat 20px 13px; }

STEP FOUR: Call the codes inside your actual posts by replacing any paragraph code with a new “class.” This can be done by going to an HTML (the source code) view of your post, and changing <p> to <p class=”____”> where you want the box to appear.

CODES:
To call the alert box: <p class=”alert”>Text Here</p>
To call the download box: <p class=”note”>Text Here</p>
To call the tick box: <p class=”tick”>Text Here</p>
To call the info box: <p class=”info”>Text Here</p>
To call the note box: <p class=”note”>Text Here</p>

Step 5: Clear your blog’s cache (if applicable)  to make sure the changes take place. Save your post and enjoy!

I hope that you enjoyed this quick tutorial. I know that a lot of people have asked about how to do this on other websites, and since I figured out how to make it happen I figured I’d go outside of my typical content and get you some blog improvements. Everyone can use a little Web 2.0, and if you want a theme for a great price that is totally fresh… check out WooThemes for an awesome deal.

-Jimvesting Dot Com

UPDATE: As recommended by Fas of GreatestReviews.net, “WP Notes” has a similar effect on your posts… plus it is a plugin so it is easier to install. CSS is definitely the smart call, but plugins sure are easy to use!

Okay folks, you talked me into it!

After recently launching a new design, that I continue to believe would be much more efficient and monetizable, I am going to cave into the pressure and re-do things like I had it before. It seems that despite my best efforts, the blogging community has fallen in love with the logo and mascot of old… so I have recently contacted my old designer and have started a fresh new concept for the blog.

THAT’S RIGHT… ITS ANOTHER NEW HEADER FOR JIMVESTING.COM!

I will not be using the same theme as my old header, but I am going to portray a new scene that is going to look more like a penthouse office. I am currently in the process of getting a few revisions from my designer, and then I will still need to integrate it into the header that I have currently, but it is going to look somewhat close to the demo I am about to show you.

My designer, Pinky from Freelancer.com, is doing a pretty good job drawing a header out of the sketch I provided him. Please feel free to laugh and make fun of my inability to draw with any level of competence… but it seemed to get the job done well enough!

My original hand-drawn and scanned-in version:
VERSION 1 (Click for Larger)

And here is how it looks once my designer took it apart:
VERSION 2 (Click for Larger)

Naturally I think there is a LOT of work that needs to be done (especially because our old logo is smack dab in the middle of the thing, haha), but  it is certainly coming along and I would love to get any feedback that you can offer on the logo in the comment section below.

The finished header will be out hopefully in around a week, and hopefully before that we can finish up the 30 day blogging series so that our full blog can be ready to go on all cylinders. Again, we’d love to hear your feedback so be sure to leave your comments below.

-Jimvesting dot com

Recently I made an upgrade to the header on my blog, and it was a BIG update at that! Not only did I enhance the looks of the most-viewed area of my blog, but I added a newsletter opt-in box which could potentially boost my subscribers tremendously.

But was my excitement premature!?

One of my readers, Rob from myTTOOS.com, pointed out the following:

Rob: “Really cool, but i bet it will be overseen a lot = bad conversion. Let us know if i am right.”

Jim: “Could be true… but then again I am not trying to spam people like typical marketers, haha”

Rob: “at least put the focus on the chalk board, put a few blinking stars around it or something lol”

Though it sounded silly at first, I started thinking about just how right he was! While I was all concerned with making the new opt-in newsletter box look at good as possible… I made it flow TOO WELL! Therefore, I needed a little something to get people to notice it (though I won’t be putting blinking stars on my header anytime soon, haha). So what did I do? I added a big ol’ floating arrow! Read the rest of this entry »

When you visit a website… what is the first thing you see?
The answer (to this “lay-up” question) is THE HEADER!

While it may be an overstatement to say that theNetFool.com is now sporting the greatest header that has ever been created for a weblog (and I do this simply for a great post topic ), I’ve made some more changes that I am sure you have noticed by now. By adding a clever opt-in newsletter subscription box, and in a very aesthetically pleasing manner, I will be boosting the amount of turnover this blog generates… and we all know that more subscribers = more POWER.

The Inspiration for Change?
My inspiration was actually a video I saw a week ago from one of the most famous MMO bloggers of all time, John Chow. Now, John takes a lot of heat from people who claim that all of his material is either 1) fluffy and unimportant; or 2) wrong or misleading. I feel that most of this is coming from the fact that he is a top dog, and people love to hate the champ. In summary, the video is about how he makes money blogging… and a lot of his success revolved around the fact that he used his blog as a machine to capture email addresses. I noticed that I wasn’t doing this currently, and I have Read the rest of this entry »

I’d like to set some time aside today to talk about one of my latest projects that is currently in final testing: Pirate Cash! This is going to be a new competitor in the “Get Paid To (GPT)” industry, which has had a long history of many boom-and-bust companies. However, I feel that my unique position as a former watchdog of the businesses in this niche gives PirateCash.com all the advantages in the world.

But Why GPT?

There are many reasons why I have chosen this niche to start a new project, but at the very core I would say that the reason is purely passion. When I was growing up, I remember that I wanted nothing more than to score $10-20 for free online… I had a lot of time on my hands and wasn’t eligible to get a job anywhere. Nowadays, many demographics… from teenagers, to work at home moms, to the unemployed looking to re-enter the workforce… are heavily active in this industry. The role of a “get paid to” website is literally to provide a means of profit for people that have a bit of spare time on their hands, and it really works out quite well. Read the rest of this entry »