How to Make your Blogger Look Like a Portfolio Site! :D

Here's a little thingie I wrote up for some classmates about whacking blogger into an acceptable portfolio site.  This is my random art blog here, so it's not following any of these rules xD, but for an example of one, here is my ACTUAL portfolio! >>> jessicadinh.blogspot.com

1. Remove all Blogger-y interface:

Remove posts information: Design > Layout > Blog Posts (Edit) > Uncheck ALL Post Page Options.

2. Put ALL of your artwork on the home page in the form of a SINGLE POST.  This is important because when someone clicks on your first image, you want them to be able to scroll through the rest of your images, and that won’t happen if your work is located in several posts.  I renamed my home page to Gallery.  Design > Pages > Edit the title of the Home page.

Alternatively, if you have larger projects which each require breakdowns, you might consider placing thumbnails on your home page post instead.  Then, while editing your home page post, link each image to a new page that you create for each project.

To create Pages: New Post > name of blog on top left > Pages > New Page.  You can hide the page tabs for these projects (so that they are only accessible when you click on the thumbnail) if you go into Design > Layout > Edit Pages > uncheck all Pages you want hidden.

To make sure your images are working with Lightbox, go to Design > Settings > Posts and comments > Check YES for showcase images with Lightbox.

3. Put your name at the top, and your title right beneath or to the side. You must have a title, because people want to know what you do.  Don’t just put artist!

To get this header, go to Design > Layout > Header.

4. Remove the weird gray-line hatching in the background of your interface.  You don't want the background to distract from your art:

Go to Design > Template > And under where it says “Live on Blog”, hit Customize.  (I’m using the Awesome Inc. Template, so maybe the other templates will look different).  Go to Background and hit Remove Image.

Here you can also adjust the width of your blog under Adjust widths.  This will be important if you decide to increase the size of your images.  Under Advanced, change all your font colors to be as simple and readable as possible.

5. Increase the size of your images.  Go to New Post > Click your blog title at the far top left > Edit your post.  You want all of your images to have the same exact width so it doesn’t drive people’s eyes crazy when they’re looking at your stuff. 

The default x-large size for blogger posts is 640 px.  That is really too small; personally I think 800 px is the perfect size.  Any bigger and it will cause people to scroll side to side, which is not good. 

Do NOT check Original Size for the image because: if you upload your image at 800 px, it will show up nice in the thumbnail, yes, but when you enlarge it in Lightbox, it will not get any bigger . . . which is the point of Lightbox, to show your images a little bigger.  And if you upload your image at a size of say, 1600 px, then the thumbnail will be too big.

SO:

The best way to showcase a larger thumbnail without using original size is to edit the HTML.  At the top left, click the HTML tab instead of the Compose tab.  I’m stupid with HTML so the following tips are for HTML noobs like me:

One image’s HTML should look something like this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvnXrFfiDAlPqa9B_Qy72fGG-LJVITwi04PuZbnQ9UrWLlMlfaJjkGGPLOUTjbUtgdfoDyV8lpTW9Y3IDEoSNdGSEqTwOF-Iij4sOOHM1erv9Xr36vG2IsT7eLTIw4qOcnvIuH1dsdtM/s1600/tuscan_buildingsketch.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" height="289" id="BLOGGER_PHOTO_ID_5695606930557968386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvnXrFfiDAlPqa9B_Qy72fGG-LJVITwi04PuZbnQ9UrWLlMlfaJjkGGPLOUTjbUtgdfoDyV8lpTW9Y3IDEoSNdGSEqTwOF-Iij4sOOHM1erv9Xr36vG2IsT7eLTIw4qOcnvIuH1dsdtM/s640/tuscan_buildingsketch.jpg" style="display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;" width="640" /></a></div>

Look for those highlighted areas to find your images, or you can hack by going back to the Compose tab, throw in a few spaces around your image, and it will be easier to find in HTML.  Now, you must locate the HEIGHT, WIDTH, and THE NUMBER WITH AN S IN FRONT OF IT.  Actually, there are 2 of those numbers with s in front of it.  LOOK FOR THE SECOND ONE. 

That ‘s value’ determines the resolution of your image.  If you just alter the width and height, it will scale up your image but make it blurry, so you must change the s value.  Example:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvnXrFfiDAlPqa9B_Qy72fGG-LJVITwi04PuZbnQ9UrWLlMlfaJjkGGPLOUTjbUtgdfoDyV8lpTW9Y3IDEoSNdGSEqTwOF-Iij4sOOHM1erv9Xr36vG2IsT7eLTIw4qOcnvIuH1dsdtM/s1600/tuscan_buildingsketch.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" height="289" id="BLOGGER_PHOTO_ID_5695606930557968386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvnXrFfiDAlPqa9B_Qy72fGG-LJVITwi04PuZbnQ9UrWLlMlfaJjkGGPLOUTjbUtgdfoDyV8lpTW9Y3IDEoSNdGSEqTwOF-Iij4sOOHM1erv9Xr36vG2IsT7eLTIw4qOcnvIuH1dsdtM/s640/tuscan_buildingsketch.jpg" style="display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;" width="640" /></a></div>

Change the width and s value to 800.  Now for some math :P  You want to get a correct corresponding height, so if you divide 800 by 640 you will get 1.25.  Multiply this by 289 and you will get 362.5:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvnXrFfiDAlPqa9B_Qy72fGG-LJVITwi04PuZbnQ9UrWLlMlfaJjkGGPLOUTjbUtgdfoDyV8lpTW9Y3IDEoSNdGSEqTwOF-Iij4sOOHM1erv9Xr36vG2IsT7eLTIw4qOcnvIuH1dsdtM/s1600/tuscan_buildingsketch.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" height="362.5" id="BLOGGER_PHOTO_ID_5695606930557968386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvnXrFfiDAlPqa9B_Qy72fGG-LJVITwi04PuZbnQ9UrWLlMlfaJjkGGPLOUTjbUtgdfoDyV8lpTW9Y3IDEoSNdGSEqTwOF-Iij4sOOHM1erv9Xr36vG2IsT7eLTIw4qOcnvIuH1dsdtM/s800/tuscan_buildingsketch.jpg" style="display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center;" width="800" /></a></div>

Do this for all your images and you’re good to go :)

6. Make sure your email is on the home page, and every other page you create, clearly seen.  This is in addition to putting your name and website on each and every one of your images in case people download your work and want to find you later.

7. Make a new page for your Resume.  You don’t need a separate Contact Info. Page because your contact info will be on your resume.  In addition to having a download link for a pdf. of your resume, post your resume in the form of text on that page.  So they can see it immediately, and dl too if they like!  Keep it short.

8. If you want to add a link to your random art blog, go to Pages > New Page > Web address, and input the link of your blog there.  Save!

And that’s it! 

Jessica

13 comments:

  1. Thanks Jessica :D! and also congrats on graduatinggg

    ReplyDelete
  2. Thanks Jessica !

    ReplyDelete
  3. This was really helpful but how do you make a single thumbnail for the post D:?

    ReplyDelete
  4. The portfolio websites of designers are often excellent sources of inspiration and helps them to make an online portfolio that showcases their work beautifully and professionally.

    ReplyDelete
  5. Great Post! I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again. Thanks a million and please keep up the effective work Thank yo so much for sharing this kind of info- Creative Portfolio Website Development

    ReplyDelete
  6. The web designer's portfolio website plays a pivotal role in the decision taken by the prospective website owners. If the prospective website owner does not find your website up to the mark there are hardly any chances of he/she becoming you client and availing your web designing services. See more architect portfolio website

    ReplyDelete
  7. It may seem a little grandiose to talk about "the art of tattooing," but when you are truly familiar with what goes into being a professional tattooist, you recognize that there is good reason these men and women are called tattoo artists. It takes both natural talent and the drive to perfect skills in order to develop into a true tattoo artist.
    portfolio Management tampa

    ReplyDelete
  8. Investing in real estate can be overwhelming if one is not aware of how the system behind this business works. This can be a lifetime source of income. But it takes the right kind of management to ensure success and avoid failure in this intricate venture.portfolio Management tampa

    ReplyDelete
  9. Financial markets today offer enormous growth potential. But managing your own investments can be an extremely challenging & full-time affair that requires considerable time and expertise. So when it comes to investing your hard earned money, you need to partner with someone you trust, one who will make your money work hard.Portfolio management advisor

    ReplyDelete
  10. In today's volatile and intricate market investment requires constant attention and monitoring. The demand made on energy and time by other businesses may not leave the people with the capacity to attend to their personal portfolio with degree of care they deem appropriate.Portfolio management advisor

    ReplyDelete
  11. Your blog is very informative. Eating mindfully has been very hard for people these days. It's all because of their busy schedules, work or lack of focus on themselves. As a student I must admit that I have not been eating mindfully but because of this I will start now. It could help me enjoy my food and time alone. Eating mindfully may help me be aware of healthy food and appreciating food.
    ออกแบบและตกแต่งภายใน

    ReplyDelete
  12. Hey, It really is incredibly fantastic and informative website. Good to discover your site Very well article! I’m simply in love with it.
    ทำรายงาน

    ReplyDelete
  13. Really inspirational to hear someone pursuing their dreams and becoming successful instead of following the traditional path. I have read your article about This topic. I think it's good and impressed to know your service. Thanks for share this Information.
    Mobile Application

    ReplyDelete