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



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.

HTTPS Will Be Available by Default on Blogger Blogs

It was not long when the users were given the super-heroes like powers to serve their blogs (on .blogspot.com) over the secure protocol https which is good in many ways, but it was something not always liked by the masses and there are reasons behind it (which we will discuss soon.)

A little background on the matter if you are not sure what this is about:
Last year in September Blogger announced the support for enabling HTTPS (HyperText Transfer Protocol Secure) on their blogs. Blogger has now been sending notification to Blogger users with the following message:
Coming in late April! 
All visitors will be able to view your Blogspot domain blogs over an encrypted connection by visiting https://<your-blog>.blogspot.com. Existing links and bookmarks to your blogs will continue to work. As part of this change, the HTTPS Availability setting will disappear, and your blogs will always have an HTTPS version.
If you were unaware of the updates of support for HTTPS encryption this might come as a surprise.

A lot of blogger users who were not using a custom domain for their blogs tried out the setting to serve their blog over https many didn't see any change, but most of them didn't like it, the reason are many, HTTPS encryption is secure, it is the preferred protocol for any website that transacts important data over the internet to keep it safe.

It is that security which disturbed many users when they used the feature to enable HTTPS, it resulted into errors in the functionality of many blogs which was caused due to mixed content.

Please also see this pinned post on the official Blogger Help Forums which explains the matter with more details:
https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!topic/blogger/JGcHNmtIPiE

How does it affect my blog?

First of all coming back to the message: There have been no announcements on the blog with detailed explanation of what is going to change. The notification message on the Blogger dashboard implies that the settings for enabling https will go away as starting late April everyone can visit your blog over the encrypted protocol i.e https://.

To begin with, you may want to learn more about HTTPS

Are custom domain affected?

No, blogger blogs with custom domain can not be accessed on the https:// protocol. Only the blogs on <your-blog>.blogspot.com will see this change.

My Blogs will always be served over HTTPS?

There hasn't been any updates regarding this on the official blogs but from what we can see in the notification message it means that both versions will be available, a visitor would be able to either visit the HTTPS or the HTTP version.

Depending on what the user type in the protocol part of your blog address, for example if the users type: https://blogname.blogspot.com  the secure version would be served, or if http is used, then the traditional http version. 

It is difficult to say what the actual behavior would be, as Google wants to make each of their products available on the secure protocol, it is possible that the default protocol for all blogs may be changed to HTTPS. 

Impact on old URLs and Search
As for bookmarks, old URLs etc, it may come in as a relief that those would continue working, as HTTPS availablity is the choice of the user, if they want they can visit the blog over HTTP by simply typing http:// before the URL, however there is still no information how would search engines treat this change, the question is that what version would be by default indexed by the search engines?

We do not still have much information on this, when the changes are rolled out and we have more details we will update our blog with more insight on this, so please follow our blog.

What are the benefits?

There are certainly benefits in having your blog served over HTTPS, most important of all is a sign of trust, HTTPS protocol as the name suggest is the secure way of serving content and having that on your blog as well gives the readers a sense of genuineness.

Here are some benefits of using it (mentioned here on this official BHF thread)
  1. It helps check that your visitors open the correct blog and aren’t being redirected to a malicious site.
  2. It helps detect if an attacker tries to change any data sent from Blogspot to the visitor.
  3. It adds security measures that make it harder for other people to listen to your visitors’ conversations, track their activities, or steal their information.

The disadvantage

Mixed content warnings are common to websites and blogs which has sub-resources on the lesser secure or as Google likes to call it insecure protocol, HTTP.

What this has to do with Blogger blogs? Well, if you like to add widgets and other stuffs on your blog from different sources it is quite possible your blog may be a victim of mixed content warnings if those widgets/scripts refers to any resource that is on the HTTP protocol, as these resources can be possiblity used by the unethical people to steal data even from sites with HTTPS encryption.

This is a disadvantage if your need of HTTPS has less importance than the widgets/scripts you use on your blog. Anyways it is not recommended to include these from sources you do not trust, and mostly the third-parties who provide these must be wise enough to serve their content over HTTPS too if they really want to help the users. 

These are some resources to prepare yourself for any mixed-content warnings you may possibly get on your blog when these updates from Blogger regarding HTTPS changes rolls out. You may consider it doing now to futureproof your blog.

Blogger Help: Fix mixed content on your blog

What's next

There's nothing you have to do in order for this change to take effect, later near the end of April this will roll-out to all the blogspot blogs. 

Furthermore there might be some extra measures that needs to be taken once the changes are rolled out. We will keep updating this space for future updates on the topic, you can also follow StramaXon Blog & Gioogle Blogger Official Blog


Responsive Videos In Posts on Blogger

YouTube. Dailymotion, Vimeo.. who doesn't like to spend time on these sites. Chances are you embed videos from these platforms on your blog, but the worst thing? It doesn't fit on mobile devices, that too even if you are using a responsive template.



Why is it important to make sure videos fits properly on mobile devices? If you would have asked this question about even just half a decade back we would said that it is not important, though times are changing a lot faster, majority of your readers maybe on some kind of mobile devices and that is why responsive web is such a big break-through in the internet World. 

Question arises: How do I make sure videos on my blog, from either YouTube, Vimeo, Dailymotion (.. or other sources) properly fit on my blog page when viewed from a mobile device.

Before we begin the tutorial, we would like you to understand that this tutorial is meant for those blogs which uses a responsive web design approach, mostly the default blogger templates aren't those, and following this tutorial would bring nothing good, it would not bite, but wouldn't bring you any good either.
Tutorial Begins
FitVidsJS is a lightweight jQuery plugin that works very well in making videos fluid i.e fit with the width of the container, from many popular platforms (..and also other platforms that you can specify).
Demo - Fluid Videos
Demo it didn't happen.
While you are on the demo page, try reducing the size of your browser window and see how the video responds to the re-size event and adapts itself accordingly.

Back it up: Before you begin with the steps, I recommend you to backup your blogger template as we will make changes to the template, and if anything goes wrong you can always revert back using the backed-up template file.

Adding jQuery

It is a JavaScript framework that is used for various tasks like DOM manipulation, AJAX and other technical stuffs that helps make it easier to make a website interactive with JavaScript. The FitVids plugin is a jQuery plugin which means it would not work if you do not load jQuery.

Check if you already have jQuery added Chances are that your template may already contain a version of jQuery (many do), it is not recommended to add jQuery twice, so check if you have jQuery already installed. How to do that :-

Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or +F and search for the keyword 'jquery', go through the found instances and see if you have something similar to this:
<script type="text/javascript" src="https://....../jquery.min.js"></script>

If you do not have jQuery, add it - To add jQuery from Google's CDN, follow these steps:

  1. Go to your Blogger Dashboard -> Template -> Edit HTML
  2. Use CTRL+For+F search for </head>
  3. Copy the following line of code, which is the script tag to include jQuery library in your blog -
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    That's it. Now it must look something like this in the template code editor
    Adding jQuery's code snippet in Blogger template.
  4. Press the orange "Save Template" button to save it. 
Once it is done you may proceed to the next section to add the FitVids plgun. Adding it is almost similar to adding jQuery. Keep the template editor open, we need it for the next two steps too!

The main FitVidsJS plugin

It's time to add the JavaScript/jQuery plugin. We will add it from a CDN, that makes sure that the files load fast and doesn't impact on the performance of your blog.

Before we go on further, copy this script tag which we need in the steps mentioned next:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>
  1. Go to your Blogger Dashboard -> Template -> Edit HTML
  2. Use CTRL+For⌘+F search for </head>
  3. Paste the copied code immediately before line where </head> is.

    It is important that we put this script tag after the jQuery tag (wherever it is in the template), so if you already have jQuery somewhere else in the template consider putting this tag below it. These tags can be added anywhere, in the head, or even at the end of the body.
  4. Following is an example of how it must look like after you have added it to the template. Note that the plugin code i.e Fitvids script tag must always be placed after jQuery's for it to work.

Save the template. Yay! We now have jQuery & FitVids plugin added in our template. The final part is initializing the plugin so that it works upon the videos in your posts, and also other parts if you intend to use it for advance purpose.

Initialize the plugin - Fitvids

Once we have the script tags in place we have to tell it to initialize the function on the videos, the plugin can't guess where do you have your videos, or which videos do you intend to make responsive so we have to specify it.

We will provide different initialization code for different applications i.e if you want the plugin to work on all videos on your posts, or if you want it to work on some some that you can specify. It gives you more control over what you want to be handled by this plugin.

Choose the right initialize code and continue with the step to add it to your template (which is same as adding the script tags in the above steps, you just have to put the following codes below any script tags we added)

1. All videos in posts, or (recommended)

The code uses the class of the body of the post to identify which part of the page it must handle, mostly blogger templates include the class name "post-body" in the container of the post and assuming that your template does the same you can use this to initialize the plugin on all the videos in every posts.

<script type="text/javascript">
$(document).ready(function(){
$(".post-body").fitVids();
});
</script>

On the line 3 you can change .post-body to the class name you want to target. Most blogger templates this class name for posts, so this code may work right out of the box without any changes.

2. Only some videos, or

If you do not want every video in your post be handled, then you can specify the ones you want to. 

<script type="text/javascript">
$(document).ready(function(){
$(".fit").fitVids();
});
</script>

This version of the code works only on the videos wrapped inside a container with the class fit. It gives you a control over the videos you want to make responsive. As it has been said it needs to be wrapped inside a container, it means that your embed code must be put inside an element like this:

<div class="fit">
<iframe src="...[embed code]" width="xxx" height="xxx">
</div>

So while you are including a video somewhere in your post you always have to make sure you wrap it inside this code.

3. All, but not some

The third option is to have selective videos not being handled by the plugin, all videos will become responsive i the posts except for the ones you specify.

<script type="text/javascript">
$(document).ready(function(){
$(".post-body").fitVids({ ignore: '.not-fit'});
});
</script>

When you do not want a video to be handled by the plugin, you can just wrap its code inside a div element with the class not-fit (notice the .not-fit in the code above). This is how you can wrap the embed code for the video inside the element, and then paste it in your post:

<div class="not-fit">
<iframe src="...[embed code]" width="xxx" height="xxx">
</div>

And then put and code in place,

Choose an initialization script from any of the above sections and then include it in your Blogger template. To do that:

  1. Go to Blogger Dashboard -> Template
  2. Edit HTML
  3. Now search for the line where we added the FitVidsJS <script...></script> tag. Paste the initialization code just after it. Here's a screenshot of how it must look once you have it in place.


Make sure the scripts are in this order: jQuery -> FitVids -> Initialization Code

If it looks fine save the template and try it on a post.

Questions or comments?

It is quite possible that this may not work properly for every blog due to different reasons, even if one part of the guide is not followed properly the chances are high that errors may come up during the set-up, so if you have any questions regarding this you can post a comment on this post (include your blog address) and we will try to help you set it up.

If you have suggestions and comments on this tutorial please post it in the comment form, we would love to hear from you! This post may not cover every aspect of the jQuery library, or the FitVids plugin, as it would have made the post enormously large, to help others any bit of information that you think is vital would be appreciated.


Changing The URL Of Blogger Posts Even After It's Published

With small advancements in Blogger, users were provided many new options to customize their blog and blog posts for a better search experience, like adding search description and changing the permalink.

But there's a catch, once you publish your post and then try to edit the permalink, you can not! In this tutorial we will explain how you could change the permalink even after it has been published.


Note: Editing of permalink means the older links that points to the post would no longer work. And the customized post would be seen as a new post by the search bots, with the content that was located at another URL before.

Changing the permalink of the post after it has been published is not allowed, as long as the post is in the published status it wouldn't let you do that. That is for obvious reasons, but sometimes you might feel the need of customizing the URL of a post.

Change The Permalink

Let's get to the point, but before that let me warn you again that doing this is similar to creating a new post, copying the content of another published post, pasting it in the new one, setting the date and changing the permalink as per your need and then deleting the old one.

1. Reverting the post to draft

It is only possible to edit the permalink of the post when it is in the draft mode, so we have to first revert our post to draft in order to be able to edit it.

  • Go to your Blogger Dashboard
  • Navigate to the list of Posts and open a published post in Post Editor
  • In the post editor, click on the "Revert to draft" button on the top right of the post editor page right next to the orange button that must read "Update".

  • Now that the post is back in the draft mode, you might now be able to use the "Permalink" option under "Post Settings" to change its URL. Click on the "Permalink" tab on the right sidebar, select the "Custom" radio button and then enter your desired URL for the post.

That is it. Once you have input the desired permalink for the post you are set to publish the post again.

Redirecting Old URLs to the New

If your aim is to just change the URL for presentation purpose while keeping the old URLs still active (considering you have shared the blog post at a lot of places, or others have shared it on social sites and their blogs) then the best option for you is to set a custom redirect.

Blogger has a tool for setting custom redirects for URLs on your blog, and it is very easy. You may find this article by Help Blogger helpful to understand how custom redirects work and use it correctly.

How to Set Custom Redirects in Blogger http://helplogger.blogspot.in/2014/07/how-to-set-custom-redirects-for-blogger-post.html


Facing difficulties in going through the steps? Let us know in the comments below. 

Google Chrome Ending Support for Windows XP and Vista, All You Need To Know

And also for Mac OSX 10.6 /7/8. Windows XP became the most used operating system during its run and why not, it was one of the first Windows OS with so much colors and new features, its legacy it such phenomenal that a big share of OS market still use XP.

chrome ends support windows xp vista

What could go wrong suddenly? When you receive a notification saying "This computer will soon stop receiving Google Chrome Updates" you are devastated! But why? It's not that Chrome hates XP or old system, it's for reasons that are legit.

Why Can't Chrome Keep Supporting Windows XP

Many, many people still run on the legendary OS by Microsoft, that's Windows XP, then why all of a sudden Chrome is acting like they don't care about their users? Let's have a little background check on the case.

Microsft announce earlier in 2014 that they would end support for Windows XP later that year and then they did it. Support for Windows XP was subsequently ended on 8th April 2014, here is the release from Microsoft on the topic: https://www.microsoft.com/en-in/WindowsForBusiness/end-of-xp-support  

Basically that means Microsft would now no longer provide security updates and/or technical support for XP. Boom! What is there to do next? Just update your system to a newer OS they say but in the real World not everyone does what the companies says, so we kept using Windows XP, right? 

Well, that end of the support didn't only mean you would miss out on latest security updates on the Windows XP platform, but also on the programs that used those security features and updates to make it safer for you to browse the Internet, like Google Chrome. Google Chrome did manage to keep the support up for the browser for nearly 2 years, but the time has come, they can't keep the updates up any longer without the security updates from the vendor. 

What About Windows Vista

Microsoft hasn't apparently ended support for Windows Vista and would be doing that until 2017, but due to a very small user base Google decided to end the support for Windows Vista too. 

That's it, people tend to hate the flop platform. It's the Jar Jar Binks of Operating System, lousy and hated.

What If I don't Update?

I thought why would it be difficult for people to upgrade to even Windows 7 on their systems, and one of my Google+ post on the topic gave me some interesting and legitimate answers. Many of the older systems didn't support new OS like Windows 7/8.1/10, or either it was not a viable option for many people who just want to work and did not want the hassles of managing their systems. 

You can still use Chrome

The notification about the support ending didn't mean to force you to upgrade to a newer OS or was a team plan by the companies to have you buy them. As Microsoft ended support, it was obvious that programs that runs under that platform too would stop the update in the near future and with a program that keeps the updates coming at a regular rate like Chrome it was even more obvious. 

Though it is prompting you to upgrade to a new platform for future updates, it doesn't mean Chrome would stop working on your PC. Things would work just as fine as it used to, what you will miss would be security and feature updates from Chrome. For a web browser security is one of the major part of their infrastructure, no one wants their sensitive information to be stolen, and therefore it is recommended to upgrade. 

I use a good Anti-virus software, wouldn't that secure me?

"Without critical Windows XP security updates, your PC may become vulnerable to harmful viruses, spyware, and other malicious software which can steal or damage your business data and information. Anti-virus software will also not be able to fully protect you once Windows XP itself is unsupported."  - Microsoft official release page

Though that doesn't mean vulnerabilities and viruses would be coming all  your way, but that imposes a significant risk. If you keep using it, you are keeping like a a gold brick in the open air, until someone sees it everything is fine. 

What About Switching to Firefox Or Some Other Browser?

The major options are Mozilla Firefox and Opera. Opera itself is built over the Chromium source code, so its fate is the same the Chrome's. 

The one left is Mozilla Firefox, it is sure beautiful browser developed by the open-source organization Mozilla. There's a few things you must know before the decision of switching to Firefox on Windows XP.
  • The current version of Firefox stable release is 44, note that after the version 12 Firefox doesn't work on Windows XP SP2 and prior. You need to upgrade to Service Pack 3.
  • As it progresses it would become obvious to end the support for the SP3 too, and would ultimately require you to upgrade to a newer OS to keep using it too.
  • If you don't upgrade, you will still be able to use the last supported version, but that would, again impose security risk.

Upgrading OS Problems and Solutions

In the Google+ post mentioned above, people came up with legitimate reasons why they do not want to upgrade to a newer version of the OS. 
  1. Hardware wouldn't support Windows 7 or later. 
  2. Budget not in the support of upgrading to a new Operating System like Windows 7/8.1/10
  3. Not tech-savvy so upgrading to a new OS is not a great thing to start the day with.
  4. I love Windows XP <3
Answers to these questions (opinion based):
  1. Apparently Windows 7, or even 8 and 8.1 doesn't take much advanced hardware to run. I have been using Windows 7 on a 6 year old computer that came with the hardware cost me $500. You have to analyze to see what more would you need to upgrade with your hardware to be able to run Windows 7 or later. See this page to know the system requirements for Windows 7

    Or if that's not that option then see the other solutions.
  2. Use Linux based operating system. Open Source, free and well-managed. Ubuntu is what I use and one of the most used distribution of Linux. 
  3. In this age there are quite many technical experts almost in every locality on the planet, see if you can find one, ask your friends, families, the chances are high that you may find a tech expert among your own relatives!
  4. Well, love for Windows XP is just phenomenal, I have seen people not upgrading to a new OS even if they can just because they love XP. If that's the case then nothing can be done instead of deciding to move on. As said earlier you can keep using Chrome, well only updates wouldn't come your way in the future. Full stop. 
There are many malicious activities carried on by people taking this situation as an opportunity to exploit the general users, I suggest you to not fall for those, before trying anything to help you with this do check the official documents and Google Chrome help forums to make sure it is not malicious. 

Thanks for reading. Drop your opinions in the comments, we would love to hear from you!

Disclaimer: We are not affiliated with Google, Apple or Microsoft in any ways and do not intend to market their products through this post. 

Background Images for Widgets in Blogger

In terms of customization the options that Blogger provides might be limited but with custom styles and codes you can do almost anything to the looks of your blog. With this tutorial you will learn how you can set background images to the widgets in the sidebar or anywhere.



Upgrade your blog's look by setting custom images (your choice!) as the background on widgets on your blog. We will guide you through setting background images on widgets on your blog, either on sidebar & footer or just the sidebar.

Before you make changes to the template I recommend you to take a backup of your blog template.

Set Background Image On All Widgets

If you want a image background on all of the widgets on your blog then follow the instructions below, the other section deals with adding a background image to particular widget(s) which goes a bit into technical stuffs.

First Get An Image

Before anything else we need an image somewhere on the web that you can use as  the background. Simplest way is to upload an image in a draft post on Blogger, then right click on it to get its direct URL.

For example I have this image:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbyvldP5eJrx_heAusfssXVnV0tfteAR0x8rrGNd76UH3YpNWmi5AO_B8v-L_PgjCepihCNauujdZ32OebvKCr7uT48YpfpujRUM0akwypQ8ZcFtoJWKNildJsDXIFVLcw3ceQl78y44p/s1600/samle-image-001.jpg

Make sure your image wide enough to cover the width of the image, as for the height you may also keep it in accordance with height of the widgets but it is not in this case useful as some widgets might stretch more vertical which may require the image to be stretched too, but instead of stretching we can just tile it downward to fill in the blank area.

The CSS Snippet

To get the image applied as background we would use this small snippet that sets the image on every widget (including the widgets in footer, you can omit the line specified if you don't want it on footer)

.sidebar .widget .widget-content
,foooter .widget .widget-content {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbyvldP5eJrx_heAusfssXVnV0tfteAR0x8rrGNd76UH3YpNWmi5AO_B8v-L_PgjCepihCNauujdZ32OebvKCr7uT48YpfpujRUM0akwypQ8ZcFtoJWKNildJsDXIFVLcw3ceQl78y44p/s1600/samle-image-001.jpg');
background-repeat: no-repeat repeat;
background-position: top center;
background-size: cover;
}

Replace Image URL:
The third line is basically the one you have to change. Currently the image pointed in the code is what I have set it, but for your images you have to enter your image's URL in the snippet.

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRbyvldP5eJrx_heAusfssXVnV0tfteAR0x8rrGNd76UH3YpNWmi5AO_B8v-L_PgjCepihCNauujdZ32OebvKCr7uT48YpfpujRUM0akwypQ8ZcFtoJWKNildJsDXIFVLcw3ceQl78y44p/s1600/samle-image-001.jpg');

The highlighted area in the code is the URL of the background image, when you copy the code replace the highlighted area with your own image's URL and then apply the whole CSS code to your blog.

Don't Apply To Footer Widgets:
In case you intend to only apply the background image to sidebar widgets then omit the following piece of highlighted code from the snippet:

,foooter .widget .widget-content {

Do not remove the "{", only the highlighted area is supposed to be removed.

Now Apply The CSS

Here is a quick tutorial on adding CSS code to your Blogger blog with easy demo steps

Decorative Backgrounds for Holidays

Christmas and New Year's Eve is near, everything on the web has almost blended into the festive look so why not your blog? Use the steps provided above with these pre-made images that will give your blog an impressive look. Just right-click, copy the image URL and use it with the code in the previous section.

Moreover you can always select your own decorative background image from around the web or look at some very creative designs on Creative Market that you might find useful.

So have a great Christmas and happy new year! See you in 2016. 

Renaming "Older" and "Newer" Page Links in Blogger

Two years ago I wrote a post on hiding "Newer"/"Older" pagination links on Blogger and I was recently asked by a reader if it was possible to rename the links name, yes it is, and in this tutorial you are going to learn that the safe way.

Why is it the safe way, is there any side-effects? Not really, but this tutorial takes you into editing a few lines of code in your template so chances are that if you accidentally make any mistakes then the template might just broke and you have to fix that problem first to get your blog running again.





Back-up the Template

As a precautionary step make a backup of the template so that if anything goes wrong you can always revert it back to the current template: How To Backup Your Template

Two Ways To Do It

Before we start take note that we are presenting you two different ways to do this. The first method affects it from the root while the second one is like a layer, it renames it using JavaScript code when the page is loaded.

Difference? The first method internally changes the name to what you like, the JavaScript way is done on the front-end i.e when the page is loaded the text on the pagination links is internally still what it was but the JavaScript code executes and changes the document dynamically on the client-side to change the name.

#1 Method: By Replacing HTML/XML Codes

Note: We assume you are using not using a third-party template. Though this may work with third-party templates too but the naming convention is uncertain for them so we can't be sure if the code we are asking you to search exists in your template or not.

Follow the instructions carefully to rename the "Older" and "Newer" page links.

1. Go to your Blogger Dashboard -> Template -> Click on "Edit HTML" button to open the template code editor


2. Once the template editor opens put your cursor in the code area and then press CTRL+F/CMD+F and look for the following line by entering it in the search box

<b:includable id='nextprev'>

Searching for this line must bring up the matching line of code where we have to make the changes. If there is a triangle arrow on the left of the line in code editor then click on it to show the code inside it.



3. When you click on the triangle right arrow the code inside it will show up and it should be something like or may even be the exact.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>

4. Now look for <data:newerPageTitle/> and <data:olderPageTitle/> in the above code inside your Blogger template code editor. To make it easy we've highlighted the lines which contain these two codes.

<data:newerPageTitle/> - Generates the newer page link text, by default "Newer Post"/"Newer Posts" for post page and index/archive pages respectively.

<data:olderPageTitle/> - Generates the older page link text, by default "Older Post"/"Older Posts" for post page and index/archive pages respectively.

Replace each with the text you want in place of it. For example suppose I want "Previously Written!" & "Next For Read!" to replace the default text then my code would look something like this.

a. For "Older" page link I would replace the 2nd highlighted part with this:

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Previously Written!</a>

b. For "Newer" page link the edit on the 1st highlighted part in the main code above would be this

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next for Read!</a>

Use your own text you want to replace the default pagination link text and then save the template. If you did it right then the changes must appear on the blog like this:


#2 Method: Using JavaScript

This doesn't require much edits and is also easily revertible. But this is just like a layer, while the actual text that was generated during the page was still the default one, this JavaScript changes the DOM to the change the text inside the specific page links.

<script type='text/javascript'>
function changePageLinkText(a, b) {
document.getElementById("blog-pager-older-link").children[0].innerText = b;
document.getElementById("blog-pager-newer-link").children[0].innerText = a;
}
document.addEventListener("DOMContentLoaded", function() {
var newerText = "Enter Newer Text"; // Replace [Enter Newer Text] with your own text
var olderText = "Enter Older Text"; // Replace [Enter Older Text] with your own text
changePageLinkText(newerText, olderText);
});
</script>

Replace the text "Enter Newer Text" and "Enter Older Text" with the text you want to appear in the corresponding links.

To place this code in the template, go to Blogger Dashboard -> Template -> Edit HTML -> Now press CTRL+F/CMD+F and search for </body> and place this immediately before it.

Now save the template and the text on the pagination links will change according to what you've set in the code. You can edit the variables in the JavaScript code anytime you like to change the text that appears.

Note: this may not work in some older browsers and also in browsers that turns off JavaScript.