Monday 20 June 2011

DIY Blog - Tabbed Widget

I enjoy surfing the web and webdesign and somewhere in the busyness of wifehood, motherhood, homeschool, sisterhood, daughterhood, friendhood and general life I would love to learn to program in CSS & HTML!  I have enjoyed looking at different blogs and the creative ways in which people do up their little corner of the web to make it their own. 

I have felt a little frustrated (alright I confess: VERY frustrated )in trying to rearrange my little corner of blog world and have spent hours trying to figure out how some of you do the amazing things you do with your blogs.  So I thought I would share with you some of the tips I have learned from other blogs and bloggers along the way.

Tabbed Widget

My new Tabbed Widget

 DIY Steps for blogger:
  • Decide which three widgets you want to combine to add into this one tabbed widget.
  • Open your Design tab in blogger.
  • Make sure you drag and place the three widgets you want to combine to the top of your list
  • Edit each widget and make sure you add in a title to each widget.


  • Now click Add a Gadget

  • Select HTML/Java Script



  • Click anywhere on the page.
  • On your keyboard press Ctrl & A together, this will select all the code
  • Now press Ctrl & C together, this will copy the code
  • Go back to your widget code box, click on the box, now press Ctrl & V together this will paste the code into the box. 

  • Click save and it will autoload for you !
  • Now at the top of the Design page click Save
  • Now click View Blog
If you want to have more than three tabs you can alter the code. For step by step instructions you will need to carefully read the steps in the installation part after the picture of the code on Blogger Sentral Easiest Tabbed Content Widget.

Widget Colum Width

You might need to make the colum your widget resides in wider to accomodate what you are trying to achieve.

To do this you need to:
  • Open your blog
  • Log in
  • Click on Design
  • Click on Template Designer
  • Click on Adjust widths
  • Adjust the width by either dragging the arrow or change the number.
  • Click Apply to Blog
  • Click View Blog to make sure it is sufficient.
Have fun making your blog tabbed widget.


9 comments:

  1. Thanks for sharing this, Chareen. It works! Not being very computer literate, that's quite an achievement for me;)

    ReplyDelete
  2. You are welcome Vicky :) It looks good on your blog !

    ReplyDelete
  3. LOL! My brain's currently in overload, so I'll have to come back and look at this again later.

    Thanks for posting this tip, though. It's great!!

    ReplyDelete
  4. You're welcome Alecat :) Let me know when you get it working

    ReplyDelete
  5. Love the tabbed widget... thanks for sharing! Can't wait to add one to the new blog I am moving to. I see you have been busy in the blogging world - glad to see you are enjoying it xxx

    ReplyDelete
  6. Hi Rebecca. I look forward to seeing your new blog. :)

    ReplyDelete
  7. What words..

    ReplyDelete
  8. Thanks for posting this, I'm pinning it for later---trying to wrap my head around an all new look.

    ReplyDelete

I love to hear from you so please leave your comments below ♥