Tuesday 25 March 2008

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.

post signature

Saturday 22 March 2008

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.

post signature

Sunday 9 March 2008

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)


post signature

Saturday 8 March 2008

Entrecard - Social Networking...with a twist



I love finding new blogging treasures, and I finally checked into this little widget that I have seen here and there across the blogosphere. It is called Entrecard, and it is a new twist on the social networking aspect of blogging. But, what is that twist exactly?

Let me explain it to you as I see it. If I owned a business, I would certainly have a business card. Why? To pass out to possible clients. It is a mini advertisement. My product and /or business will be seen.

Being seen. That is what it is all about. Visibility. Enter the Entrecard. A simple little digital business card for your blog or website. It capitalized on the already popular 123 x 125 ad size.

Create your own ecard, submit it to Entrecard and begin networking. I modified and spruced up my Blog Aid badge to make my Entrecard. (See it on the right?) I still want to do more work to it, but this will have to do for now.

It uses a point system that is explained on their site. To simplify it, you earn points that you can use to buy ad space on other sites. Clicking on the logo on someone’s Entrecard widget is called dropping your card, and points are earned each time you drop a card. If someone drops a card on your site, you also get points. It is a win win situation.

This is a fun, easy way to build traffic to your blog. I have already found a couple of interesting places that I may have never seen with Entrecard.



post signature