Blogger,
now owned by Google, provides a free platform for hosting articles for various
purposes. You can buy a domain in Blogger, or you can have a free domain (Blogspot).
Some Blogspot blogs are built for commercial purposes; others are simply to
share and exchange knowledge, and/or to link to related websites. Some can even
use Blogspot to store their own information (for free) which can be shared with
users of their choice. As such, a Blogspot blog can be public or private, which
can be set easily in “Settings”. On the other hand, not all information in a Blogspot
“post” or “page” are necessarily visible to the readers; the blog owner can
hide them with password protection. These features will be dealt with in more
detail below.
Public
and Private Blog
By default, a
Blogspot blog is public, meaning that it is listed in Blogger and visible to
search engines. To change it to “private”, you can access your “Blogger” page,
then select “Settings” => “Basic” => “Privacy” => “Edit”.
You make your choice from the following table, then click “Save changes”.
Restricting Readers
If you don’t
want public readers to access your blog, you can set the “blog readers” to
“Private – Only blog authors” or “Private – only these readers” from “Settings”
=> “Basic” => “Permissions” => “Blog Readers”.
Click the appropriate button and “Save changes”
Of course,
you must define “Blog authors” (via “Blog Authors”) and your desired readers
(via + Add Readers).
Password
Protection of Reading a Post or Page
Blogspot does
not provide this feature; consequentially, a (Java) script must be added to the
blog.
A
simple code
The following
simple JavasScript is found in a website
on the Internet. It will help protecting the entire Post (or Page) with a
password. When added to the start of the Post (or Page) (while editing in
HTML), it will not let the reader see the content of the Post (or Page) unless
the reader enters the correct password.
var
password = 'My password'
password=prompt('Please
enter the password to enter this page:','');
if
(password != 'My password') {
location.href='PAGE URL HERE';
}
</script>
You replace My password with your own password and PAGE URL HERE by
the URL of the Post (or Page).
With the
above implementation, the reader will see the following dialog box when trying
to access the Post (or Page)
|
If PAGE URL HERE is
the URL of the page that you want to protect, then the above script will loop
until the correct password is entered. If it is a different URL, then the
reader will be directed to such URL, i.e. getting out of the page that you want
to protect. The above code treats “Cancel” the same as “not correct password”.
Later, when
you change your mind, and want to remove the above password protection; you can
come back to the Post (or Page) and simply delete the above code. The Post (or
Page) will no longer be password protected.
When you open
“Template” you’ll see the same password protection window as above; hence you
cannot access the Template unless you enter the correct password! Since you are
the author of the post (or page) in your Blogspot, you can edit it in HTML and
you’ll see the password that you implemented.
Some users of
the above code commented that the password that you implemented is visible in “View
page source”. This is true, but unless you type in the correct
password, you won’t be able to access the page (and you cannot select “View
page source”!).
Another
variation
The above
script can be modified to give the readers a number of chances ( = 4 in the
example below) to enter the correct password, as follows:
<script
type="text/javascript">
var
password1 = 'My password';
var
count = 4;
var
count1 = count -1;
for
(i = 0; i < count; i++) {
password=prompt('Please enter the password to
enter this page:','');
if
(password == password1) {break;}
if
(password != password1 & i ==count1) {
location.href='PAGE URL HERE '; }}
</script>
Password
Protection of Reading Part of a Post (or Page)
Sometimes you
want to password protect only certain text, image, video, in your post (or page).
This could be done with the following script:
1) In
Blogger, select “Themes” => “Edit HTML”
o
Search (CTRL + F) “</head>”
o
Insert the following code before
“</head>”
<!-- PASSWORD PROTECT CODING -->
<script type="text/javascript"
src="http://www.vincentcheung.ca/jsencryption/jsencryption.js">
</script>
2) Edit
(in HTML mode) the Post (or Page) that you want to password protect
o
Select the HTML code that you want to
password protect
o
COPY it and comment it out
3) Encrypt
the copied code as follows:
o
You will see the following window
o Type your Password in “Key”
o
Paste in “Plain Text” the HTML
code that was copied in 2).
o
Click “Encrypt” below the
Plain text box.
o
Copy the code in “HTML Code”
o
Paste this HTML code right after the
section that you commented out in 2)
o
Publish the post (or page)
The code that
you commented out has been protected with encrypted password. When viewing the
post (or page), you will see Show encrypted text instead
of the text (or image, video, audio …) that you commented out. Click Show encrypted text you
will see the following dialog box
|
Type your password and hit OK to reveal the text (or image, video, audio …) that your password protects. That’s it for posts with encrypted password protection.
An
example
The following
code shows an example of encryption/decryption using the template in http://www.vincentcheung.ca/jsencryption/
<head> <script
type="text/javascript"
src="http://www.vincentcheung.ca/jsencryption/jsencryption.js">
</script> </head>
<!-- <div class="separator" style="clear:
both; text-align: center;">
<audio
controls="" loop="">
<source
src="https://docs.google.com/uc?export=download&id=1y8dj1aP9zCKJIlnn-VJ2gJN56S4PYByA"></source>
</audio>
</div> -->
<!--
The above code has been encrypted using the template in http://www.vincentcheung.ca/jsencryption/jsencryption.js
with password = nkp -->
<div id="dtFNwCuF"
title="U2FsdGVkX1+IQzGGC0Qe70nahIEkAc47mGHu+fE6anNTjKOZmyBN2Gs0YSEj730Kc79UJBt2OsaSCTmuP9qk0wkGEFU+qDyz1IurDKYw7aO5j5OU0Ap0pPcLQJAWagFTwUm0ztkJy2bG8v+/M7houu5kWBE4IvIFkzpQS30WZ1Cmgapp4DDJ2igYxR6wpq/5H+2VPfBoM4M7QZiL8BIgYZWsSIfAdUVpJQF6TZubwO91Ftz7GVn0tbSqhkIZ2Nh3xJ5KeSdKJ6zOpD2OjQcpT2ekYser5Dx2jokGndVSeZhB2klVLXYr/G6xDNtVetNd">
<a
href="javascript:decryptText('dtFNwCuF')">Show encrypted
text</a>
</div>
Very Important Remarks
When I first
implemented the encryption/decryption code in the above example in my
https://myblog.blogspot.com/ I failed to get the dialog box that I expected!
When I right-clicked “Show encrypted text”, I was re-directed to a “about:blank#blocked” page, indicating the content in
“href” was not recognized.
As explained in
https://support.google.com/blogger/answer/6286127,
it turned out that I had a mixed content error: my Blogspot was loaded in https
while the external JavaScript was from a http site! The solution is to have
both sites loaded in either https or http. Since the “vincentcheung” JavaScript
was available only in http; I had no choice but to change my blog to http://myblog.blogspot.com/.
That solved my problem!
