Blissful and Domestic - Creating a Beautiful Life on Less: {Revamping Your Blog} Tab Section Part 1

Wednesday, January 18, 2012

{Revamping Your Blog} Tab Section Part 1

Photobucket

Alright ladies and gents.....We are back for another day of revamping your blog. I hope you enjoyed the great recipe ChiWei shared yesterday. Isn't she just too fun? I can't wait to try out her recipe. Anything with Ramen Noodles and I am game!  Oh but before I start I just have to tell you.....
I shared something so personal this week and you guys were amazing. I sent my mom a link to the post and she read it and looked through all the beautiful comments. Here is what she said

"This was so beautiful.  I haven't cried yet but this did it.  Dad read it with me.  He was so touched.  Thanks for sending it.  You have some very special friends on your blog.  Please thank them for us.  Mom"

I do have some amazing friends out there in blogland. Thank you for all your kind words and hugs.
You guys are amazing and I am so thankful for you.

Now that I had my gushing moment...
I seem to be full of them lately. Did you read about me gushing about the hubs last night?

Yep I guess I am extra emotional lately...

anywho enough of the emotions lets get to revamping today.....

Today we are moving onto part 2 of Revamping Your Blog on Blissful and Domestic. You can find part 1: Making a Cute Blog Header HERE. Today we are talking about the tabs section of your blog and how you can link to stand alone pages on your blog. This will probably take me two or three posts to really give you step by step instructions on how to do tabs and cutely on your blog.

So today we will just do part 1.

My good blogging friend Charlene, from Adventures in Mommyland was the first to ask me how I did my tab section and how I had links to tabs in my sidebar. In fact she was my inspiration for this whole series. I love it when that happens. Someone inspires you and then the ideas just start flowing.

So I know you guys have probably seen some cute tab sections on a bunch of blogs...

I first REALLY noticed these on my friend Amandas blog.
I asked her how she did it and she was kind enough to send me an e-mail with step by step instructions.
This was around Christmas time.
See how cute her tabs buttons look?

Photobucket


http://www.thelittlegiggler.com/

Now blogger itself does not let you have tabs like these. You can pick different fonts, but they are all uniform. Basically how mine look right now.

Photobucket

These are set through blogger with brackets around the words for extra cuteness
Through blogger you can even choose which tabs you would like visible on your blog.

Photobucket

As you can see I have many stand alone pages on my blog, but only a few are available through the tabs under my header. Select which ones you want visible. For me some tabs I de-select because I have links to them in my sidebar. Let's take my "Where I Party" page for instant..........

Photobucket

I have a button on my left sidebar, which takes you to my "Where I Party" page.

It is really simple to do this. Today I will show you how.

I originally got the image for the button from google.
I googled floral pictures and came up with this.

Photobucket

Isn't it gorgeous?

I saved it onto my computer.
This is the image I use for all the blog buttons on my blog.

Once I saved it onto my computer I uploaded it onto PicNik.com

Photobucket

Then I cropped the picture, using Picnik.com 

Photobucket

Then I added rounded edges

Photobucket

I then added text

Photobucket

I used two fonts, since Marcelle Script doesn't have brackets
I LOVE using brackets {} They rock!

Photobucket

Once I was finished editing my picture, I saved it as a new picture.

Photobucket

Once my picture was saved onto my computer, I uploaded it to Photobucket.com
Photobucket holds all my blogging pictures.

I then went into blogger's "Design" page

Photobucket


I added a html gadget to my left side bar.

Photobucket

Photobucket

Once in the gadget I copied and pasted my html code for my picture.

Once you paste your picture in, hit the Rich Text option
(circled in the picture)


Photobucket

This allows you to see what the pictures look like.
You can then resize them as well.

Now you're going to add a link to that picture.

Click on your picture you want to add a link to

Photobucket

See how that arrow is pointing to the link button?
Looks like two links to a chain.
Click that and then paste your web address for wherever you want the button to take you on your blog or the internet.

I have my "Lets Party" take you to a page with all the linky parties I link up to.
I also have a button to my etsy store as well.

Photobucket

Oh and the button on my right sidebar takes you to the Feature Friday Linky Party.

I made all these using the technique I showed you above.

Now I think that is all I will tackle today.
Tomorrow I will show you how to make the fantastic Tab section that Amanda has on her blog.

If you all have any questions on what I have gone over today or on Monday
let me know, so I can clear it up.

Oh and if you use any of these tips, let me know. I'd LOVE to see what you guys create:)

To see more posts in the Revamp Your Blog Series
Click HERE.

or the button below:)

Photobucket

 Photobucket
Follow me on Facebook Follow me on Twitter Browse my Pinterest Follow me with BlogLovin Send Me an E-mail Link up at My Party

12 comments:

  1. You must be reading my mind. This series is AWESOME!!! I have been wondering how these things are done! YOU ROCK!!

    ReplyDelete
  2. thank you so much! This is very helpful :)
    Tami

    ReplyDelete
  3. Great instructions! However, my blogger doesn't bring up pages like you show .... I've looked and looked and nothing even similar is there and I've clicked on everything. Lol! I think I'm about ready to leave this for the younger and/or smarter folks. I publish this comment in case anyone else is having a problem so they will know they're not alone. Always nice to have company in being challenged.

    ReplyDelete
  4. Thank you for all the wonderful tips!!

    ReplyDelete
  5. Very helpful Danielle! Thanks!! Also I wanted to let you know that I am gonna start a link up on Thursdays "Nutritious and Delicious" Where you share a healthy recipe you have made. I would LOVE it if you would join. Also I can't wait to post my project on Friday.(It may be up tomorrow though):)

    ReplyDelete
  6. You are AMAZING!!! Thanks so much for all the helpful tips and fabulous tutorials!

    ReplyDelete
  7. I signed up to your rss feed! Will you post much more about this theme? Precisely what I required to get. Really clear and valuable post. Im certainly a violator of many of these guidelines.

    ReplyDelete
  8. Thank you for such a detailed walk through of how to make these changes! This is awesome!

    ReplyDelete
  9. Great tutorial on revamping your blog using blogger and picassa!

    ReplyDelete
  10. oooooh, I so needed this information. So glad you're doing this!! Thank you!

    Kim www.plumberrypie.blogspot
    PS - I just joined your linky party. thanks for telling me about it!

    ReplyDelete
  11. I have been poking around trying to decide what/how to boost my blog a little. This tutorial is just what I needed, and one that I can actually understand and follow! Thank you for sharing this!! I'm going to be checking back on your Revamp Series for more tips : )
    Jaimee @ craft-interrupted.blogspot.com

    ReplyDelete
  12. Oh my goodness. I am so sorry to hear about your Dad. You and your family will all be in my prayers Danielle!!

    Thank you so much for this. I learned a few tricks from you that I was not sure how to do before. So thanks a million:)
    Jill

    ReplyDelete

Blissful and Domestic is a place for inspiration and encouragement. Please remember that when commenting. I read all comments and am thankful for them :)

All comments are moderated. Your comment will appear soon. ;)

I reply to all comments in the comment section, so check back for answers to your questions. You can also email me at blissful_and_domestic@yahoo.com :)

Related Posts Plugin for WordPress, Blogger...