nap-timecreations Image Map
Image Map
Recent Posts with Thumbnails for BloggerPowered By Blogger Widgets
photo recentposts1_zps00b56e56.jpg

Thursday, February 7, 2013

DIY Blog Makeover

Pin It

You may have noticed a few changes in my blog lately... I was seriously considering paying to having my blog design redone... then I spent last Saturday playing around and I learned a few things...
So... this is not going to be a full tutorial as much as it is a collection of tips and site that I used to make my blog look fab!
DIY

Ok...let's get started... the first thing I did was remove the shadow from around the photos on my blog. I used this tutorial to do it.

You now need to create your header, tabs, sidebar labels, signature, etc... Look around at other blogs and decide what you like.

I used Picmonkey or Ribbet to create my graphics before I got photoshop. Here are the approx. sizes I used in pixels.
Header 1100x150
Recent Posts title 750x40
signature 200x100
sidebar labels 280x30
here is an awesome header tutorial from 21 Rosemary Lane
Next, I have been using the recent posts widget found here: Recent Posts Widget  
 But, I made sure to follow the directions at the bottom for CSS styling to get rid of the powered by blogger widgets text.   
I also added my own graphic under the widget... to say RECENT POSTS (cuter!) You can also add an image code (photobucket,etc) in the same HTML box (as the widget) to get the graphic/title under your recent posts thumbs.
 
A new tip I learned over the weekend is IMAGE MAPPING! I learned about this years ago when I took a web site design class... but since I don't host my own site, I didn't think I could do this. For both my tabs and social media buttons I used this image mapping site and the tutorial from Something Swanky listed below. I created these two pics... used image mapping and now on my blog you can click them and the links work!


Social Media Icons 
Image Mapping
How TO: Something Swanky

 For my Sidebar Labels (photos)
For the gadgets that you have installed in HTML or text format (welcome, social media buttons, etc) you can paste the HTML (photobucket) code on top of any other text or code. It should appear. For other blogger gadgets that you have used (followers, archives, etc) add a picture gadget directly above your followers (for example) and upload your label from where you have saved it.

My buttons are 150x150 and I uploaded them to photobucket then used this site.
Grab my Button Code Maker 
Please let me know if you have any questions.... I can also do a full tutorial if you would like to see something in more detail... just leave me a comment. I would love to help if I can.
photo signature1_zpsb461fce3.jpg
 
 Follow along here: Facebook * Pinterest * Subscribe in a reader

Shared Here:

created by Emily Thompson at 7:00 AM

25 comments:

  2. Thanks for the tips. I've been looking to make some changes and these will definitely help!

    ReplyDelete

  3. Thanks so much for the tips. I can use all the
    help I can get.
    Sandy

    ReplyDelete

  4. great ideas, thanks for the great tips

    ReplyDelete

  5. Both the PJs and the blog look great. I've pinned this so when I have some spare time, I can go through and make some changes on my blog too. thanks!

    ReplyDelete

  6. Thanks for the tips! I am looking to make some more custom changes to my blog. I use the free wordpress service but I can't do as much to it as I can with the free blogger. I am trying to decide if I want to stay at wordpress, upgrade or what I want to do but I love the wordpress mobile reader.

    ReplyDelete

  8. I'm in the process of trying to redo my blog look, and this is perfect timing! Thanks for sharing! I'm excited to explore your site more and follow. :)

    ReplyDelete

  9. Thanks for all the great blog design info! I actually purchased a blog design on Etsy for a great price, but the design looked awful! So, I got to work doing it myself. Its still a work in progress (I've got to get my social media buttons redone), but I think its turning out ok! I would love to get your input on the overall appearance!

    Jenna @ http://rainonatinroof.com

    ReplyDelete

  10. Great advice. I've been making changes/getting ready to make changes to mine. This helps take some research out of that. Thank you!

    ReplyDelete

  11. Neat post. I may try dong a blog make over:) Stop by http://www.sewsweetvintage.com/2013/02/be-fearless-arianna-huffington.html

    ReplyDelete

  14. Thanks for sharing these tips. Visiting from Firday Favs party. Would love for you to visit my blog. www.thememorynest.blogspot.com Happy Friday!

    ReplyDelete

  15. Thank you for sharing your tips. I am a new blogger and have slowly been implementing things that I find along the way.
    Visiting from Friday Favs Party.

    Sarah
    http://sarahmschultz.blogspot.com

    ReplyDelete

  16. Fun, Emily! I love making my blog over! It's so nice to have a fresh new look!

    ReplyDelete

  17. Thanks for sharing! I've been wanting to do something different with my blog but I'm having a hard time deciding what to do.

    Stopping by from WhipperBerry's Friday Flair Link Party.

    snackcupsandsmiles.blogspot.com

    BTW, I'm co-hosting a blog hop, it's super easy to join and lots of fun... PLUS, it's a great way to get more followers.If you haven't already, come join us if
    you want, we would love to have you link up your blog!! http://bit.ly/aloha42
    With Smiles,
    Angie

    ReplyDelete

  18. Thanks for the tips... updating my blog is on my to-do list.... I *will* get around to it soon!

    ReplyDelete

  19. Thanks for the tips...I am so clueless about such things. I'm going to have to look into the image mapping soon, though!

    ReplyDelete

  21. Awesome tips! And your pjs are adorable. I wish it was warm enough here for my kids to wear summer pjs! Thanks for sharing at Pinworthy Projects.

    ReplyDelete

  22. I'm constantly trying to figure out how to work things on my blog!! I love learning it all. Sometimes I wish I had minored in graphic design in college.

    ReplyDelete

  23. This info is what I've been looking for
    to create a blog button.. thank you
    so much for sharing.
    Let me see if I can do it!
    Have a great weekend.
    Sandy

    ReplyDelete

  24. This is awesome!!! Thank you SOOOO much! from http://kikiscraftkorner.blogspot.com

    ReplyDelete

  25. Thanks for all this information, I pinned this post. From long ago that I want to create a signature, a button for my blog... and many other things, this will help me. I found your blog through One Artsy Mama. I'm glad I found you.
    Marisa from
    http://passionetcouture.blogspot.ca/

    ReplyDelete

Your comments make my day!

Subscribe to: Post Comments (Atom)
Blogging tips