Wednesday, February 13, 2013

How to Make an Art Portfolio on Blogger

How to make an art portfolio on Blogger
Screenshot of my portfolio using BoyBurnsBlog template

Do you want to create an art portfolio on Blogger? The free Blogger template, BoyBurnsBlog --developed by designer David Kutchner and his firm, Confluent Forms-- is a good choice.

[Update 2/15: My portfolio is no longer a Blogger template, but the template is still a great option. I switched to Weebly (www.enjoyingplanetearth.com) because I couldn't figure out how to have people be able to navigate from image to image in a slideshow format through the BoyBurns template.]

For the past year, I've been a big fan of David's website Blogger Xpertise, which provides tutorials and information on how to get the most out of a Blogger blog. It took me awhile, though, to try out his free Blogger templates.

My portfolio, Art & Illustration by Sylvia Liu, used to use the BoyBurnsBlog template. It is a clean, minimalist template that tiles each blog post. This layout is great for blogs with short and image-heavy posts. It also works for an art or illustration portfolio. Because the backend Blogger interface remains the same, I was able to change the font and background colors and add my social media icons. With an HTML tweak, my portfolio displays three columns instead of two.

Another Option

Another way to make a quick and easy portfolio site is to use Blogger's dynamic Snapshot template. To see how your blog would look in the dynamic views, add "/view" to the end of your domain name and click on the various options (Snapshot is one). My portfolio in Snapshot looks like this:

Sylvia Liu art & illustration portfolio in Blogger dynamic view "Snapshot"
Screenshot of my portfolio in Blogger's dynamic "Snapshot" template

Have you found any other good portfolio templates for Blogger?




If you enjoyed this post, you may also like:

45 comments:

  1. Your blogger portfolio looks great! Thanks for the heads up about the template!

    ReplyDelete
  2. how do you change the social media icons from appearing on every post?!

    ReplyDelete
    Replies
    1. Hi. If you want to keep the social media icons just in the column under the buttons, go to Layout, and click "Add a Gadget" in the left column. Choose an HTML gadget and insert your social icon code there). It's going to always show up in the left column but shouldn't be in each post. Does that make sense?

      Delete
    2. Yes, it does, thank you! But they are showing up on every post and I don't know how to get rid of them! There are about 5 of them, I don't want any at all!

      Delete
  3. It is also an art to present your work in right manner like you did, probably one needd bunch of best artist portfolio websites.!

    ReplyDelete
  4. Very nice. Thanks for recommending this site; I've been looking for a place to have an online portfolio.

    ReplyDelete
  5. Thanks! I'll use it for my site http://www.ebook-addict.com/

    ReplyDelete
  6. Hello! I've used the template you suggested - amazing - but now it has switched to a single column without me doing anything to it? Do you know why this is? Has it happened to you?

    ReplyDelete
    Replies
    1. Yes, this happened to me recently and I contacted David Kutchner who designed the template. He patched it up so you'll need to re-download the Boyburnsblog template. After doing this, it should work. This was his message:

      It looks like the reference to the Masonry script was changed. I've added the script (starting at line 25-35).

      Delete
    2. Thanks! How do you re-download it? won't that mean everything has to be re-done? Should I take it 'off air' (don't know the techy term!) then start over?

      Delete
    3. Hi again (sorry, diff account, I was HB)! Ok, so I saved my current template (exported), downloaded the boyburnsblog template again, re-uploaded it and there was still only one column?! It also changed my fonts and added search bars and subscribe gadgets. I re-uploaded my previous one and those extra gadgets are still there. I got rid of them but I don't understand why this doesn't seem to be working? Am I doing something wrong?

      Delete
    4. Sorry it took awhile to get back to you. Did you try uploading the template from this link: https://www.dropbox.com/s/ncemiwfcvdn8a0c/BoyBurnsBlog.xml It should work, though it does have the search bars and stuff that you need to remove manually.

      Delete
  7. This isn't quite as easy as I thought it would be... I'm trying to set up a portfolio ( timrocksportfolio.blogspot.com ) but it shows posts with a white square instead of the image.

    I want it to be a big image gallery, not a bunch of empty squares...

    I can't figure out how yours works so easily.

    Thanks for the idea, I'll keep trying...

    ReplyDelete
    Replies
    1. Did you include the image in each post? I'm sorry it hasn't worked for you.

      Delete
  8. Hi. I like your portfolio with BoyBurnsBlog template. Can you tell me how could you write posts without title and without read more or something in the footer (like picture). Thanks

    ReplyDelete
    Replies
    1. To write posts without a title, just leave the title form blank. I don't remember how I removed the footer. I think if you google "how to remove a footer from blogger" you'll probably get some code that can help.

      Delete
  9. Hello. Could you tell me how you made more than 2 columns? I want to put four. Thanks

    ReplyDelete
    Replies
    1. Find in the template html code these lines and change the number 2 to 4 to have 4 columns instead of 2

      var areawidth = $('#Blog1').width();
      var newwidth = ((areawidth/2)-30).toFixed(0);
      $('.post-outer').css('width',newwidth);
      var theColumn = parseFloat(((areawidth/2)-1).toFixed(0));

      Delete
    2. Thanks so much! BTW did you ever figure out how to get rid of the footer info. My site is almost how I need it cept for that part too hahah!

      Delete
  10. Sylvia -

    Your web page looks great! I'm using the BoyBurnsBlog template as well, and I can't figure out how to get rid of the "Pages" text that sits above the pages. I like the way yours looks...nice and simple. If you get a chance, can you tell me how to do that? Thanks!

    ReplyDelete
    Replies
    1. Hi Thomas, I love it when I can answer a question easily. Go to your Layout page, click the Pages widget and open it. Then delete the word "Pages" from the title box.

      Delete
    2. You have to be kidding...not sure why I thought that I needed to go into the HTML, etc. Well, that was easy thank you so much! And by the way, your artwork looks awesome...not sure why, but I like the pig and the owl reading...have a great day!

      Tom

      Delete
  11. This is great! I notice that the posts on your page are small, but mine are really big. Do you know how to change the image sizes? I tried doing it within the blog post but it didn't work.

    ReplyDelete
  12. Thanks for sharing your findings, i've been looking for a template like this literally for years! Currently in the process of adding my work from the past 20 years to it!
    www.lawrencejamesbailey.com

    ReplyDelete
    Replies
    1. I just checked your site out -- it's looking good.

      Delete
    2. Thanks! Just two things i'm trying to tweek at the moment...

      1. How to stop the text in the title and links from being automatically capitalized
      2. Remove the white space under each image...

      Delete
    3. 3. How to have more posts on one page, or failing that how to change the colour of the 'Older Posts' link so that it is more noticable...

      Delete
    4. So I haven't figured out 1 and 2 yet. Adding more posts is very simple. Go to your Layout panel, click on the "Edit" button for the main box "Blog Posts" and it will open with a window with lots of options. One of the options is number of posts on the main page. If you want 20 pieces of work showing, change the number to 20 (I think the default is 7). Also on that page, you can turn off the date, comments, etc. since those aren't relevant for a portfolio page. PS If you go to the Blogger Xpertise post on this template, there's a long list of questions in the comments - you can scroll through them & see if any of your questions have been answered. I don't think the developer answers those questions anymore.

      Delete
    5. On the developers page they already answered the question of how to make the text un-uppercase (just delete the words "uppercase" from any of the code). I already had increased the maximum number of posts on the layout page to 300, but it made no effect unfortunately. But now i realise that too many images would make the page even slower to load, so instead i'm focusing on how to make the "Older Posts' "Home", and "Newer Posts" links more visable. The demo has them highlighted in dark grey, mine though are white and can hardly be seen. There is nothing in the template designer or layout page to change this... or not which i have found yet...

      Delete
  13. Ah! I found it! "Tabs border colour" controls the colour of the highlight around the Older Post links. So it seems i can only have them highlighted if i also have the horizontal and verticle line seperators also visible... Hmmmm... there must be a way around this like deleting the code which make these lines visible...

    ReplyDelete
    Replies
    1. Good luck…messing around the code can be a hair-pulling experience. Going back to your earlier comment, how many posts do you want to show on the front page? Maybe just setting that amount (much lower than 300) could help somehow?

      Delete
  14. Yeah, my first idea was to have everything on one page, so i tried putting different numbers on the settings page, but it always seemed to still break the amounts of posts in the same place. But like i said i'm also worried that having everything on one page would increase page loading time, so i will keep everything on shorter pages, but i will just have to make the "Older Posts" links more visible to the viewer. Thanks for your help on this by the way!

    ReplyDelete
  15. I was wondering if you could help me change the background colour of the blog, please? I'd rather not have the boring ugly gray background it comes with, and I can't seem to find out how to change it. Whereabouts is it in the code?

    ReplyDelete
    Replies
    1. Nevermind, I'm a bonehead. I figured it out.

      Delete
  16. I appreciate all of the posts you've made on creating an art portfolio! They've helped me out a lot (as my soon-to-be former web host has announced they are raising prices).

    You can see my site here, which I will soon be adding a domain to:
    http://7christian.blogspot.com/

    Thanks a lot!

    ReplyDelete
  17. Hi, thank you very much for this info. I'm using the template but I am having issues with the size of the images that I upload to my posts. Even though I am making them "small" before publishing, they still end up too big. Is there an easy way to resize that I am missing? or is it complicated?

    I notice from your screen shot above that your images are all uniform and not too big. What is your secret?

    Thank you!

    ReplyDelete
    Replies
    1. I think if you add more columns than the default (2) the images will be smaller. Someone gave the advice above to change the columns:

      Find in the template html code these lines and change the number 2 to 4 to have 4 columns instead of 2 (or you can have 3 by changing it to 3)

      var areawidth = $('#Blog1').width();
      var newwidth = ((areawidth/2)-30).toFixed(0);
      $('.post-outer').css('width',newwidth);
      var theColumn = parseFloat(((areawidth/2)-1).toFixed(0));

      Delete
    2. Found it, thank you so much!

      Delete
  18. You mentioned an HTML tweak so there are three columns - I really would like to do this but unsure of how?

    ReplyDelete
    Replies
    1. See my comment above (dated July 17, 2015). Good luck

      Delete

Join the discussion...