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