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

.gumroad-button {
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;
display: inline-block;
}

Next Saturday Blogger Template

Next Saturday Template image

Next Saturday is colorful and modern template which has been adapted from a Tumblr theme of the same name by Ian Mintz. Its comes with inbuilt support for Facebook Open Graph & Twitter Cards. It uses CSS3 for all the shadowing effects which leads to lesser resource requests and faster load times.

Download Demo

Features


– Fixed Design
– Search Engine Optimized
– Lightning fast Page Load Time (98% in Google Page Speed)
– Simple Threaded Comment Design
– Supports All Major browsers
– Read More Hack
– Oxygen Web Font
– Captivating Post Date design
– Two Column Design
– Widget Ready Sidebar with Stacked effect
– Simple Menu Design
– CSS3 Shadows in Post Area
– Support for Open Graph and Twitter Cards
– Trendy Email Subscription Box




Installing the template

– Download the Template
– Now Go to Blogger Dashboard > Template > Backup/Restore and click Choose File
– Select the XML file which you have downloaded
– Then Press Upload and the template is installed

Configuring the various features

– Firstly After Installing the Template Go to Settings and Language and formatting. Now change the Timestamp Format to the following date format type “Saturday, October 05, 2013” and Save Settings.

If you face any problems then let us know in the comments

Happy Blogging

Download Demo

New Blogger Template Showroom

showroom Blogger Template

Showroom is inspired from Tumblr template of the same name by Mixpanel. It has a eye-catching design and comes inbuilt with Related Posts widget , Infinite Post Scrolling and 7 Post types using Labels. It integrates with the Blogger Template Designer seamlessly and also adds custom fields which make editing Tags , Menu and Search Box easier. Search Engine Optimization has been done to Page and Post Titles as well as a Google PageSpeed score of 97% makes it ultra fast.

Screenshot

showroom template screenshot

Feature List

Infinite Post Scrolling
7 Post Types using Labels
Lazy Loading Share Buttons
SEO Optimized Post and Page Titles
97% Google PageSpeed Score
Related Post Widget
Blogger Template Designer support
Customized Label Design
Eye-catching Sidebar design
Using Web Fonts Noto Serif and YesterYear
Supports Google+ Comments 
Fallback Comment Design 
Cross Browser Compatible
Fresh Layout
And Much More…

Features in Detail

Infinite Post Scrolling



infinite post loading image


Using jQuery and AJAX , an unending number of Posts can be loaded without leaving the page. This is by default functional on the HomePage , Label Pages , Archive Pages as well as Search Pages.

Blogger Template Designer



custom blogger template designer


Custom options to easily change the background color and text color of Search Box , Menu links and Tags.

SEO Optimized and Ultra fast Load Times



google pagespeed score


The Post and Page Titles have been modified to make the template search engine friendly. Even though it supports Blogger Template Designer fully ( which loads with itself a lot of CSS and JavaScript) , it has got a 97% Google PageSpeed Score and loads blazingly fast.

7 Post Types



music label icon example


Using a bit of clever CSS and some Blogger Data tags , each post can be assigned a special post type with the help of Blogger Labels. The supported Blogger Labels are Image , Link , Blog , Chat , Video , Music and Quote . Each of these categories will have a separate Label Icon assigned to it .

Lazy Loading Share Buttons and Related Post Widget


Related Post and Lazy load share buttons

Tweet , Like and +1 buttons are present under each Post , as well a Related Post widget which relies on the Blogger Labels to recommend blog posts that are likely to interest the readers.

Google+ Comments support and Fallback Design


comment design

The template supports the newly released Google+ Comments for Blogger and In case you don’t want to shift now , there is a Attractive Fallback Comment design as well . If you use Google+ Comments for your Blog , then the comment count will by itself update to show the numbers of comments received by Google+ Comments as well.

I am thankful to MixPanel for allowing me to port this theme to Blogger. Soon I will be writing a tutorial to implement MixPanel Event based Analytics into Blogger , stay tuned for it.

New Blogger Template : FlatUI

.gumroad-button{font-family: 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 white !important;background: url(https://gumroad.com/assets/favicon.png) 5px 49% no-repeat white !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, .02), 0 1px 2px rgba(0, 0, 0, .1) !important;text-decoration: none !important;display: inline-block !important;}.gumroad-button:hover {text-decoration: none !important;color: #777 !important;border-color: #bbb !important;box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .1), 0 0 4px rgba(0, 0, 0, .1) !important;}

FlatUI Blogger Template

Inspired from the the recently released Flat UI Kit from DesignModo FlatUI Blogger Template is a fully responsive and feature-rich template. One of its main advantages over other Blogger templates is the ease with which you can customize the various components via the Blogger Template Designer. Many custom options have been added to the Template Designer to make it simpler to modify from a single location.

Features

Responsive

Responsive Blogger Template Desktop
Responsive Blogger Template TabletResponsive Blogger Template Mobile

Blogger Template Designer

Template Designer blogger

You can easily change the Color and Fonts of Buttons , Tags , etc from the Template Designer itself

Load Time

Google Page Speed Insights

With a Google Page Speed Score of 95% and a Page Size in 200KB range, FlatUI Blogger Template is optimized for fast browsing and makes the less than 20 HTTP Requests

Infinite Post Scrolling

Infinite Post Loading

Using jQuery and AJAX , an unending number of Posts can be loaded without leaving the page. This is by default functional on the HomePage as well as the Label Pages.

Read More Hack

Read More Default Style

The Read More hack is by default enabled and gives a more pro look to the blog.

Tags

Tag

The label/tags style is inbuilt , just make sure that the Cloud option is selected in the Blogger Label Widget Options.

Share Privacy Buttons

share privacy buttons

Scripts from respective social networks are loaded only when when you toggle it to load

These were some of the features , install it into your blog and explore all the other features . If you face any problems then feel free to ask in the comments.

Stylify Minimal Responsive Blogger Template

This is a fully responsive and highly optimized template for every kind of Blogger user. It is centered around the concept of Minimalism hence all the unnecessary stuff like Blogger’s Default CSS as well as JavaScript have been shunned. It has lightening fast load times and completely complies with Search Engines heading and title standards. This template requires that you have a little bit of knowledge about HTML/CSS so as to do some customization , rest assured that I will be there to help you out in the comments if you face any unsolvable problem.


Download Demo
Features


– Responsive
– Search Engine Optimized
– Lightening fast Page Load Time (98% in Google Page Speed)
– Exclusive Threaded Comment Design
– CSS3 powered Tilted Header
– Supports All Major browsers
– Uses CSS Sprites for less HTML Requests
– Auto Read More Hack
– Pagination option
– Automatic Related Posts under each Post
– CSS3 powered ReadMore Button and Labels
– Electrolize Web Font
– Attractive Share Buttons and Subscribe options
– Author Bio Box
– Ribbon styled Labels on Post Pages
– Print Friendly
– Captivating Post Title design
– Near W3C Valid
– Four Column Footer
– Widget Ready Sidebar with Stacked effect
– Simple Menu and Social Media Buttons
– Automatic Meta Descriptions
– Stacked Paper feel to Post Body
– Appealing Custom 404 Design
– Simple Search Box

Installing the template

– UnZip the Download Pacakge
– Now Go to Blogger Dashboard > Template > Backup/Restore and click Choose File
– Select the XML file from the Unzipped directory
– Then Press Upload and the template is installed

Configuring the various features

– Firstly After Installing the Template Go to Layout and Edit the Blog Posts Widget. Now untick these options and save.

 

In the Download package copy all the content of the Widgets.txt file.
  Now create a New HTML/JavaScript widget and place it under the Header widget (Don’t forget to press the Save Arrangements button) See image below

In this widget , paste the contents of Widgets.txt file and Save. Now the Search Box , Menu and Social Media Buttons are installed. You will have to manually change the URLs in the Menu as well the Social Media Buttons. The most important URL to change is the action URL of Search box . Make it something like http://www.yourblogURL.blogspot.com/search

To configure the CSS3 Labels , go to Layout and Edit the Label widget , there Tick Cloud as Display Option and Uncheck the Show number of posts per label

Now go to the Template > Edit HTML option , Click Proceed and then Tick Expand Widget Templates
Here Search for “Short” . Now remove this whole line and write a small bio about yourself that will be visible under each post. Replace the URL of the Image as well if you like

Now search for “Stay Connected With Us” , now here change all your Social media URLs accordingly

Now Search for “home_page” , this will show all the settings related to the Pagination option (Check here for explanation  )

– Now Search for “Your Tag Line” and replace it with your blog’s mission or description

Now Search for “thumbnail_mode” , this will display all the settings related to the Auto Read More Hack

Happy Blogging !

One piece of warning , Other than the Popular Post and Label Widget all the widgets like Blog Archive ,etc don’t work . This is because the Deafult JS and CSS files of Blogger have been removed. On the Brighter side Your blog will open like a express train (given that you don’t overcrowd it with widgets)

Screenshot


Download Demo

If you liked the template consider donating to us 🙂

New Blogger Template : Stylify v2

stylify template screenshot small

A new Blogger template named Stylify v2 . It is quite similar to the current design of the blog. The aim was to minimize the use of JavaScript and instead use CSS to meet the needs. It has a simple design and is ultra optimized for Fast Loading (Given that you don’t add 1000 extra widget ! ). The default Blogger Style-sheet has been removed to fasten it up even more. The SEO part is also taken care for with automatic Meta Description facility. Its a uncomplicated template with emphasis on Speed and Style.

See Demo

Download

Full Screenshot

stylify v2 template screenshot large

Features


  • Cross browser compatibility 
  • Responsive Design
  • Page Navigation
  • Lazy Loading Share Buttons
  • Its own Related Post widget
  • Stylish commenting system 
  • Attractive Post Title
  • Four column footer
  • Eye-catching Sidebar Design
  • Search Engine Optimized
  • 97% Google Page Speed Score
  • In-built Author Bio Box
  • CSS3 powered Buttons 
  • Breadcrumbs 
  • A fancy Label Widget 
  • Built-in simple Menu
  • Automatic Meta Description for each post 
  • Use of fonts like Salsa and Electrolize




Configurable Features:


This template has a lot of customization possibility. Now I will be explaining how to configure some basic features of this template according to your requirements

1. Menu

configure page list


The menu used is the default Blogger menu. When you will Install the template on your blog , you will see a stray text “Pages” written near the Menu. To remove it , Go to Layouts and Click the Edit button of the Pages Widget . Now in the title field remove everything and Save the Widget.

Extra Note: When you will install the template you will also see a Date above the post title and also the default Blogger sharing buttons . To remove them go to Layouts and edit the Blog Post widget. Untick the Date and Sharing button option and save.

2. Pagination


To change the number of posts to be shown on using pagination find the term postperpage ( 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 Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

3. Border of Image

with without border


There is a additional feature present to add borders around your image  , To add it just add a class=”thumb” in the img tag , as shown below 

<img class="thumb" src="image.png" />

4. Using the CSS3 Button


css3 button


To make a link into a button , just add the class=”buttons button” to it , as shown 

<a href="URL" class="buttons button" >A Link<a/>

5. The Author Bio Box


author box code




Under each post a author box is present with your name and some demo text . To change that text go to Edit HTML and tick the Expand Widget Preview box . After that search for Author Bio Box and change the text as per your wish. You can also replace the placeholder image with your own

6. Label Style


configure label blogger layouts




To enable the Label style as see in the demo , go to the Layout and Click the Edit button of the Categories widget. In it much sure to tick Display as Cloud 

See Demo

Download


Whats your opinion about the template ? In case you face any problem or like to suggest any improvement feel free to do so via comments

New Blogger Template : Videofication

This is my 4th template. I tried to make it a bit different. The idea was to make a YouTube type thing in Blogger. It has simple layout and some other functionality like Rater widget, Threaded Comment,etc. Here I wanted to mention that the base template and JavaScript was originally made by BloggerzBible ,I just did some modifications to the JavaScript and looks.

Videofication Blogger Template image

Demo

Download


Complete List of Features

-Fixed Design
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Stylish commenting system
-Attractive Post Title 
-CSS3 powered Header design
-Three column footer
-Threaded Reply feature for Blogger Comment system
-80%+ Google Page Speed score 
Integrated Search Box
CSS3 shadows around post area and footer
Attractive web fonts like Jim Nightshade and Chelsea Market
-RocketBar jQuery Menu
-Inbuilt 5 star rating widget for each post


How to configure the features:

1.Menu
The menu widget is included separately in the Download Package. Just copy the contents of the widget into the HTML / JavaScript widget present below the Header. As you will observe , there will be two distinct menus present in the widget. The upper one is the one that will appear when you open the page the other one will appear while you scroll the page. Make the changes accordingly to them.

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( 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

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



3. Adding Videos
To add videos to a post. Just enclose the Youtube URL within

For example: 

Make sure this is included in the top of the post. After that you can write your post the usual way. In the homepage you will see a automatically generated thumbnail of the video along a small extract from the post.

This is a YouTube template, so no other video sharing website URL will work.

4. Recent Post Widget
It is included separately in the Download package and you can just copy-paste it into a HTML/JavaScript widget .It will work smoothly. To do any changes in it, here are the following available option:

var numposts = 3; 
var showpostthumbnails = true; 
var displaymore = true; 
var displayseparator = true; 
var showcommentnum = true; 
var showpostdate = true; 
var showpostsummary = true; 

I believe you will like the template and feel free to ask about any difficulties you face while using the template.

Demo

Download

New Blogger Template : Directus

Hi everybody , this is a new Blogger template. The name might be a little unheard , but it means Simple in Latin. I have used a lot of CSS3 essentially shadows and border-radius property. The header design is quite similar to the Dynamic Views template and it is Responsive like the previous template (No horizontal scroll-bar till 580px). It has threaded comments but now with Circular avatar picture. The colors used are overall of lighter shade and give a kind of soothing effect.

Demo

Download

Complete List of Features

-Responsive design (No horizontal scrollbar till 580px)
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Its own Related Post widget
-Stylish commenting system with Circular Avatars
-Attractive Post Title with hover and active states
-jQuery and CSS3 powered Header design
-Three column footer
-Threaded Reply feature for Blogger Comment system
-Eye-catching Sidebar Design
-Search Engine Optimized
-Near W3C Valid
-95%+ Google Page Speed score 
Integrated Menu and Search Box
CSS3 shadows around post area
Inbuilt FB and Twitter Icon
Attractive web fonts like Trade Winds and Playball
Appealing “Read More” button with hover and active states
-Modified input and select fields
-Responsive Images

How to configure the features:

1.Menu
The menu is just below the Header and automatically displays all the pages of the blog. Firstly when you install it on your blog, go to  Layout (or Page Elements) and remove the title of that widget. The title should remain blank for it to display the pages correctly. In case you are using the New interface then you can easily add custom links to this menu by going to Pages in the Dashboard and then choosing Web Address in the New Page option.

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( 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

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

3.Enabling Reply option for the comments
The the reply option in the comment will have to enabled . Just search for the term blogid= ( using CTRL+F ) with “Expand Widget Preview” option ticked. You will see something like this “blogID=XXXXXXXXXXXX” replace this XXXXXXXXXXX number with your Blog’s ID. [To find your Blog’s ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

4. Deleting Navbar and Attribution widget
If you are using Simple templates or any other default Blogger template, Then it might happen that the NavBar and Attirbution widget would be visible in the sidebar just after installing the template. To remove these widgets you will have to Edit HTML of the Blog and search for something like “Navbar” & “Attribution”. These too things you will find inbetween b:widget tags . Remove everything including these tags which will look something like this

<b:widget id=’Navbar’ >
………………
………………
</b:widget>

Note: Interestingly this can only be done in the Old Blogger Interface. In case you try it in new Blogger interface ,it will always crash.

5. Header
The header text can be changed easily using the Header widget present in the Page Elements (or Layouts ). If you want to add a background image ,then search for the following term .header{ and you will see something like this

.header{background-image:-moz-linear-gradient(center top, rgba(255, 255, 255, 0.1), rgba(100, 100, 100, 0.05));background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.05)));background-attachment:scroll;background-color:rgba(243, 243, 243, 1);-moz-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);height:90px !important;position:absolute;top:0px !important;left:0px !important;width:100% !important;z-index:1001;display:block;-webkit-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);-moz-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);}

Remove all the background- attributes from the above code and replace it with a single attribute containing the URL of the background ,something like this:

.header{background: url(IMAGE-URL);-moz-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);height:90px !important;position:absolute;top:0px !important;left:0px !important;width:100% !important;z-index:1001;display:block;-webkit-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);-moz-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);}

6. Some other features


>>To add border across images add a class=”thumb” in the img tag

>>To make images with rounded edges , add a class=”image” in the a tag surrounding the img tag.

>>The images are scaled down in smaller screens ,never exceeding the white post area

>> If you want to add buttons like the Read More one ,you can achieve it b adding a class=”button” in a a tag something like this:

<a href=”URL” class=”button” >Button</a>

These also have option to add a small symbol just before them ,like for example a arrow

<a href=”URL” class=”next button” >Button</a>

For complete list of options check this URL

This template could not have been possible without Codrops (Header Text) ,RDT (Buttons) and CSS-Tricks (a lot of things)

I hope you like the template and don’t hesitate to the ask about any problems you face while using the template.

Demo

Download

New Blogger Template : Standardized


Warning: preg_replace(): Compilation failed: nothing to repeat at offset 106 in /home/btemps5/public_html/stylifyyourblog.com/wp-content/plugins/jetpack/class.photon.php on line 332

Standardized Blogger Template ImageIts been nearly 3 months since the Stylify template. Now I am presenting my second template named Standardized. It has its roots in responsive design and has some awesome features like threaded Reply comment & eye-catching Header design. A mix of design and usability.

See Demo

Download


Initially I started making this template with the goal to make it W3C valid. Thats where the name Standardized came from, the one that follows standards. Near the end of process I hit a really nasty cross-browser issue (a.k.a. IE sucks) , and by just 1 error this template remained from obtaining that “VALID” markup title. This is just version 1 and better onces are to come. The highlight of this template is the Nested Reply comment feature inside the Blogger comment system itself! A really amazing hack…


Features
-Responsive design (No horizontal scrollbar till 580px)
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Its own Related Post widget
-Stylish commenting system with comments having gradient background style
-Attractive Post Title
-jQuery and CSS3 powered Header design
-Four column footer
-Threaded Reply feature for Blogger Comment system
-Eye-catching Sidebar Design
-Search Engine Optimized
-Near W3C Valid
-90%+ Google Page Speed score

How to configure some of the Features:

1.Menu
The code for the menu widget has been separately included in the Download Package. Rather than integrating it into the Template and making it difficult to edit ,I have included it separately. All the styles are included beforehand just the Links have to be copied in. The menu should be in the section of the Header (being just below the Header).

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( 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

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

3.Enabling Reply option for the comments
The the reply option in the comment will have to enabled . Just search for the term blogid= ( using CTRL+F ) with “Expand Widget Preview” option ticked. Below it you will see “blogID=XXXXXXXXXXXX” replace this XXXXXXXXXXX number with your Blog’s ID. [To find your Blog’s ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

4.Social Media Buttons and Search Box
The Download package also contains code for these two widgets. Either you can put them in separate widgets or put them together. In case you put them together then make sure the search box is above the icons and also include it in the section just below the Header (In Page Elements/Layouts). The widget containing the Social Media Icon should always be in this section.

This template came in the wake of many users complaining about different problems in the previous template.

Liked My Work ?