Blogger Page and Post Titles Style for Better SEO

Definitely content is the king, but how we present the content to the people and also the search bots is an important aspect. In this post we will talk about how to display page titles of your blog in order to get highest visibility on search engines like Google.

SEO short of Search Engine Optimization is a broad topic on how to maintain and create a website / blog that performs well enough with search engine bots so it comes up on user queries at the best ranking possible. 

That doesn't mean SEO is a very complicated topic, yet applying it might be somewhat require a learning curve since editing code and adding functionalities to websites require one to be familiar with codes. 

What's with the page title of Blogger Blogs?

Skip to the next section to learn how to optimize the blog's page title, to learn more about it read below.

The page title we are talking about is the document title of a web page that appears in most browsers in the tab - in HTML it is situated in the HEAD of a web page as
<title>Blog Title - Some Example Page</title>

Majority of Blogger templates (expect for the themes that has been recently introduced) have a very unconventional and non-optimized for search way of display the page title on posts in Blogger blogs.

Each of your posts is a different web page on your blog, and it is important that all of them are optimized for SEO, primary focus should be on the content, and another important aspect, which we are discussing here, is the page title, it's the part that appears on search engine's results.

Check this and ask yourself, which one gives a human being more detail about the search result for the term "How to add CSS to Blogger Blogs"?



Search engines wants values small but descriptive page titles, it is a bad idea to take up a significant amount of space in your page title with your blog's title.

A page title on posts page can be and generally are consisted of two parts, "The post title - The Blog Title", the problem with many Blogger themes / templates are that it puts the blog title first even on post pages, so if one has a blog named "Alison's Travel Photography Blog" a blog post on the blog will have a page title like "Alison's Travel Photography Blog : This Is The Title of The Post"

We are just going to optimize this for search in Blogger.

Optimizing Page Title for Search Engines

This is a very small change to make though it can make significant amount of difference in your search rankings and we recommend you to do this if your page titles aren't optimized yet.

Blogger has launched new themes recently which already has better page title than the old ones, but if you are using a third-party template or Blogger's default templates follow the steps below.

For Normal Blogger Templates and Third-Party Templates

It is recommended that you take a backup of your template before proceeding. 

The following steps are for normal blogger templates that you can choose from the theme selection area in Blogger or third-party templates based on those templates.

1. Go to your Blogger Dashboard (https://www.blogger.com)
2. On the blog's dashboard, go to the Theme section
   
   
3. When you are in the Theme section, click on the "Edit HTML" button under your blog's preview.
   
4. After the template code appears on the screen, focus in the template code area and hit CTRL+F / ⌘ + f and search for the following piece of code, tip: only enter <title> should bring this up.
   
   <title><data:blog.pageTitle/></title>
   
   
5. Delete the line of code that found in the last step, and replace it with this code:
   
   

   <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <title><data:blog.title/></title>
     <b:else/>
       <title><data:blog.pageName/> | <data:blog.title/></title>
   </b:if>
   

   
   
6. Save the template and visit your blog. Check your page's title in the browser's tab to see if it is SEO optimized or not. 

The "|" is a character that will separate your current page name and the main blog title, i.e "My Blog | An example blog post title" or "Stramaxon | How to add CSS" etc. 

If you like you can change that to something else such as "/", ":", "||". It is a preference but may also have some effect on SEO, so pick a different one only when you are sure what you are doing. 

EXTRA: Adding Blog's Tagline in Title

The instructions in the section above works great even without modifications but if you like you can add a tag line of your blog in the page title so that it appears in the browser's tab and most importantly in

Benefit of adding a tag line: If your blog's title is short, then adding a tag line makes fill up the left space. Your blog's results will look better and your reader can tell what your blog is about right from the search itself.

The code that you were given produces the result like A, and the following will produce the result B. It is highly recommended you add a tag line for your blog if your blog title is short.

Here's the code (similar to the code in the main steps, only added the description part):

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/> - Enter your Blogs Tagline</title>
  <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Copy the code and paste it first in a notepad editor, and replace the part Enter your Blogs Tagline with your own tag line: Keep it short and descriptive, it is what will appear in searches along with your blog title, so make it attractive, short and simple.

The steps to add this code is similar to the steps given in the previous section.

Search Optimization and Results

Following this tutorial and making this change to your blog may or may not give you immediate results. To improve your search visibility you still have to post genuine and content that your readers would like to read, this tutorial helps you make your blog's visibility better for what you already have and going to post in the future on your blog. 

If you have questions or have any suggestions then please do comment down below.


The tutorial will be updated to list steps for new Blogger themes...

Solving Blogger Template Error for AdSense Ad Implementation

If you are recently enrolled in AdSense and you are trying to implement ad code that you got from AdSense directly in your Blog's template you might have run into problems, we will walk you through fixing it.



If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)

Demonstration of the ad code in Blogger template and the error that occurs

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

OR

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.

In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme

The error that you might be getting when trying to add these code snippet in your template is

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. 

Fixing the error

There's nothing wrong with the code, according to HTML5's standard it is an error free code, but Blogger's template / thee is coded in XML and it fails to parse it because of a small part in the codes

Right now we have (note that we are only displaying the part of code that requires modification, rest should be left untouched),

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.

<script async="async" src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

Notice the difference between the two snippets. We have set it async="async", that makes it comply with XML thus Blogger accepts it and saves the template without any error.

That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)

How to Backup Your Blogger Theme / Template

A step-by-step guide on backing up a Blogger.com Theme / Template for the newest Blogger UI updates.

We have another guide on backing up the template in Blogger but since the roll-out of the newer UI and the changes in the design we are updating the steps with a new tutorial for relevant visual demos.

You can still check the old tutorial on backing up the template here though it is not relevant anymore : http://www.stramaxon.com/2012/03/backup-your-template-of-your-blogger.html

Why back-up a template / theme ?

In the Blogger environment we often want to add a new widget or a functionality in our blog and tutorials ask us to make changes to our templates, it is important we have a backed-up template so if anything goes wrong we can always fallback to the previous version.

There are more reason why -

1. Making changes to Blogger templates to add functionality or change design
2. When trying out new themes / template
3. Using the template / theme again on another blogger blog

Read below for steps on backing up a template / theme, note that we are going to use the terms "template" and "theme" interchangeably. 

Backing Up the Template / Theme on BlogSpot

Let's start with backing up the template.

1. Log-into your Blogger account to go to your Dashboard. 
2. From the blog's drop-down list choose the blog
   
   
3. On the left pane choose the "Theme" option
   
   
4. In the Theme section page, click on the "Backup / Restore" button on the top right corner of the page
   
   
5. A dialog box may appear, to download the template backup click on the orange "Download" button as shown below -
   
   
6. A file with a name similar to theme-2887119284088758674.xml will be downloaded. This file is the backup template / theme file, it can be used to recover your template / theme on Blogger. 

That's it, save the theme .xml file at a safe place where you can access it in the future in case you have a broken template. Make it a practice to take a backup of the template before making any changes to it. 

Restoring the Template / Theme Using the XML file

In the previous section you learn how to download a backup of your template. Restoring the template is simple as well, 

1. in the last section follow till Step #4
2. Now in the dialog box that opens, which looks like this click "Choose file" (maybe labelled differently on different browsers) -
   
   
3. Browse to the template's XML file and then click on "Upload" 
4. Once the upload finishes your template will be restored. 

That's it. Do let us know if you have any questions or suggestions regarding this tutorial. 

Set Mobile Browser Theme Color for Blogger Blogs

More people now loves reading on the go, be it a news article or a travel blog, almost everyone's first choice for reading blogs and browsing social media sites are smartphones. Same goes for your readers, many may love reading on their smartphones, and setting a theme color would make your Blogger blog stand out in the crowd.


The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.

If you use Chrome you might have noticed that  upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.

Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.

Setting Theme Color on your Blogger Blog

By default if you visit your blog on a mobile browser, here Chrome, you will see the default light grey color on the top bar, and that looks boring.

Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.

Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.

Before we proceed, copy this line of code -

<meta name="theme-color" content="#4285f4"/>

1. Now, go to your Blogger Dashboard and select your blog. 
2. Click on the "Template" option in the left panel
3. Once the section is loaded, you will see a button with "Edit HTML" label, click on it to open the template editor.
4. Inside the template editor hitCTRL+F  / ⌘ + F and search for <head>, it should be on the top already so you will find it easily
   
   
   
5. Now paste the code we copied before immediately on the next line of <head>



Once the code is at place it should look similar to the screenshot above. Now click on "Save template" on the screen and then load your blog in Chrome browser on your smartphone. You will now see that the top bar of Chrome has turned into another color other than the default light grey color.

Set your desired color

You may of course want to set a color of your choice, the one that would be set in the default code provided in the tutorial you will get a dark blue color.

To change the color that is set you have to make edit in the code that you use, this is the code -

<meta name="theme-color" content="#4285f4"/>

The yellow highlighted text #4285f4 (without the quotes) is the hex value of the color, in HTML colors also has hex values. If you aren't sure what is the hex value of the color you want, go to http://www.color-hex.com/ to choose the color and get your desired color's hex value. Then replace the yellow highlighted part with your own.

For example, if we want a certain shade of green, which has the hex value #215C03, we modify our code to this

<meta name="theme-color" content="#215C03"/>

That is simple. All you have to do is replace the hex value in the code with your desired color and place it in the template by following the steps in the previous section.

It's all. Impress your readers by doing what most Blogger blog owners don't think about.

Comment on the post if you like this, share it with your friends and family for them to make their blog look pretty as well. For any questions or suggestions feel free to comment.

Where to Find Blogger App for iOS

If you have been looking for the Blogger app on your iOS device then you are out of luck. Blogger took down its official iOS app and stopped supporting it and its been a pretty while.

There are many Blogger users who needs to update and post to their blog on a regular basis, from their smartphone and it is very inconvenient without an app to do that. And especially now that smartphone users are the majority, Blogger lags behind in providing an official app, which is not a great thing for such a popular Blogging platform.

Straightforward answer to the question is that, Blogger does not have any official app for smartphones. That's the sad and bitter truth, the good news is that there are tons of other apps on the app store available as well as other workaround to access Blogger on phones.

Use Blogger with Chrome

If you use Chrome you can access the full desktop version dashboard of your blogger account directly on your phone. The UI is the same as it is on desktop browsers thus there is nothing new to learn to get started. 

Download Google Chrome browser on your iOS device, go to this page to download Google Chrome on your device. Set it up, sign-in with your Google account and you are good to go. 

Simply access https://www.blogger.com in Chrome and you will see all your blogs in the dashboard, from there on you can add new post, edit them and change blog settings if you wish. It is basically the same as use on a desktop, only on a relatively smaller screen. You need to get used to pinch-zoom in and out, it takes a while but it is worth it.

Other third party app 

We do not guarantee the performance and usability of these apps. Check the reviews before you try them.

BlogGo for Blogger 






BlogTouch Pro (for Blogspot Blogger) 





Right now there aren't a lot of high quality apps for Blogger in the app store, but these are the best based on user reviews.



If you have any questions regarding Blogger or these apps, do let us know in the comments below. 

Spoiler Content Box for Posts in Blogger Blogs

It is difficult to warn users about possible spoilers in an article, if you are a blogger who blogs about TV shows, movies or books which are some common subjects of spoilers for its audience. Today you will learn how to implement a simple technique to handle spoiler contents on your blog posts.

Before you proceed any further you want to make sure that this is what you want to have as a feature on your blog, so try this live demo here



The best thing is that you don't have to write a lot of stuff to include it into your post every time, once you set it up, you just need the text content which is probably a spoiler, into a line of HTML which we will provide in the tutorial below.

Spoiler: This is easy to add to your blog!! See this.

It is a little addition, but we have created it to work on any kind of device a reader might be using so they get the best experience on your blog and keep themselves away from spoilers if they are unaware, following are some features worth noting

1. Almost no work to do when adding these Spoiler box in your blog posts. 
2. Works on Blogger, WordPress, basically it is all HTML and CSS, thus works perfectly fine on any kind of website. The tutorial is meant for Blogger though. 
3. Your readers use mobile devices to read your blog? No problem, we got you covered, they just need to tap the boxes to show the hidden content
4. Different colors! Match it with your blog's color scheme. 

Let's Begin The Tutorial

You are here, it means you have made up your mind and would like to continue adding it to your blogger blog (or probably other sites like WP). Before we begin these are some steps you should follow:

• Backup your Blogger Template - In case anything goes wrong you can restore it to the way it was. 
• Open a plain text editor in your computer (Notepad or TextEdit, if you have a code editor then it is a plus but that's optional!)
• Coffee or tea? You choose :)

This tutorial is split into two parts, adding the CSS and then setting up the HTML, these are the only two things that you have to go through and we will give you a small hints about what's going on with each part so you don't feel lost. 

Adding the CSS

CSS is the language used on the web to style things on a website, it plays a major role in our spoiler content box, as it is the back-bone of how our spoiler content show/hide box is going to work.

Following is the CSS code we are going to use, this is the whole code, and is less than 2 kilobytes in size, that means no performance impact on your blog at all :

/*************************************
Spoiler Content Box 
 # By Deepak Kamat
 # stramaxon.com
 # depy45631@gmail.com

Get it for your blog at:
http://goo.gl/ZiJj3J
*************************************/
.spoiler {
  position: relative;
  border: 2px dotted rgba(0,0,0,0.1);
  padding: 10px;
  background-color: #ffe496;
  margin: 10px 0;
}

.spoiler {
  color: #ffe496; 
  color: transparent;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
}

.spoiler:hover ,
.spoiler:active ,
.spoiler:focus  {
  color: inherit;
}

.spoiler::after {
  content: "{Click or hover to see spoiler}";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffe496;
  text-align: center;
  font-size: 0.8em;
  padding: 10px;
  color: rgba(0,0,0,0.6);
  font-weight: 600;
  opacity: 1;
  -webkit-transition: 0.4s all ease-in-out;
  -moz-transition: 0.4s all ease-in-out;
  -ms-transition: 0.4s all ease-in-out;
  transition: 0.4s all ease-in-out;
}

.spoiler:hover::after,
.spoiler:active::after,
.spoiler:focus::after{
  opacity: 0;
}

/* Colors */
.spoiler.green { background-color: #c8fbb8;}
.spoiler.green::after { background-color: #c8fbb8;}
.spoiler.blue { background-color: #bfe1ff;}
.spoiler.blue::after { background-color: #bfe1ff;}
.spoiler.red { background-color: #ffbfbf;}
.spoiler.red::after { background-color: #ffbfbf;}
.spoiler.purple { background-color: #e4bfff;}
.spoiler.purple::after { background-color: #e4bfff;}
.spoiler.black { background-color: #222; color: #fff;}
.spoiler.black::after { background-color: #222; color: #fff;}
.spoiler.white { background-color: #fff; color: #222; border-color: rgba(0,0,0,0.8); }
.spoiler.white::after { background-color: #fff; color: #222; }

Looks like a large piece of code? That's a very small snippet in comparison to what other plugins for these kinds of features takes.

Now follow these steps:

• Copy the entire CSS snippet above and place it in a Notepad/TextEdit application
• See how to add CSS to your Blogger Blog or,
• Go to your Blogger Dashboard - Template - Customize - Advanced - Add CSS 
• And paste the CSS in the text box on the right hand side, now click on the "Apply to blog" button

Once you have the CSS code in place you can proceed to the next section to learn how to make use of the CSS we added in a blog post. 

The HTML 

We have to tell the browser "Hey web browser, this is a spoiler box, please hide its text content!", unfortunately we can't tell it in English, so we use HTML, that's the markup language, if you have been working on Blogs for long you might have come across it many times, because it's what makes everything on the web!

Without further lesson on HTML, here's the markup we need, copy it, we'd need it in a moment:

<div class="spoiler">
The quick brown fox jumps over the lazy dog.
</div>

This is the base code we need, of course you want to replace The quick brown fox jumps over the lazy dog. to anything you want to appear inside the spoiler box, you can put images, text, headings, even videos!

Using the HTML

Follow these steps properly to learn how to add it to a blog post, you just have to carefully understand the process once and afterwards you would be able to easily modify the code as you like and add it to your posts.

• Open a post or a draft in your blogger dashboard
• On the top left corner of the post editor, you will see two buttons "Compose | HTML", click on the HTML button OR 
• You could skip the above step by enabling "Interpret typed HTML" in the options in your post editor, on the right sidebar under Post Settings, click on Options and then choose "Interpret typed HTML"
• Paste the HTML in the post where you want it to appear. That's it, if you pasted the code in "HTML" mode, switch back to "Compose" and you will see the text in post editor with no styles, don't worry, when you load the post on your blog the spoiler content styles will be applied automatically.

Applying different colors

If you like you can apply different colors to the spoiler box, there are 7 color styles, namely

yellow (default) | green | blue | red | purple | black | white

You can easily change the color of a spoiler content box by adding the name in the  class="spoiler" part. How? See the example below:

Default color:

<div class="spoiler">
...
</div>

Blue:

<div class="spoiler blue">
...
</div>

Green:

<div class="spoiler green">
...
</div>

And so on. You just have to add the supported colors name next to spoiler in the class attribute. If you know how to code CSS.

If you want to add new colors please let us know in the comments on this post and we will be happy to consider it if it is a good fit.

Generate Spoiler Content Box Code

Don't want to write the code each time you proceed to add it in your post? Use this generator to enter your desired content and get the code right away, works on mobile phones as well!



A small tool to make your life easier :)

What else?

A similar functionality that you might want to take a look at which also can be used for spoiler content show/hide effect: Expandable Section in your Post on Blogger

Stuck with something and don't know how to proceed? Please leave us a comment on this post and we will get back to you as soon as possible. Or found a bug in the generator? Send me an email at depy45631@gmail.com

Like what I am doing and want me to make something similar but more customized for your blog/website? I am a web developer and you can hire me.

Fix Blogger Tracking Your Pageviews

Your blog's quick stats on the dashboard reflects the number of page views your blog received in a given time window, the stats can be inaccurate as it might also be counting your own pageviews.

Blogger does provide an option to stop tracking your pageview, though it doesn't work properly for many Blogger users.

Of course many blog owners might not want to track their own pageviews, especially when even low number of page views from their side may affect the overall stats, so it makes perfect sense that you may want to tell Blogger to stop tracking in on your account.

We recently started getting a lot of queries about "why blogger is still tracking my pageviews" and similar, on Twitter and in the forums in large quantity. Here's a tweet from a Blogger user with the hashtag #gHelp seeking for help with the issue

I've tried to get my blog to stop tracking my views, but it's just not working. It's skewing my numbers and I'm just at a loss! Help! #gHelp

— Shresh Ramsout (@ShreshRamsout) April 28, 2016

The most straightforward option is to set the option in your blog's dashboard, that can be done by following these steps (these are optional steps, you may have turned it on already):

1. Go to your Blogger Dashboard
2. Select the Stats -> Overview tab & then click on "Manage tracking your own pageviews"
   
3. You shall be now taken to a new tab with the following URL format: https://[yourblog].blogspot.com/b/statsCookieManage
   
4. Check the box that says "Don't track my views for this blog.", and that's it.

This is supposed to stop tracking your pageviews on the blog, but if you test it you will find that it doesn't work. You can check this if it works or not by refreshing your blog in the browser, and after that refresh the stats on your blogger dashboard - you will see that the views are still being counted rendering the option to turn it off completely useless. 

A Valid Workaround

We know that it doesn't work, and Blogger engineers are still on it to fix it, but meanwhile many blog owners are affected and this has to be fixed somehow. 

To tell Blogger to not count your pageview is not a magic, the technique is to set a cookie on your browser so that whenever you load your blog the server knows that you do not want your pageviews to be counted, if the cookie, which is nothing but a small text file saved for websites that contains data used by the browser and server, is not available it counts your views.

What the problem is

(You may want to move to the next section if you want to just know how to fix it)

The error is with where the cookie is set when you go to the options page that let's you choose if you want the blog to stop tracking your pageviews. 

The URL is: https://[yourblog].blogspot.com/b/statsCookieManage

The cookie named "_ns" with the value of "2" is supposed to be set on blog address, but due to an error on the Blogger system the cookie is only set on the /b whereas it is supposed to be set on the "/" path which signifies that it must work on every page of your blog, but due to the error it is not.

Here are some screenshots with the information of cookies that is set while we toggle the option



Everything seems to work okay. As you can see, when the option in the second image in unchecked (highlighted in orange), the cookie named "_ns" disappears. That is how it is supposed to work, the problem actually is its Path value set to /b

And as the path is set to /b the cookie appears no where on the blog except for the page that starts on the path /b

The Workaround

To make this work i.e to have Blogger stop counting our own pageviews we just have to set a cookie on the blog, but this time manually as the options page that Blogger provides us doesn't work properly. 

That can be done with a simple JavaScript snippet. All we will do is set a cookie with the name "_ns" and the value  "2" on the root path of your blog. 

Without any further delay here's the code we need (copy it to your clipboard):

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
    }
    
    createCookie("_ns", "2", 999);

The snippet will create a cookie with the passed values in createCookie("_ns", "2", 999);, you do not need to understand anything about this for it work, only thing you might be interested is the number of days this cookie will be valid for, in the code we have set it to 999 days, after that the cookie will be removed itself from the browser. You can set the value higher or lower if you like.

Using the code snippet

After you have copied the code open your blog's homepage. To run this code you need to access the JavaScript console, there are different ways to open the console in different browsers, I am mentioning how to do it in Chrome and Firefox

Google Chrome

You can open the console using the keyboard shortcut CTRL+Shift+J / F12 on Windows or CMD+Option+J, or you could right click on an empty area in the web page, then select Inspect and switch to the Console tab.

Following screenshot shows the code entered in the JavaScript console on Chrome.




After pasting the code in place, hit enter and that's it. The cookie is set and now until the cookie expires or is manually removed (by clearing cookies off your browser) Blogger would not count your page-views when you access your blog from the browser.

Mozilla Firefox

To open the console in Firefox: CTRL+Shift+K on Windows or ⌘+Option+K on Mac. Or you could Right Click, then choose Inspect Element and then go to the Console tab.

Enter the code in the console window and hit enter. Here's how it must look like in Mozilla Firefox:

On Safari

On your Safari browser click on the Develop menu and select "Show JavaScript Console" to open the JavaScript console where you will be entering the script you copied above. 

If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”.

Important note: If you are on .blogspot.com URL then check which version of your blogspot has loaded, Blogger mainly redirects .blogspot.com URLs based on the visitors country, so if you are in the UK it will change to .blogspot.co.uk. Setting the cookie on .blogspot.co.uk or your country specific TLD won't work on other country specific TLDs. You can set the cookie on all of the variants if you like. 

The Cookie's now set. That's it.

Now that you have run the code the cookie that we have been mentioning throughout the post will be set on in your browser. As long as the cookie stays in the browser any visits to your blog from that browser would not be counted towards the pageviews of your blog. 

If you use different browsers, you may also use this code in those to stop tracking the pageviews from those as well. 

Note that it is possible in browsers to set an option that deletes any cookies on a site once it is closed, so I recommend you to look for the option for cookies in your browser if this doesn't seem to work, if problem continues please post a comment on this post.