Learn to customize your own blog with confidence

Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info

Geometric Sidebar Menu with HTML and CSS

Today I'm going to show you how to make a geometric menu for your blog's sidebar using HTML and CSS, including a neat little CSS trick to create triangle points. Your menu will look something like the title image above. You can check out a live demo here.

If you're new to web development you may wonder why I'd make simple shapes like this with CSS instead of using images or image map. I prefer to use HTML & CSS instead of images whenever possible. Once you're comfortable with it, code is more flexible and simpler to maintain or update than images.

You can quickly add, remove, or rearrange items on an HTML menu with a couple of keystrokes — when you do, the height of the menu will adjust itself accordingly. And, you can change the menu's colors or font on a whim.

Limiting the images in your template also helps improve your blog's performance. Everybody likes a fast-loading blog!

Compatibility

You can use this tutorial to create a menu on any website that allows you to add custom HTML and CSS. Blogger, Typepad, and self-hosted Wordpress users, you're good to go. Wordpress.com users will need the premium Custom CSS add-on to add CSS.

The HTML

First things first, let's put together the HTML!

All of the code for this tutorial is in a CodePen demo. As you work, the demo will refresh itself so you know everything looks right before you add the code to your blog.

Click this link to open the CodePen demo in a new window.

In the CodePen demo, the HTML tab has all of the markup you need to get started. Don't worry if the colors and fonts aren't quite what you want — I'll show you how to edit them in the CSS section of this tutorial.

For now, all you need to do is fill in the links where prompted. For example, if I were using this menu on my blog, I'd change this:


 <a href="HOMEPAGE LINK HERE">Home</a>

To this:


<a href="http://www.codeitpretty.com">Home</a>

If you could use a more detailed explanation of how to write an HTML link, check out the "links" section of Practical HTML for Bloggers.

I've set up the demo with 7 links. Add or remove links as needed. If you need to add new links, make sure to keep them inside the triangles-menu div.

The CSS

Now let's move on to the CSS!

In the CodePen demo, the CSS tab is filled in with my styling for a 150px wide purple menu with a custom font, Alegreya Sans. Don't worry if that doesn't suit your blog — you'll be able to customize it!

Let's go through each CSS rule, so I can explain what each one does.


.point-top,
.point-bottom {
    width: 0;
    height: 0;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;
}        

Here I've set the width and height of both the top and bottom triangle points to 0. I've also added 75px wide transparent right and left borders to the triangle point divs. These invisible lines make the triangle shape happen.

The width of the left and right borders add up to 150px, the width of the menu.


.point-top {
  border-bottom: 50px solid rgb(177, 99, 163);
  border-top: 0; 
}

In the .point-top rule, I've given the div a bottom border that is 50px wide. This sets the color of the top triangle. The rgb number is for the shade of purple I'm using (radiant orchid — the color of the year). You can change that to another rgb color, a Hex color, or an X11 color name if you prefer.


.triangles-menu {
  background-color: rgb(177, 99, 163);
  width: 150px;
  padding-bottom: 1em;
}

In the .triangles-menu rule, I've set the background color for the menu area to the same purple as the top triangle. I've also given the menu a width of 150px, and padding at the bottom to add a little bit of blank space below the last link in the menu.

You can change the color, width, or padding to your liking. If you change the width of the menu, you'll need to adjust the width of the triangle's left and right borders in the ".point-top, .point-bottom" rule so that each border is equal to half the menu's total width.


.triangles-menu a {
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 100;
  font-size: 2em;
  color: white;
  display: block;
  text-align: center;
  text-decoration: none;
  margin-bottom: .5em;
}

The .triangle-menu a rule has a lot going on. In the first declaration, the links in the menu are set to display: block; which means that they'll all appear on their own line instead of running together (try removing the display: block; rule for a moment to see what I mean).

Next, I set the font-family to Alegreya Sans, a Google Web Font. If you'd like to use a Google Web Font for your menu design, you can learn how to add them to your template in this tutorial. If you don't want to use a custom font, you can remove the font-family declaration.

The font-weight and font-size declarations set the "boldness" of the text and the size, respectively. You can adjust those to suit your font choice, or remove them if you're not using a custom font.

The color rule sets the link's color to white. You can adjust that using another X11 color name, an rgb color, or a Hex color.

The text-align rule centers the text inside the menu container. The text-decoration removes the underline that appears by default under links in most browsers (we'll bring the underline back in a few cases in the next two rules).


.triangles-menu a:first-of-type { 
  padding-top: 1em;
  text-decoration: underline;
}

.triangles-menu a:hover {
  text-decoration: underline;
}

In these two rules, I'm using pseudo-classes to do a few special things to links in the menu. The first, for .triangles-menu a:first-of-type, gives the very first link in the menu a bit of padding at the top and a visible underline to differentiate it from the other links in the menu.

In the next rule, .triangle-menu a:hover, I'm bringing the underline back for each link when it's hovered.


.point-bottom {
  border-top: 50px solid rgb(177, 99, 163);
  border-bottom: 0;
}


This one looks familiar, doesn't it? This rule creates the bottom point. This time we're making an inverted triangle, so instead of a bottom border, we use a top border.

Adding Your Menu to Your Blog

Now that you've styled your menu, you're ready to add it to your blog! Let's add the CSS first so that your menu is instantly stylish when you add the HTML.

Add the CSS

In CodePen, copy all of the CSS from the CSS window and paste it into the custom CSS field for your blogging platform. If you're on Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

Save your CSS. Nothing will look different on your blog yet. You'll see the CSS working once you add the HTML.

Add the HTML

Next, copy everything from the HTML window and paste it into an HTML gadget/widget on your blog. On Blogger, use an HTML/JavaScript gadget. On Wordpress, enter it in a text widget. On Typepad, use the "Embed your own HTML" option in your Content menu.

Save your new widget and you should see your new menu appear in your sidebar. Nice work!

Make Your Own Tweetable Links for Blogger

DIY Tweet This links for Blogger

"Tweet This" links make it easy for your readers to share your posts on Twitter. And, with a little bit of code, it's pretty easy to make any text on your blog tweetable! Today I'm going to give you the tools to make click-to-Tweet links of your own.

What the Code Does

After a one-time setup, this code lets you make any sentence in your post tweetable in a few seconds. A link to your blog post is automatically added to the end of the Tweet. Here's a demo link, styled to match my blog with optional CSS I've included at the end of the tutorial:

I'm learning how to make click to Tweet links on #Blogger from @MMosley

The colors and Twitter icon are part of the CSS styling, and you can change them to suit your blog's style, or create a completely different design.

Compatibility

This works with all of the standard Blogger templates except Dynamic Views, which does not accept customization. This will also work with custom templates that have the same internal structure as a standard template.

For best results, make sure timestamp links are enabled for your blog (here's how to check). If you have timestamp links enabled, the tweet will include a link to your blog post at the end. If you don't, the tweet will link to the page your reader was on when they clicked the link. Often that's ok, but if your reader tweets from from your home page or an index page, visitors who click the link in the tweet may not end up on the right post.

All set? Let's get started!

Add the Twitter Code

If you already have the official Twitter timeline widget installed on your blog you can skip this step.

Twitter has a code snippet that makes your tweet links open a new, small Twitter window, like this:

To install it: first, back up your template (instructions here). Do not skip the backup.

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

Then, open your template's search box by placing your cursor over the code, clicking once, and pressing CTRL and F at the same time (PC) or Command and F (Mac).

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Paste the following line of code immediately above the </body> tag:

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

Then, press the orange "Save Template" button. Nothing will change on your blog yet — that comes later!

Add the HTML/JavaScript Gadget

Now, let's add the jQuery that makes your links tweetable!

Go to Layout and click an "Add a Gadget" space.

Select HTML/JavaScript from the popup menu and insert the following code into the gadget:

Save the gadget. Nothing will change on your blog yet, but it will after the next step.

Make Tweetable Links

Now that you have the code installed, you can make any text on your blog a tweetable link! Make sure to pick sentences that are 117 characters or less to leave room for the link to your post at the end of the tweet.

To make text tweetable, switch to the HTML view of your post and find the text you want to twitterize.

Wrap the text in <p></p> paragraph tags, like this:

<p>This is my tweetable text. Click to tweet it!</p>

Then, add the class of "tweetable" to the opening paragraph tag, like this:

<p class="tweetable">This is my tweetable text. Click to tweet it!</p>

You can use blockquote or span elements if you prefer, but I'm using the paragraph element here because it's a good fit for most blogs.

Save your post and check it out on your blog. Your text is now tweetable! Click it and see how it works.

Style Your Tweetable Links

At this point your link will just look like a regular link — but you want it to stand out, right? That's where CSS comes in.

I put an editable demo of a styled "tweetable" link on Codepen. You can play with it to customize the colors and styling.

Note: the "tweetable" link inside the demo won't open a new window when you click it because it's hosted on Codepen. Don't worry, that's just a Codepen thing — the code from this tutorial will open a new window on Blogger.

<div class="post-outer">
  <a href="http://www.codeitpretty.com" class="timestamp-link"></a>
<p class="tweetable">I'm learning how to make tweetable links for #Blogger from @codeitpretty!</p>
</div>


See the Pen 6b71bca216f2c7eb6ed8c85e246cd482 by mariemosley (@mariemosley) on CodePen

When you have it styled the way you like it, copy everything in the CSS tab and paste it into your blog's CSS field (Template > Customize > Advanced > Add CSS). Press the orange "Apply to Blog" button to save your changes. Now all of your tweetable links will have style!