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
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
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.
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
Custom Label and Button Design
Search Engine Optimization
– 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
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
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
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
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
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 )
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
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
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
line-height: 17px !important;
font-weight: 500 !important;
text-align: left !important;
color: #8E8E8E !important;
text-shadow: 0 1px 2px #FFF !important;
background: url(https://gumroad.com/assets/favicon.png) 5px 49% no-repeat #FFF !important;
border-radius: 3px !important;
border: 1px solid #C8C8C8 !important;
padding: 4px 6px 4px 26px !important;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
text-decoration: none !important;