Today as I was not writing a post, I was doing something else. I did something I am proud of :)
Look at my header, you see those cute little HTML buttons under the "becoming what I always was". I did those! I made them link to the pages and the whole 9 yards.
I feel like I am getting to be such a HTML whiz. Then I talk to my bro, who could build a website from html and then I don't feel so awesome. That was a little negative wasn't it? I thought I would do a little tutorial. You like that? me too.
Step 1: Create your buttons. I made 5: He & Me, Me.myself.miki, button swap, DIY, wedding. I made mine in photoshop anne sized them to be 120px x 45px. Make sure to save it out as a PNG if you want a transparent background.
Step 2: Upload the buttons to picasa or any other photo hosting site. Picasa is my personal favorite, they upload quickly and it's easy to grab the image links. After they are uploaded copy the link of the image. Make sure you open the image in a new tab, and copy that URL.
Step 3: Open blogger go to the layout page, and create a new HTML widget. Copy this code in the widget box:
<center><a href=PAGE-LINK><img src="Image-Link" border="0" style="padding: 0 3px;" /></a><a href=PAGE-LINK><img src="IMAGE-LINK" border="0" style="padding: 0 3px;" /></a></center>
This code has 2 pages in it. You can add more, by placing this line of code
<a href=PAGE-LINK><img src="Image-Link" border="0" style="padding: 0 3px;" /></a>
before the </center>
Does that make sense? As long as you end with </center> you should be totally fine.
Step 4: Last of all delete your pages widget if you have one, and go back to pages in the design part of blogger, and choose don't show from the drop down.
This is also the code I used to make my social media images below. It is really versatile.
I hope that helps for those of you who want to do this.
If you have more question, let me know - I am always up for a challenge!
oh my!! I've been trying to do this all day! hahaha and here its been the whole time! Thank you!!
ReplyDeleteLet me know how it works for you! This is my first code tutorial I've ever done :) You're oh SO welcome!
Deletelove it!!! looks really good.
ReplyDeletexx jes
Thanks Jes! I have been wanting to do this forever, so glad I finally figured out how!
DeleteLook at you go! I add a link to my page and it takes all day! That's one link..lol.
ReplyDeleteI know the feeling. Sometimes this whole blog is so foreign to me!
DeleteYour buttons look really cute! I started blogging over at WordPress with a theme I installed, and sometimes I regret it because I wish I knew how to do it. I wish it were as simple as how it is on Blogger!
ReplyDeleteThanks Miranda! I haven't ever even opened wordpress. It seems like there's a lot more open information available for blogger though. Ick! and you always feel like your too invested to switch your blog over. I know that feeling too!
DeleteThis is so so helpful hun. Thankyou! Now to make the time to go and do some haha.
ReplyDeleteXox Soph
No problem! i am glad you're finding it helpful. HTML always takes longer than you want, and when it doesn't work it's a pain!
DeleteOh thanks!! I figured out how to make a button for my page to put in the sidebar but I want to do cute little ones at the top too so that they could link to different pages. I thought I would be stuck with just boring old tabs. Can't wait to make some cute ones!!!
ReplyDeleteAmy
fashionandbeautyfinds.blogspot.com
I know! I seriously have been trying to figure this out for probably a year, in an easy way that I could understand. This way is super easy! I am sure yours will be darling :)
Deletehey cute girl. thanks for stopping by the bishop's wife. our shop is on etsy. check back at the post and it will link you to it.
ReplyDeleteI just linked back, you have some darling stuff! Thanks for the response :)
DeleteThis comment has been removed by the author.
ReplyDeleteThat was awesome! Worked like a charm. Thank you!!
ReplyDeleteI am so glad it worked for you! It took me a minute to figure it out, so I was happy to share when I did!
Delete