Features : Responsive Portfolio Blogger Template

Features Blogger Templates ,Responsive , Grid Layout , SEO , Pagination ,etc

Inspired from the mockup on the new Blogger Features page , Features is a fully responsive template which is best suited for portfolio and showcase blogs. It has a clean design and supports Blogger Template Designer with many extra options , which makes modifying the design easy. It comes with out of the box support for Twitter Cards & Open Graph Meta tags and optimized Title and Headings tags.


For Downloading This Template 
Hear me out a bit , I am going to graduate from college next summer and I am determined to take up template designing as a full time profession. Therefore the price of this template is what you like it to be , you can download it for free or give me an amount that you found it worthy of. For accepting payments I use Gumroad , which is used by many Freelancers to accept Credits cards. You can read its reviews here and here . In case you have issues with Gumroad , then I also accept payments via Fiverr , Paypal and Direct Bank Transfer ( Drop me a mail )  . When you use Gumroad to download it , then the template will be delivered directly to your email address


Features

Responsive 


It has a total of 6 breakpoints ( 3 shown above ) , which helps it adapt to many different screen sizes. CSS transitions have been used to add easing effects when switching from one breakpoint to another.

Blogger Template Designer Custom options

blogger template designer

You can easily customize the background and fonts of Button , Status Message , Email Subscription Widget , Search Widget , Sliding Boxes and Tags from the Template Designer on top of all the options that it already provides.

Sliding Boxes

css sliding boxes

A CSS powered sliding box effect which is present on Homepage as well as the Label and Archive pages. It shows the title , Label and Date when the mouse on moved over the picture

Pagination 

automatic Pagination

Custom Label and Button Design

button Label

Search Engine Optimization


Twitter Card approved and Facebook Open Graph Meta Tags present

- Heading and Title tag as per Search engines standards
- Out-of-box supports for Open Graph Meta Tags , Twitter Cards and Rich Pins which makes sharing your posts on Social Networks easier

Cross Browser Compatibility

cross browser testing

Features works across all modern web browsers. For older versions of Internet Explorer , it shows the option to install Chrome Frame to improve the experience


Instructions for Installation

Before installing the template , make sure you have switched the Mobile Template ( Present in Template Tab > Gears Icon ) to On and selected it to Custom template. If you don't do this , the Blogger Template Designer will not work !

After you have followed the above steps , then go to Template > Backup/Restore > Choose a File , select the XML file from the unzipped archive and then Upload

Advice for using the template optimally 
- No posts should be without a title . If any post is without a title , then the thumbnail of that post will not appear
- For the Twitter Cards and the Grid layout to work correctly , please upload all your images to Blogger itself. Images uploaded on third party hosting may or may not work
- Upload images of the highest quality possible and set the first image size to Original in the Post Editor

Widget Code
The unzipped archive will also contain two widget codes , one for Search and other for Email subscription , you can simply add them to new HTML/JavaScript gadgets.

Label Style
label gadget in Layout tab of Blogger dashboard


To enable the Custom Label style , go to the Layout and click the Edit button of the Label's widget. In it much sure to tick Display as Cloud option

Pagination
To change the number of posts to be shown on homepage , find the term postperpage ( In Edit HTML using CTRL+F ) ,There will be a script something like this

 
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget


configure blog post blogger layout

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Layout , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

Enabling Twitter Cards
Go to Template > Edit HTML and search for "twitter:creator" (without quotes) and replace the value inside the content field with your Twitter username (eg. @Blogger ) . Once you have done that , go to https://dev.twitter.com/docs/cards/validation/validator , select Summary Large Image and then test any post from your blog. Once everything is working , fill up the form for Approval.

Changing Email Subscription username
For the Email Widget , replace the two instances of StylifyYourBlog with your Feedburner username . In case of the below the Post Email subscription option , search for "<form" (without quotes) in Edit HTML and there again you will find two instances of StylifyYourBlog , replace them with your Feedburner Username (for example check screenshot below , assuming your username is Blogger )

Edit HTML


Button
To add a button anywhere in your blog, add the following HTML markup
<span class="button">
<a href="#">The Link</a>
</span>


Hoping that you will like it , do let me know your feedback in the comments



Creative Commons License
Features Blogger Template by Prayag Verma is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at https://www.blogger.com/features.
Permissions beyond the scope of this license may be available at http://www.stylifyyourblog.com/p/contact-me.html


Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox



Related Articles


Post a Comment

A Magazine Style Template Please!!!!!!!!!!!!!!!!!!

Jackery said...

Greate work. Hi everyone. I see a template here. It is so cool. hic..But i have not enough money. Everyone can sell it for me with 15$? Theme For News, :(. Thanks

Awesome work!!!! You are doing such a hard work on blogger template designing. You should not give this theme for free.

Li Na Fen said...

super cool template! thanks for share

Gagan Masoun said...

You have done a really fantastic job. I like this template.

KodeLangit said...

Wow .. Fantastic Job :))
I will try this template for my personal blog

endrytama said...

Great awesome template,
easy understand for installing for newbie like me..

umm, can i add slider for my featured post ??
help is greatly appreciated.. thanks

endrytama said...

can i add slider for this template ?
for my featured post