 |
| Portfolio blogger template |
Portfolio blogger template – Show a thumbnail image (small image) for every post using this template and Clean Minimalist design. Want to have a simple but beautiful website? This template has minimal design by giving importance to content.
Portfolio template comes with hierarchical dropdown navigation menu and uses Web fonts like Google Fonts. Improve your website typography by using custom fonts.
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 1200×800 etc.,). But, home page only needs 210×160 resolution image. Now, let’s see the steps to generate this small image,
- Go to http://technowit.org/crop/thumbcropper.php
- Paste your image url in Specify Image url text box and click that Yellow arrow button.
- 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.
- 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.
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 210×210. 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.
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>
- 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>
You are free to use, distribute or adapt Portfolio blogger template for your personal or commercial website. But, you must attribute the work to the author. Should not remove credit links.