VIPfolio Portfolio Blogger Template

Looking for a professional blogger template that will help you to showcase your portfolios with ease? Here It is a responsive portfolio blogger template from weblogtemplates. It will help you to easily showcase your web design, design or even websites with minimum effort.

Features of Portfolio Blogger template

  • Full width design: Home page and archive pages coming with a nice option to showcase designs. Create a post in blogger with the main picture that need to showcase as first picture of your article. For fast loading of home page we recommend you to use jump break after first image.
  • Responsive design: Vipfolio portfolio template always give better user experience in most of devices with its responsive design powered by twitter bootstrap.
  • Numbered pagination: VIPfolio is having numbered pagination in label search pages, home page and paged pages. We tried our level best to suit it to our template design.
  • Custom social media sharing buttons
  • Social media icons
  • Better comment area to match blog design
  • Related post widget

Replace Portfolio Header Image and Text

<h1><img class='img-circle' height='200' src='https://2.bp.blogspot.com/-IsGejwEJTdU/UxoIIZRko5I/AAAAAAAACJ8/xeafqLRGwN8/s1600/lowo_1x.png' width='200'/></h1>
<p>Hello, I'm Admin of weblogtemplates and this is our new blogger template, Vip.  <br/>
    It is extremely easy to configure and use. Designed to show your Web design or web development portfolios.
  <br/>
    No complex stuff. Your logo, your articles & your social links. Easy stuff!
</p>

Replace image url and text with your description.

Code for bottom social media sharing icons

     <section id='networks'>
        <div class='container'>
          <p>
            <a href='http://www.pinterest.com/weblogtemplates/' target='blank'>
              <i class='dribbble fa fa-pinterest'>
              </i>
            </a>
            <a href='https://www.facebook.com/weblogtemplates' target='blank'>
              <i class='facebook fa fa-facebook'>
              </i>
            </a>
            <a href='https://twitter.com/weblogtemplates' target='blank'>
              <i class='twitter fa fa-twitter'>
              </i>
            </a>
            <a href='#' target='blank'>
              <i class='mail fa fa-envelope'>
              </i>
            </a>
          </p>
        </div>
      </section>

Replace links with your own social media links.

About VIPfolio Responsive portfolio template

It is a responsive blogger created from a famous free HTML template ‘Small’. Download Small – Dribbble Portfolio Theme. Best suited for showcasing web design or design portfolios.
Hope you all liked this template, if you have any questions don’t forget to leave a comment here. 
 
  1. hanzel
    hanzel says:

    hey ! I've download the xml file and uploaded… there's and error saying that "We were unable to save your template.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:
    (SyntaxError) : Unexpected token <" can you help me ?

  2. Alina Lefa
    Alina Lefa says:

    Thanx for the template! Only one problem. It works on desktops but fails on iPhone, android phones , etc. and changes to a classic blogger template without front page.

    • Weblogtemplates
      Weblogtemplates says:

      I think you enabled default mobile template in blogger. So it won't show current blogger template in mobile devices.

      • Anonymous
        Anonymous says:

        Thank you for your reply and for this awesome theme.. but there is has a problem on mobile mode.. all photos come out with original size not like at desktop mode with fit size.. thank you once again.. please fix it on mobile mode… thanks

  3. Rui Almeida
    Rui Almeida says:

    Hi,

    How can i add/remove a social link ?
    I want add a G+ image and link on footer.

    Appreciate the help,

    Thanks,

    Rui Almeida

      • AM
        AM says:

        Hi Rui,

        I needed an instagram icon, so i found this site where you get the code for all sorts of icons. Perhaps i might help you as well.

        Astrid

  4. Audrey Hess
    Audrey Hess says:

    Hello, thank you for sharing this really lovely theme!
    I would like to understand why/how do you have these responsive images, showing the title and proposing to "view details", leading to an article where we can have more informations!?
    I'm lost here as my first try did something completly different (a non-responsive image which doesn't lead to the post it is in).
    Do we have to do/code something more than adding a new post? Do we have to select an extension mark?
    Or, shorter: "how are we organising the images on the main page and their link to a post? How do you make them like "activated" when the mouse goes over them?"
    Thank you a lot for your time!

    • Weblogtemplates
      Weblogtemplates says:

      This blogger template simply works like this. Create a post with an image before jump break and publish it. Template will automatically use the first image in article to create a thumbnail.

  5. Audrey Hess
    Audrey Hess says:

    Oh great, I should have tried with a larger image, as it was the only issue to make it works ;) Thank you! =)

  6. Shahrin Izhar
    Shahrin Izhar says:

    Hi, I'm trying to figure out how to change the line-height for the posts but I can't really find it in the HTML. I'd appreciate your help!

  7. Imelda
    Imelda says:

    Hi there! Thank you for the template!

    But I'm still having trouble changing the green background color. As you've said in the earlier post;

    "#hero {
    background: #1abc9c;
    text-align: center;
    color: #fff;
    }
    change background here…"

    I tried to find those post in the html, but I can't find them. I found the one that only has the #fff code, and I try to change the color but turns out it's not the green background that I was going to change. The fff was actually the one inside the post.

    The format code was also different from what you gave, mine was:

    "style>

    #main{border:1px solid #ddd;padding-top: 5px;background: #fff;}

    .hide-home-sidebar{display:none;}
    "

    So I really can't find the code #1abc9c you mentioned. If you could help me with this I would be very much thankful as I am also trying to learn how to code. Thanks again! :)

    • Admin
      Admin says:

      You need to edit template and need to change background color
      background: #1abc9c;
      Where #1abc9c is color code used to generate that particular color. Hope you understand

  8. Patrick Ramos
    Patrick Ramos says:

    Is there a way that even i upload a portrait size picture, in the homepage that picture would become automatically square?

      • Howie ARCH
        Howie ARCH says:

        hi may i noe where is the latest version? or how should i change the code so tat my homepage thumbnail will be cropped to fit the box even the picture is portrait?

  9. Brian Champ
    Brian Champ says:

    Great template.But how do you make the hover appear over the images like the ones on the preview page?

    • Admin
      Admin says:

      Solved that issue. Thanks for notifying about that problem. Need to use image above 400×300 px to make sure better preview. Thanks for using our templates.

  10. Audrey Hess
    Audrey Hess says:

    Hello again! I really satisfied with this tamplate you have shared with us.
    But I'm still wondering how (where) could I change the post width, which is actually around 614px. I would be glad to make it larger. I think it may be hidden in the 20th line but I'm lost.
    Thank you for your time!

    • Admin
      Admin says:

      We are making use of bootstrap 3 responsive design. so post width is actually 66.66 of total content width. You can always refer bootstrap css for customization.

      • Audrey Hess
        Audrey Hess says:

        Thank you. I've trouble to find an actual answer, but I'll keep persevering ;)

  11. William Ahlert
    William Ahlert says:

    How do i change the bottom icons' color(facebook,twiite)? Thx for the help ;´p

    • Admin
      Admin says:

      That need some work… in your template search for this and change color #networks i {
      font-size: 60px;
      color: #fff;
      padding: 18px;
      }

  12. Raheem Kareem
    Raheem Kareem says:

    how do you change the color for the background with the social media icons? It isnt working.. Do I add to HTML or change code?

  13. Creative.Inc
    Creative.Inc says:

    Hello dear admin, your blogger template is both cute and awesome. I Love it ><
    can you tell me how to link the envelope image with my gmail account? i really confused about this one, can you explain to me with the example, because i'm lack of knowledge about css and html thing hehehe but i keep trying to know it ^^

  14. Anonymous
    Anonymous says:

    Hey, thanks for the template! However, I'm having an issue wherein the homepage only shows two of my recent posts. But, when I click page "2" on the pagination bar, it skips the 6 recent posts that I have (which is supposed to show over page "1" to complete the 2×4 block)
    Thanks!

  15. Jon Tan
    Jon Tan says:

    On the landing page where you hover over the images and it shows "View Details", I can't seem to find out where to customise it (ie the hover color, text, etc). Thanks!

    • Jon Tan
      Jon Tan says:

      Ok actually I've found out where to customise the hover colors and text and stuff. However, I still can't figure how to change "View Details" to another text. Just can't seem to find it :