gadgets 6

Customize Blogger Footer columns

March 9, 2009

In the article "How to add columns to Blogger Footer" we've learned about the basic (barebone) implementation of extra columns in Blogger footer.
This time, we'll try to customize them a bit. This is optional, of course. You will learn how to:
► control the style of your new footer
► add some colors to it
► change the link color (footer links can be in different color than the main link color)
► customize links
► change the headings style....



In the first tutorial, you've placed a CSS style + some HTML. Now, all we're going to do is a simple play (tweak) in CSS (style). If you're ready, let's do this....


ADDING BORDERS
The simplest thing to do, but can produce a great effect. By default, you have a top border (1px dotted) that divides footer from the content area.You can change the border style in this part of CSS:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

...tweaking the line in pink. Options:
border: 1px dotted #999999; ► add a border around the whole footer container
border-bottom: 1px dotted #999999; ► place a border at the bottom
You can also change the border style (dotted, solid, dashed...), width (1px. 2px, 3px....) and color (any hex color you like, starting with #). Read more about borders in Blogger.

***

ADD A BACKGROUND
Hm. Adding a backgound in the footer container is great, but you'll have to work more on this. Why? Well, because when you add a different background that your Blog already has, you'll have to change the text color and links...We'll discuss this too.
When adding a background, you can either:
► colorize it (quite simple)
► or place the picture as a background (tiled, or repeated vertically...)

::Color as background::
To add a background color to your Footer, add this line to your #footer-columns in CSS:

background:#C6E2FF;

...change the #C6E2FF to any hex color you like...
The CSS should look like this, after placing the line:

#footer-columns {
background:#C6E2FF;
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

...border if optional. You can combine border and background.

::Picture as background::
This is more fancy. You can make something like I've did for this tutorial, or place any kind of background you'd like (patterns, images, lines....).
My suggestion is to place the pics (patterns) that will repeat (tile). Because your Footer will stretch (in height) to fit your content (gadgets)...
Steps:

1. Identify (measure) the width of your Blog (outer-wrapper, or under different name....). You will find this in your LAYOUT ► EDIT HTML. For my example (I've used Minima default template) I've checked the width here:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

..there's the width, in orange...660px.

2. Next thing is to create the background pic. I use Photoshop, but any decent Graphic editor will do. You can do this in Paint. So, here's my pic:
You have to make the pic the same width as your Blog (660px in my case), cut the 1px-5px part. Your pic will repeat vertically. The smaller the part is, faster loading time you get.
Always work in RGB mode, and export pics for web (or save as .gif, or .png) to keep the quality.

3. Upload the pic to a free web host, like Tinypic.com, Photobucket.com....You need to copy the Direct Link of your uploaded picture.

4. Place the picture in the CSS style in your code. Go to LAYOUT ► EDIT HTML, find your #footer-columns style, and add the line in orange:

#footer-columns {
background:url(http://i39.tinypic.com/10wijch.jpg) repeat;
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

...border is optional. You can either remove it, or combine with background.
...replace http://i39.tinypic.com/10wijch.jpg with the URL address (Direct link) of your pic..
...this is just an example, you can play, combine, try different things...

Read more about backgrounds in Blogger...

***

CHANGE THE HEADINGS IN FOOTER
By default, you'll have the widget (gadget) headings just like the ones in the sidebar. If you'd like to make a custom ones, read on.
First, we have to add some style to the CSS of #footer-columns. So, locate this part in your code:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

...yours may be a slight different, if customized.
Place the code in pink UNDER it, so it will look like this:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

#footer-columns h2 {
margin:5px 0 5px;
font-family:arial;
font-size:13px;
font-weight:normal;
line-height: 1.4em;
text-transform:none;
letter-spacing:.1em;
color:#000000;
}

...customize the font, colors, size, margins, letter spacing, weight...
You can also place an icon in the heading, add a background, borders...We'll talk about this more in other tutorial.

***

CHANGE THE LINK COLOR IN FOOTER
Why? If you customize your Blogger footer (add a background color), your Links may not be visible. Links in Blogger carry the same style in the whole template elements. In my example, I have the default Links in blue, but I want them to bee more brown-ish.

So, UNDER this part of code:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

..you will place this one:

#footer-columns a {
color:#8B4513;
text-decoration:none;
}
#footer-columns a:visited {
color:#CD6839;
text-decoration:none;
}
#footer-columns a:hover {
color:#8B4513;
text-decoration:underline;
}

...in pink, you can adjust the colors of active link (a), visited link (a:visited) and hovering effect (a:hover)
...in orange, you can change the text-decoration (underline, none, italic...)
...you can play with styles and link effects...this is just to get start with...

***

CHANGE THE TEXT COLOR IN FOOTER
This will change the text color in your footer (not the Links, but everything else). Add the line in orange to this part of code:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
color:#000000;
}

...adjust the color to whatever suits you...

Ok, that's quite enough for now. We'll discuss Links customization and icon placement in next tutorial....
===============================================

Moving elements in Post Footer - Labels, Posted by, Comment Link...

February 27, 2009

In this tutorial we're going to identify the code of each element in default Blogger XML templates (new Blogger Beta). The reason we do this:

► because we'd like to rearrange the elements in post footer (divide them, change positions)
► move one (or more) of the elements somewhere else (like: under the Post Title)


REARRANGING ELEMENTS
You can rearrange Post footer elements without tweaking the code:
DASHBOARD ► LAYOUT ► PAGE ELEMENTS click on Edit in BLOG POSTS box:

If this works for you, great!
But, lots of times, you CAN rearrange the elements by "dragging" them around, and they will seem to be rearranged, and when you go check your Blog - NOTHING has changed!
You can solve this with:

► with clearing your cache (if you're lucky)
► by manually rearranging the elements in HTML code

If you're ready, let's go visit the HTML of our template....
Before making any changes to your code, I suggest to back up the current Blogger layout. Then go to:
LAYOUT ► EDIT HTML ► click on Expand Widget Templates


Use the [CTRL] + F (or (Edit ► Find from your browser's menu) and search for this line:

<div class='post-footer'>

Post-footer is divided in 3 lines, and each line has some elements in it(Labels, Comment Link, Posted by, Timestamp...) wrapped in a span.

<div class='post-footer'>
<div 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 != &quot;item&quot;'>
<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 comment<b:else/><data:post.numComments/> comments</b:if></a>
</b:if>
</b:if>
</span>

</div>

...in orange, you can see how to identify the Post-footer line (in this example, 1st line)
...in pink you can see the code of Posted by, in green of Timestamp, and in blue of Comment Link

Notice how each element is wrapped in a span:

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

...in orange, you can see the opening span and closing span
Span class identifies the element:

span class='post-author vcard' ► Posted By

span class='post-timestamp' ► Timestamp

span class='post-labels' ► Labels

span class='post-comment-link' ► Comment link

span class='post-backlinks ► Links to this post

span class='post-icons' ► Email this post icon and Quickedit icon

span class='reaction-buttons' ► Reactions

span class='star-ratings' ► Star ratings

span class='post-location' ► Post location

The whole idea of rearranging elements manually is a simple CUT and PASTE:
► CUT the code of the element you'd like to move
► PASTE it in the line you prefer

You need to cut the entire code of the element, meaning the whole Span. For example, if I want to move the Labels in the first line, I'll CUT the code representing Labels:

<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

...and PASTE in somewhere under the 1st Post footer line:

<div class='post-footer-line post-footer-line-1'>

...apply the same rule for other elements.


MOVE THE ELEMENT FROM POST FOOTER UNDER THE POST TITLE
Same way you rearranged the elements in Blogger post footer, you'll move them under your Post Title.For this example, I've chosen to place my Blog Labels under the Post title.

1. First thing is to CUT the code of the element we'd like to move (Labels in my example):

<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

..the code you CUT needs to be wrapped in a Span (in orange) (DO NOT cut anything extra!)

2. PASTE your code into Notepad (Texedit)

3. Locate this line in your code:

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

...and place your Labels code UNDER this line.
You will notice that the Labels are now in place, but without the default style. The reason this happened is because we've "ripped" the Labels from Post Footer, which has a defined style.

4. We have to create a style for the Labels element, and adjust it to fit. Add the code in orange around the Labels code:

<div class='under-title'>
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if></span>
</div>

...we've just wrapped the Labels code in a "div" so we can manipulate with it better.

Next, copy this:

.under-title {
margin: 0 0 10px 0;
color:#000000;
text-transform:uppercase;
letter-spacing:0px;
font-family:arial;
font-size:10px;
}

And place in anywhere ABOVE this part:

]]></b:skin>
</head>

...in pink, you can adjust the margin of the element
...change the style (color, line-height, font) to whatever suits you..


MOVING MORE ELEMENTS UNDER POST TITLE
Now, this will be much easier. You just have to CUT the the code of the element (the entire span!), and place it in the "div", like so:

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

<div class='under-title'>
<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-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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if></span>

</div>

..in orange, you can see the main div that defines the style for the whole container, and everything you place there, will automatically "pick up" the style...
..now, this will place everything in the same line. Hm. If this is to messy for you, you can place each element in it's own row.
All you have to do is change the word:
span into div

For example, the Labels code will look like this after the change:

<div 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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if></div>

..in orange, you can see we changed span into div...

That's it. You can stylize, play, add icons, background.....anything.

Smile!