so adventures in blogging begin...

I design and make custom t-shirts, hoodies, jewellery and crafty things and am hoping to soon have some of my stuff up for sale on a couple of handmade marketplaces including Etsy and Folksy. I was hoping to have this done for the New Year but so much to do and so little time!

I thought I'd start off with listing some jewellery and add in my t-shirt designs and other assorted things as I get them finished. From other websites and shop listings I've seen I personally think photography makes or breaks a shop so I was hoping to get some half decent shots done of a couple of items to start me off...not realising it's really not as simple as it sounds!

Spent most of my day messing about with a rough-and-ready lightbox set up (based on this tutorial) but I really don't have the lighting required (or maybe just the skill!) so ended up spending most of the time adjusting my images in photoshop.

I think I'm going to buy a couple of desk lights and experiment with some backgrounds. And maybe with a bit of practice I get clear shots without having to spend time editing out the shadows of my hand, camera, head etc etc!

Anyway....some initial shots.

Creative facebook profile pictures

You might have noticed that facebook overlaps your profile picture slightly with the light blue banner on your profile page, you can use this to get a bit creative with your picture like those below:

photo from allfacebook.com

To do this you're essentially just playing around with the space that facebook allocates for your profile picture. You need to have some basic knowledge of image editing and access to appropriate software (something along the lines of photoshop, illustrator, corel draw etc). This should work for both personal profiles and pages/groups.

Facebook allows your profile picture to maximum of 200 x 600 pixels, any picture larger than this will be scaled to 200 pixels in width. Firstly this means you can have a picture that's longer than the classic square photo as anything up to 200 pixels wide by 600 long will be displayed without any scaling.

The second thing you can use to your advantage is the fact that facebook usually places your picture 52 pixels above the gray dividing line in the light blue area of the page (shown below with my old, unmodified picture)

my old page profile picture

You can see this placement actually looks a bit awkward, but with a few tweaks you can make a much nicer effect like those at the top, I'll outline the steps you need to do this.

• Firstly you have to set up a blan document in your image editing program at 200x600 pixels (or whatever length you want your picture to be) and create a "blank" facebook background, like that shown at the bottom of this post, using the same colours as on the standard profile page. 

• The gray line appears 52 pixels from the top of the picture, the gray facebook uses is  #D8DFEZ in hex (or in rgb it's 216/223/234) and the line has a stroke of approximately 1 pixel. Above that the light blue box is #EDEFF4 (237/239/244 in rgb). For anyone struggling with this I've included a link to a jpeg I made with a ready-made blank background, just add your own picture to it. To download the jpeg just click on the blank background image at the bottom of this post.

• Once you have this set up you can paste your image on top, the key here for the effects shown at the top is to have an over lapbetween your image and the base background. To achive this you can mask out part of your picture (like in the peeking out picture below) or simply use a vector image with a transparent background (like I have in my new profile picture). There are several different ways to mask out a background in an image, you can find a quick tutorial on how to do it using the quick mask tool in photoshop here.

photo from walyou.com

• Now all you have to do is upload your new picture on to your profile (if you hover to the top right of your existing picture on facebook a link to 2change picture" should appear, select "upload" and away you go). 

• One thing to check after you've uploaded your new picture is that the thumbnail appears as you want it. Again if you hover to the top right of your picture you can select "change picture" then "edit thumbnail". drag the thumbnail box around till you're happy with the picture and save.

I wanted my picture to closer reflect my business card and branding in my online shops so you can see my new one below:

my new profile picture

I said above that the grey line normally appears 52 pixels below the top of the picture, the only thing now that will messes with this placement is if you put up a status update that is longer than one line. This will nudge your picture down as the light blue bar expands to accomodate your update. the way around this is to update your status as normal and then click on the "clear" link which appears next to your profile/page name on the blue bar. This just clears the status from here but it will still appear on your wall and in your friends/fans news feeds.

Hope this helps you alter your profile picture - any questions and example of pictures you create using this tutorial are welcome!

Click here or on the picture below to download the "blank" profile picture background

"blank" profile picture background

Hiding the sidebar on the static pages

Following on from step four - Make a ‘contact me’ static page

I realised when I was testing my pages I’d prefer the static pages to have the look of a normal webpage without the sidebar widgets. There are two ways to do this that I found. First to edit your template to decide not to display the sidebar on all static pages and secondly to tell each static page not to display the sidebar. I tried the first way and it didn’t work for me at all. I’m not sure if different templates work differently because I’m no html expert but I found adding the code to each page was the only way I could suppress the sidebar. So again go to your dashboard and edit your page. The pages you’ve created will come up, you need to do this for every page. Select a page to edit and in the content box, before your text or form html or whatever you’ve included in there paste this code:

<style type="text/css">
#sidebar-wrapper {display: none;}
#main-wrapper {width: 650px;}
</style>

The width variable will be specific to your template and look you want, experiment with this till you’re happy. Now do this for each page copying and pasting your code before the rest of the content. View and check it’s worked and your width settings.
If you have any problems with this and want to try the other way (editing the template) then go here. This is the tutorial I used, it’s in French so I used google translate to get the jist of it!

Hopefully now you have navigation links and have an understanding how to create the static pages that you want. Leave me a comment to let me know how you get on!

Make a ‘Contact Me’ page

Following on from step three - Making ‘about me’ static page

Before you start making your contact me page you need to create an html form. I found the easiest way to do this was to use a free online form generator. I used emailmeform but there are plenty to be found if you search online. All this site requires is a free registration then it takes you through the steps of making your own form, you can choose what you want the fields to be and how it’s delivered to you etc. Now you’ll get to a point where it asks you for your ‘Thank You’ page url. At this point I went back to my blog and created this page in exactly the same way as the about me instructions describe, but this time called it Thank You and didn’t add it to the linkbar. You can see mine here.

Once you’ve created your page remember to view it and copy the url just like before. This time paste it into the relevant box in the form generator site. This page is essentially hidden on your blog, no-one sees it till they’ve filled out the email form. If you want to see how I’ve done mine feel free to send me an email through the contact me form!

Ok so complete all the steps on the form generator site and you’ll get to the point where it gives you the html code for your form. Copy this, go back to your blog and, just like you did for your about me page, create a new page pasting this code into the page content box. Give your page an appropriate title and add to your link bar the same way as before. You can test it by sending yourself a practice email.

You can add other static pages in this way, blogger limits you to 10 pages in all though.

Go to step five - Hiding the sidebar on the static pages

Make an ‘About me’ page

Following on from previous step - Linking to home and my shop

To make your first static page go back to your dashboard and click on ‘new post’. Now if you’ve selected Blogger in Draft as your default dashboard you’ll now see ‘edit pages’ beside the usual ‘edit post’. Click on edit pages and select New Page. You can now give your page a title (I called mine about me) which will appear as a heading on the page, and type out anything you want to appear on the page. Once you’re happy with it click on ‘Publish’ and blogger will now ask you to select how you want your page to appear. This is where you want to select ‘no gadget’ so that blogger doesn’t add it’s own linkbar in, you’ve already set up all you need in the previous steps. Click ‘Save and Publish’ and when the confirmation page appears click on ‘View Page’. Blogger will now take you to your new page and what you want to do is copy and paste the url that appears in your browser.

Now go back to your dashboard, back to layout and click on your linkbar widget again. Add this new static page just like you did your home and shop pages, pasting the url into the new site url box. You can view your blog and check that your new link works and lets you switch between your About Me and Home pages.

Go to step four - Make a ‘contact me’ static page

Link to homepage and shop

Following on from the Previous step - Set up a navigation bar

Ok so you’ve clicked edit on your linkbar widget – a window should pop up now allowing you to add the first of your links. The first one I added was ‘home’. Simply type home in the ‘new site name’ box and paste your blog url into the ‘new site url’ box. Click on ‘Add Link’ and you’ll see Home appear at the bottom of this pop up window. Now enter ‘shop’ in the new site name box (or whatever you want to call your online shop link) and this time type or paste your online shop url into the new site url box. Again, add link, and it will appear above home at the bottom of the window. You can reorder the link using the wee up and down arrows beside them - the item at the top of the list will appear furthest left. Now you can click on save and go to ‘view blog’ and see if your new links appear on your blog! Remember we haven’t yet added any static pages so clicking ‘Home’ will just reload your blog. Clicking on your shop link should, hoever, open up your online shop if you’ve linked correctly. Now to add some pages.

Go to step three - Make an ‘About me’ page

Set up a navigation bar

The navigation bar I made entirely from a tutorial by Haptree. You can use blogger’s new static pages widget to create a link bar but apparently it is bug ridden and also doesn’t let you link to external links (which is what we’ll be doing in the next step for your shop) so we’ll bypass their built in system and add our own widget.

The tutorial I used to do this to do this was written by Haptree and can be found here (opens in a new window). It also explains in detail how to play around with the colours for your links and also how to create a link page for related posts (for example all your tutorial posts, or posts that mention your products.

Two small sections of code need added to your template to give you a linkbar so follow the instructions in the link and then go to your dashboard and click on the ‘layout’, ‘page elements’ tab. You should see your new Linkbar widget under your header. Click on ‘edit’ and that takes us to the next step...

Go to step two - Link to my blog home page and my shop with navigation tabs