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

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

AlternativesDNS 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

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

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

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;
}

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

redirect loop problem

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 http://www.stylifyyourblog.com/ ) which makes it impossible for the user to even visit the blog.

too many server redirects

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.

redirects from m=1 to non m=1 loop custom

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 http://www.stylifyyourblog.com/templates to http://www.stylifyyourblog.com/search/label/Template

<script>
if(window.location.href == 'http://www.stylifyyourblog.com/templates?m=1' || window.location.href ==  'http://www.stylifyyourblog.com/templates' )
{
window.location="http://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

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

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.

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.

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

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.

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

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

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.

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

10. GreenB

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

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.

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

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.

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.

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.

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.

17. Gothica

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

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.

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.

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.

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

.linksto{ text-align:center;}

Blogger Titans Interview #1 : Andy Page

Blogger Titans Andy Page

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

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

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

Official Blogger Contact Form Gadget Released

Blogger Contact Form

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

layout tab

2. Click the Add a Gadget button

add a gadget

3. Click on More Gadgets


gadget menu





4. Click on the Contact Form Gadget

configure contact form

5. Give it a appropriate title and Save it

Its Features

contact form example

> 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.

Five Reasons to Switch to Google+ Comments Now

google+ comments

Google+ Comments launched just 2 weeks ago yet it has garnered lots of good reviews and a positive response from the Blogger user community. This move is a part of Google’s ongoing initiative for plusification of its products but its a clear sign that Blogger is still and will remain a indispensable product in Google’s arsenal. G+ Comments are also a clear challenge to the FB Comments , Disqus and other commenting systems even though it is yet to launched outside of Blogger officially. The presence of unofficial implementations for Drupal and WordPress establishes the fact that its being liked by everybody out there. So if you one of those people who are still not convinced of using it on your blog then here are Five Solid Reasons that will surely make you change your mind

1. Connected with everybody ( Literally !! )

connect google+ and blogger

Lets think of a dream scenario , Somebody , Somewhere on the Web shares the link to your newest article and you are thanking them for doing it the very next minute. In reality other than when you get traffic from some popular website , many conversations about your blog on social media are ignored by you or you have no way to know that they are even happening out there. G+ Comments takes a dig at this problem by making sure that if-and-when a link to your article is shared on Google+ publicly it will appear in the Comments sections with all its +1’s and comments that were done on the original thread. Even though this is a small innovation yet it will help keep the conversation about your article either on the blog or social media in a single place

2. Privacy Conscious


privacy



The power of Circles from Google+ is used to make sure that your privacy is never compromised . May it be a comment on your favorite Technology blog while you are working in office or a comment directed towards the author alone for fixing that typo you should be rest assured that you will not be caught by your boss or shame the author publicly for that silly mistake of theirs respectively . Another aspect is the ability to see comments custom-tailored to you. So your Best Social Friends comments will be visible to you on the top irrespective of the fact that when they were posted

3. Mention People


mention people in comments



Well its not new , Disqus and Livefyre have similar features but the thing here to consider is that you can easily send a notification to Google+ users without much hassles and get them involved in the conversation right away

4. Edit , Delete , Report Spam and Share on Google+




All the standard Moderation tools that every blog owner wants with a small yet impactful addition of social sharing right into the core of the comments structure. This small feature will increase exposure to your content on Google+ many folds and increase engagement with your readers and reader’s friends exponentially. A sure shot way to effects those Social Signals and increasing your search engine ranking organically

5. Threaded Comments 


threaded comment



Even though this is common place now and not a very big deal , but being able to reply to specify comments is always a great UX move. Considering just last year it was introduced in Blogger officially , its pretty big deal that its inherently present from start in this comment system. It gives more organized feel to your comments sections and makes it many times easier for you to manage the comments.

Bonus Reason : Migrate Comments 


comment migration



If you are a Blogger user , then you will not have to worry about losing all your previous comments that your blog received till now as all those comments will get automatically migrated as-and-when you choose to switch to Google+ Comments and reverse will also be possible soon if you think of switching back to the old comment system . One thing to note though is that the old comments cannot be marked as spam or deleted easily. (This bug will surely be fixed soon )

Still Not Convinced
Then check out this Hangout on Air from Google employees +Yonatan Zunger and +Dan Peterson

Conclusion
Active development is in full swing and lots of features might be coming out soon. If you have any feedback regarding any problems that you face while using G+ Comments , then without hesitation report it in the Blogger Product Forum.


So take the chance and Try Google+ Comments





Update
We have switched to G+ Comments but we have still allowed you to comment via the old comment box if you like that one more

Infinite Scrolling in Blogger

infinity Symbol

Infinite Scrolling refers to the ability to continuously load new content on a page without refreshing it which gives an appearance of endlessness. It is used by major sites like Google+ , Facebook and Twitter and pretty successfully at that. The biggest benefit being exposure to more content and faster browsing . We will see how to integrate it into our Blogger blog by using Infinite Ajax Scroll jQuery plugin

Features

1. Faster Loading
2. Content Exposure increase many fold
3. More intuitive for Touch devices
4. Best suited for image-heavy blogs
5. Simplified Navigation
6. Higher user Engagement 

Adding it to your Blog

Across the Whole Blog
It will work on the Home Page , Label Pages , Archive Pages as well as Post Pages ( the previous post will be loaded in full )

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script type=’text/javascript’>
//<![CDATA[
(function($){‘use strict’;Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$(‘html, body’).scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind(‘scroll’,scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr(‘href’);if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr(‘href’);$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},’html’)}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$(‘html,body’).animate({‘scrollTop’:b},400,’swing’)}else{$(‘html,body’).animate({‘scrollTop’:b},1000,’swing’);reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$(‘.ias_loader’);if(a.size()===0){a=$(‘<div class="ias_loader">’+h.loader+'</div>’);a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$(‘.ias_trigger’);if(b.size()===0){b=$(‘<div class="ias_trigger"><a href="#">’+h.trigger+'</a></div>’);b.hide()}$(‘a’,b).off(‘click’).on(‘click’,function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:’.blog-posts’,scrollContainer:$(window),item:’.post-outer’,pagination:’#blog-pager’,next:’#blog-pager-older-link a’,loader:'<img src="http://1.bp.blogspot.com/-luorIIJzBBo/USnR6gOh-1I/AAAAAAAAJ_c/VEh_iQfKHqE/s1600/loading.gif"/>’,loaderDelay:600,triggerPageThreshold:8,trigger:’Load more Posts’,thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push([‘_trackPageview’]); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$(‘html,body’).scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i–){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i–){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},”,b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)===’#/page/’);if(a){pageNum=parseInt(window.location.hash.replace(‘#/page/’,”),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?’#/page/’+a.page:”);window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Templates” >Blogger Templates and Widgets</a>

Only Home Page, Label Pages and Archive Pages

It will not work in the Post Pages

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script type=’text/javascript’>
//<![CDATA[
(function($){‘use strict’;Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$(‘html, body’).scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind(‘scroll’,scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr(‘href’);if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr(‘href’);$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},’html’)}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$(‘html,body’).animate({‘scrollTop’:b},400,’swing’)}else{$(‘html,body’).animate({‘scrollTop’:b},1000,’swing’);reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$(‘.ias_loader’);if(a.size()===0){a=$(‘<div class="ias_loader">’+h.loader+'</div>’);a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$(‘.ias_trigger’);if(b.size()===0){b=$(‘<div class="ias_trigger"><a href="#">’+h.trigger+'</a></div>’);b.hide()}$(‘a’,b).off(‘click’).on(‘click’,function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:’.blog-posts’,scrollContainer:$(window),item:’.post-outer’,pagination:’#blog-pager’,next:’#blog-pager-older-link a’,loader:'<img src="http://1.bp.blogspot.com/-luorIIJzBBo/USnR6gOh-1I/AAAAAAAAJ_c/VEh_iQfKHqE/s1600/loading.gif"/>’,loaderDelay:600,triggerPageThreshold:8,trigger:’Load more Posts’,thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push([‘_trackPageview’]); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$(‘html,body’).scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i–){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i–){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},”,b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)===’#/page/’);if(a){pageNum=parseInt(window.location.hash.replace(‘#/page/’,”),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?’#/page/’+a.page:”);window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Templates” >Blogger Templates and Widgets</a>

Video Tutorial

Some Tips

+1 , Tweet and Like Buttons will be loaded after every AJAX request , so if you have these social sharing buttons beneath every post then don’t worry about them not showing

When the new post is loaded beneath a post ( If you choose the first option ) , then the Threaded comments in the newly loaded post will not work

To replace the Loader image , just search for .gif in the Widget code and replace that whole URL with another Image

To change the number of times before the user is asked to load more pages , search for triggerPageThreshold: and replace the numeric value ahead of it , if for example you set the value as 4 then the plugin will load new content four times before it asks you weather you want to see more content or not

onRenderComplete:function() function is used to tell the plugin what to do after the page has been successfully loaded , Here I have added a snippet which tells Google Analytics that a new page is loaded so that GA registers every AJAX request as a New Page visit

loaderDelay: tell how much milliseconds to wait before the new content is actually added to the page

For information about all the other options available in this plugin visit IAS Options

If you face any troubles in implementing , feel free to ask me via comments