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

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

Blog Archive links Collapsed by Default Hack

blog archive widget hack

If you are using the Hierarchy style for your Blog Archive widget then you must have faced the problem of auto expansion of drop-down list of a particular month which is currently in the calendar or to which the opened post belongs. This simple hack solves that problem by making all the nodes in the hierarchy to be collapsed by default(As seen in the above picture ). This can be simply added by the One Click Installer or manually.

Demo

Prerequisites for this to Work
Before you apply this remember that you have to have a Blog Archive Widget present and the Style has to be set to Hierarchy (as shown in picture below )

blog archive widget config blogger

Applying this to your Blog

To add using One Click Installer Method

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script>
if ( $(‘.archivedate’).hasClass(‘expanded’) )
{
$(‘.archivedate’).removeClass(‘expanded’);
$(‘.archivedate’).addClass(‘collapsed’);
}
</script>
Blogger Templates

Or just add the following Code in your Blog (preferably before the </body> tag in the Edit HTML of the Template tab )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>  
if ( $('.archivedate').hasClass('expanded') ) 
{ 
 $('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
}
</script>

What this code does
It firstly checks if a element having class name “archivedate” also has a class “expanded” present in it. If this turns out to be true then it removes the “expanded” class and adds a class named “collapsed” .

If you face any problem implementing it in your blog then feel free to ask via comments.a_demo_four {
width:auto !important;
cursor:pointer !important;
padding-right:20px !important ;
text-align:center !important ;
font-weight:bold !important ;
border: 1px !important ;
background-color: #3bb3e0 !important;
font-family: ‘Open Sans’, sans-serif !important;
font-size: 12px !important;
text-decoration: none !important;
color: #fff !important;
position: relative !important;
padding: 10px 20px !important;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%) !important;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229))) !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999 !important;
}

How to Enable Google Authorship quickly

Google Authorship Image

In simple words Google Authorship allows you to make Google aware of the stuff you have written. When enabled it shows your name as well as your Google+ Profile image besides the search result. Enabling it just requires a bit of coding and is pretty simple. It adds a kind of authenticity element in the users mind and there is added trust in your content . Lets dig in

Firstly Go to the Rich Snippet Checker tool and check if this is already enabled in your blog/site. In case you see your profile is linked then you don’t need to worry, just jump to the part where I explain How to make sure your image and name appears besides the search result.

Rich Snippet checker tool image

The reason for checking for this linking is because if you have merged your Google+ and Blogger Profile together ,then chances are that Google would have done this for you themselves

For those whose profile information doesn’t appear in the Checker , Follow the steps Below

How To Enable it

Step 1:  Go to your Google+ Profile and copy the URL in the address bar.

Step 2:  Add a HTML/JavaScript widget either in the Sidebar or Footer and then add the following code into it.

<a href="PROFILE-URL" rel="author" >Google+</a>

Replace the PROFILE-URL with your actual profile URL and then Save it
Also you can replace Google+ with your Name or other relevant Information. Here the main thing is the rel Author tag which tells Google that this Profile is the producer of the content.

Step 3:  Now Go your Google+ Profile and there click the Edit Profile button. Now in the right side Under the Contributor To tab, add your Blog Name and URL. Save the changes

Contributor To Tab in Google+ Image

The reason for doing is to make sure this method is spam proof. Like for example if somebody puts your profile URL in a website with objectionable content ,but you don’t put that site in your contributor tab. Then Google will not show your image beside that websites search

Enabled It but Name and Image don’t appear beside the Search Result
This was the case with me too. I had Enabled it for a long time back but the Name & Image didn’t accompany Search Results.

Here is the what you have to do ,Replace your current code:

<a href="PROFILE-URL" rel="author" >Google+</a>

with

<a href="PROFILE-URL?rel=author" rel="author" >Google+</a>

I did this a week back and now all the Stylify Your Blog results are accompanied with my Name and Image.

Hope it helps you and feel free to ask about problems you face while implementing it