Change comment script from plural to singular

Things that drive me crazy...I hate it when I look at a blog and it says "1 comments". I had a fix for classic blogger, but just realized that I didn't have one for the the new blogger. So, if it drives you crazy too, roll up your sleeves and dive in. But first...always first...backup your template! This fix requires you to go deep within the bowels of you template. GASP...the dreaded Expand Widget Templates. So, expand them and let's go!

First find this code in your blog. I'm basing this on the Minima template, so your code may be slightly different.

Step 1 Find this code:

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if>

Step 2 Replace that with this code:

<br /> <b:if cond='data:post.numComments == 1'>1 comment<br /> <b:else/><br /> <b:if cond='data:post.numComments == 0'>Reply to this post<br /> <b:else/><br /> <data:post.numComments/> comments<br /> </b:if><br /> </b:if> <br />

Step 3 Repeat Step 1 and 2 because this code is in your template twice.

Now you can get a little fancy and instead of where it says Reply to this post, you can put whatever you want. Like...Let's talk...Be the first to comment...Don't leave me hanging.

Now your blog is approved by the Emily Post Institute of Etiquette. Well. Maybe not. It depends what else you put in your blog. But at least she is smiling over your comment grammar.

A New File Host for my Free Blogger Templates!

For a long time I've been wrestling with my web/file host. I think I have found the solution! I found MediaFire. I'm using the free account and have uploaded all my blogger templates.



I'm confident that that my readers will be able to download all the templates without any problems. If, by chance, you have a problem, please email me what happened.

Change Your Blog Font!

While looking at a fellow photog's blog, Little Kiwis Photography, I was admiring her blog's font. Then I saw a link that said "I changed my font at the cutestblog.com" so I clicked. Well, I was excited. Here is how my photography blog looks now at SeaSide Sharon.

If you want to do this, follow this link, How to change the font on your blog, for a quick and easy installation!

Blogger Error Messages

Oh. You know them. You've seen them. The nasty red font above your template edit window after you attempt to save your template or even preview your work. Jeering at you with:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Element type "href" must be followed by either attribute specifications, ">" or "/>"

or

More than one widget was found with id: HTML3. Widget IDs should be unique.

Makes my skin crawl. But, you can battle the error message...and be victorious!!

I think the two examples above are probably the most commonly seen messages. At least for me they are. The first example can have a variety of elements in the "href" spot. Sometimes it is like fill in the blank. But, the thing to focus on is the ">" or "/>". I noticed, while working on a template yesterday for Pauls Health Blog, that I kept getting this error...with "div" as the element. It said that a "div" element wasn't closed properly. I checked and checked. Nothing looked out of place. But, the code I put in had "/>" at the end of it. And where I put the code, it already had the closing tag a bit further down. Finally I spied that little "/". That was the culprit. I removed the "/" and was finally able to save the template.

Lesson here is if you get this message, look carefully at the exact code you just put in. Does it have the "/" at the end with the ">"? If so, remove it. Or, controversially, if you get the error and it doesn't have the "/" at the end, slip it in!

The second error message comes up when adding code to your template that has already named the widget. It is easy to fix. Find the culprit in question and renumber it. It doesn't make any difference what number, just as long as it doesn't occur anywhere else in your template. It wants to be unique.

+/- (hide/show, expand/collapse) Labels

I'm on a label enhancement mission. Maybe my drop down menu label method didn't do it for you. Good news! Here is another option for you label makers using the infamous +/- method. This is simple, simple, simple.

Step 1 - Without expanding your widgets, find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - Replace that line with this code:

<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>


<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

TaDa! Label those posts!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

Drop Down Menu for Labels

Hi Annie
I've just successfully used your instructions on adding tabs to my blog and have seriously cleaned up my sidebar, for which I sincerely thank you but, I would like to go a bit further. My Label list is pretty long and I would like to have a scroll bar or drop down menu for it. Trouble is, I can't see how I can get the scroll bar instructions on BlogU to work with the Label page element 'cos there's nowhere to enter the code given and I can't find anything about a drop-down (unless I've passed over it) on your blog.
Just thought it was worth an email to ask advice and to say thank you for the info I've already used successfully. I've recommended your site to a friend and put a link on my blog list ....


My readers are keeping me on my toes! Here is another request...this time for a drop down menu for labels. Here are the steps to accomplish this.

Step 1 - find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - replace that line with this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.

Now you have a sweet little drop down menu to corral those labels that are getting out of hand. Go now and label with reckless abandon!!!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

EDIT: 08/21/08 - If you want to display the label count {trees (5) birds (9) flowers (3)} after each label use this code in Step 2:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

EDIT 09/07/08: Here is an example of the drop down box before expanded and after:

HTML Code Box

Hi,
I did a Google search on how to put a box with html code to "grab a button" in a blog post or somewhere else on the blog and yours came up.
I see that you have just what I am looking for close to the bottom of your blog (under the posts).
I have a button and all I need to do is put the code into a box so that people can copy and paste it to put the button on their blog. How can I add the same thing to my blog?
Your help would be very much appreciated.
Regards,
Gerri


Occasionally you want your readers to be able to copy code. Just how to get that code on your blog with out it doing it's little html magic first? Put it in a little box like this:
I'm a visual person, so the best way for me to explain this is with the exact code that I used for the above box:

<center>Grab this button:</center><center><img style="border: 0px none ;" alt="BlogU Button link" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" title="Steal my button!" width="80" height="15" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="http://bloggeruniversity.blogspot.com/"><img border="0" src="http://farm4.static.flickr.com/3092/2505649265_9cb03e574d_o.png" /></a></textarea></center>

And here is the code showing what you need to change:

<center>TEXT EXPLAINING WHAT IS IN BOX</center><center><img style="border: 0px none ;" alt="LINK TITLE" src="IMAGE URL" title="LINK TOOLTIP TITLE" width="XX" height="XX" /></center>
<center><textarea id="code-source" rows="3" cols="28" name="code-source"><a href="LINK"><img border="0" src="IMAGE URL" /></a></textarea></center>

The pink code is where you can adjust the size of the box. All that is left to do is place it in a HTML/Javascript widget!

Using an Image as the Sidebar Title

I love the effect of that an image gives as the sidebar title. It is such a simple thing to do. First things first. You will need a suitable image
that you can change the font on. My suggestion would be to make one using GIMP. This may help: Tutorial: custom header for Blogger using GIMP. Save your original (fontless) image as a template for changes you may make down the line to your sidebar. Look. I made one for Links!

OK. We have an image or two ready to go. My title image is for links, so I will show you how to do a widget for links. Open your Dashboard | Layout | Page Elements | Add a page element | HTML/Javascript. Add the following code to the window:

<img src="TITLE IMAGE URL"/>

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>
<a href="LINK URL" target="_blank">LINK TITLE</a><br/>

You can add as many links as you want by opening (edit) the widget and adding this code:

<a href="LINK URL" target="_blank">LINK TITLE</a><br/>

for each new link. It certainly is a fun way to dress up your sidebar and coordinate it with other design elements in your blog.

Scroll Box

...What I would like is a place to put widgets, links, webrings, etc in a
box which shows a little of the content and then can be scrolled down
to see the rest. Just like the thing on my site from Technorati, but I
want to add my own content, not just links...

Laura wanted a way to organize her sidebar...something more than the now famous Hide/Show hack. What she wanted was the classic scroll box.

Here is how you do just that. Open your Dashboard | Layout | Add a Page Element | HTML/Javascript. Add this code in the window:

<div style="border: 1px solid #000000;background-color:#ffffff; width:200px; height:250px; overflow:auto; color:#555555;"><p> ADD TEXT OR CODE SCRIPT HERE
</p>

You will adjust these bits of code for width and height. Each blog will be different, so play with the numbers until the scroll box fits in the area you want. You will add the code you want displayed here...be it javascript or plain text. You may want to put a <br/> or two between lines of code to separate the items.

If you use a Classic Blogger template, instead of putting the code in a widget, you will put it in your sidebar area amongst the other items that live in your sidebar.

So, go ahead! Gather up all your little do-dads and put them safely in the scroll box and be happy. Have a cup of coffee and admire your work!

Inline Comments for Blogger!!!

Oh, happy days!! Blogger, in it's infinite wisdom, has decided to give us inline comments!!! I have waited and waited. Tried hack after hack, but couldn't get any to work. Now it is there for the clicking!

If you have a straightforward template the change is extremely simple. You must got to the Blogger in Draft dashboard. Go to Settings | Comments | Comment Form Placement. Then select Embedded below post. Save and that is it.

For those of us that have done extensive customization to the template, there are a few more steps. First, follow the above instructions. Then do a quick check on a post page and see if the inline comment form is in place. If not, this is what I had to do to my template. Remember each template is different, and it may take some trial and error. Save your template before beginning.Go to your Dashboard | Layout | Edit HTML | Expand Widget Templates. The key word I looked for to get me where I needed was comment-footer.

Side note: did you know that in Firefox you can go to Edit | Find in This Page... That will open a little bar at the bottom of the window. Type in the word you want to search for. In this instance, I typed in comment-footer. Then click next. Each time you click it, you will be taken to the next instance of that word or phrase in the page!!

Find:

<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a> </p>

Change to:

<p class='comment-footer'><b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a></b:if> </p>

Your template may be tweaked differently. Basically, this is the line of code I had to add which made the inline comment form appear:

<b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/></b:if>

Now commenting has been taken to a whole new level on BlogU and blogs across the world! It is quick and simple for readers to leave a comment without leaving the page.

Expand/Collapse Sidebar Widget Title

Hi Annie
First I want to thank you for all this info. I spent about three days wondering how to expand/collapse my labels before I stumbled on your blog.

I have a slight problem though.
When I use the title part of the page element, I get a nice big title but it's not collapsable. If I use your code, the collapsable link appears in small text and isn't very visible.

I've put the examples up on my blog - which is at ReviewInk on blogspot.com

The first is your label code.

As you can see, the part entitled "Look at me, I'm collapsable" isn't in fact collapsable.
The collapsable link is actually the one underneath it that reads "Reviews By Author - small collapsable link.

The other part is the regular label listing under "Reviews - By Author" which is what I'd like the collapsable menu to look like.

Hopefully this is making some kind of sense, and I'd be really grateful for your help.
Thanks so much!
Amy


If I'm understanding correctly, you want a +/- sidebar title like my Blogging Tools area in my sidebar.



Each of the five titles marked +/- will expand a list of links. Note - to make it easier, do not expand the widgets templates. Scroll down to your sidebar wrapper. This is how mine looks:

Click for a larger view

Find the CSS style sheet. You will place the following code between the <b:section>and the </b:section>:

<b:widget id='LinkListXX' locked='false' title='+/- YOUR TITLE' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Changes to the above code:

1. XX - the linklists are assigned a unique number. So, if you try to save your template and it says something about two widgets having Linklist3, change the number on one widget.
2. +/- YOUR TITLE - Add the title of your sidebar widget here. You can leave the +/- if you want. It has become the universal symbol for Click here to see more.
   

Save your template and you have an expandable sidebar title.

EDIT: I have had this hack in my template for so long, I forgot to say you need follow Steps 1 & 2 in this post: Hide/Show, Expand/Collapse - navigation element. Those steps are:

First you must enter the following code in your style sheet:

.commenthidden {display:none}
.commentshown {display:inline}

Second put this between the <head> and </head> tags, but not in the style sheet:

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

I'm so sorry, Amy. I hope this clears up your problem!

Add a border to your posts and sidebar

I was wondering if you knew the code you had to place in the HTML so that all of your posts and your sidebar are in separate boxes.


This is a fairly simple task. I'm working from the Minima template, so your template terminology may be slightly different. You will be looking for the sidebar area in your CSS style sheet.

Look for this in your template.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

Then you will replace it with this code:

.sidebar .widget, .main .widget {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

That will give you a nice border around your posts and your sidebar widgets!

A Cool CSS Navigation Menu

Widgets For Blogger said...
Annie,
Do you have a post or could you make a post about how to make a menu like yours so that when you hover over an image you get an effect like yours?

Top row: static - Bottom row: active

I have been asked by a couple of people for this, so today I decided to do a little post. First, I want to give all the credit to this wonderful site, Web Designer Wall. I go to that site and get lost in all it's beauty. I just drool over all the cool design features. (Makes for a wet keyboard.) You can read their complete instructions on Advanced CSS Menu.

This is accomplished with a little bit of graphic making and code placing. First with the graphic making. The Web Designer Wall gave great instructions on making your graphics. So, instead of me going over it again, I would suggest reading it there.

That brings us to the code placing. This is a two part process.

1. You will want to place the code in the CSS style sheet. I am showing the the code I used to place the menu in BlogU. That way you can compare with WDW to see any differences, and what the differences do.

/*Roll over feed
-----------------------------------------------*/
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
height: 50px;
background: #ffffff;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(home.png) no-repeat;
left: 10px;
top: 25px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(/home-over.png) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(about.png) no-repeat;
left: 180px;
top: 18px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(about-over.png) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(RSS.png) no-repeat;
left: 350px;
top: 24px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

The orange: change the values for your own images sizes.
The blue: change these values so it fits where you want it. This is simply trial and error...and patience.
The purple: this may have to be changed to fit in your sidebar, depending on the width of your sidebar, or if you put it below your header, that width.

Of course, the style sheet is where you do all of your...ummm...styling, so there may be other changes you want to make.

2. Now you will have to put some code in a widget. Choose HTML/Javascript (my most favorite widget) and put the following code in:

<ul id="menu">
<li><a href="YOUR BLOG URL" class="home">Home <span></span></a></li>
<li><a href="YOUR PROFILE URL" class="about">About <span></span></a></li>
<li><a href="YOUR FEED URL" class="rss">RSS <span></span></a></li>
</ul>

The orange: changes here are only to paste your own URL's in the appropriate spot.

Attention Classic Bloggers: Put the widget code in your template between <MainOrArchivePage> and </MainOrArchivePage>. Please note, I haven't actually tested it in Classic, but it looks like it will work fine. Let me know.

That will create the menu. It takes some skill with Photoshop or GIMP, but it is worth the effort!

Unique Background Images for Widgets

I also wanna know, is it possible to assign a different background image to each widget?



Gelo, yes, it is possible! As you can see in the images below. Top is the normal widgets. Bottom is the same widgets with background images in place.

Widget without background image

Widget with background image

To achieve this takes a little sleuth work. Each widget has a unique name. In this example, I have three widgets:

1. LinkList1
   
2. Text1
   
3. BlogArchive1

You can find the unique names of your widgets by searching your template for <b:widget id=

My search turned up: <b:widget id='LinkList1' locked='false' title='link widget' type='LinkList'/> So, my unique ID here is LinkList1.

After you find and identify each widget's unique ID, you will do a little work in the CSS Style Sheet. It doesn't make any difference where you actually place this code, but for neatness sake you can make a new group called Widgets.

/* Widgets
----------------------------------------------- */

Of course, you could have LinkList2, LinkList2, Text2, HTML1, etc.

For each widget that you want to add an image to, add the code as I have below to the CSS Style Sheet.

#LinkList1{
background: #fff url(IMAGE URL) no-repeat;
}
#Text1{
background: #fff url(IMAGE URL) no-repeat;
}
#BlogArchive1{
background: #fff url(IMAGE URL) no-repeat;
}

And, that is that.

Add a Widget Beside Your Header

Hey Annie!

Thanks for the tutorials on this blog. They're a big help.

I would like to know, is there a way to add content to the right of my header? Sort of like another sidebar? My blog is HERE. Please take the time to visit. It's still under construction though.

Thank you and more power.



There is a way, and it can be done with creating a widget. First you will make a couple of changes to your CSS style sheet. You will want to find the Header section. Look for something like this:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Basically what we are doing is dividing the header up. I'm going to make each side equal, but you can use any proportion you want allowing for the margins. So, replace that code with this:

#header {
width: 300px;
float: left;
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header-right {
width: 300px;
float: right;
color: $pagetitlecolor;
margin: 5px;
padding: 5px;
}

You can adjust these values to fit your template. (It should not equal more than your outer-wrapper.) Almost done! Find this code in your template:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

And replace it with this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

Take a look at your page element page and you will see your new widget.

Click for larger image

You can now add content to that widget. For my example, I added my profile. Here is a screen shot before:

Click for larger image

and here is after:

Click for larger image

You don't have to do anything where it says YOUR BLOG TITLE. Your title will automatically fill in. Now you can add whatever you like in that widget, from your profile to a picture!

The link hover effect (From My Reader's Emails)

This is about your absolutely wonderful A day Without Chocolate template.

I'll take the liberty of asking you a favour. Is there some way I could use the link-hover effect in that template on my blog? Just that.

It would be great if you could help.



Sanyukta, that is a easy little bit of code to do. Go to your template and find this bit of code:

a:hover {
color:$titlecolor;
text-decoration:none;
}

Replace it with this code:

a:hover {
background-color: #FADADD;
color: #987654;
text-decoration: none;
}

You will probably want to change the colors. #FADADD is the color behind the text and #987654 is the text color. If you need help with finding the right color, I have several links in my sidebar under +/- Graphics, including 500+ Colours which is a good place to start. If you need to change any of the other aspects of the link, like the link color or the visited link color, do so in the Dashboard | Layout | Fonts and Colors area.

A Tab Menu For Your Very Own

A few weeks ago I was asked by a web designer to help get a tab menu on a blog that was to be integrated with a web site. I have never worked with setting up a tabbed menu before, so I set off in quest of an answer. Happily I was able to piece together bits of code from here and there. This is the result:




I was able to use the instructions from Blogger and Free Templates but, I'll attempt to simplify their instructions here.

This is how you can get a tabbed menu on your blog. First, backup your template. Now open your Dashboard | Layout | Edit HTML. Locate the CSS style sheet between the <b:skin><![CDATA[/* and ]]></b:skin> tags and add the following code.

Note: It doesn't make any difference exactly where it goes, but a good place would be after the
/* Header
----------------------------------------------- */ section.

Here is the code:

/*credits : http://blogger-freetemplates.blogspot.com , HariesDesign.com*/
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("LEFT IMAGE") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("RIGHT IMAGE") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Save your template. Scroll down your template past the CSS style sheet and find:

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

Replace with this code:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your template. Open the Page Elements tab in your dashboard. Notice you now have the option to add a page element to your header section. Which also means you have the option to drag and drop the element where you would like your tabs to display...above or below the header. Click on Add a Page Element and put this code in the window, replacing my links with yours:

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Home</span>
</a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>3 Column</span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>2 Column </span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Blogging Tips</span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Seo Tips</span></a></li>
</ul>
</div>

That is it for the code end. Now all you need is the tab graphics. A little search revealed several, but my favorites came from explodingboy. Click to see them:

1. Tab Menu Set 1
   
2. Tab Menu Set 2

You can download them here: Tab Set 1 and Tab Set 2. You will need to upload your images to a web host such as Ripway and insert the image in the above code where it says IMAGE LEFT and IMAGE RIGHT. You will notice that each image in the zip file has a left and right.

Enjoy your new tab menu! I have used them for ages in Buttermilk Clouds, but can't take credit for adding them. They happily came with the template. But, you can take a peek and see some uses for the tabs. Buttermilk Clouds is a classic template, so the code is different for that style template. If there is enough interest, I may attempt a post on adding a tab menu to the Classic Blogger. Let me know.

A Double Vision Sidebar Title Fix (From My Inbox)

Oh, that was too easy.

But I wonder if you know... It was easy for me to do it on the HTML elements, but if I try to put a title above, let's say, the Archive, I get this dotted red line between the archives title and the archives...

I'm sure it's simple to get rid of the line (it comes with the Minima design), but I kind of like it elsewhere on the blog. My life is so complicated. Can you think of a way around it?


This question was posed to me from People in the Sun. If your template is styled to have any type of division (ie red dotted lines) between your sidebar widgets, here is your work-a-round for Double Vision Sidebar Titles in widgets other than those you paste content in the widget window. As a matter of fact, that is all widgets except for Text and HTML/Javascript, I believe.

Before beginning, backup your template...you always do. Right?

First Step:
Read Double Vision Sidebar Titles and do the first step. Then this will be the second step for all widgets except Text and HTML/Javascript.

Second step:
Open your Dashboard | Layout | Edit HTML. Check Expand Widget Contents. Find the widget in question. In this instance it is Archives. Locate this part of the widget code:

<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Replace the red line with the following green line:

<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h3>SIDEBAR TITLE</h3>
<h4>SIDEBAR TITLE</h4>
</b:if>

Save template. With those changes, you can see double vision in all widget titles!

See: Double Vision Sidebar Titles (From my Inbox)