How To – Grouped Link Boxes

This is a tutorial on how to add a group of links to your Blogger blog. In order to add these links, you’ll need to follow 4 steps and you will end up with something like the links below…


div.blockLinks { width: 60%; text-align: center; } div.blockLinks > a { display: block; margin: 3px 0 3px 0; padding: 10px 0 10px 0; font: bold small-caps 17px Georgia; background-color: #E6800D; color: black; opacity: .85; text-decoration: none; } div.blockLinks > a:hover{ opacity: 1; } 1) Add a new HTML/Javascript widget to your Layout in whatever spot you want.

2) In the editor of that widget, copy and paste the following code…

HTML / CSS

div.widget-content > div.blockLinks {
  text-align: center;
}

div.widget-content > div.blockLinks > a {
  display: block;
  margin: 3px 0 3px 0;
  padding: 10px 0 10px 0;
  font: bold small-caps 17px Georgia;
  background-color: #E6800D;
  color: black;
  opacity: .85;
  text-decoration: none;
}

div.widget-content > div.blockLinks > a:hover{
  opacity: 1;
}

3) Add the links that you want to use. The format of a new link is The text that will appear. Just replace the linkurl and text that will appear with whatever is appropriate for your link. Add as many links as you want between the two

tags.

4) The last step is to customize the links to look the way you want them. The three main parts to customize are the font, the color of the blocks, and the width. The font can be edited by changing the line that starts with “font”. By default, it uses a bold, small capitalized version of the Georgia font at 17px. You can learn more about how to customize the font here.

The background color can be edited using the line that starts with “background-color”. Just replace FFD271 with any html color code of your choice. You can find one here.


And finally, the width can be edited using the line that – you guessed it – starts with “width”. You can either choose a percent from 0 to 100 or you can set an exact number of pixels that the links should span using px instead of the % symbol. (for example: 200px would be 200 pixels wide)

Once you save your widget, it should appear on your page and you can tweak it however you need to. If you want to mess around with the html and css further, you can follow this link and try whatever you want without any consequences.

Advertisements

Using "Closest" With JQuery

I got the chance to play with some jquery selectors recently. I found a useful function called “closest” that will traverse up through all parent elements of an element until it finds a parent that matches the selector.

One real world application of this function is in the blog world where you have many blog posts that have common elements, like images. How about if you want to specify the title attribute of each of those images as the title of their respective blog posts? Well the “closest” function comes in handy here.

So how do we use this? Here’s an example where we have two “blog posts” where the containing divs have the same class. And in each blog post is an image where we want to set the title attribute to the title of each post.

The HTML…

Post 1

Post 2

Some quick CSS to make it look nice… .closestPost { width: 100%; background-color: rgba(255,255,255,.5); text-align: center; } .closestPost > img { height: 200px; width: 200px; margin: 5px; } .closestPost > h2 { color: black; }

Then we use jquery to select the inner images and then the “closest” function to grab the title of each post and plug it into each image’s title attribute… $(‘div.closestPost > img’).each(function() { var title = $(this).closest(‘div’).find(‘h2’).html(); $(this).attr(‘title’, title); });

And here’s how it looks all put together. Notice that when you hover over the images, they display their respective post’s title…

Post 1

Post 2

.closestPost { width: 100%; background-color: rgba(255,255,255,.5); text-align: center; } .closestPost > img { height: 200px; width: 200px; margin: 5px; } .closestPost > h2 { color: black; } $(‘div.closestPost > img’).each(function() { var title = $(this).closest(‘div’).find(‘h2’).html(); $(this).attr(‘title’, title); });