// 1. C R E A T E:
to create your tabs all you have to do is design them in Photoshop! don't have photoshop? that's okay. there are a lot of free alternatives you can use like gimp or pic monkey that work just fine. decide where you want your tabs to be and design accordingly. once you have your tab design's ready crop them out individually and save: i.e. 'home' 'about' 'sponsor' should all be separate files. upload the format into either .jpeg or .png!
** .png makes the image background transparent
// 2. U P L O A D:
like i've said in previous design tutorials, if you plan on doing customization yourself, you best be getting a photobucket account. last time i checked photobucket is free and easy to use for everyone. it's a place for storage and a place that gives your pictures/files codes and links. so go into your account and upload your tabs!
//3. P A G E S:
in blogger you have the option to create 'pages'. this option is located on the left hand side bar under your 'posts' options. in these pages is where you will create the content for your tabs! pages are like posts in the way you can add pictures/videos and what not but the only difference is it won't show up on your blog as a post or in your archive.
//4. C O N N E C T:
once you have create your pages you can connect your tab designs! to do this just go back into your photobucket, click the setting option in the upper right corner of your relevant design and select the share option. from there you will click on links and then find the HTML code and copy it.
go into your blogger layout and select your HTML widget in the gadget options. in the html widget your will PASTE the html code you got from your blogger. click on the rich text option to see your code transfer from coding to image.
now go into your page that matches your tab design and click the view option. from there COPY the URL at the top (http://www.bloggerexampletab.blogspot.com).
now go back into your HTML widget, click rich text, highlight the image and select the earth/link icon (from above) and insert the URL you just copied.
save and you're done!
// S I D E N O T E:
the HTML/JAVASCRIPT widget allows for more than one coding in it's gadget. so this means you can put all of your tabs in one place! i highly recommend this. it keeps your layout more organized.
if you want to link your tab to a website--skip the 'pages' option. when you copy the photobucket html code into your widget just highlight the image, select the link icon and paste your relative URL.
if you have any questions comment below or email me at
ryleeblakedesign@hotmail.com
