Blogger templates

Blogger jQuery Tabbed Sidebar Widget Tutorial

How to install a jQuery tabbed sidebar widget on your Blogger blog.

Recently, over on my main blog Bonjour Tristesse, I installed a tabbed widget to more efficiently use the space on my sidebar.  Here in this post, I will explain how to accomplish this on your own templates.

First of all, you need to have jQuery installed on your template.  jQuery is a powerful JavaScript library that allows you to do many cool things with simple coding and it is very easy to install onto your blog.  We just have to simply include the scripts on our template.  These scripts are conveniently hosted for us by Google.

Installing jQuery

The first step is to go to your Dashboard and click on Design > Edit HTML.  You should see a page like the one below:


Now click on "Download Full Template" to backup your current template just to be safe.

Now search for the following line of code in your template:
</head>
and place these lines of code before that one:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js' type='text/javascript'/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;#BTtabber&quot;).tabs();
});
</script>
The first three lines installs the main jQuery library, the User Interface library, and the base CSS stylesheet onto your blog. The following lines is what activates the tabs, or turns them on.

Modifying Your Template

The next step is to modify your template, placing the tabs within the sidebar.  To do this first search for this line of code:
<div class='column-right-inner'>
and paste this code right after it
<!-- TABBER -->
<div style='clear:both;'/>
<div class='sidebar-top-1'>
<b:section class='sidebar-top-1' id='sidebar-top-1' showaddelement='yes'>
</b:section>
</div>
<div id='BTtabber'>
<ul>
<li><a href='#widget-SB1' title='TITLE1'>LABEL1</a></li>
<li><a href='#widget-SB2' title='TITLE2'>LABEL2</a></li>
<li><a href='#widget-SB3' title='TITLE3'>LABEL3</a></li>
</ul>
<div id='widget-SB1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='widget-SB2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='widget-SB3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>
<!-- END TABBER -->
Now you need to edit the code, changing the TITLE1, TITLE2, TITLE3 and the TAB1, TAB2, TAB3 to whatever you want to display on your blog.

The TITLE is what will be shown when your visitors hover their mouse cursor over the tab
and the LABEL is the actual text that will be shown on each tab.

Now click on "Save Template" and if you copied and pasted everything correctly you should get a message at the top of your screen saying "Your changes have been saved."

Adding Widgets 

Now that the code has been added, you will want to add widgets to each tab.  To do so, click on the "Page Elements" tab, and you will get a screen that looks like this:


Notice on the sidebar, there are several places to add your widgets.  The places I have labeled Tab1, Tab2, and Tab3 correspond to the locations for each of your tabbed widgets.  The "Add a Gadget" above the tabs is an optional place for you to add regular widgets that will appear above your tabs. And the "Add a Gadget" below the tabs is where all your current sidebar widgets are located.

Now take the time to drag and drop or add new widgets where you want them.  When you are done hit "Save".

Changing the CSS

Now of course you will notice that the tabs may not exactly match your current template.  Don't worry because they can be fully customized for your blog.

Go back to the Design > Edit HTML tab and backup your template again.

Now search for the following line of code in your template once more:
</head>
and place this block of code before it:
<style type="text/css">
/* Tabbed Widget Style
----------------------------------------------- */
.ui-tabs{
background: transparent;
border: 0;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
width: 350px;
}
.ui-tabs .ui-tabs-nav{
text-align:center;
left: 10px;
position: relative;
border: 0;
background: transparent;
}
.ui-tabs .ui-tabs-nav li {
background: none;
border: 0;
top: 0px;
margin: 0 3px 0 0 !important;
padding-bottom: 0 !important;
}
.ui-tabs .ui-tabs-nav li a{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 4px 6px;
color: #80906A;
background-color: #333333;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a{
color: #FFFFFF;
background-color: #CCCCCC;
}
.ui-tabs .ui-tabs-nav li a:hover{
text-decoration:none;
color: #FFFFFF;
background-color: #CCCCCC;
}
.ui-tabs .ui-tabs-panel{
padding: 0 0 !important;
}
/* End Tabbed Widget Style
----------------------------------------------- */
</style>
I will walk you through each section of the CSS code to determine the changes you need in order to match the tabs to your template.

Section 1: .ui-tabs
.ui-tabs{
background: transparent;
border: 0;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
width: 350px;
}
This first section affects the entire tabbed widget container.

The setting you will most likely want to change is the width. Typically to get it to match the rest of your sidebar widgets you will want to set this to be 10px less than your sidebar width. But you may have to go up or down depending on your template.

You might also want to adjust the margin-top and margin-bottom settings, these control the amount of space between your jQuery tabbed widget and the widgets above and below it.

Hint: go to Design > Template Designer > Adjust widths, to look up your current sidebar width setting.

Section 2: .ui-tabs .ui-tabs-nav
.ui-tabs .ui-tabs-nav{
left: 10px;
position: relative;
border: 0;
background: transparent;
}
This code affects the container that the clickable tab buttons reside in. Think of it as a box holding your buttons. Most of us will want this box to be invisible, and indeed this is what my default settings do, but you can set the background color or add a border if you wish.

One setting you may want to adjust is the left attribute, my default setting puts the buttons flush with the left side of the widget, adding to the value will shift the buttons to the right, while subtracting from the value will shift the buttons to the left.

Section 3: .ui-tabs .ui-tabs-nav li
.ui-tabs .ui-tabs-nav li {
background: none;
border: 0;
top: 0px;
margin: 0 3px 0 0 !important;
padding-bottom: 0 !important;
}
This code affects the positioning of the buttons themselves.  The background, border, and top settings should be left alone here.

The margin setting determines the gap of space in between the buttons themselves.  The default setting is 3px you can increase or decrease this if you wish.

The padding-bottom attribute determines the distance between your buttons and the widget content below.  The default is no gap, but you can enter any value you like.

Section 4: .ui-tabs .ui-tabs-nav li a
.ui-tabs .ui-tabs-nav li a{  
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 4px 6px;
color: #80906A;
background-color: #333333;
}
This code affects the text, colors, and sizing of your tab buttons as well as the rounded corners of your tabs.

Because each of the major browsers acts differently, there are 3 sets of settings for the rounded corners. My default settings are a radius of 5px but you can change them to anything you want. 0 represents a square corner.

The padding setting controls the amount of space surrounding the text label, and therefore the size of your tab buttons. The default is 4px above and below, and 6px on each side. You can fine-tune these values if you wish.

The color setting controls the color of the text, while the background-color controls the color of your tab button.

Section 5: .ui-tabs .ui-tabs-nav li.ui-tabs-selected a
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a{
color: #FFFFFF;
background-color: #CCCCCC;
}
This section affects the text and colors of the currently selected tab.

The color setting controls the color of the text, while the background-color controls the color of your tab button.

Section 6: .ui-tabs .ui-tabs-nav li a:hover
.ui-tabs .ui-tabs-nav li a:hover{
color: #FFFFFF;
background-color: #CCCCCC;
}
This section affects the text and colors of tabs when the mouse cursor is placed over them. I have my values set the same as the ones for the selected tab, but you can set them to anything you want.

Section 7: .ui-tabs .ui-tabs-panel
.ui-tabs .ui-tabs-panel{
padding: 0 0 !important;
}
This last section controls the container of your widgets. The box that holds the actual widgets. Normally you will want to leave this setting alone.

That's It!

If you have any questions or problems setting this up, leave a comment below and I will help you figure it out.

Set up your Blogger profile

One simple thing that I noticed a lot of new bloggers neglecting to do is they don't have a link to their blog on their Blogger profile.

You may not realize, but by default your Blogger profile is empty.  So for instance if you follow another blog, nobody can follow you back because they won't find a link to your own blog in your profile.

Also, if you do not have an avatar, you will be added to the end of the followers list instead of at the front.  So someone with a lot of followers might not notice you there and won't be able to follow you back.

Thirdly, a good way to find similar blogs to yours or other blogs you might be interested in is to fill out the interests section with your relevant interests.  These will become clickable links to other bloggers with the same interests that you can browse through to find blogs you might like.  More importantly, it adds you to these same lists so other bloggers can browse and find you.


So make sure you go to your Blogger dashboard > Edit Profile and: 
  1. Add your blog to the Show My Blogs section. 
  2. Add an avatar to the Photograph section.
  3. Fill out the Extended Info > Interests section.

Reigniting Houston History


As a native Houstonian I was immediately drawn to the neighborhood near where my Italian ancestors lived, the Historic Sixth Ward, when I began a search for a permanent home for Axiom. I knew immediately that Fire Station No. 6 on Washington, constructed in 1903, could spark creative energy for our team once restored to its historic charm.

Restoring the building has proven a major undertaking, especially with the market downturn stopping the project for over two years. But in 2009 we began the exterior renovation to bring the 4,000 square foot building back to its original appearance.

One of only seven stations serving the rapidly growing city of Houston in 1903, just after nearly 45,000 Galvestonians flocked to Houston after the 1900 hurricane. The classic Italianate was hailed as the most modern fire station in Houston. The all brick construction was a departure from earlier wood buildings which often fell victim to fire. With 27 windows and hot AND cold indoor baths, it was a luxury never dreamed of by fire fighters of the day.

Fire Station No. 6 sported the well-earned motto "Rough and Ready” because of its hard working, hard fighting crew. While scouring the Internet, local libraries and archives to information on the building and its old teams, I’ve met several historians and restoration specialists who are helping me to bring this building back to life.

Axiom is creating a microsite that will chronicle the restoration, describe the first fire fighters, document the building’s history and offer a glimpse into that history through some retrieved artifacts.

Join us on Facebook to watch for the launch of our Fire Station No. 6 microsite

Remove borders and box shadow from images

How to remove the borders and box shadows from images on your Blogger blog.

Most of the default Blogger templates display a white border and box shadow frame around every posted image like the example below:


But some bloggers prefer to have their images displayed without the border and shadow like so:

There are two ways to accomplish this depending on whether you want to completely remove the effects for every image or just on specific images.

Method 1:
If you want to remove the borders from all of the images on your blog, add the following code to your CSS.  Design > Template Designer > Advanced > Add CSS:
.post-body img, .post-body .tr-caption-container, .Profile img, 
.Image img, .BlogList .item-thumbnail img {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
Method 2:
If you want to selectively remove the borders from specific images, add this code to your CSS.
Design > Template Designer > Advanced > Add CSS:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
Then in your post editor HTML tab, edit the img tag(s) for each of the images you want to remove the borders from by assigning them to the "noborder" class like this:
<img class="noborder" src="http://YOURIMAGEURL">

Swap blog title after page title

How to swap blog title after page title.

If you look at your browser's title bar you will notice that Blogger's default templates display your blog title in front of each page or post title.

For example this page title would normally be displayed as:

Stupid Blog Tricks: Swap blog title after page title


This is not great for search engine optimization and makes it difficult for people to search for your posts. The reason being is that users are more likely to search for specific post content rather than the actual name of your blog. So having the post titles first increases your chances of being found.

To have your blog title displayed after the page title like so:

Swap blog title after page title | Stupid Blog Tricks


Look for this line in your template:
<title><data:blog.pageTitle/></title>
and replace it with this:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
Line 2 tells it to display your blog title by itself on your home page, and Line 4 tells it to display the post title followed by your blog title separated by a '|' on every other page.

Feel free to change the '|' to any character(s) you like or even add a brief description after your blog title.

Center your header image.

How to center your header image.

By default, Blogger aligns your header image to the left. But some might want their images to be centered. There are a couple ways to accomplish this depending on how you've setup your header.

If your header is set to "Behind title and description"
    Add the following code to your CSS:
    #header-inner { 
    background-position: center !important;
    width: auto !important;
    }

    If your header is set to "Instead of title and description" or "Have a description placed after the image"

    Add the following code to your CSS:
    #header-inner img { 
    margin: 0 auto !important;
    }

    Welcome

    Hello and welcome to Stupid Blog Tricks.

    I created this blog mainly to document for myself the various Blogger tricks and tweaks that I have discovered since I started blogging last September.  Somewhere to keep all this information in one place.

    I will be posting some blogging observations, and how to's on stuff that I've integrated into my main blog everything from basic commonly asked tips to advanced custom widgets.  Hopefully some of what I've learned can help others make the most of their Blogger experience.

    Cheers!

    Blogger news