How to Blog?

Blogger Tweak - Open external links in new tab automatically

2020-09-09T08:48:00.001+05:30

So, once upon a time, a really long while ago, I tried to customise and recreate a Blogger template which is not available anymore, but there's one thing I remember about it. I had a jQuery code written to make all the external links open in new tab. I also thought, it's about time I revive that idea and write a more intact code and here we go.

So, there are two things to do.

Add Javascript code that detects external links and opens them in new tab.
Add a CSS code to let users know that a particular link is going to be opened in new tab.

Adding a javascript code

Please follow the instructions below,

Go to https://blogger.com dashboard
Navigate to Themes > click the down arrow near "Customize" and then click on Edit HTML.
Now scroll to the very end and paste the following code just before </body> tag.
<script type='text/javascript'>
document.body.addEventListener("mousedown",function(event){
if(event.target.tagName === "A"){
if(!event.target.href.includes("krishnainfotron") && event.target.href.startsWith("http")){
event.target.setAttribute("target","_blank");
}
}
},true);
</script>
The code above should look like,
Here, please replace krishnainfotron with the keyword that your blogspot and custom domain have in common. For example, my blogspot address is https://krishnainfotron.blogspot.com and my custom domain address is https://howtoblog.krishnainfotron.com. Since both of them have krishnainfotron in common, I have added that as keyword so that both blogspot and custom domain links in my blog will be detected as own link and open others in a new tab.
Once done, please click on the floppy icon at the top right which indicates Save.

Now, your blog will open all external links in new tab. Please test it out. Let's move on to the second part of the article,

Adding a CSS code

This CSS code is to show an indication that it's an external link and will open link in new tab. Please follow the instructions below,

Go to https://blogger.com > Themes > Customize
In the left, click on Advanced > In the appearing dropdown, choose "Add CSS"
In the appearing text box, please paste the following code,
a[href]:not([href*="krishnainfotron"]):not([href*="bp.blogspot"]):not([href*="blogger.com"]):not([href*="googleusercontent"]):not([href=""]):not([href^="/"]):not([href*="javascript"])::after {
content: "";
background-image: url('https://static.thenounproject.com/png/299638-200.png');
background-size: 15px;
display: inline-block;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
bottom: 0px;
}
Here, again please change your blog's keyword. The rest of the restrictions are to ignore image links, blogger original links etc., Although they will be opening in new tab, we don't indicate them for neatness.
Click the floppy icon in the bottom right that represents save.
Now you can see external links in my blog having a "Open in new tab" icon nearby as shown below,

Being all that done, it should be sufficient for opening external links in new tab at lowest code cost. Happy blogging everyone.

Please note that the image is taken from thenounproject.com with creative commons licence and it is best to give attribution for using it like I have given in my right side bar using a HTML/Javascript gadget,

(P.S - If at all do you face any problems like some links that are not supposed to open in new tab opens etc., please comment on this article so that I can check and rectify it)

Blogger & Twitter card previews

2020-08-20T19:32:00.010+05:30

So, there was a report in Blogger Help Community which is what made me write this down.

This is in correlation with Blogger & Facebook OG Object debugger. The report was that Blogger blogs doesn't show preview in Twitter card validator.

So, I went ahead and tried previewing one of my blog posts and I got the following,

Therefore, I tweeted the same link which is here and it didn't show any preview.

Hence, I concluded not just the validator, the whole twitter stopped scraping my open graph information. Therefore, I made a small research and added a tag in my template.

Please follow instructions below,

Go to https://blogger.com > Themes
Click on the three dot menu near "My Themes" and choose Edit HTML
In the appearing page, press Ctrl + F and find the below code,
<b:include data='blog' name='all-head-content'/>
Right after that code, paste the following code,
<meta name="twitter:card" content="summary" />
So, it should look like,
<b:include data='blog' name='all-head-content'/> <meta name="twitter:card" content="summary"/>
Once done, click on the floppy icon in the top right which indicates "Save"

Once I have added the above code and after a couple of tries, the card validator finally scraped my URLs.

So did the tweet too as shown below,

Thus, by adding one line of code we can make twitter scrape all our OG tags. However, this content in the meta tag has one other option.

summary_large_image

So, when you add this as content instead of summary, you will get a nice big image preview as shown below,

So, if you want to learn more about twitter cards to optimise your blog related to twitter previews, please read this documentation here.

Blogger custom domain confusions - Check before you buy

2020-06-19T15:48:00.008+05:30

In the Blogger community forum, I happened to help a user who was not able to publish their blogspot address to their custom domain. After doing all the debugging, there was no option left out but to contact Google and finally we have known what the problem is.

The problem was that the URL was not available for use in blogger.

Here on, before spending money on buying a domain, please ensure blogger allows it.

Why isn't the custom domain available to buy but not available to use on Blogger?

That'd be the first question every user would ask or think to ask. Unfortunately reason is un-disclosed by Blogger themselves.

So how do we know if a domain is available at Blogger or not?

Earlier, there used to be no way we could do this as Blogger would throw a more generic error like below,

Now, we get a more customised error for this particular case alone like below,

So, here on, before spending money on buying a domain, please try publishing your blog in the domain name you are planning to buy so that you can know for sure Blogger allows it.

Blogger HTTPS for custom domain and Cloudflare

2020-02-20T15:24:00.006+05:30

In BHF, there was a recent issue related to cloudflare where the browser screams the site is a phishing site. So I thought of writing up how does a service like cloudflare affect your blogger blog.

What is Cloudflare?
Well we have that written all over Wikipedia: Cloudflare. Let's go on with why Blogger users look for Cloudflare.

Anciently Blogger users used Cloudflare for one simple reason. HTTPS for custom domains.
So what happens when you introduce Cloudflare into your domain?

DNS Redirect.

Your custom domain will be configured with the proxy info provided by Cloudflare and when the request is hit, DNS redirect happens.

DNS redirect is bad for the site's health.

A number of reasons, but the most important is that some browsers, when it detects a DNS redirection, it thinks that it is a phishing site.

What is a DNS redirect?
I am trying to explain this in easy terms. I'll try not to be too technical. When a custom domain URL is hit, usually the domain requests go to Name servers from where the browser would obtain where the domain points to.

So normally, without cloudflare, when a URL is hit, it first goes to the respective name server to pull the DNS records. Usually to publish a blogspot address, we add 4 * A records and a CName record.

Let's consider CName alone for instance and so the mapped name is ghs.google.com. Therefore the www URL request is redirected to ghs.google.com and from there Google takes care of the publishing.

When it comes to cloudflare, when the same URL is hit, it first goes to the respective name server to pull the DNS records and turns out www URL will be mapped to an IP address provided by cloudflare. So, the request is redirected to this IP address (this is redirect number 1)

This IP address will be holding the SSL certificates required for HTTPS. Once this IP address receives the request, it redirects it to ghs.google.com or one of the four IP addresses. (this is redirect number 2)

(Please note that this is a rough idea and am not sure if just one redirect happens)

What happens when such redirects happen?

Affects your search engine visibility.
Becomes a suspect of phishing site sometimes.
Slows down the speed of your blog as it is through a proxy server.

and so on.

What to do if the blog becomes a phishing suspect?

Three steps to follow and you'll be good,

Remove cloudflare or any other such service.
Setup your custom domain DNS properly with 4 * A records and a CName record.
After doing the above steps, report your blog itself in this link below,
https://safebrowsing.google.com/safebrowsing/report_error/

What do we do for HTTPS then?
If you had been a cloudflare-blogger user for a while now, I am aware you are going to ask me what would you do for HTTPS. Blogger itself supports HTTPS for custom domains which I hope should help. Kindly checkout and let me know.

Finally, if you want to know more about debugging custom domain related issues, check out my article below,

How to Blog?: Common issues where custom domain is involved.

(Image courtesy - lifewire.com & aws.amazon.com)

How to secure your Google account and Blogger blog?

2019-10-11T16:54:00.007+05:30

As a part of contributions to NCSAM, I am writing this article down on what all should we be aware of with respect to Google's security aspect and how to make sure your blog stays yours forever.

What is NCSAM?

It's National Cyber Security Awareness Month which is observed during the month of October every year in America.

However, we all know cyber security is a world topic and is not limited to just the USA. So let me give some tips with respect to keeping the Google account safe and Blogger blogs safe from hackers. As I secure my account, I hope you people catch up too.

In this blog post, I am going to tell about the following,

Securing your Google account.
Securing your Blogger blog.

Securing your Google account

Since Blogger is also part of your Google account, let's first see what all we need to do to keep our Google account safe.

Don't share your password to anyone.
Keep changing your password every 60 - 90 days.
Make sure your password is strong enough. Have at least one capital letter, one special character and one number.
Make sure you logout your account when you use it anywhere other than your own personal laptop or desktop.

Those are the basics. There are few advanced things we can do to keep the account in safety. We can walk through Google accounts security section to see what all we could do.

1. The security checkup.

As soon as I go to the security page, Google account says,

This is about my account. When it comes to your account, if Google has found any potential security threat, it will ask you to review it.

Irrespective of whether it has detected a risk or not, you can still go for a checkup by clicking "Get started"

What do I see when I click the same?

Everything is a green mark. Google now thinks there are no potential risks to your account.

Feels safe right? However that is not everything. Let's click on "Continue to your Google Account" which takes us back to security section.

Coming down to the next section,

When have I changed my password?
28 July 2018 - Absolutely vulnerable.
Am I using my phone to sign in?
No
Do I have my 2-Step Verification turned on?
Oh noooooo! Worried!
When have I changed my Google PIN?
Way back in 2017. That's again worst thing.

Adding all these up, my account is so much in threat. Now I am going to go ahead and secure my account more.

I have changed my password and setting up 2SV. Read more about 2SV here.

Two step verification (2SV)

In short, 2SV is an additional verification that it is you who is logging in. Therefore Google asks you for your phone number and when you login to a new device, Google sends an OTP by call or text message to verify.

Too lazy to type in OTP each time? You're lucky. Google has got two other options as well one of which is getting a prompt in your phone.

I am comfortable with a Text message and so going ahead with Text message. If you find something else comfortable for you, please go ahead with that one.

Done and I am all set up for 2SV. Now when each time I login in a different computer, I am prompted with an OTP and only when I confirm it, I am let in to my account.

Next is my Google pin. I am going to go ahead and change that as well.

Screenshot of Google account PIN change

Being all that said and done, what else can you do to get your account back just in case you have been hijacked or you have forgot your account password?

Well, here comes the recovery information section,

(Information is hidden for privacy purpose)

You should enter a recovery phone, recovery email and answer a security question.

Unfortunately, Google does not anymore support security questions. You can only use recovery phone and an email. May be it's showing up in my account because it's ancient.

Having these setup will have your account easy to recover for yourself and difficult to hack into for others. Hope these tips helps in keeping your account safe.

Finally, if you ever feel you missed to logout your email from a stranger computer or you feel you are being hacked, change your password first. Then go to Gmail for Web and scroll all the way down to see the following at the end,

Click on the Details as highlighted and you'll get to see a popup window like below,

Here you can know what are all the devices that are logged in. You can choose "Signout of all other Gmail sessions" which will remove all of Google sessions except the one that you are logged in.

Now when this is done, you can login only to your devices back.

Thanks for reading through this long. If you do all these itself, your blogger blog is already safe as all google products are under one roof.

However let me tell you an interesting story of an old friend of mine. Herself and one another friend of hers started writing a blog on various genres. Over an year or so the blog got decent amount of viewers and they started inviting guest authors to write post.

They approached the guest authors online and got content over email and then post it by giving credits to them. As it went, the blog became so popular but they became quite busy with their life. However they wanted to keep their blog going. So they decided to hire a person for it. They hired too from online market. Everything was the same except that this time they didn't get content over email rather added the content writer to their blog as Author.

Days went and at some point the author needed admin access and without second thoughts they gave permission so that the author can change whatever he wants in the template section. Sounds great right?

It sounded awesome until the next day they login to their account to see the blog disappeared. Booom!!!!

What? Why did Blogger remove their blog? That was the first question that popped up in their mind.

"Congratulations dear! Your blog just got hijacked" - That is all I was able to tell when they came up with this to me. Unfortunately until this moment, they are not able to get the blog back. What are the take aways from this story?

Write and build your blog to the best. Never let it go.
Never invite a stranger to write in your blog. At least not an online stranger.
Never ever give Admin access to a person who is not even known to you in person.

All that said, secure not only your google account but all your online accounts and safe and happy blogging.

Blogger Language Confusions - Part 2

2019-09-24T17:50:00.001+05:30

An interesting query from one of the Blogger user whose Navbar has a different language than expected.

We earlier discussed that, it's the blog owner's choice to show what language they wish to see in Blogger blog. Read below,

How to Blog?: Blogger Language Confusions

However there's one more small confusion right there. What if the blog you are visiting has the old theme which has Navbar on the top like below?

Could you see the "More" button near the search box in the Navbar? This button is in English while the blog is in a different language.

Now, how can that happen?

Here's the confusion. Navbar although incorporated inside a blog, it is a part of Google products and not the blog. To confirm this, I went ahead and changed my Google account language.

How did I do that?

Go to https://myaccount.google.com
Navigate to Data & Personalisation > Scroll down to "General preferences for the web"
Click on "Language"
Click the Pencil icon near your "Default Language"
Change it to a different language. I chose my mother tongue, Tamil.

Before choosing Tamil

After choosing Tamil

Now, what happens to the Navbar language? It shouldn't change. That's what I assumed because it's inside a blog and the navbar will take Blog's language as default.

But surprisingly, it changes. Here you go,

Now, can you see the "More" button next to the search bar, it has changed to "மேலும்" as per Tamil which is my Google Account preference and not blog preference.

Note: If you have not signed in to any google account, Navbar should show English by default.

I hope we have got a new clarification amongst the existing language confusions in blogger.

Blogger in Draft says "Try the new Blogger!"

2019-09-10T14:03:00.002+05:30

It's been long time that I wrote something here. Interestingly there seems to be a new update in Blogger in Draft (https://draft.blogger.com).

Try the new Blogger! - at the bottom right

Clicking on it, Blogger shows a popup stating,

Blogger is gradually introducing some fresh pages that work well on mobile. Keep an eye in the coming months as these are rolled out. To start, check out Stats, Comments, and Theme

You click on Continue and it redirects. After redirect you get the all new UI. However the point to notice is, it lands in the Stats page.

Stats section - New UI

So, what's new about this UI? Just a couple of re-alignments, I thought. And then I happened to notice the hamburger icon on the top left near Blogger logo.

Clicking on it, the menu got hidden and then it occurred to me that there's really more to look into. So I made a resize to mobile width to see this,

Responsive UI of Stats section

Menu in Mobile view

MOBILE FRIENDLY, RESPONSIVE UI.

So this is it guys, since Blogger has already launched new themes in Responsive UI during the past years, looks like they've been working on bringing Blogger mobile view.

Now this is getting more exciting.

Is it just Stats page that got the smart responsive UI?
Not just Stats. Stats and Comments for now seems to have the new UI while the other sections remain the same.

How do I revert to classic UI?
First of all, it's a cool UI and works pretty much fine to my knowledge. So, no need for reverting. If it's really required, blogger has "Back to Classic Blogger" button at the bottom of the menu.

Please note that, this button is available only in Stats and Comments section which has got the new UI.

Being all that said, I and more other Blogger users will be happy to know that Blogger is slowly supporting mobile friendly UI. I am really excited and is looking forward to see the whole of Blogger moving to new section. Are you?

Kudos, Blogger team!

P.S: I am not going to take this more detailed as we have one other PE who has drafted it nicely. Please read -> Try out the new mobile-friendly Blogger! - peggyktc.com

Blogger profile confusions

2019-05-14T11:23:00.010+05:30

Since Google has closed it's social networking service called the Google+ for consumers, few products has some effect on it. One of them is our very own blogger.

We could see that update notification in our blogger dashboard as below,

Besides from the things gone as mentioned in Blogger's official blog post here -> An update on Google+ and Blogger, we have a confusion on profile that needs to be clarified. That is the reason why I am writing this down.

There are now two profiles,

Blogger profile
Google profile

Blogger profile - Where does this appear?

This appears in all of your blogs if you have your profile gadget added. You can see that on this blog in the top right,

How do I update this profile?

Go to https://blogger.com
Navigate to Settings > Scroll all the way down to General section.
Click on User profile in this section
You'll be navigated to https://www.blogger.com/edit-profile.g where you can edit your profile that appears on the blog.

Google profile - Where does this appear?

This appears in the top right of every Google product. Blogger isn't an exception.

You can notice that there are two different profiles. The one highlighted in red is Blogger profile that appears on my blog's sidebar and the one in orange is Google profile.

To update this Google profile, please click on Manage your Google Account button or visit https://aboutme.google.com/

Now, based on which profile requires change, please decide yourself.

Blogger description confusions

2018-05-31T11:24:00.010+05:30

Blogger, like the language confusions have one more confusion with respect to Blog description. We have two descriptions setup in Blogger.

Blog display description.
Blog search description.

Display Description is the description that appears when you visit your blog in the header under your blog title. For example, you could see the description of my blog,

This blog helps with Blogger tips, tricks and troubleshooting.

(Highlighted in red box)

This description is available in the following location of Blogger,

Settings > Basic > Description

Search description is the description that is made available on code. The open graph meta tag. This one appears only on the code and in turn in search and sharing descriptions. My blog search description is

Blogger tips, tricks & issues

When I share my blog URL on a social networking site, this is the description I see.

(Highlighted in yellow box)

This description settings can be found at,

Settings > Scroll down to Meta tags > Search Description

It could also be disabled if you have never turned this description on. You'll have to enable it.

Now go to settings and change the description as you wish.

Meet a spammer

2018-05-18T06:56:00.004+05:30

Let me start by a warning, This blogpost has nothing to do with howtoblog and is a story of a spammer.

Years ago we had to face a spammer in the forum(Probably during Pistachio?) who was very persistent. He was a link dropping spammer who kept sharing his blog URL under every reply in the forum and somewhere to his blogposts which merely had instructions from Blogger Help Centre.

It went as,

Thanks and Regards,
HIS NAME
HIS BLOG URL

Probably it was so difficult for TCs to make him go away as I happened to see him for months, spamming in the forum and one fine day he disappeared and never returned.

I happened to find him and interview him which I am writing down here,
So what happened to him?

Probably TCs reported him to the authority? He got locked out of his account and got the message,

Your account is blocked for spam. Please appeal to get your account back.

He then appealed and had a long week recovering the account. Then he started reading about spamming and actually understood what does a spam mean. He said,

I was new to the Internet and definitely to the forum. How would I know even a term called SPAM?

Fair enough question for a newbie. Isn't it? He abruptly stopped sharing his blog links and he continued to help users at the forum. Then he got a mentor, then TC +Chuck Croll.

One good thing about Chuck is he was never easy going. Meaning, he's very straight forward

the spammer mentioned.

As days passed, the spammer turned out to be a good helper at forum, became inactive due to personal reasons and 3 years later he again started contributing to the forum. After almost 10 months of contribution, he got promoted to be a Google Rising Star(now Silver product expert) at Blogger and Google Photos.

He attended the Top Contributor Program Meetups 2016 @ Google, Hyderabad. He added,

It was one of my dreams to attend this meetup when I started with blogger.

He chuckled and said,

In fact, the fun fact I mentioned about myself during the meetup was that I was a spammer when I got started

He became a Google Top Contributor(now Gold Product expert) months after the meetup at Blogger and then at Photos and is still a TC.

This transformation of Spammer to TC(like Rags to Riches) became possible only because I got the right mentor and right environment. Had at least one of the TCs raised concern about my promotion to a Rising Star just because I was a spammer then, I wouldn't have been what I am today.

Yes, the spammer I interviewed is myself and I used to tag under all forum replies as follows,

Thanks & Regards,
Kesava Krishnan .M
http://www.krishnainfotron.blogspot.com

Thanks to Chuck Croll and all other TCs who helped me in making it possible.

To Spammers out there: If at all you are sharing your blog links without knowing you are spamming, stop it and continue helping. A day will come when you'd have the authority to post links to your blog at forum and you'll definitely be responsible.

Blogger Language Confusions

2018-05-04T06:42:00.021+05:30

The Blogger help community, recently had an issue where there was a great confusion on Blogger Platform language and Blogger Blog language. So I decided to go ahead and write in detail about it.

There are two important terms here to begin with,

Blogger Platform
Blogger Blog

Blogger Platform is what you see when you go to Blogger platform. The operating system that helps you write and manage your blogs on Blogger.

That is what I see when I go to my Blogger Platform,

Blogger Blog is what you see when you go to the URL of the blog you created and is managing at Blogger Platform.

My Blogger Blog URL is https://howtoblog.krishnainfotron.com which will show me my blog as below,

That said, let's discuss about the language confusions.

Blogger Platform language is the language you would see when you go to https://blogger.com. This language earlier was preferable specifically for blogger. (i.e) You can have a separate language chosen for Blogger platform irrespective of other Google products.

With the release of the previous user interface, blogger removed this Blogger specific language preference and aligned it with Google language preference. Therefore this setting is now available directly at Google accounts and not accessible anywhere through Blogger New user interface.

You can go to Google accounts and find this setting,

Go to https://accounts.google.com
Under "Privacy & personalisation", click on "Manage your data & personalisation"
Scroll down to "General preferences for the web" and click on Language.
Or save yourself from all the trouble and click on this link which takes you directly -> https://www.blogger.com/go/language

It takes you to a settings page(as shown below) where you can choose a language which will become the default language for all products including blogger.

Are you done saving your language? Please refresh your page at blogger.com to see your language preference enabled.

Blogger Blog language is the language that you see in your blog when you go to your blog URL. This setting is blog specific. (i.e) You can have different blogs in different languages.

The setting for this can be found at,

Settings > Basic > Blog language

You can see the following screen,

You can choose a different language here which will affect your blog as shown below,

That's the difference between a platform language and blog language. Users had the confusion between platform language setting and blog language setting which should be clear by now.

Update:

Changing Blogger Platform language temporarily.

We can also change the language of Blogger platform by using the language parameters while visiting blogger.com.

As per one of the fellow product expert Arkadiusz's advice, you can use the workaround mentioned in his comment which I am detailing as well,

Consider you want to change the Blogger Platform's language only for a while. In that case you can simply add the language's parameter along with blogger.com. For instance consider you want to change your language to Tamil(which is my mother tongue). I'd go to the following URL,

https://www.blogger.com/?hl=ta

Then I'd see a screen like below,

Similarly you can change to whatever language you want to change to. I managed to find a Google site written by someone with Google Language Codes for each language. Please read through here -> Google Web Interface and Search Language Codes. I think that should help you with finding your language code.

Feel free to comment on the article for any clarifications.

DWI - Not all the time "Authoritative" helps

2017-01-31T19:15:00.012+05:30

We already saw the common issues when custom domain is involved where we saw a tool called DWI - Dig Web Interface which will help us get DNS records of a particular domain.

Today while coming across a forum thread, got to notice a strange thing ever. It's not the first time however. If you refer the article about corrupted DNS, the blog URL used had similar issue.

It is normally recommended to use "Authoritative" under Name servers when digging a domain. However this doesn't always workout.

Let us consider the following URL in issue.

newsblok.com
www.newsblok.com

The actual authoritative Dig Log gives us the following results,

newsblok.com@dns1.name-services.com.:

/usr/bin/dig: couldn't get address for 'dns1.name-services.com.': failure

newsblok.com@dns2.name-services.com.:

/usr/bin/dig: couldn't get address for 'dns2.name-services.com.': failure

newsblok.com@dns3.name-services.com.:

/usr/bin/dig: couldn't get address for 'dns3.name-services.com.': failure

newsblok.com@dns4.name-services.com.:

/usr/bin/dig: couldn't get address for 'dns4.name-services.com.': failure

newsblok.com@dns5.name-services.com.:

/usr/bin/dig: couldn't get address for 'dns5.name-services.com.': failure

http://digwebinterface.com/?hostnames=newsblok.com%0D%0Awww.newsblok.com&type=&useresolver=8.8.4.4&ns=auth&nameservers=

Here's a screenshot:

So I went ahead and changed it to "Resolver: Default" and got the following result.

newsblok.com@8.8.4.4 (Default):
newsblok.com.  1799 IN A 216.239.32.21
newsblok.com.  1799 IN A 216.239.36.21
newsblok.com.  1799 IN A 216.239.34.21
newsblok.com.  1799 IN A 216.239.38.21

www.newsblok.com@8.8.4.4 (Default):
www.newsblok.com. 1773 IN CNAME ghs.google.com.
ghs.google.com.  86373 IN CNAME ghs.l.google.com.
ghs.l.google.com. 273 IN A 216.58.192.179

http://digwebinterface.com/?hostnames=newsblok.com%0D%0Awww.newsblok.com&type=&ns=resolver&useresolver=8.8.4.4&nameservers=

Here's a screenshot:

Of these, the ones highlighted in red can be ignored as resolver will give us all the URL mapping.

So it could be inferred as DWI first reads ghs.google.com and when looking for ghs.google.com it finds ghs.l.google.com and when looking for ghs.l.google.com it finds the IP Address 216.58.192.179.

To avoid this kind of confusion only usually "Authoritative" is used. Now that the option is ruled out we have to infer it this way.

As far as this issue is concerned, we have no additional A records or CName records which means the DNS is setup correctly.

Also this confirms that we need to check if DNS is corrupted only in few cases.

Gadget in mobile home page alone

2017-01-12T11:42:00.002+05:30

We had a query in the forum on how to make a gadget appear only on mobile home page. So thought of sharing it.

(Note - This post is for Blogger's first generation classic themes and not applicable if you are on a new generation responsive templates)

Also Read: How to make a gadget appear only in Home page or the page you wish?

Sign in to blogger.
First Backup your blogger template.
Go to Layout.
Add a HTML/Java Script gadget that you want to make appear only in homepage of your blog and title it as homeonly(for qucik reference)
Go to Dashboard > Template > Edit HTML.
Press Ctrl + F and find homeonly. You will see a code as follows.

<b:section class='main' id='main' preferred='no'>
<b:widget id='HTML1' locked='false' title='homeonly' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

<data:content/>
</div>
Replace the code highlighted in yellow above, with the following codes respectively.
1. <b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:title/></b:if>
2. <b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:content/></b:if>
Now add a mobile='yes' as highlighted below so that the gadget actually appears in mobile template and the code in Step 5 will look as below.

<b:section class='main' id='main' preferred='no'>
<b:widget id='HTML1' locked='false' title='homeonly' type='HTML' mobile='yes'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:title/></b:if></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:blog.pageTitle == data:blog.title and data:blog.isMobile'><data:content/></b:if>
</div>
Save Template. You got it!

Now when you go to your blog on mobile template, the gadget will appear and on desktop it won't.

Common issues where custom domain is involved.

2017-01-05T13:56:00.015+05:30

In BHF, one of the common issues we face is setting up custom domain. We already have a lot of information on how to setup a custom domain. So I am going to go ahead and write on the troubleshooting tips for custom domain.

This article is dedicated to Chuck Croll who has been/is a great mentor to me since the beginning.

So let's start with the first and foremost golden rule of Custom domain troubleshooting.

Any issue where you have custom domains involved, first check if the custom domain is setup properly.

Some common issues where custom domain are involved and you'll not know DNS was causing the trouble are,

You'll be able to see the custom domain while some of your friends/users will not be able to. In this case, you shall use DWI to see if the DNS addresses are righteous.
Cannot get thumbnail on Facebook. What can I do?

So what? Use Facebook OG Object Debugger is what most people think.
There comes the case, Inspite of using Facebook OG Object Debugger, I am not able to get thumbnail. So What now? Simple. Use DWI. It could be incorrect DNS Setup.

And the list goes on.

What on earth is DWI?
DWI is expanded as DigWebInterface which is an online DNS Lookup tool which can be found at http://www.digwebinterface.com

The detailed article on how to use DWI and what is the required custom domain setup for blogger is written here -> http://howtoblog.krishnainfotron.com/2017/01/how-to-use-dwi.html

I could not find anything in the DWI. What now?

The moment you realise DWI gives you back SOA records or you cannot see any CName/A records, the next thing to do is a Who Is lookup.

What is Who Is Lookup?
Who Is lookup gives exactly what the name means. "Who Is". In addition to Who Is, this will give few useful information like,

Registrar Information
Registered date and expiry information

and so on.

A detailed writeup of Who Is lookup and troubleshooting can be read through here -> http://howtoblog.krishnainfotron.com/2017/01/who-is-lookup.html

I did not get a proper DNS response and no issues with Who Is. What do I do now?
In this case the next thing could be a Corrupt DNS. If the DNS is corrupted, none of the above troubleshooting could help.

In that matter we need to know two important things.

How do I know my DNS is corrupt?
Where do I report about my corrupt DNS?

A detailed writeup on troubleshooting corrupt DNS could be found here -> http://howtoblog.krishnainfotron.com/2017/01/dns-is-corrupted-how-do-i-know-and-what.html

I cannot find a DNS Zone to edit. What can I do?
When you cannot find a DNS zone to edit, there could be two reasons,

You do not know where it is.
There really isn't one.

When it is Case 1, you have to figure out where your DNS Zone editor is available or the best thing is to contact your registrar.

When it is Case 2, it could be that you're using Google domains to which the integration is different. Please read the support article of Google domains -> Integrate Google domains with Blogger.

DNS is corrupted. How do I know and What to do?

2017-01-05T13:56:00.013+05:30

As far as custom domain troubleshooting is concerned, it's not always there'll be issues with,

DNS Records
Who Is Issues like

Domain expiration
clientHold

There is a case where the DNS could be corrupted. In that matter we need to know two important things.

How do I know my DNS is corrupt?
Where do I report about my corrupt DNS?

How do I know my DNS is corrupt?
The diagnosis on a custom domain issue with DWI will tell you there could be an issue in DNS while WhoIs Lookup will confirm. I had to face one such thread whose diagnosis steps are shown below,

The above is the dig log of the custom URL which gave me very weird results. I went ahead and checked for expiration/non registered URL/clientHold at Who Is Lookup,

Registry Domain ID: 1619884945_DOMAIN_COM-VRSN
Registrar WHOIS Server: whois.enom.com
Registrar URL: www.enom.com
Updated Date: 2016-10-12T03:07:49.00Z
Creation Date: 2010-10-11T18:39:00.00Z
Registrar Registration Expiration Date: 2016-10-11T17:39:26.00Z
Registrar: ENOM, INC.
Registrar IANA ID: 48
Domain Status: clientTransferProhibited https://www.icann.org/epp#clientTransferProhibited

The domain is really registered and that is the very reason we get these details. This confirmed there is no issues with DWI or WhoIs. Now comes the third tool IntoDNS.

What is IntoDNS?
IntoDNS is again an online tool that helps us check if the DNS is healthy.

How to use Into DNS?
1. Go to http://www.intodns.com
2. Provide your naked domain URL and Report as shown below,

3. As you scroll down, you might see an error with red highlights as shown below,

This will finally tell you your DNS is corrupt.

Where do I report about my corrupt DNS?
The DNS is corrupt and the DNS is offered to you by your registrar. Therefore as you have enough fact that there's an issue at the registrar's end, you may please go ahead and contact the registrar sharing screen shots and links to IntoDNS.

To know how to find who is your registrar, do a Who Is Lookup.

Who Is Lookup

2017-01-05T13:51:00.004+05:30

Again as a part of Custom Domain Troubleshooting, we do Who Is lookup which gives us a handful of information.

What is Who Is Lookup?

Who Is lookup gives exactly what the name means. "Who Is". In addition to Who Is, this will give few useful information like,

Registrar Information
Registered date and expiry information

and so on.

How to do Who Is Lookup?

1. Go to http://whois.domaintools.com/
2. Give the naked domain URL in the search box as shown below and search.

3. This will give the following result from which we can infer a few things,

This could be seen when you scroll down the result page.

What can be inferred from a Who is lookup?

1. Registrar Information

Registrar WHOIS Server: whois.enom.com
Registrar URL: www.enom.com
Registrar: ENOM, INC.
Registrar IANA ID: 48
Reseller: NAMECHEAP.COM

This helps us know whom the registrar of our domain is so that we could contact them for support.

2. Expiry Information

Updated Date: 2017-01-01T18:53:06.00Z
Creation Date: 2017-01-02T02:53:00.00Z
Registrar Registration Expiration Date: 2018-01-02T02:53:00.00Z

When a record is in SOA status, it could be that the domain lapsed renewal time and you did not notice it. There is a second case where you could find SOA records which is mentioned below.

3. Domain Status

Domain Status: clientTransferProhibited https://www.icann.org/epp#clientTransferProhibited

In the domain status, if you happen to see,

Domain Status: clientHold https://www.icann.org/epp#clientHold

It means that you have missed out an Email from your registrar which wanted you to confirm the ownership. To solve this you can do two things,

Look for an email from the registrar
Contact your registrar through their support forums/support calls.

Here's a screen shot of https://www.icann.org/epp#clientHold

How to use DWI?

2017-01-05T13:43:00.009+05:30

In BHF, when it comes to custom domain, I or Chuck or any other expert mentioning a dig log URL mentioned most of the times as DWI.

What on earth is DWI?
DWI is expanded as DigWebInterface which is an online DNS Lookup tool.

How to use DWI?
1. Go to https://digwebinterface.com/

In the Hostnames or IP addresses text box, enter your full custom domain URL and naked domain URL as shown below and choose "Authoritative" under Nameservers list. (However not in all the cases, "Authoritative" works)

After doing this, click on Dig.

When the dig is complete, you should expect the following,

(i.e) 4 A records and 1 CName record.

@        1799    IN    A    216.239.36.21
@        1799    IN    A    216.239.32.21
@        1799    IN    A    216.239.34.21
@        1799    IN    A    216.239.38.21

www 1800 IN CNAME ghs.google.com.

When you see an extra A record or a different CName record than this, or a different A record than these 4, please remove them and the above 4. This should probably fix the issue.

P.S: The blog URL I have used belongs to a Blogger user who reported in the forum for an issue.

Moving from Wordpress to Blogger

2016-11-11T10:40:00.004+05:30

We receive a few requests to move their wordpress blogs to blogger. The steps are quite simple and easy to follow.

Kindly follow instructions below,

Export/Download content from WordPress.
You'll get a file downloaded. Now goto -> https://wordpress-to-blogger-converter.appspot.com/
Upload the file you downloaded from wordpress here by clicking "Browse" => "Convert"
This will give you an XML file.

Now, in blogger,

Go to Dashboard > Settings
Scroll down to Manage blog section
Click on Import content
In the appearing popup window, please check reCaptcha and click on import.
A file upload prompt will appear. Please choose your file and upload.

There you go. That should probably be it.

2016-08-10T12:28:00.001+05:30

So, In the BHF we had an user who came up with this idea of having related posts link under all posts: [MaapsWorld] How to use Lambda expression. Therefore I planned to add some salt and pepper to it and write an article on it.

When it comes to related posts, first thing is that there is no way of automating this one easily. So we'll have half automation and half manual works on maintaining this gadget.

The steps in implementing this gadget is split into three,

Creating posts with proper Labels.
Altering XML
Updating(if in case).

First of all, Back up your template and then begin.

Creating posts with proper Labels

So blogger/blogger bot or the codes we write cannot easily identify the related posts and we have to leave a clue to find it. That is where Labels help us. Create posts with labels so as to categorize.

For example,

I write all the posts that are gadget customization, css addition etc., with label named "Blogger Customizations"
Similarly issues under the label "Blogger Issues"
Some simple tricks under "Blogger Tricks"

In the same way, categorize your posts.

Altering XML

1. Go to blogger.com Dashboard > Themes > Edit HTML [Classic Blogger]
1. Go to blogger.com Dashboard > Themes > Options(three dots on the right) > Edit HTML [Modern Blogger]
2. In the appearing page, click randomly somewhere on the box which contains codes.
3. Press Ctrl + F and find, <data:post.body/>
4. Right after the found code, place the following code,

<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues"])'>
<b>See related posts:</b>
</b:if>


<ul style='text-align: left;'>


<b:if cond='data:post.labels any (label => label.name == "Blogger Issues")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Blogger%20Issues"'>Blogger Issues</a></li>
</b:if>

</ul>

5. In the above code, change the ones highlighted in green to the label you require and it's link respectively.

Updating

Well. Adding a number of label links under read more is up to your requirement. For example, if I have to add another label under recent posts, I would just add the following code,

<b:if cond='data:post.labels any (label => label.name == "Facebook")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Facebook"'>Blogger Issues</a></li>
</b:if>

and add Facebook Label to the list of all labels and the final code will look like below,

<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook"])'>
<b>See related posts:</b>
</b:if>


<ul style='text-align: left;'>


<b:if cond='data:post.labels any (label => label.name == "Blogger Issues")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Blogger%20Issues"'>Blogger Issues</a></li>
</b:if>


<b:if cond='data:post.labels any (label => label.name == "Facebook")'>
<li><a expr:href='data:blog.homepageurl + "/search/label/Facebook"'>Blogger Issues</a></li>
</b:if>

</ul>

and now, right under my post, you could see this widget working.

I have added a number of labels in the code so that,

The post you're reading right now has Blogger Customizations & Blogger Tricks under See related posts.
At the same time, this post -> Facebook OG Object Debugger has Blogger Issues & Facebook under See related Posts
Whereas this post -> Backing up Template does not have the widget at all because it has no related label that I have in my code.

Oh my god, I do not see "See related posts" in some blog posts. What would I do?

Some would see the gadget appearing but not the title, See related posts. This means that you have not added the label in the list of all labels. For example, if I add a label XML to the code and forget to add it in the list(see below code), then for the blog posts with tag XML, you'll be able to see the list of related posts but not it's title.

<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook"])'>
<b>See related posts:</b>
</b:if>

In this code, if you're not adding the new tag and it is the only tag available to that post and this code in common, you'll not see "See related posts" text showing up. To correct it, we should add the tag like below,

<b:if cond='data:post.labels any (label => label.name in ["Blogger Issues", "Facebook", "XML"])'>
<b>See related posts:</b>
</b:if>

Update 2
Instead of writing multiple conditional tags, this can be written with only one loop tag. Read more here: Related posts. Looping with Multiple Labels

I hope this covers. Happy tweaking.

Blogger & Facebook OG object debugger

2016-08-04T23:50:00.012+05:30

Facebook or any network that gets your URL and displays preview, actually scrapes the URL through a system developed by Facebook called the open graph.

They might look something like this in the page's source,

Therefore, while sharing a link for the first time on facebook, the object debugger stores meta information like these in its cache so when you share again, instead of scraping the URL, it takes from its own cache. After a while, when the cache expires, it scrapes again. So a shared URL even upon changing the description/image/title, does not get affected immediately.

It doesn't mean, there's no other way other than to wait. To overcome this and see quicker results of custom description/ changing image/ changing blog or post title, Facebook has a facility called the Open Graph Object Debugger.

How to use OG Object Debugger?

Go to the Open Graph Object Debugger,
In the input URL box, provide your blog post URL
Click on Debug.
If the URL was never shared to facebook, it will ask to Fetch new information.
If the URL is already shared, it will show all the scraped details. If they are incorrect, please click on Scrape again.
When this is done, try sharing the post on your Facebook News feed.

This time you should get the proper and newly scrapped information.

How to make thumbnail Image of a post, link to its page?

2013-03-09T19:06:00.005+05:30

In Blogger help forum, we had many asking queries regarding how to make a post's thumbnail appear on homepage and get it linked to the post page. So, Let us see how to do that.

(Note - This post is for Blogger's first generation classic themes and not applicable if you are on a new generation responsive templates)

First Backup your template so that you shall restore it if the code doesn't work on your template.
Go to Dashboard > Template > Edit HTML
Press Ctrl + F and find data:post.body
Paste the following code just above the found code.

<b:if cond='data:blog.url != data:post.url'>

<b:if cond='data:post.thumbnailUrl'>

<div class='Image'>

<a expr:href='data:post.url'>

<img expr:src='data:post.thumbnailUrl' style='float:right border-radius:50px; border:5px solid black;height:65px;width:65px;'/>
</a>
</div>

</b:if>
</b:if>
Click Save Template and it is set.

Social Sharing icons under all posts

2012-08-10T08:04:00.003+05:30

The following article will help you get a social sharing widget under each blog post as I have in my blog.

It consists of four parts of template Editing :-

Adding CSS.
Adding XML.

First Backup your template.

Adding CSS

Goto Dashboard > Template > Customise > Advanced > Add CSS
Paste the following code in the appearing box,

.sharebutton{
padding:10px;
background-color:transparent;
border-radius:5px;
box-shadow:0px 0px 3px rgba(0,0,0,0.3);
border-top:5px solid black;
}
.share, .share:hover{
cursor:pointer;
padding:5px 10px;
box-shadow:0px 0px 3px rgba(0,0,0,0.3);
color:black;
text-decoration:none;
}
.link_share{
width:100%;padding-bottom:3px;border:3px solid transparent;;border-radius:2px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
-goog-ms-transition-duration: 1s;
transition-duration: 1s;
}
.link_share:focus{
border-bottom:3px solid black;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
-goog-ms-transition-duration: 1s;
transition-duration: 1s;
}

Adding XML

Press Ctrl + F and Find <b:if cond='data:post.hasJumpLink'>
The code around it will look like,

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Right after that place the below code,
<p class='sharebutton'><b>Share this post</b><br/><br/>

<span class='post-icons'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' height='36' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcnUmMyStCZCr23NNaO0IXSUp154VHzGvv49eXhSKaRyytpxh82iKP_cNxTjcZfl0NZ5ErbdNUk504nkp8zsw8-2mig5MXNe_johDiIxtPZ_HWO07dxZO5_YmLeDrKG5ojkUSQRz-g0dI/s200/facebook.png' width='36'/></a>
<a expr:href='"https://twitter.com/intent/tweet?button_hashtag=howtoblog&text=" + data:post.url' target='_blank' title='Tweet this'><img border='0' class='icon-action' height='36' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LBiwnW55czl758IX_7vhRa68x58pSby17pKkKRFdsobUQTcgq4ZXQZ1UwbptXf05iDjRwWhQmWOEBNw01eQ3raA9oyqfywMLPNpAW7yY7jbytmDk6aaPW-9V9FCVodI5MBTNV6kdxUQ/s512/Twitter%2520Icon.png' width='36'/></a>
<br/><br/>
<krish style='width:100%;font-weight:bold;font-style:italic;'>Share Link : <input class='link_share' expr:value='data:post.url' onfocus='this.select()' type='text'/></krish>
</span>

<font size='2'>Click <a href='http://howtoblog.krishnainfotron.com/2012/08/social-book-marking-buttons-in-all.html'>here</a> for <b>Social sharing icons V2</b>.</font>
</p><br/>

After completing these, click on "Save Template" and view your blog. You should see the social sharing icons appearing on the template.

Saaga Template

2012-07-29T09:24:00.000+05:30

After many thoughts, releasing our first template.
Saaga Template.
This template is dedicated to my learning process of CSS.

Specialty and Instructions:-

Download Links:-

Demo link:- http://www.saagatemplate.blogspot.com/

Custom description on Sharing

2012-06-23T12:27:00.006+05:30

While sharing on Facebook or Twitter or any site/app where the URL's preview is rendered, we would see description of the page being shared. Now, Blogger added a feature of making that description to be in the way you wish.

What is a search description?
Search descriptions are the ones that are shown when your blog URL is scrapped by a search engine or a social network. Only when this description is enabled, each blog post can have a customised descriptions.

How to enable search description?

Go to Dashboard > Settings
Scroll all the way down to "Meta Tags"
In there, please use the toggle switch near "Enable search description" to turn on search description.
Please provide a blog description here that should appear on a search engine or a social network while sharing your blog URL.

Some people confuse this description with the blog's display description on the top of settings page which will be shown in the page but will not be scrapped while sharing on social networking sites.

How to add custom description?

Go to Dashboard > Posts
Create or choose a blog post to edit.
In the right side, down below click on "Search description" to toggle it open.
In the appearing text box, write a description that is specific to that particular blog article.
Update or Publish the post.

Even after enabling & adding custom search description, if you don't see your description while sharing on Facebook, I think you will have to scrape your URL using Facebook's open graph object debugger or the Twitter card previewer.