I had such fun working on my DIY Social Media Buttons, that I wanted to try out the Pages buttons as well so that they are custom to my blog. This was just as easy, and I’ll show you how I did it! If you need a refresher on how to do the DIY Social Media Buttons, click here!Again, for this tutorial, we will be using Photoshop Elements 9 which I will refer to as PSE.
Ready, Set, Go!
1. Create a new file in PSE with the pixels being 250 X 150. You will want the background content to be set to Transparent.
2. Choose a shape under Content on the right hand side. I typically search for them by selecting By Type and then Shapes. Choose a shape that works well with your blog layout. For this tutorial, I have chosen to show you how I did mine;). Fun!!
3. I selected “Banner 3″ from the list. Make sure you have the colors you want to use that will match or coordinate well with your blog.
4. Now, click on the text button on the left and decide what font you are going to use. Here is where you will type in the names of the pages that you already are using in your blog. Here are the pages I am using.
 |
| As you can see, right now, they are being shown as “Top tabs” but we are going to move them to “Don’t show” later in this tutorial. |
5. With that list handy, and your font selected, begin typing your Page names one at a time on to the center of your created shape. Be consistent throughout with your font size so that they look similar and flow. My font size was 34.
6. Save this as a .jpg file and move on to the remaining pages.
Here is what they will look like when finished making them in PSE.
7. Upload these pictures to Photobucket.
8. You will use the same format as used on the DIY Social Media Buttons, but this time, you have to link to the other pages on your blog rather than an entirely separate website. What I did with this part is to go to my blog and right click each pages tab and click to “open in a new tab”. This way, I can copy and paste it over quickly and effortlessly.
9. Go to Layout. Add a new gadget to your blog by clicking on “Add a Gadget”. Click on “HTML/Javascript”. I don’t have a title for this because I want to leave it blank so that it doesn’t show on my blog above the pages text.
Use this HTML Code:
<a href=”PAGE ON BLOG”><img src=”PHOTOBUCKET DIRECT LINK” /></a>
changing the text “PAGE ON BLOG” to the URL for the page you have opened in another tab and “PHOTOBUCKET DIRECT LINK” to the direct link for the photo. You may need to play around with your sizes which can be done by adding the words: height=”70″width=”100″ after img in the code above.
10. Once this is typed up, go to your “Pages” section in Blogger and under “Show pages as” change it to “Don’t Show”….don’t worry, you can get it back if you don’t like it after it’s up. It doesn’t remove the original formatting forever.
11. Now drag that gadget that you just made in Step 9, to where the previous Pages gadget was…and you are done! View your blog and click on all the links to be sure they are coming up correctly and that you didn’t mistype something….after looking at HTML for a while, my eyes go crossed!!
Hooray!
Let me know what you think and also please let me know if you have any questions!
Thanks for stopping by!!
I’m linking up here!!
Vote for me!!
Love your blog. I'm one of your newest followers. I am passing on the Liebster Blog award to you. Stop by http://www.applesandpnutbutter.blogspot.com to find out how to pass it on. Thanks!
Hi, I found your blog on Apples and Peanut Butter and just became a follower. Thanks for sharing that info, it all gets confusing sometimes! I'd love to have you stop by my brand new blog and follow me too, if you get a chance. Thanks!
Oh, I completely needed this post! I can do buttons, but have had trouble getting the tabs to work. Thanks for sharing – can't wait to try it!
What Jen said – and thank you sooooo much!
I'm your newest follower! Thank you for this awesome info :)
Carolyn (my simple messterpiece}
thanks so much for this amazing tutorial. I am not very tech savvy so I so enjoy tips and tutorials from others!
I just pinned this so I can find it again! :D
What a great tutorial! I love your blog! Thanks for linking up at SweetTalkin' Sunday!
Great tute and so useful! Thanks for sharing!
Awesome tutorial! Great to know. Thanks for sharing at Cutesy Monday!
Another amazing tutorial! Thanks again :) I'll have to link to this from my blog to share with more readers! You're awesome!
Ok, I finally got to try this out, and one problem: it won't let me "drag and drop" the html gadget I made into the space just below the header where the regular pages gadget is. (Does that make sense?) Am I missing something? How do I add a gadget to the top section instead of the sidebar section? If you can help, I would sure appreciate it! :)
Be sure that you delete the previous Pages bar that would be at the top when you set it up through blogger. It will not delete your pages that you currently have. But you have to delete that part in order to drag the new gadget into that area…I hope this answers it correctly.
Hey Becky! I love this tutorial and your social media button tutorial. Thank you so much for linking up. These tutorials are detailed and easy to understand – which is exactly what I was looking for!
Miki
http://www.whatialwayswas.com/2012/05/share-your-blogger-tips-and-tricks.html
Miki DeMann recently posted..Scare me not!