A Better Search Box

In a way I'm reversing what I said in my previous post. After consideration, I've decided that a page optimized for AdSense should not make use of the technorati search box. Their search box takes you to their site where the search results display other blogs from their index. If you're building a regular site or blog this is a useful function, however for an AdSense optimized blog or site you want to narrow down the avenues for people to leave your site for another.

This is why I recommend using the search box widget at beautifulbeta. When you go to the site, the box is in the upper right and just under it, it says "add this widget to your blog". Click the link and it will take you to a widgets page. Simply click the widget and you will be prompted to log into your blogger / blogspot account. If you get an error, simply click "Back" and try it again. For some reason (for me at least) it doesn't take the first time.

I'm not sure if it'll work for non-blogger/blogspot users but heres the code and you can try it and see:

<form id="searchthis" action="/search" style="display: inline;"
method="get"><input id="search-box" name="q" type="text"><input
id="search-btn"value="Go!" type="submit"></form>

So now you still have a search box, only its providing results just from your pages where the searcher will be exposed to your AdSense ads. I still recommend listing your blog on technorati so simply log in and edit to remove their search box. Once again, many thanks to Hans at BeautifulBeta. Visit his site, for lots of nifty hacks and widgets to add more flair to your blogs.

Add Your Blog to Technorati

Just a quick post today. I wanted to talk about adding your blog to Technorati. This is super-easy to do and adds more functionality to your pages. By going to the site, you complete a simple registration and then claim your blogs. I chose to claim my blog by inserting a simple string of javascript code they provide into my template. You can do this by adding it directly into the html, but I found it easier to insert as an html page element, then I could easily move it around to find what best works for me.

Not only does this help your pages get noticed (and more traffic >> more AdSense ad exposure >> more AdSense clicks!), but if you have the "notify weblogs" checked in blogger, your new posts are automatically added. Additionally, by going to technorati you can customize the widget displayed on your pages without ever mucking with the code embedded in your page again. For instance, I chose to use the widget to display a search box and a "Blogs that link here" link for added fuctionality. I chose to not display a link to my profile because frankly a couple of my blogs require a complete over-haul and are a bit of an embarrassment (read: what I'll be doing for the rest of the day!), but I can easily add the link once the over-haul's are complete.

Play around with it and see if it doesn't add more flavor to your site and hopefully bring in more revenue too!

Adding Social Bookmarking Widgets to Blogger

'K, I've been looking for an easy way to add the social bookmarking widgets to my blogs and I think I've found it. Why is this important? If people find your blog which you've made useful and informative they may want to share it with others, so why not make it easier for them? Remember more visitors = more traffic = more AdSense clicks.

The site is here (Many thanks to Hans at BeautifulBeta!) but I'll give it the rundown here and try to clear up some parts I thought could have been a bit clearer (the purpose of this site, after all, is for you to learn from my trial and error!)

1. Go to your blog's template tab and click "edit HTML"

a. Download your template just in case you want to change it back or have problems. I didn't, but it's still a good idea.

b. Check "expand widgets" box.

2. Scroll down and find your .post img { } settings. It'll look something like this:

.post img {
padding:4px;
border:1px solid #cde;
}

You'll want to replace the border settings (between the colon and semicolon) to "0" or you'll have a border around each icon. Unfortunately, this also removes the borders from all your images in your post. (At the site they mention another way using a bookmarks css, but I have no idea how to do that yet. If I figure it out I'll update this post.)

Anyhoo, the .post img should now look like this:

.post img {
padding:4px;
border:0;
}

3. Place the following js within the head (I chose to place it just before the /head tag):

<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>

4. Continue to scroll down looking for:

<p class='post-footer-line post-footer-line-3'/>

(For some reason I had problems finding it when scrolling upwards from the bottom, and no problem at all when scrolling down, maybe just a perceptual quirk). Replace it with the code found here (Right click and save as .txt and open in notepad to cut and paste into your template).

That's it, you've just added social bookmarking widgets to all your posts!

Again, many cool-points to Hans at BeautifulBeta!