My Blogger Manual

Make Your Google Search Bar Look More Presentable

2007-11-12T16:36:00.000-05:00

You probably have a Google search bar somewhere on your blog, but depending upon how new you are with working with code, you may or may not know how to change the displayed web page url (http://mybloggermanual.blogspot.com) to the web site name (My Blogger Manual). You see, when you create a google search bar you can specify sites that you would like to give your readers the option of searching. However, when you install the search bar you will see that the readers see the site url and not the site name, which just looks a bit jankie. So, here's how you can change the site url to the site name for people to see.

First, look at the code for your search bar, and look for the part in RED.

size="50" type="text"/>
<label for="sbb" style="display: none">Submit search form</label>
<input id="sbb" value="Search" name="sa" type="submit"/>
</td></tr>
<tr>
<td> </td>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input id="ss0" checked value="" name="sitesearch" type="radio"/>
<label for="ss0" title="Search the Web"><font color="#ffffff" size="-1">Web</font></label></td>
<td>
<input id="ss1" value="mybloggermanual.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="Search mybloggermanual.blogspot.com"><font color="#ffffff" size="-1">http://mybloggermanual.blogspot.com</font></label></td>
</tr>
</table>
<input value="pub-0718788623463155" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="3267004596" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="active" name="safe" type="hidden"/>

Now, all you have to do is change that part in RED from the url (http://mybloggermanual.blogspot.com/) to the name of your site (My Blogger Manual). It will then look like this:

<input id="ss1" value="mybloggermanual.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="Search mybloggermanual.blogspot.com"><font color="#ffffff" size="-1">My Blogger Manual</font></label></td>
</tr>
</table>
<input value="pub-0718788623463155" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="3267004596" name="channel" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input value="ISO-8859-1" name="oe" type="hidden"/>
<input value="active" name="safe" type="hidden"/>

After that, you're done! Enjoy your more presentable search bar.

How To Remove Your Post Timestamp

2007-11-05T17:07:00.000-05:00

The "post timestamp" is that little linked notation at the foot of your post, preceding the comment link, that displays the time of day the post was created. In my experience, the only thing the timestamp is good for is distracting readers from the ad you have placed at the foot of your post (find out how to do that here). So, I like to remove the timestamp to make it easier for readers to find the ad. You can see an examples of post footers without post timestamps at Only Goalkeeping (on that blog the post signatures were removed, too).

Here's how to remove your timestamp:

First, after you've logged into your Blogger account, select the blog you want to work on and then click on "Layout". After doing so you will be brought to the "Page Elements" page. From there, click the "Edit HTML" tab. Next, download a backup copy of your template in case something goes wrong while you are working with the code. Then, check the "Expand Widget Templates" box. Now you are ready to begin.

Look for this section of code:

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Find the code above in RED, then simply highlight it and delete it. After that just click the "Save Template" button and you are done! If you want to tidy up the foot of your post a bit more you'll want to learn how to move your post signature, too.

How To Move Your Post Signature Under Your Post Title

2007-11-03T23:27:00.000-05:00

By default, all of your Blogger posts will have your post signature ("Posted by YOUR NAME HERE") appear at the foot of your post immediately before the timestamp and the comments link. You can see an example of this at the bottom of the posts on JDJ Gourmet. However, because I always like to have an ad at the foot of my posts (click here to learn how), I'd rather not have my post signature there, too. Why? Because the post signature can divert the reader's view away from the ad and toward my signature. Basically, I like to get rid of as much as I can down there so my readers will more easily focus on the ads. So, I typically move my post signature underneath the post titles on my blogs. You can see an example on Reagan's Brigade by looking immediately under the post titles. If you put ads at the foot of your posts, you will probably want to move your post signature, too. Or, you may want to move your post signature under the post title just to make your blog look a bit more spiffy. Either way, I will show you how to do it.

First, after you've logged into your Blogger account, select the blog you want to work on and then click on "Layout". After doing so you will be brought to the "Page Elements" page. From there, click the "Edit HTML" tab. Next, download a backup copy of your template in case something goes wrong while you are working with the code. Then, check the "Expand Widget Templates" box. Now you are ready to begin.

(In the following example the code in GREEN will be existing code, code in PURPLE you will need to copy and then paste later.)

Scroll down and find this section of code:

<data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>

<p class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Now, highlight and copy the code you see in PURPLE above, and then delete it from your template. Then, find this section of code:

<data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<PASTE YOUR COPIED CODE HERE>

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<p>

Where you see <PASTE YOUR COPIED CODE HERE> you should paste the code you copied from your template earlier. After you have pasted the code, simply click "Save Template" and you are done. Enjoy!

How To Put Ads In Your Posts (From Adsense, Chitika, Amazon, AuctionAds, etc.)

2007-06-18T14:37:00.000-04:00

You can put any kind of ads you want into your posts (Adsense, Chitika, Amazon, AuctionAds, etc.), and putting ads into your post column is very easy, but it requires 1 tool: a code parser. Without the code parser you would have to replace all of the < symbols with <, and all of the > symbols with >, which would be a long and arduous process. Have no fear though, you can use this code parser. Simply copy your ad code, paste it into the box on the code parsing page and hit 'generate code'. Your new code with then appear a few lines above the box. Then, simply click where the code is and hit 'Ctrl+A', right click and then hit 'copy'. Now you have your code and are ready to put it where you want it in your post.

Now, where do you want to put your ads?

(In the following examples the code in GREEN will be existing code, code in PURPLE you will need to add and where it says YOUR CODE HERE in red is where you will put your parsed Adsense code.

IN THE POST BODY - When placing your ads you should consider the size carefully based upon where you will be placing the ads and the size post column. For instance, if you are placing an ad in the post body you may want to go with something smaller, like a 125x125 button. This will keep your ad easily visible, but not make the text ugly and unreadable. To put your ad inside of your post body you will want to find the section of code in green below, and paste your parsed ad code where it says "your code here" in red. You will also need to add the code you see in purple to direct you ad to appear on the right or left side in your post body (simply change where it says 'left' to 'right' if you want your ad on the right side of your post).

<div class='post-header-line-1'/>

<div style="float:left;">
YOUR CODE HERE
</div>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

JUST BELOW THE POST TITLE - To see an example of ads that are just below the post title, check out The Puma Shoe Blog. If you want your ads there, then here is what you do:

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div>
YOUR CODE HERE
</div>

<div class='post-header-line-1'/>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

<div>
YOUR CODE HERE
</div>

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>

IN BETWEEN POSTS - Here is how you position your ads between posts:

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

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

<div>
YOUR CODE HERE
</div>

</div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>

Note: To space your ads between your posts you will want to use break tags: <br/>. You will want to put the break tags before the first purple line of code, and after the second line of purple code from above in order to space the ad from the post above and below it. I would recommend using 4 break tags above and 4 break tags below as a starting point for your spacing.

The Best RSS Feed Icon Collection & How To Create A Feed Button

2007-06-04T16:16:00.000-04:00

If you don't already know how to create a feed icon, it is actually a very simple process. There are multiple ways to do it, but the easiest way I have found is to simply create a hyperlinked image of a feed icon. To do so just follow the instructions in this post and replace 'destination url' with your feed address.

Choose a feed icon from below and get started!

How To Get Adsense To Provide More Relevant Ads

2007-05-30T15:36:00.000-04:00

When I started blogging I immediately signed up for Google Adsense and put it on my blog. I shuffled the placement and types of ads, but wasn't really getting the results I wanted. Then I saw someone else's blog and noticed what great ads were on that blog. I immediately check my blog and confirmed my fears: my ads were awful in comparison, but why? (Check out one of my other blogs: here or here. Do those ads look a lot more relevant than yours? Then you need the information below.)

I did some research and found out that Adsense has to know where to look in order to place the most relevant ads on your blog. If you just place ads on your blog, then Adsense will look at everything on your blog when it considers what ads to place; that means widgets, titles, links, banners, etc. Then I found a way to narrow down what Adsense looks at, and the results were almost immediate and absolutely fantastic. The ads were magnificent, and I was getting a lot more clicks!

How do you get Adsense to focus on the relevant stuff? Easy. You need 2 lines of code, and you have to decide what you want Adsense to focus on. I recommend putting the focus on your posts because the posts are the reason people visit your blog, and the posts will give Adsense the best idea of what ads to place on your blog.

To do this, first sign into blogger, choose the blog you want to work with, click 'layout' and then click 'edit html'. Leave 'expand widget templates' unchecked, and scroll down until you see this section of code:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Now, just above

<div id='main-wrapper'>

put



and just after

</b:section>
</div>

put



When you're done the section of code should now look like this:


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


Now click 'save changes' and in just a few days your ads will be infinitely more accurate and more intriguing to your readers. Enjoy the benefits!

There is one disclaimer: If this doesn't help you get more relevant ads, you may be writing about a topic which has little or no advertisers. At that point, you may need to do some research to see whether or not the focus of your blog is wide enough to attract advertisers. If you find that it isn't, then you will need to start writing on some broader issues related to your topic. For example, if my blog were all about the power button on Dell monitors I probably wouldn't be attracting many advertisements. However, if I were to widen my writing to include all aspects of Dell monitors (maybe even other brands) then the ads I received from Adsense would surely become more relevant, more frequent and more enticing.

Add A Digg Button To All Of Your Posts The Easy Way

2007-05-30T13:00:00.000-04:00

Many people want to add a digg button to their posts, but don't have an easy way to do so. Well, after much searching, I think I have found that way. You can see on this blog, JDJ Soccer Blog, that there is a digg button in every post. To get a digg button in all of your posts just like the one on that blog, follow the steps below.

First, go to 'edit html' and scroll down until you find a section of code that looks like this:

<div class='post-header-line-1'/>
<div class='post-body'><p>
<data:post.body/></p>
<div style='clear: both;'/> 
</div>

Next, copy the code below:

<div style='float:right; padding-right: 30px;'>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

Then, paste the code you copied after <div class='post-body'><p> and before <data:post.body/></p> then click 'save changes'.

Now look at your posts... you have a digg button!

-----------------------------------UPDATE-------------------------------------------

Wayne did some research and came up with code that will allow each post to be dug even if it is being displayed from the main page. Be sure to give Wayne's blog a visit and some thanks!

The code:

<script type="text/javascript">
digg_url = '<data:post.url/>';
digg_bgcolor = '#000000';
digg_skin = 'compact';
</script>
<div style='float:right; padding-right: 30px;'>
script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

Simply put this code in the same place as instructed above in the tutorial.

How To Install A Template

2007-05-30T12:05:00.000-04:00

To install a template, first copy the html code for the template (found inside boxes on this blog).

Then log into blogger, go to your dashboard, find the blog you want to use this template for, select 'layout', then select 'edit html'. Now that you are on the 'edit html' page, first backup your existing template in case something goes wrong. Do this by clicking 'download full template' and saving it to a easy to find location.

Also, when you switch templates you will most likely lose any of the widgets you have installed. After you install your new template you will have to reinstall those lost widgets. Or, you can copy each one of the widgets individually from their 'page element' window, save them in a document (like word, notepad, etc.) and then reinstall them after you install the template. The latter is by far the easiest way of saving your widgets and your time.

Now comes the exciting part. Click inside the window where your existing blog template is, highlight it and delete it. Now click inside the empty window, right click and hit 'paste'. Then click 'save changes'. You now have a new blog template!

How To Add A Hyperlinked Image To Your Blog

2007-05-29T22:45:00.000-04:00

First, to see an example of a hyperlinked image go to one of my other blogs, JDJ Soccer Blog, and look at the bottom of the left sidebar. That image is hyperlinked to another blog.

Inserting a hyperlinked image on blogger is very easy. All you need is a bit of code, an image url and a destination url (where you would like to send anyone who clicks on the image).

To get an image url, click on any image you find until it is the only thing showing on the page and then copy url in the web address window. If you want to use your own custom image, simply download your image to a host (like photobucket) and then use the url provided once your image is downloaded.

Now for inserting your hyperlinked image. First, copy the code below:

<a href="DESTINATION URL"><img alt="" width="SIZE" src="IMAGE URL" height="SIZE"/></a>

Go to your blogger dashboard, select the blog you want to add the hyperlinked image to, click 'layout', go to your 'page elements' page (or the 'add and arrange page elements' page), click 'add page element' in whichever column you would like to add your image, and then select 'html/javascript'. In the box provided, right click and hit 'paste'.

In the instructions from here down you will need to replace what is in GREEN with the destination url, image url and size specifications of your choosing.

In the code, replace "DESTINATION URL" with the destination url you choose. (Remember to only replace what is between the quotations.

Next, replace "IMAGE URL" with the url of the image you would like to use.

Finally, replace the two "SIZE" specifications with numbers corresponding to the width and height that you would like your image to be.

After you have done all of that click 'save changes' and you are done!