Attempting to Monetize a Personal Blog

For the past month I have been on a cross country road trip living it up with my wife. Our road trip so far has taken us across most of the United States and now we are almost to Maine. We plan on living on the road for another couple of months or so. It really has been a wicked awesome good time. We have both spent a lot of time creating a blog of our experience (you can find it here Road Trip Blog). I decided that it might be worth it to try to monetize the blog to see what happens. The blog is a little more personal in nature and so far pretty much only family and friends have visited it, but I see potential that it might be something interesting to a broader audience. In an effort to help make it appeal to more than just family and friends we are adding a few categories full of more general posts about road trips including tips, tricks, economics, and ideas that we are learning from our time out on the road. I figure we are already spending the time making the blog, and we don’t mind making it public so why not try and make some money off of it. I am not sure if monetizing a project like this will be very successful or not, and I don’t plan on spending much time promoting it, but I really don’t have much to lose so why not try.

As of yet I have no advertising on the blog but I will try and get this set up before the end of the month. We already have quite a few visits from family and friends and am toying with the idea that possibly monetizing this traffic alone may be enough to fetch a few bucks a month. It will be interesting to see if it works.

Remove Extra Line after Smiley Faces in WordPress

So I noticed in one of the wordpress blogs I am working on that while the emoticon (smiley faces) I was using were properly being converted into images, they all had an extra line spacing after all of them. Needless to say this was quite annoying and screwed up the paragraphs in my posts. Getting rid of the extra spacing around the smiles was quite easy once I knew the correct search terms (display emoticon inline). After a bit of digging and fooling around with the styles in chromes Developer Tools I figured out my smiles were inheriting the “display: block” from another class. To solve the problem I included the following line into the style sheets and all the extra spacing was removed.

img.wp-smiley {display: inline;}


PR from 2 to 0 (box grayed out)

So, I used my old domain names ( for this blog in hopes that the then existing PR (2) and back-links would help jump-start my blog and put me on the fast track for monetization.  However I am beginning to wonder it that was the best move as google has taken away my PR.  Looks like I should have just used a new domain name.  Seems like google is able to detect when a new site is put up over an old one and voids out all the current rankings (which is quite understandable).

The google toolbar (Which used to say 2) now only shows a 0 Page Rank (grayed out “current page is not ranked by google”). Bummer!!! I am not quite sure what this means, or when it started.  I did switch the preferred domain to the non www version in the google webmaster tools which may have something to do with it…

Guess I will just wait and see what happens during the next PR update.

How to share a internet connection for 3G and 4G with a single wireless USB broadband modem

I am out on a road trip right now and occasionally use a USB mobile broadband modem to connect to the internet (CLEAR 4G+ Mobile USB Series S). Thing is, my wife is traveling with me and wants internet on her laptop as well. I was too cheap to buy one of the mobile hot spot devices and I also wanted flexibility to use 3G internet when 4G was not available (which is most of the time out on the road).

Turns out windows makes it is incredibly easy to share a single connection from a USB mobile internet devices (no router required). The following instructions are for windows Vista, I assume this will be similar in other versions of windows as well. First you need to do is set up a “ad hoc” network. You can do this by clicking on the start button > “connect to” then select “Set up a wireless ad hoc (computer-to-computer) network and follow the wizard.

When I was trying to share the connection while using 4G at the end of the wizard there was an option to enable “Internet Connection Sharing” after selecting this we were able to connect to with the other laptop to the newly created wireless network and surf the web… no problems.

However, when trying to connect with the 3G there was no option to enable internet connection sharing at the end of the wizard (like there was for the 4G) and it was a bit more involed to get the connection sharing to work. (Looks like this may be due to the fact that the 3G is considered a dial up connection??). This is how I did it. First create the ad hoc network as described above using the wizard, then after the network is created go to Start > Connect To > Open Network sharing center > Manage network Connections. From here you have to do two things.

Enable sharing for the connection you would like to share (for me it shows up as 3G under Dial-up). To do this right click > properties > Sharing Tab > Allow others network users to connect through this computer’s internet connection. (Also, you may have to select the individual services you would like to share – I selected them all)

Change the IP address for the ad hoc connection you just created. To do this right click the ad hoc connection in “Manage network Connections” and select properties. Next select the “Internet Protocol Version 4 (TCP/IPv4)” and click the properties button. Select the “use the following IP address” and set the IP address and Subnet mast to the following and hit ok(After changing this you may need to restart the 3G connection).

IP address:

Subnet mask:

Now just connect to the ad hoc network from your other laptop and and voila… you have shared your 3G connection and should be able to browse the web (albeit very slowly).

When you want to re-connect to a normal WiFi connection you may have to go back to manage network connections right click > properties on the network you are trying to connect to and change the “Internet Protocol Version 4 (TCP/IPv4)” connection property back to ‘Obtain IP address automatically’

Hope this helps


HTML5 Audio Is Here (Sorta)

Figuring out how to implement a pure HTML5 Audio solution for my game was quite a chore. I found countless threads and post complaining that audio support is just not there yet and that the best thing to do is use flash based solutions (like the SoundManager 2 script). However, I found other information which lead me to believe it could be done. After much searching and trial and error I figured out something that would work and that would preload the sounds before the game would start. My ultimate solution was pure HMTL5 without the use of a script and used a variety of techniques I gleaned from reading others posts and blogs(mostly stackoverflow).

Here is how I did it:

First I load all the game sounds using HTML audio elements in the body of my page. You have to provide at least a .mp3 file and a .ogg file to be compatible with most browsers. Also, If you plan on doing multi-shot sounds (sounds that can be played overlapping themselves such as a rapid fire gun sound in a game) you will have to load multiple instance of them into separate audio elements (Many of my sounds have 5 or 6 instances of themselves)

<audio id=”gun_sound_1″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
<audio id=”gun_sound_2″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
<audio id=”gun_sound_3″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />

Secondly the JavaScript

//Create a counter for the sound
gunSound_counter = 1

//Variable holding the number of audio elements that exist
gunSound_maxNumber = 3;

function playSound_html5(soundName)
//Add the counter suffix
soundToPlay = soundName+gunSound_counter;

//Play The Sound
audioElement = document.getElementById(soundToPlay);;

// For Multi-Shot sounds Increment the counter. If counter is at the max reset to one
if (gunSound_counter >= gunSound_maxNumber)
gunSound_counter = 1;

Now when ever I want to play the sound I just call the playSound function and pass it a string with the name of the sound I want to play (without the number suffix).


I am pretty sure there is likely more eloquent ways to do this, but hopefully this can help you get a good start.

Update: Upon reading this it now looks like the SoundManager 2 now offers support (beta) for HTML5 audio. Looks like I will have to check this out on my next game cause sound really was just a pain.


Some of the sources I used:

Building HTML5 video controls with JavaScript

Time is of the essence

As this experiment in online entrepreneurship continuities I am realizing that I made a significant oversight on the outset. I did not include the element of time in my original design/layout for this site and experiment. I now see that this is an essential factor to consider in order to better understand how profitable my endeavors are. I am currently going through and updating the site to reflect how much time I am spending on the projects. I will have to estimate for what I have already done, but in the future I will try and keep a running total to add further insight into the practicality of the things I try. 

WordPress Archive Widget: Post Count on the same line.

My WordPress theme rendered the page count for the archive widget in the side bar incorrectly.  The page count was showing up on the next line below the link for each month. This looked really tacky to me and it turned into a bit of a chore to figure out how to fix it. I eventually got it working and now the page count correctly shows on the same line to the right of each month.

My solution was to change the get_archives_link() function located in wp-includes/general-template.php on line 842 as follows:

I changed this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text</a>$after</li>\n”;

to this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text<span style=’color:#999;’>$after</span></a></li>\n”;

9/11 Update

I am ecstatic. This month I finally made some money (Hurray!!!!). All my efforts have not been in vain (well sorta). I have had some luck with monetizing my projects, but overall so far my returns are not very high at all and can in no way justify all the effort and time I have put into these projects. So far for the amount of time I have put into all this my overall income is in the neighborhood of $0.10/hour (yeah…not that impressive). But nonetheless it is a start, and I am happy with that. Hopefully with a little more promotion and continually adding additional online services/sites/apps I can up the income to a more realistic level.

My Results for last month are as follows
So far my only method of monetization has been Google Adsense

Asteroids Inc
Visits: 3446
Adsense Income: $15.6

Infobrink Blog
Adsense Income: $1.25

Moving forward I think these will be the next things I will try to accomplish this coming month.
-Find an additional source of monetization for both sites
-Create a HTML5 game portal
-Continue promoting Asteroids Inc

NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}


/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{




ul li{



And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.