Stylify Your Blog

New Blogger Themes

2017-04-28T06:26:00.000-07:00

Blogger launched new themes on March 20th, 2017, after more than 7 years since the last update. This update isn't only limited to the new designs introduced in the themes but the entire underlying theme code has been rewritten. Lots of new operators have been introduced and more functionalities have been added to the Layout and Theme Designer (Customise) tab. A whole new set of data layout and page element tags have also been introduced allowing users to further customize their blogs. It is being touted as the third major re-write to the theme engine since Blogger was created back in 1999

The New Themes

The first thing that you will notice is the 4 new themes (each with 5 color scheme variations). Each one comes with a modern look and caters to specific taste - Contempo (fashion), Soho (photography), Emporio (galleries) and Notable (personal). All of them have a clean and elegant design and are by default responsive in nature.

The biggest difference that you will immediately notice upon accessing the Theme tab, is that these new themes don't have any separate Mobile version (the Customise Mobile theme Gear icon is missing from the dashboard). They only use a singular code base for both mobile and desktop versions (the ?m=1 query parameter for accessing the mobile version of the blog has been deprecated). All in all, a much need improvement to the default themes.

Layout tab

The Layout tab has always allowed the users to easily edit the positioning of various widgets on the blog without needing to meddle with code. Taking a step further in this direction, Blogger has introduced visibility control for each widget, allowing the users to easily hide/show widgets.

Currently, the visibility control affects the widget's visibility on the whole blog, but in the future, it is likely that Blogger will introduce more fine-tuned controls for hiding the widgets on specific types of pages.

Blogger Theme Designer

Introduced in the last update to the theme engine, it brought along the ability to easily change the design (in terms of fonts, color schemes, background, etc) via a simple interface without needing any knowledge of HTML or CSS. With the new update, even more, features have been introduced to achieve this goal. The length type variables have been added, allowing theme developers to provide more options to users. Also, a Gadget tab has been introduced, allowing controlling the visibility of the widgets on the blog.

Comment Form

The embedded comment form has also been completely re-designed. It looks much more elegant than the previous comment form and should be easier to use on Apple devices (a very big pain point for the previous comment form which had known problems with not being able to accept Name/URL comments).

Theme Code

This has seen the most overhaul in this theme release. As there is no official documentation released, as of now, it is not possible to know all the things that have been changed. But if you go through the code of the new themes, you will surely notice lots of new stuff -

Operators -

1. snippet operator

<b:eval expr='snippet(data:post.body, {length: 450, linebreaks: true})' />

Allows generation of snippets from HTML string. This will bring an end to all the JavaScript read more solutions out there

2. format operator

<b:eval expr='data:post.date format "MMM dd" ' />

Allows formatting dates according to ICU format strings

3. path/params/appendParams/fragment operators

Operators that can be used to modify URLs

4. take/skip operators

Operators for doing operations of array data type

Layout tags -

1. data:messages

Various messages used on the blog, displayed in the user's locale

2. data:view

Abstracting the different page types to more generic term. Will lead to less code clutter

3. data:skin

Variables of the skin rendered for the current view

4. Many new additions to the currently existing namespaces like data:blog & data:post

Markup tags -

1. <b:css>

Used for disabling default CSS on a blog

2. <b:class>

Used for assigning classes to an element

3. <b:template-script>

Used for loading JavaScript files specific to a theme

4. <b:comment>

Used for adding comment in the theme code which doesn't get rendered in the real version of the blog

Most of the information regarding the new theme code has been taken from the blog - template-data.blogspot.com. Currently, it is the only semi-official source (written by a Blogger engineering team member) for information regarding these tags, until an official documentation update is released.

All in all, there have been lots of new feature additions under the hood to make the platform as a whole much more customizable. I hope that the Blogger team will continue to make more improvements to the platform and once again make Blogger the platform of choice for majority of the users out there.

Removing Blogger's Default CSS from the Theme code [New way]

2017-04-25T06:26:00.001-07:00

Many times an instance arises when you don't want to load in any of the default CSS styles included by Blogger. Sometimes it has to do with resolving the Render blocking issues caused by synchronous loading of the default CSS or other times it has to do with creating a custom theme which is fully independent of Blogger's default styling. Previously to achieve this, you required a fairly good understanding of the Blogger theme XML but now it is much simpler to accomplish this

Earlier to remove the default CSS, you had to implement the following code in the theme -

&lt;style &gt; &lt;!--
<b:skin><![CDATA[
      
]]></b:skin>

Followed by moving all the CSS present in-between the b:skin tag into a separate style tag. This had the following drawbacks -

It made the Customise (Blogger Theme Designer) option completely un-usable
The quick edit buttons for widgets & blog posts became visible to all the readers
All the variables used internally by Blogger Theme Designer had to be converted back to actual CSS
Required a good understanding of Blogger theme code
Was not easily reversible without taking a prior backup of the theme
The Layout tab showed all the widgets in a single stack with no
As is a hackish solution, the default CSS was still present on the page but was not loaded because it was commented out

Blogger team has understood this and has now provided a new way to remove the default CSS. To remove the default CSS, now you will only need to add the b:css attribute in the HTML tag of the theme -

<html 
b:css='false' 
>

This works with both the older version (v2) of the themes as well as the newly launched themes (a complete re-write, internally termed v3) last month.

This makes it much simpler to remove the default CSS & comes with the following benefits -

Blogger Theme Designer remains usable & you can still make changes via it
The default CSS is completely removed from the page
Can be easily reversed by removing the b:css attribute
The CSS doesn't need to be changed or shifted anywhere
The quick edit buttons for the widgets & blog post are only visible to Blog admins (This is possible because the Blogger team has changed the location of the CSS responsible for showing/hiding quick edit buttons)

This makes it easier to remove the default CSS even for users with a limited understanding of Blogger theme code & presents all the developers to create more themes which have a totally custom design without having a dependency on the default CSS.

Hope that the Blogger team also creates a tag for removing all the default JavaScript present near the end of the body tag (Something like a b:js attribute)

Update: There is now a b:js attribute for removing the default JavaScript

10 Tools I use to help people in solving problems related to Blogger

2013-11-22T13:59:00.000-08:00

For the past month I have been active on various forums , social media channels as well on this blog trying to help people with problems they face with their Blogs based on Blogger Platform. This is a list of tools I used repeatedly to successfully help many people. I hope this would be helpful to those getting started with helping users in solving problems related to Blogger platform or in general also.

1. Dig Web Interface
Its really simple tool for checking DNS records of any website. This comes in handy when people are having problems with setting up custom domain on Blogger. With it you can check all the DNS Records ( A , CNAME ,etc) of both the www version (like http://www.stylifyyourblog.com/ ) or the non-www version (like http://stylifyyourblog.com/)

Pro Tip : Select the Authoritative option under Nameservers to get accurate records

Alternatives : DNSGoodies and DNS Lookup are also good tools and may come handy to cross check records.

2. What's My DNS
Its helps in checking if the DNS records related to a domain are propagating properly across the whole world. This tools comes in handy when users have setup their records but are complaining about the domain not working. Also its best used in combination with DigWebInterface to get the whole picture of the DNS status of a domain.

Pro Tip : The Expected value feature available via the Gear icon , makes it easy to check the real value with a value of your choice

Alternatives : DNS Propagation Checker and Check DNS Propagation provide the same functionalities

3. Skitch

A tool from Evernote , its one of the best in class for creating screenshots. Its various inbuilt arrows and markers make drawing attention to specific elements in the screenshot easy. Also with a high-fidelity and aesthetically pleasing nature of overlaying graphics , it make the screenshots really profession. Its come handy when answering queries related to changing Settings in Blogger or some short step by step tutorial on a single screen.

Pro Tip : Shortcut for saving images locally rather than in the Evernote Library CTRL+SHIFT+S

Alternatives : Jing and MonoSnap have similar capabilities. A paid alternative is Clarify

4. LICEcap
The best tool for creating GIFs by capturing a certain area of the screen. Its really handy when creating short screencasts sans the need of any dedicated screencast recording software. Oldschool but its easy of use is unmatchable. A practical solution when making short tutorials for questions that require some complex/ambiguous steps.

Pro Tip : When you start recording , there is a 3 second pre-roll before actual recording starts. Make sure to keep this in mind so that some portion of your recording might not go missing

Alternatives : GifCam also has same functionality

5. Screenr
Sometimes queries are best answered by a short video screencasts . For this purpose Screenr is most effective with the ability to record particular sections of the screen and select which audio channel has to be used (like Mic , No Audio ,etc)

Pro Tip : Don't forget to push your screencast to Youtube which has better editing tools and a much larger community.

Alternatives : Jing also supports uploading videos to Screencast.com.For videos with complex needs , softwares like CamStudio and Camtasia are recommended

6. Pastie
When answering questions on sites like Twitter , the 140 characters are not enough to give a fully-detailed answers. For these situations I use Pastie to write short tutorials . As it supports formatting for many languages , it becomes easy to share code as well.

Pro Tip : As Pastie is Anonymous , make sure to leave a signature after the tutorial so that people can easily find you

Alternatives : PasteBin and dpaste are famous sites which provides similar facility

7. HTTP Status
It gives HTTP response codes for the URL entered. Its useful when answering queries related to redirections and problems with images gone missing. Also sometimes its helpful in finding issues related to Feed redirection.

Pro Tip : The Request Header options allows you to change the User agent of the request which is useful when checking behavior on mobile device

Alternatives : Web Sniffer gives many more details as well as giving HTTP response codes.

8. Dev Tools

Each web browser comes with their own developer tools , Looking past the minor differences they all allow to inspect the DOM of the page. This comes really handy when solving issues related to CSS and JavaScript. If you are totally new to it , then I suggest checking this free course by CodeSchool for getting started

Pro Tip : Learning keyboard shortcuts will improve workflow many folds

Alternatives : There are no practical alternatives to this , but you can surely add Extensions that extend the ability of the Dev Tools like SnappySnippet ( copy HTML and CSS related to a element in DOM )

9. GTMetrix
For starters it gives information about the Page Size , Page Load time and Number of Web Request. It uses Google PageSpeed & Yahoo YSlow to recommend easy to follow instructions for improving various factors that slowdown a site. This is useful when users ask for recommendations in regards for improving page loading time

Pro Tip : You can easily generate PDF reports with all details about recommendations for later reference by selecting the Full Report option in the Download PDF link

Alternatives : Google PageSpeed Ingsights and WebPageTest. If you want to get a glimpse of how your website performs in different regions across the globe, then use Dotcom Monitor

10. Wayback Machine
Best for accessing older version of a web page . Is a life-saver where users have by mistake deleted some custom element of the blog and want it back

Alternatives : Cached version of Pages accessible via Google , but the only downfall being it only save version of the most recent page which dates back maximum 3-4 days or on the crawl rate of a site

Feel free to share any other tool that you think should be added to this list in the comments

Blogger Titans Interview #2 : Chuck Croll

2013-11-16T23:23:00.000-08:00

Second in the series of Blogger Titans Interviews , this time we have with us Chuck Croll , better known as Nitecruzr on the Blogger Forum. He has been an active contributor on the official forums from the year 2006 and has by far the most comprehensive knowledge about Blogger Platform. His blog , The Real Blogger Status , is an extensive resource for Blogger related tips and tricks as well as documents all the news and issues regarding Blogger. Now lets get started with the interview

Stylify Your Blog : Hi Chuck Croll , Can you introduce yourself to our readers ?

Chuck Croll : I'm a Networking / Security Consultant, who started using Blogger because publishing my notes, online, was what everybody else was doing. And because some of my advice was provided in online forums - and my Blogger blog was a good place to park my more complex forum references.

See #4 for the complete chronology of my life as a Blogger Blog*Star.

SYB: In these years that you have been using Blogger , why do you still love to use it ?

CC: Blogger gives the world (of many cultures and languages) an opportunity to communicate - with an amazing selection of accessories and self developed options.

You are the largest contributor in the Blogger Forum with posts in over 41500+ thread and averaging around 50 posts a day . How do you manage this much dedication to Blogger while balancing it with your day-to-day life ?

Multitasking - and virtual living - is the key. And, sleeping odd hours (a side effect of virtual living).

You have been a Blogger Top Contributor for over 7 years and have seen many updates in the Blogger Platform , Can you possibly take us chronological through the major updates that, you found ,took Blogger to new heights ?

As a MicroSoft MVP, I started my first blog, PChuck's Network, in 2005. The first post in my blog, "The NT Browser", was my collection of advices that I provided to computer owners, to explain why they couldn't see all of their computers from each other, through their home networks. Note here that the term "browser" is significantly different than what is used, today.

In 2006, PChuck's Network was down for over a week, with my first experience with "403 Forbidden" (a condition about which I have since learned a lot) - and the Blogger Help forum was full of reports from other angry blog owners, reporting the same. With no answers from Blogger, including in their highly publicised blog "Blogger Status", I started "The RealBlogger Status". After Blogger brought PChuck's Network back a week later, I kept "The Real Blogger Status" going - and started giving advice in the forum.

My first few blog posts, in "The Real Blogger Status", targeted the spammers in Blogger Help - which then contributed 75% of total forum content.

On Thanksgiving Day, 2006, I got my first email from Blogger, thanking me for my contributions - and my life as a Blogger Blog*Star started.

In January 2007, Blogger started issuing bX codes to identify problems - MHO, a true genius concept. A month later, they introduced the Custom Domains feature, which gave the ability to publish blogs to non Blogspot URLs - a second true genius concept. Later in February 2007, "The Real Blogger Status" was recognised as a significant complement to "Blogger Status", as part of the bX-sp4hmm error diagnosis and resolution process.

Also in 2007, Blogger changed their template structure from plain old HTML, to dynamic XML, and introduced the Layouts class of templates. They gave us the "Page Elements" wizard (now the dashboard "Layout" wizard), which lets us add accessories to the blog without having to edit HTML.

In January 2008, Blogger started an organised determined effort to rid the Blogosphere of the rampant spam content. Later in 2008, we added more Blog*Stars to the group - and Blogger Help really took off as an effective source of advice, to Blogger blog owners everywhere.

In 2010, Blogger added the Stats feature, a visitor meter which lets blog owners measure visitor activity, without requiring any installation - a third genius concept. Also in 2010, they ended FTP Publishing, a feature made redundant by Custom Domain Publishing. And, they introduced the Designer class of templates - and gave us the "Template Designer" wizard (now the "Customize" option in the dashboard "Template" wizard), to let us mix and match template backgrounds, layouts, and styles in infinite variety, without having to edit HTML.

In February 2011, we saw the first referer spam, an organised attack against our Stats logs. In March, 2011, Blogger added the "Dynamic" class of templates, to give our readers the choice how to view our blogs, when they view them. And later that year, RBS was honoured, by the spammers which I have been fighting since 2006, with a "Joe Job" attack delivered using referer spam.

In the months and years since, we've seen other, interesting experiences. In truth, there is always something going on - though without comprehensive forum experience, much of the ongoing activities won't always be apparent, because of normal forum activity, at any given time.

Blogger has entered into its 14th year of operation , Which breakthroughs are needed in terms of features or innovative approaches that will make sure it continues like this ?

Right now, MHO, their most urgent need is more flexible support of "mobile" / "small" computers. The option to publish comments against Blogger blogs, using "mobile" computers,is not a well supported feature - though the problem is compounded by the owners of the "mobile" computers. The current "one size fits all" approach, applying a common "mobile" template to all "mobile" / "small" computers - regardless of computer ability and features set - is not sufficiently granular.

They also need to step up integration of Community Building ("Google+"), Photo Serving / Sharing / Storage ("Google+ Photos" / "Picasa"), and Video Serving / Sharing / Storage ("YouTube") And other Real Place / Real Time concepts like Events, Places, and Maps - details which right now are only found in Google+ - need to be better integrated into Blogger, again to support "mobile" computer type applications.

Contrarily, they need to be aware that not every Blogger user is madly impressed by Google+. Blogger should not become "Google+ Blogs". Google needs to improve Google+, so people want to use it - not tweak products like Blogger and YouTube, and force people to use it.

And again (see #12), they need to improve the quality and reliability of third party accessories, gadgets, and templates.

Blogger has started the Hangout on Air series which has received great responses from users , Do you think more audio-visual and interactive content from Blogger would be useful in driving higher user adoption and spreading more general awareness about the platform ?

I suspect that AV content can be used, to accompany hypertext based documentation. I don't think that AV content will replace hypertext, in driving higher user adoption and spreading more general awareness about the platform.

Much of what we do, in maintaining and publishing a Blogger blog, involves text based processes.
Whenever Blogger changes their processes, a generic hypertext based description of what needs to be done will be much more accurate, than a series of pictures that have changed completely.

I use screen prints, to illustrate my documentation. I don't think screen prints, or videos, will ever replace properly written documentation. Look at the Blogger Help library - every week, we get a new report of some key Blogger Help document, that is unusable, because it's out of date. And Blogger has a full time engineer, who does nothing but write Blogger Help pages.

Blogger Templates combine with the Blogger Template Designer make it easier for users to customize their blogs. Recent updates to the Template Editor have made it even simpler. What do you think are the Plus and Minuses of the Blogger Templating system ?

+ : Anybody is allowed to customise their own template, or to use a custom template provided by a third party.

- : Anybody is allowed to customise their own template, or to use a custom template provided by a third party.

Template customisation is both a good, and a bad, feature. Blogger lets blog owners make their own boundaries, in customising their blogs - and some decisions which are made by some blog owners are not always good decisions. Then, they post in BHF, demanding that a Blogger Engineer fix their mistakes.

Witness right now, the problem with "dynamic" templates and missing updates. Template customisation is truly a plus and minus, at the same time.

But, it's like parenting. You have to let the kidz make their mistakes - then they grow up, and teach their own kidz.

Your Blog is aptly titled the "The Real Blogger Status" and gives ample information about current issues and general tips and tricks related to Blogger. You have actively maintained it for nearly 8 Years now. When do you think that it is time to make a post ?

Much of the content - original and updates - start with questions answered in the forum. RBS is simply my way of identifying significant Blogger issues - and providing my advice which may be found without requiring exhaustive effort, by the blog owners and readers, in combing through forum topics. It's a stream of consciousness effort. As soon as I feel that I am repetitively stating or restating an issue, in the forum, I write a blog post.

Many of my posts write themselves. Some time ago, I wrote about the schizophrenic nature of the "HTML" / "Text" gadgets, and how easy it was to confuse them. Today, I wrote a companion article, which focuses on one cause of a current problem - broken Text gadgets. Both articles discuss the same subtle peccadillo in Blogger design - but approach the subject from different directions.

Currently Blogger is experiencing a lot of issues. Many users are curious to know why are the current problem is occurring ?

Blogger is always experiencing a lot of issues - though at any time, not every blog owner or reader may necessarily be aware of each issue. There will always be issues - as long as people use their own computers to publish and read Blogger blogs. You may see my answer in #8 above, for an example of how subtle one possible cause, of one specific current problem, may be.

WordPress and Tumblr are actively involved in supporting as well as organizing events where people using their platform , come together and interact. Do you think similar community building activities should be supported & encouraged by Blogger as well ?

Blogger is a blogging platform. For community building activity (such as organizing events where people using their platform, come together and interact), Google provides Google+ - just as they provide complementary Google components.

GMail, for email.
Google Groups, for forum based communication.
Picasa, for picture serving and sharing.

All of these services - GMail, Google+, Google Groups, Picasa, and other Google services - are separate from Blogger. The Google platform provides more services, better integrated than any competing web based product.

Many Pro Blogger state various reasons like lack of flexibility , Google's control over data ,etc for using other platform rather than Blogger. What do you think is lacking in Blogger which is keeping professional bloggers from adopting Blogger platform ?

True professions - for instance legal, medical, real estate sales, and such, require

A legally recognised organisation, which provides standards for the profession.
A rigorous certification process, which all "professionals" undergo - to prove their worthiness as a "pro" lawyer, doctor, salesman, etc.

The blogging "profession" requires none of this. Merely calling oneself a "pro blogger" does not make oneself a professional - just as not calling oneself a "pro blogger" makes oneself an amateur.

My suspicion is that there are far less "professional" bloggers using non Blogger blogging platforms, than those who title themselves "pro bloggers" - and there are far more "professional" bloggers who do use Blogger, than those who title themselves "pro bloggers".

Many so called "pro bloggers", when attempting to advertise in Blogger Help, are easily identified as spammers.

There are over 7000 developers in the official Blogger Developer Group and Blogger API v3 has really good cross-platform support. How do you think that Blogger/Google can attract more Developers to develop creative and ingenious Gadgets and Applications for Blogger ?

Blogger / Google will continue what they have been doing, for more years than I have been working with them.

Develop an industry leading blogging platform.
Develop an industry leading online products suite, to complement their blogging platform.
Let market forces bring developers to develop creative and ingenious applications and gadgets, for Blogger.

The challenge is not attracting more developers - it's encouraging more honest and productive developers. And it requires prevention of the ongoing installation of devious, malicious, and misbehaving gadgets, by naive blog owners.

Medium was launched last year by Evan Williams , one of the person who co-founded Blogger. It has a minimalistic interface and is very focused towards Blogging alone. How do you think Blogger can compete with Medium and upcoming platforms like Ghost ?

Here, I'll reference my answer in Question 10, to start. Blogger is a blogging platform - but it's part of the Google applications suite. People like Evan Williams can construct more blogging platforms, as they like - but can they provide complementary features like community building (ala Google+), email (GMail), photo sharing and storage (Picasa), and video sharing and storage (YouTube) - in a minimalistic interface?

Only time will tell whether single purpose focused blogging platforms will be useful, to the world in general. I don't see any need for Blogger to "compete" - just to continue to develop complementary features, that produce no "drag" when not in use. And more selective integration with complementary services like Google+ will help.

There are more than 300,000 users in the Official Blogger Support forums ( All languages combine ) . What are your thoughts on supporting people outside the forums like via Social Media channels like Google+ which have a much larger user base ?

Right now, Blogger blogs are updated in a text mode interface. I, personally, will continue using Blogger Help Forums, simply because the GPF(Google Product Forum) infrastructure provides the necessary features and options which make a good forum structure. IMHO, neither Google+ or Twitter will ever provide a good technical forum infrastructure, which works for giving advice about a complex product like Blogger.

Google+ and Twitter provide a good environment for sharing content, and casual interaction. Neither gives any type of documentation structure, to compete with the FAQs or discussion topics, which we have in Blogger Help Forum. We'll use Google+ as a complement to BHF - not an alternate, by any means.

As an example, try to imagine this interview being conducted in Google+. I'll write more detail, on that thought, another time.

How can our readers find you on the web , contact you and hire you ?

My Google / Google+ profile (which links from and to my Blogger Help Forum profile) provides a point of contact, an introduction to my areas of expertise and personality, and a point of reference back to anybody trying to contact me.

Thanks Chuck Croll for this in-depth and enlightening interview , I am are really grateful that you took out time for this interview from your schedule.

Readers feel free to ask questions or share your thoughts about this interview in the comments

Features : Responsive Portfolio Blogger Template

2013-11-10T19:15:00.001-08:00

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

Download Download Demo

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

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

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

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

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

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

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://cards-dev.twitter.com/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 )

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

Download Download Demo

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 https://www.stylifyyourblog.com/p/contact-me.html

Solving the Problem with Blogger's Custom Redirects feature on Mobile

2013-11-04T10:51:00.002-08:00

Custom Redirects were launched in March 2012 and gave Blogger users the ability to change the permalink structure of the all types of pages on their blogs . It allows two kinds of redirects namely 301 Moved Permanently type (Which lets you pass SEO value) and 302 Moved Temporarily (Used for Coming Soon Pages or when a page is under maintenance ). This is extremely useful for people who are migrating from other platforms , as they can now easily able to redirect pages with different permalink structure than Blogger's default to a new page. Recently there have been some issues with it , which have become a cause of frustration for many users.

What is the problem

When a Custom Redirect (example www.stylifyyourblog.com/contact ) is opened in a Mobile browser , it leads to a Redirect Loop (See Screenshot below) which doesn't allow the visitor to open the blog. This becomes a big problem when the redirect is used on the homepage of the blog (example YourBlogName.blogspot.com or a custom domain like https://www.stylifyyourblog.com/ ) which makes it impossible for the user to even visit the blog.

Why this happens

The main reason for this problem occurring is the mobile parameter that Blogger adds from the server side. The m=1 parameter interferes with the custom redirect and breaks the whole functionality (As you can see in the short GIF Below). Until last year if a custom redirect with mobile parameter was entered in a normal web browser (example stylifyyourblog.com/contact?m=1 ) it would lead to a 404 page , but this error was fixed by Blogger Team.

How to Solve this Problem
As the custom Redirect feature doesn't work universally , you can always use good old JavaScript for this. Firstly I would suggest to remove the specific redirect from Settings > Search Preferences > Errors and redirections > Custom Redirects . Then go to Template > Edit HTML and search for <head> tag and add the following code just below it (Backup your template before doing this)

For example sake , I am assuming we want to redirect https://www.stylifyyourblog.com/templates to https://www.stylifyyourblog.com/search/label/Template

<script>
if(window.location.href == 'https://www.stylifyyourblog.com/templates?m=1' || window.location.href ==  'https://www.stylifyyourblog.com/templates' )
{
window.location="https://www.stylifyyourblog.com/search/label/Template";
}
</script>

As you can make out , this is just tests if the current URL is the normal or mobile version of the URL you want to redirect , if it matches then it redirects to the URL of your choice. This works in Desktop and Mobile browsers just fine ( See Youtube video below )

What is Blogger doing about it
If you want to redirect a large number of pages , then it will become unmanageable and confusing to keep adding new snippets of code to the template. This work is best done by Blogger at the Server side. As of now this issue has been escalated to the Blogger Team and they are looking into it . Hope they will fix this issue soon

If you are currently having problems with Blogger , feel free to share them in the comments , I will try to help out to my best of abilities

20 Premium Responsive Blogger Templates

2013-10-30T03:59:00.000-07:00

Responsive Design has become an integral part of Web Design now. Blogger Template Designers have picked up this trend as well and have created some excellent templates. These templates come with features like cross-browser support , ads ready , Optimized SEO , Blogger Template Designer support to name a few. Now lets have a look at these 20 high quality Blogger templates

1. Masqoli

Masqoli is a modern blogger template with responsive layout. It is a clean, useful, effective, modern and professional look template. It made by using HTML5, CSS3

Download Demo

2. Geek Press

Geek Press template was designed as a flat and responsive Blogger template for News and Magazine websites. Geek Press is very easy to work without touch to code, it will help you publish your small news / magazine projects as the fastest way ever.

Download Demo

3. Purez

Purez a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portfolio websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

4. WorkMag

Work Mag Is a My New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template

Download Demo

5. Flat News

Flat News is a news and magazine Blogger template. This template is very easy to work without touch to code. Flat News is 100% responsive and drag-drop to build your own home design.

Download Demo

6. Cody

Cody Is a My New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template

Download Demo

7. Squid

Squid Is an Our New logger Template. Its Responsive and High User Friendly Blogger Template. Squid Blogger Template Design For Magazine Style Premium Blogger Blogs

Download Demo

8. Maxxiz

Maxxiz a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portfolio websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

9. BPress

Bpress Is a Our New logger Template. Its Responsive and High User Friendly Blogger Template. Bpress Blogger Template Design For Magazine Style Premium Blogger Blogs

Download Demo

10. GreenB

GREENB is a responsive and multipurpose Blogger template. You can use it to show your portfolio combine with your blog articles.

Download Demo

11. Syahira

Syahira a blogger theme with responsive layout. Its High User Friendly Blogger Template. Its design simple and clean and perfect for magazine or portfolio websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

12. WarmMag

Warm Mag Is a My New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template

Download Demo

13. Rifqiy

Rifqiy a blogger theme with responsive layout. This theme has a design that is perfect for magazine or portfolio websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

14. Radja

Radja a blogger theme with responsive layout. This theme has a design that is perfect for magazine or portfolio websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

15. Adamz

Adamz a blogger theme with responsive layout. This theme has a design that is perfect for magazine websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

16. Sevida

Sevida is the premium responsive blog and magazine template for Blogger fans. This template shows you how cool and flexible Blogspot magazine template can be.

Download Demo

17. Gothica

“Gothica” is a blogging template done for Blogger CMS. It has wide variety of features, CSS effects and fits various screen resolutions.

Download Demo

18. Grid Spot

Grid Spot is the premium responsive blog and magazine template for Blogger fans. We designed this template with target is that make you change your thoughts about Blogger platform.

Download Demo

19. Ijonkz

Ijonkz a blogger theme with responsive layout and two style Boxed or Full width. Its High User Friendly Blogger Template. Its design simple and clean and perfect for News, Magazine or portofolio websites. With an attractive color combination and impressed professionals and has many features.

Download Demo

20. Quickly

QUICKLY is a clean multipurpose, elegant template for blogging system – Blogspot. It is highly customizable and it is easy to navigate through the posts and of course it’s written in the newest standards of HTML5 and CSS3! It’s focus on user-experience, usability, and beautiful typography and it will shows you how cool and flexible Blogspot Portfolio and Photography template can be.

Download Demo

We will be sharing more collections of Blogger templates in different genres in the coming weeks , so stay tuned . Know a Premium Blogger Template and we haven't mentioned it above ? Feel free to share them in the comment below

Blogger Titans Interview #1 : Andy Page

2013-10-13T03:29:00.000-07:00

From today we will be starting the Blogger Titans Interview series. As the name suggests , we will be interviewing people who have unparalleled expertise and understanding of the Blogger Platform. From Blogger Forum Top Contributors , Template Designers to Gadget Creators , we will be hosting everyone who has extensive experience with Blogger. To kick things off our first guest is Andy Page , Blogger Forum Top Contributor as well as the owner of one the most visited site on Blogger platform , SpoilerTV. Let's dive straight into the interview

Stylify Your Blog : Can you introduce yourself to our readers

Andy Page : Hi, I’m Andy the owner of SpoilerTV and a Blogger Top Contributor (TC) in the Blogger Forums.

Been a computer programmer and project manager for various companies including Price Waterhouse, IBM, Western Geophysical, Unilever, Cygnite/Unipower

SYB : Since When have you been using Blogger and what has been your experience with it so far ?

AP : Been using Blogger since around 2005 when I started the LOST Site, DarkUFO (darkufo.blogspot.com).

I really enjoy using it find it’s a fantastic way to create a web presence with 0 cost.

The Blogger servers are very fast and reliable and can handle any huge spikes in traffic. As they are hosted on Google Servers they are available worldwide and we don’t have to worry about any server issues, hacking etc. It allows us to concentrate on making posts and articles rather than fixing server issues.

Being a Blogger Top Contributor, what does a normal day look like ?

Basically I first check each morning to see if any of the support tickets that I'm working on have been updated/replied to. If so I go through and work on those posts.

After that I check to see if there appears to be any wide scale outage or issues affecting lots of users.

Finally I look at any new support tickets that have not been replied to by other TC’s.

What do you think are the biggest Advantages and Disadvantages of Blogger over other blogging platform ?

Advantages
- Free
- Fast
- Unlimited Bandwidth and a huge amount of space for Photos and Videos
- Ability to Customize the full template
- Managed Security
- Very Reliable, 99.9% up-time.
- Deep integration with other Google Products, eg. G+, Photos etc

Disadvantages
- Can only have 100 Max Authors
- Can only add 20 Labels Max to a post
- No built in Author Profiles

How do you picture Blogger 5 years from now ?

I don't see it changing that much to be honest. I think we’ll see lots of small incremental improvements. I hope that we get to see some of the following.

- New and Improved Templates
- Provide Templates that provide the ability to easily make a blog be responsive.
- Improved G+ Comments
- Improvements to the Android and iOS apps.

With new features being released in Blogger nearly every month , Any specific feature that you want in Blogger and why ?

Here are a couple of things I would like to see.

- Provide a new level of Security access. Currently we have Reader, Author and Admin. A new level would be Editor. An Editor would be able to edit existing posts but not be able to make any Admin Changes.

- I would also like to see a Special Level of Security called “Owner”. Only the Owner can add and remove Admins. It would stop rouge admins from deleting other admins.

- Categories , I would love to see the introduction of Categories into Blogger. Currently we can only assign Labels to Posts, it would be great to have Categories and that we can use those to remove certain Categories from displaying on the Homepage.

- Improved support for Multi-Author blogs so that Authors can create a custom “footer” for their posts.

- Allow blog owners to have a central place to see all their comments they have left on other sites

- Provide the ability to “undelete” a post or comment that was accidentally deleted.

Do you think Google+ poses any risk to Blogger's existence ?

Personally, No . G+ is great but not for everyone. G+ only has a small subset of features that can be found in Blogger and provides very little customisations.

Recently there have been many reports of errors in Blogger Forum , is this normal or something uncommon ? ( Recent errors with Text Widget , Post Editor , Template Designer )

These things seem to happen from time to time which is unfortunate. Blogger releases new code/fixes/optimisations on a weekly basis. It appears sometimes that bugs slip through the QA Process. Normally they get fixed within a week, or in some cases work-arounds found.

Your site Spoilertv , which has grown tremendously after your LOST fame , is in many ways the best example of what can be achieved using Blogger platform when its taken to the extreme , How have you been able to do that ?

Thanks :)

Lots and lots of hard work and help from a lot of people. I started the site as something to do once LOST was over, and the site just grew slowly. As we grew we added more helpers and writers to help us post content, and reviews.

We expanded the number of shows we covered, added our Episode Database ( www.stvplus.com ) , plus our own Image Gallery ( spoilertv.co.uk/images ).

One of the key things was to build a great community and we use the Disqus commenting system. It really helps us control the spam and keep trolls at bay :)

You can see our About Page here for some stats/info

https://www.spoilertv.com/p/about.html

Like many Professional Blogger , why have you not made a Switch to WordPress ?

Very simple really. The amount of traffic we get would mean we would have to purchase a very large and expensive server, along with a monthly bandwidth fees.

Also, I would have learn a whole new templating system and reconfig over 150 RSS Feeds and 50+ twitter accounts.

I just don’t see the benefit in using WordPress over Blogger.

What are your thoughts on Blogger allowing developers to add templates in the Blogger's centralized Template Gallery ?

I would love to see more professional themes added to the standard gallery.

Why are there less developers developing widgets and templates for Blogger than other platform ? ( Bad publicity or no extensive promotion by either Blogger nor any person or any other reason)

Good question. I think mostly because developers have more control and better to understand features in WordPress. Plus developers can charge for their widgets if they want.

Blogger Widgets seem like a bit of an afterthought and not very well supported or easy to create/maintain.

What do you think will be an instrumental move by Google to make Blogger once again the champion amongst CMS's ?

I think Blogger need to make it a little simpler for first time bloggers. eg. Tumblr is very quick and easy to add content. Blogger can sometimes seem a little daunting and over complicated to new users.

But apart from that I really can't think of much. I don't think Blogger will ever overtake WordPress in terms of userbase/ecosystem but I don’t think it needs to. Both can co-exist quite happily.

WordPress is great for some people, whilst Blogger is preferred by others.

How can people follow you , contact you and give you money ?

We don’t ask for money ;)
darkufo [at-the-rate] spoilertv.com
www.spoilertv.com
plus.google.com/+spoilertv
www.facebook.com/SpoilerTV
spoilertv.tumblr.com

This was a insightful and interesting interview , we would like to thank Andy Page for taking out time for us. Do not hesitate to share your thoughts , questions and opinions about this interview in the comments .

Next Saturday Blogger Template

2013-10-05T12:46:00.000-07:00

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

Official Blogger Contact Form Gadget Released

2013-05-15T23:22:00.000-07:00

Word about Google working on a official Contact Form gadget started to go around when many Blogger developers start to encounter some code in the Blogger hosted CSS and JavaScript files which clearly indicated that a Official Contact Form gadget was on the way. Finally today after a long wait of 14 years , Blogger has released the new Contact Form gadget which will surely ring a death knell for third party contact form providers

How To Add It

1. Go to the Layout Tab of your Blog

2. Click the Add a Gadget button

3. Click on More Gadgets

4. Click on the Contact Form Gadget

5. Give it a appropriate title and Save it

Its Features

> Sending simple text messages
> No Support for attachments ( Will be likely added in the future )
> Custom CSS Styles can be added easily
> All code is escaped before sending ( Cannot send any HTML via the message )

This new gadget release comes with the recent updates announced Google I/O 2013 and it looks like Blogger is still a integral part of the Google's Product line.