Portfolio

Love this
22
  • Layout
  • 2 Column with Right Sidebar
  • Colors
  • Portfolio template color schemes:
About this template
  • Date Released:   Oct, 2011
  • Designer:   Bloggerzbible
  • Price:   FREE
License
  • Creative Commons Attribution: You are free to use for personal/commercial use. But, you must attribute the work to the author. Should not remove credit links.
Statistics
  • Downloads:   5941
  • Demo views:   8200
  • 22 people love this template
Shortlist this Blogger template
Lovely Template Editor's Choice award winning template
Design Features
  • Minimalist design
  • Want to have a simple but beautiful website? This template has minimal design by giving importance to content
  • Post Thumbnails
  • Show a thumbnail image (small image) for every post using this template
  • Custom web fonts
  • Portfolio template uses Web fonts like Google Fonts. Improve your website typography by using custom fonts
Customization Features
  • Widget Ready
  • Portfolio template comes with many widgetized area. Add your widgets easily using this template
  • Footer Widgets
  • Portfolio template comes with footer widgets. Use your footer area effectively for engaging your users
More Features
  • RSS Buttons
  • Portfolio template comes with RSS Buttons. Let your user follow you using your RSS feed
  • Search box
  • Portfolio template has search box in it. Search box helps your user to find the content easily on your site
  • No HTML changes
  • This template works out of the box without any HTML changes. Use this template if you are not comfortable in editing HTML

NOTE : Our documentation is for New Blogger dashboard. If you are still using old Blogger dashbord then it's time to upgrade to new version.

Thumbnail Cropper for Home page

This template supports Thumbcropper tool (http://technowit.org/crop/thumbcropper.php) for thumbnail generation.

Your image may be very big (like 1200x800 etc.,). But, home page only needs 210x160 resolution image. Now, let's see the steps to generate this small image,

1. Go to http://technowit.org/crop/thumbcropper.php

2. Paste your image url in Specify Image url text box and click that Yellow arrow button.

3. Now, your image will be displayed with a Get the code button. You can crop this image now. Just drag the image and choose the best thumbnail for your home page.

4. Then, copy the <img> code and use this in your Post. Don't worry, full image will still be displayed in post page. Generated thumbnail will only be used in the home page.

I don't want to use Thumbcropper tool

If you don't want to use Thumbcropper tool then follow the steps below. Otherwise, only top left corner of your image will be displayed.

Go to Template -- Customize. Then, click Advanced and paste the following code in the text box which says (Add custom CSS)

#post-thumbnail {
width: 210px;
}

This will resize all your images to 210x210. If your original image aspect ratio is also 1:1 then your images will look good on home page. Otherwise, it may look little bad.

Adding the Navigation Menu

  • To add the navigation menu, go to your Blogger account>>Layout>>Click Edit on "Paste the navigation code" Widget.  Paste the following code in the content box.  Be sure to update the links and link text in the following code with your site links
 <!-- BEGIN #primary-nav -->
<div id="primary-nav">
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li><a href="/">Home</a></li>
<li><a href="http://whitemagicdemo.blogspot.com/p/archives.html">Archives</a></li>
<li><a href="#">Dropdown</a>
<ul class="sub-menu">
<li><a href="#">Topography</a>
</li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Techniques</a></li>
<li><a href="#">Brushes</a></li>
</ul>
</li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/contact.html">Contact</a></li>
<li><a href="/p/license.html">Licensing</a></li>
</ul>
</div><!-- END #primary-nav -->
</div>

Add Flickr Widget

  • Create a HTML/Javascript widget in the footer and use the following code.
  • To find the FLICKR-ID login to Flickr account and Click YOU option in the navigation. You will be directed to a URL like :-http://www.flickr.com/photos/8710d861@N07/. The code 87108d61@N07 is your UserID
 <div class='flickr_wrap'><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=18&display=latest&size=s&layout=x&source=user&user=FLICKR-ID"></script></div>

Layout for Portfolio Blogger Template