Make Your Google Search Bar Look More Presentable

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>&nbsp;</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

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;'/> <!-- clear for photos floats -->
</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

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;'/> <!-- clear for photos floats -->
</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!