Mommy Hacks # 6 - How to Create a Menu for Your Sidebar

Unknown // Thursday 18 April 2013


Welcome to this sixth in a series of  Mommy Hacks - easy bits of code that you can use in your blog even if you are a complete beginner.

Linking to a series of posts is a great way to get readers to check out groups of old posts.

You can do this very easily as I just did within a post or you can create mini side bar menus.

Crystal and Co has a fabulous mini menu for the key series she wants people to read.



Before You Get Started

Before you try out any mommy hacks it's a really good idea to BACK UP YOUR BLOG!

Creating a Basic Link to a Series

The basic HTML for a text link is very simple ..

<a href="http://mumsmakelists.blogspot.co.uk/2013/04/essential-baby-toys.html">Essential Baby Toys</a>

The URL in quotes in pink is the URL that you want the reader to be taken to and the text between the 2 pointy brackets in blue is the text that you want to appear in the link.

To create a link to a series, all we do is get the URL for posts that all have the same tag.

All my posts for my weekly link party on pregnancy and new babies have the tag The Friday Baby Shower. If I click on this tag at the bottom of one of the party posts it will give me the URL below:

http://mumsmakelists.blogspot.co.uk/search/label/The%20Friday%20Baby%20Shower

All I need to do is paste this series URL between the quotes in pink as before ...

<a href="http://mumsmakelists.blogspot.co.uk/search/label/The%20Friday%20Baby%20Shower">The Friday Baby Shower</a>

... and voila, we've got a link to the all the The Friday Baby Shower posts.

Creating a Button Link to a Series

It's now very simple to add a series to a button or image. If you haven't created clickable buttons or images before check out these tutorials first on how to add buttons to your blog and make images behave in Blogger.

For this example, we're going to create a mini menu for the blog side bar that will drive readers to different series of posts. The first thing we need is images for the buttons like the 3 below.





If you upload them into Blogger, the HMTL will look something like this.


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0CB1NOCczeKoJn9DxFStJDqIEHwlxs9Exw99FthqSFAOMX_uHtPXsC0o6FyzH5UiHocPsIDk3huZBKA-505mYSxNnJW_y3TiuyHZDUww3Ki-W4ceADluHbKKRJxafCuo8aErDH59RstTS/s1600/ButtonBlogging.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0CB1NOCczeKoJn9DxFStJDqIEHwlxs9Exw99FthqSFAOMX_uHtPXsC0o6FyzH5UiHocPsIDk3huZBKA-505mYSxNnJW_y3TiuyHZDUww3Ki-W4ceADluHbKKRJxafCuo8aErDH59RstTS/s1600/ButtonBlogging.jpg" /></a><br />

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHv4X2RVwTxIqezC2rNe-oQnHRMVoScB0r-ak3GSMCqr2a1eW1B9Lb37rNGynKvT3gcTHmrO4bYFlzjucE6YTgrQ8rLVFiIL1YQ3pxhM2IejfU5wlbLUn6tMWbJIaOMaMFasqgxZjShXe/s1600/ButtonFood.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHv4X2RVwTxIqezC2rNe-oQnHRMVoScB0r-ak3GSMCqr2a1eW1B9Lb37rNGynKvT3gcTHmrO4bYFlzjucE6YTgrQ8rLVFiIL1YQ3pxhM2IejfU5wlbLUn6tMWbJIaOMaMFasqgxZjShXe/s1600/ButtonFood.jpg" /></a><br />

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1eoSThG3rTE-OjGCXxrx-aWrMMn2gyXRcSiUCdeesjWPPlAmJNxSvn4s1a7JNFXSWoXtWbBCYw86KAl4r9728ws8U3fHSOGoMnXA5AUZPjCr2fQb35nqN3Gm5mrSncAI5PTcV0QX9Ye-/s1600/ButtonPlay.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1eoSThG3rTE-OjGCXxrx-aWrMMn2gyXRcSiUCdeesjWPPlAmJNxSvn4s1a7JNFXSWoXtWbBCYw86KAl4r9728ws8U3fHSOGoMnXA5AUZPjCr2fQb35nqN3Gm5mrSncAI5PTcV0QX9Ye-/s1600/ButtonPlay.jpg" /></a>

The first thing we do is get the URL for the tag that matches the first Blogging button - as we did in the text example - and paste it between the first quotation marks - in pink - of the first block of code.

We then get the URL for the tag that matches the second Food button and paste this between the first quotation marks - in red - of the second block of code.

Finally we get the URL for the tag matches the third Play button and paste this between the first quotation marks - in purple - of the third block of code.


<a href="http://mumsmakelists.blogspot.co.uk/search/label/blogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0CB1NOCczeKoJn9DxFStJDqIEHwlxs9Exw99FthqSFAOMX_uHtPXsC0o6FyzH5UiHocPsIDk3huZBKA-505mYSxNnJW_y3TiuyHZDUww3Ki-W4ceADluHbKKRJxafCuo8aErDH59RstTS/s1600/ButtonBlogging.jpg" /></a><br />

<a href="http://mumsmakelists.blogspot.co.uk/search/label/food"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHv4X2RVwTxIqezC2rNe-oQnHRMVoScB0r-ak3GSMCqr2a1eW1B9Lb37rNGynKvT3gcTHmrO4bYFlzjucE6YTgrQ8rLVFiIL1YQ3pxhM2IejfU5wlbLUn6tMWbJIaOMaMFasqgxZjShXe/s1600/ButtonFood.jpg" /></a><br />

<a href="http://mumsmakelists.blogspot.co.uk/search/label/play"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1eoSThG3rTE-OjGCXxrx-aWrMMn2gyXRcSiUCdeesjWPPlAmJNxSvn4s1a7JNFXSWoXtWbBCYw86KAl4r9728ws8U3fHSOGoMnXA5AUZPjCr2fQb35nqN3Gm5mrSncAI5PTcV0QX9Ye-/s1600/ButtonPlay.jpg" /></a>

And we now have a working menu that links to different series of posts ...





Follow Me on Pinterest

 If you found this post useful, you might also enjoy ...

Tidy up messy buttonsPinterest trafficLink party successAffiliate ads

This post has been shared at ... Sugar Bee Crafts,  Home Stories A to Z,  The Shabby Creek Cottage,  Joyful Homemaking,  Serenity NowThe Gunny SackCrystal and CoGinger Snap Crafts, Trendy Tree HouseDomesblissityLadybird LnNot Just a HousewifeClever ChicksBe Different Act NormalSumos Sweet StuffKeeping It SimpleLines AcrossGet Your Crafts OnA Bowlful of LemonsClean and Scentsible,  Delightful OrderWe Are That FamilyBy Stephanie LynnWhipperberry,  More the Merrier Monday,  I Should Be Mopping the Floor,  Carolyn's HomeworkShabby Creek Cottage36th AvenueSix Sisters Stuff52 MantelsMy Uncommon Slice of SuburbiaElizabeth and CoWhatever GoesFinding FabulousThe Thrifty HomeSkip to My Lou

0 comments