ask-kp

How annoying it is, spending an awful amount of time researching and writing articles for your Blog, only to find out that some people have stolen your articles and reproduced them in their blogs as though they wrote them. Over the weekend, we decided to take action against one of the several “thieves” and we relate our experience here so that you have an idea how you should proceed when you meet someone who steals your website or Blog contents. Our Blog is exactly 5 months old and if such incident can happen to new bloggers like us, it can happen to you too.

Copyright

You see this legal term often. Basically, what it means is that if you are the author of a piece of work (writing, drama, music score, art, etc.), you own the “copyright” to that work. Under the laws of many countries, your works enjoy copyright protection. You can authorize or prohibit others from reproducing, distributing, publishing, displaying or performing your works.

In U.S. for instance, you need not register your work in order to secure your copyright. Copyright protection is automatic i.e., it starts the moment your work is created. Unlike the previous laws, there is also no longer a need for you to insert any copyright notice in your site reminding people of the copyright protection. You can put a notice, but you don’t have to. Essentially, ignorance of the law is no excuse.

Theft and Hijacking

These are how the internet thieves steal:-

a. Writing and Images

They block copy your original writing, paste it into their Blog post. They use your images, graphics and artwork as well. Nothing is mentioned about you. Readers will think they wrote these articles. They establish their pool of readers and earn revenue through their AdSense impressions or clicks. Even if there is a mention about you somewhere, all their contents are lifted from you. You put in the efforts but they enjoy the rewards.

These people even went so far as to ask us questions which their own readers asked them. Once we replied to these Anonymous queries, they in turn let their readers know, in the manner that the answers came from them.

b. RSS Feed

You can put other people’s Feed headlines into your Blog. Go to Template -> Page Elements -> Add a Page Element and select “Feed”. Type in the RSS or Atom Feed URL of that site and you will have the headlines of their five recent posts displayed in your Blog. Some blogs have no original content, except for these Feed headlines from many different blogs.

Many of us don’t mind having these headlines in other blogs. Readers who want to learn more about the article will click these links and be brought to our Blogs. However, these thieves go beyond that. Some of them reproduce the full post based on the Feeds. We saw commercial sites using Feed converters to save our contents and put the articles up for sale to interested parties.

We had therefore changed our Feed settings from Full to Short, so that feed readers will only get an excerpt of the articles. If they want to know more, they will have to visit our site to read the details. If you want to change yours too, go to Settings -> Site Feed and under “Allow Blog Feed”, choose “Short”.

c. Hijacking

Instead of just a couple of posts, these thieves can steal everything from the layout and design to the contents and links, thus the term “blog hijacking”. Your site is literally duplicated. When we obtained our first Google Page Rank, a PR5, we found this problem to be rather serious. People were trying to pass off their sites as if they were ours or related to ours.

Steps to take when contents are stolen

1. Stay calm

It is natural to be angry at the thief. Let not anger taint our decisions. We must act professionally. If you are tempted to spam the thief’s blog with threats and insults, please don’t. You may in the process get yourself into unnecessary legal trouble. Not forgetting, a person who has no qualms stealing your contents can probably do you lots of other harm if he/she wants to. In that same spirit, although we shall make references to the thief who stole our content, we shall not be naming him. We shall call the thief Mr X in this article.

2. Identify what has been stolen

Before making any claim, we should be certain as to what has been taken from us. In our incident, it was a clear-cut case of hijacking. Mr X used a Blog title that could mislead the public into thinking that it was related to us, the description of the Blog was exactly the same as ours, the posts and pictures were an exact duplicate, and the post titles, colors and labels were the same.

Excerpt of Mr X’s Blog description:-

Excerpt of Mr X’s post titled “Add Video Clip to Blog”:-

It is important to save these as evidence of infringement. Go to the offending Blog site, click a “Print Screen” button on your keyboard. If you have a printer, save the printed copies. Otherwise, if you have a Photo software, open a new image file, paste the image and save. Note down the date and time these images were taken. We took only a few samples because there were simply too many; all the 23 articles on Mr X’s site were ours.

3. Find the thief

Most of them do not have email addresses or contact particulars in their blogs or profile pages. Even if they do, they are likely to be fake. Nonetheless, there are several ways to ascertain the identity. In this case, Mr X had several other blogs under his profile page. One of them was titled Mahathir bin Mohamad, the contents were an exact replica of the page at Wikipedia relating to the former Prime Minister of Malaysia. There was another blog titled “Kelantan history”. We went to our visitor stats, tracked by Statcounter and Google, zoomed in on the unusual visitor activities, and identified the IP address of one that was from Kota Bharu in the state of Kelantan, Malaysia. We could be wrong. The person could have routed his traffic through Malaysia. He could very well be a U.S. citizen interested in Malaysian politics. Be that as it may, we had a possible lead.

Next, we visited his source page. In Firefox, go to “View” and “Page Source” or press Ctrl+U. In Internet Explorer, go to “View” and “Source”. From the source code, look for “google_ad_client” to find out his Google AdSense publisher number. Most of these thieves steal your content so that they can earn advertising revenue from visitors to their sites. Invariably, they will have some form of advertisements. If it is not AdSense, just look for any other Ad codes. Take note of all these. Better still, save a copy of the source code as evidence.

Read all the blogs by this person. Often, the remarks made in the comments or chatbox may give you an indication as to who the person is.

Search the net for other links to this person’s identity. The blog may be registered in some blog directories. Start with Technorati, and move on to social networking sites. All you want is to gather as much information as possible regarding this person or his internet activities. If the matter becomes contentious, a court action may have to be filed and notice served on the offending party.

4. Contact the thief

After you have done sufficient homework, write your first note to the person. If there is no email address, leave a message in one of the posts. Our first message to Mr X was polite and non-confrontational. This was what we wrote:-

We waited for a day and checked back. There was no response and the blog was still what it was. That was when we adopted a stern tone, and our second message was this:-

Mr X responded and said in our chatbox, “hello bro..sorry.i still new blogger.i delete all that article already…sorry again.” [No, he is not our brother. As I understand, it is their form of greeting.] His excuse was that he was new to blogging. Our response was simple - “I don’t think copying or plagiarizing has to do with new or not new blogger. And from the way you copied, I think you know enough about coding, maybe more so than us.” There is no excuse for committing illegal acts and we are not going to feel bad just because they call themselves new bloggers.

With that, we let the matter rest. However, we want to let you know what we had prepared in the meantime while we awaited his response.

5. Contact directories

The first place we searched was one of our favorites - Technorati. We saw Mr X’s blog and contacted the staff. We highlighted the infringement and requested for a temporary suspension of the offending blog while we proceeded to take the necessary actions. The staff was very prompt in their response and upon their review, they temporarily suspended the blog. Note that in this instance, every one of the 23 articles he had were ours. If it had been just one or two articles copied, the staff may not readily agree to a suspension of the listing. Since the articles have now been removed, we had written to the staff updating them on the matter.

Locate all the listings in the various directories and keep them handy. Often, if it were a genuine case, the administrators will take action or advise you on the cause of action. This is a damage control step. We want to minimize the exposure of these stolen content to other net users.

6. Contact advertisers

We were prepared to contact the Google AdSense staff since we had on hand the publisher number of Mr X. Under the AdSense policies, there is a term that reads:-

“Copyrighted Material

Website publishers may not display Google ads on web pages with content protected by copyright law unless they have the necessary legal rights to display that content. Please see our DMCA policy for more information.”

You can report the incident to them, although in order for them to act, they are likely to request that you file the official notice of infringement.

The details can be found at the Google page on the Digital Millennium Copyright Act. We prepared a draft of the notice which we would have used if Mr X did not respond. You have permission to adapt from this draft if you have to serve a similar notice to Google AdSense in future:-

If there are other advertisers, contact them too. No advertiser will want to be embroiled in a copyright infringement battle. Chances are that they will withdraw the advertisements, temporarily or otherwise. Without advertisement revenue, the theft of the content becomes worthless for the thief.

7. Ban from Search Engines

The offending blog can be removed from search engine listings too. You can find out what you have to do for search engines like Yahoo, Google, and MSN when you come across sites that have stolen your Blog contents.

The Digital Millennium Copyright Act Title II “creates a safe harbor for online service providers (OSPs, including ISPs) against copyright liability if they adhere to and qualify for certain prescribed safe harbor guidelines and promptly block access to allegedly infringing material (or remove such material from their systems) if they receive a notification claiming infringement from a copyright holder or the copyright holder’s agent.” Although worded differently, a quick check on the Copyright Acts of Commonwealth and other jurisdictions suggest that the spirit of their laws are similar. Under the terms of service, most blog hosts and service providers, like Blogger.com, will act on notice of copyright infringement and take actions which may include “removing or disabling access to material claimed to be the subject of infringing activity and/or terminating subscribers.”

We have talked about contacting Google AdSense and Google search engine. Although Blogger.com is owned by Google, being a big company, there are certainly different sets of people handling complaints like this. If the person’s blog is registered with Blogger.com, you may use the above draft letter but change the addressee to:-

These are the links to the detailed copyright protection policies of some of the popular blog hosts:-

• Blogger.com
• Wordpress
• Xanga
• Multiply.com
• LiveJournal
• Typepad
• MySpace
• Yahoo 360°
• Soulcast

9. Creative Commons License

If you do not want a full copyright protection, you can use a Creative Commons License and give certain rights to people to use, distribute or build upon your work. Read the terms of the various types of Creative Commons Licenses that you can use and choose the one that best suits your purpose. Click on the logo and you will be brought to another page where they give you the HTML code to place the appropriate logo into your Blog. If you want the logo in your sidebar, login, go to Template -> Page Elements -> Add a Page Element at the sidebar, choose HTML/JavaScript and paste the code. With the logo, viewers will know what license applies to the material in your Blog.

Let us as Blog owners be united in protecting our legal rights. If we come across any infringing sites, keep each other informed. In that way, we can protect our works and justify the blood, sweat and tears that we have put into them.

The internet was abuzz with talk that Blogger.com site got hacked and was compromised. Blog owners suddenly found fake spam Posts in their Blogs which contained links to virus downloads and data mining sites. Some were faced with inexplicable web page load times and yet others noticed odd codes appearing in their templates. The natural reaction is to blame all these on the people responsible for the viral attacks, even though that might not be the case. In this article, we shall share with you some tips that we have learned on internet security and protection. This include the actions we can take to prevent or minimize the possibility of having Blogger blogs hacked or hijacked.

Is Blogger.com safe?

The article in BBC, Bloggers battered by viral storm, reported that the latest incidents were the work of a group of hackers who had been mounting attacks since January. They used spam messages posted on bogus sites or sent through email to trick users to download malicious programs. The links can sometimes be couched as Youtube links or digital greeting card links. Also, the email subjects contained informal internet jargon which led recipients to think that the mail came from their friends.

In an official response yesterday, Eric of the Blogger team had confirmed that “Blogger was not compromised. Instead, the blog posts are from bloggers whose machines were compromised by a Trojan horse. These bloggers had their mail2blogger email addresses in their computers’ address books … so when the malicious software spammed every address in their address book with its content, a copy of that email was posted to their blog.”

In short, the Blogger platform is safe and if any, the Blog owners should ensure that their own computers are checked and protected against malware. Where then does this leave us?

How the virus got into Blogs

Before we look at the preventive actions to take, we may want to know how these fake posts made their way into our Blogs. When you are logged into Blogger, you can see under Settings -> Email a “Mail-to-Blogger Address” feature. This enables you to post to your Blog by emailing the Post content to a mail-to-blogger address.

For those who have not used this feature, you can set up the address by entering a word or characters into the part in red. This will be the address to which posts can be sent.

If you have checked the “Publish” box, any message that is sent to this address will automatically get published in the Blog. If the “Publish” box is unchecked, the message will be saved and you have to log in to your Blogger account to publish it. The email subject heading will appear as the Title of the Blog Post.

Although this is a useful feature for people on the go, it is also one that can be exploited. All it takes is for anyone to post an email to this address and whatever is in that email will appear in your Blog. It is therefore imperative that this address remain secret and confidential and anybody who is not authorized to post on your Blog should not know about it.

The moment a virus takes root in your computer, it can send malicious posts to the email addresses saved in your system’s address book. If the above email address is one of them, you will see the post in your Blog. Since your Blog is legitimate, your readers and friends may read the post and click some of the links thinking that you would not put harmful material on your Blog. Once they do that, their computers may inadvertently be infected with the malware and they in turn have malicious links appear in their own blogs, and the cycle continues.

Preventive Steps to ensure Blog Security

1. Scan Computer and Protect against Threats

This sounds obvious and yet there are many who do not see the need to protect their systems against viral threats. Some may find the scanning time long (stretches to an hour for a full scan) or do not have a habit of scanning their systems. Others may find it costly to pay for an anti-virus software license. Always consider the alternative – the risk of losing all your data or having to reformat your hard drive – and you would probably agree that a little effort goes a long way to ensure a peace of mind.

If you don’t have an updated antivirus software installed in your computer, make it a point to scan your computer using one of the free online virus scanners, such as:-

a. Trend Micro Housecall
b. BitDefender Online Virus Scanner
c. Kaspersky Online Scanner
d. F-Secure Online Virus Scanner
e. Symantec Security Check

If you Google “online scanners”, you may see many sites which claim to provide free online virus scans. While many are authentic, there could well be a few which are not. Check them out if you’d like and stick to the tried-and-tested sites for future scans.

You can also download and install the free Google Pack and include the Norton Security Scan which eliminates viruses and the Spyware Doctor which removes spywares, adwares, trojans and keyloggers.

Another free software that we highly recommend is AVG Anti-Virus software. Go for the Free Edition. For a complete protection, install as well ZoneAlarm Firewall if you are not using your MS Windows Defender. These softwares update their programs and definitions regularly and the reviews on them have been very positive.

2. Configure Mail-to-Blogger Address

If you see a need to post to your blog via email, or think that others know your mail-to-blogger address, go back to Settings -> Email and pick/change the address into something that nobody can easily guess. Since the intent of this function is to have posts published without having to log in to Blogger, ticking the “Publish” option makes sense. After saving the Settings, go back to your email software e.g., Outlook Express, Eudora. Remove that mail-to-blogger address from the address book. By making no mention of it anywhere, even if the virus sends out mail to all the addresses in the address book, nothing will be sent to your Blog.

3. Create different email and login addresses

Out of convenience, many people stick to one name for all their logins, emails and signatures. For example, they may have these:-

If people are bent on hacking your Blog, it is easy for them to figure out what your login name is and use programs to crack your password. When you create your next blog, consider assigning different names or not using your actual name:-

4. Set browser security

In Internet Explorer -> Tools -> Internet Options, set the Security level for Internet zone to Medium-High or High. Also, in the later versions, you can turn on the Automatic Website Checking feature in the Phishing Filter settings.

If you are using Firefox, go to Tools -> Add-ons and click the “Get Extensions” link. Look for a popular extension called “NoScript”. What it does is to block JavaScripts and executable files and only allows those that you trust. It makes surfing the net a lot safer, and lessens the chance of unintentionally running malicious scripts.

5. Use third party scripts with care

JavaScripts make our websites dynamic and vibrant, but malicious scripts can cause a great deal of harm. In our eagerness to place nice-looking widgets and interactivity into our sites, we sometimes overlook the fact that third party service providers are not always trustworthy. Some domains last a few days, just enough for the hijacker to place downloadable widget scripts on the sites and to back out of the domain purchase after the cooling-off period. Blogs can also list harmful scripts, some of them blindly copied from other sites while others intentionally created to trick readers.

For instance, you may come across an application that you like and are given a code to place into your template. This code typically contains a link to a file ending with .js extension. When your Blog page is loaded, this script is retrieved from the site where the file is stored and it runs in the background. Some prudent Blog owners do take the trouble to go through the script language and ascertain that there is nothing wrong with it. However, because the file is hosted in that provider’s server, if they should decide to change it later and throw in something extra, you would have unknowingly introduced that into your Blog.

For the same reason, we have cautioned readers against downloading ready-made and customized templates from unknown or untested sources. Since not all of us are technical experts, we may not notice an undesirable script hidden somewhere in the template. Hence, for our guides such as the three columns template guides, we prefer to show you how to DIY and customize your own template. In this way, you know what goes into it and can easily reverse the change in future.

6. Watch what we say or write

We thought we should add this. Many of these people either do it for the challenge or out of spite. Just as wearing skimpy clothes invites unnecessary attention and opening our door invites thieves, words and actions can give hackers the excuse to compromise your site. Observe basic courtesy and net etiquette. Be modest about your site. Every site can be the target of hijacks, including ours; no site is invulnerable.

What to do if Blog is hacked?

Despite all the security and preventive steps, if the day should come when the Blog contents disappear, the first thing to do is to scan the computer for viruses and malware. Do not login to your email or other accounts since this might open up more doors for the virus. Once the system is completely scanned and rendered safe, you may login to your Dashboard and view the Settings. Take note of the information that has been altered.

It is also possible that you are unable to login because the password has been changed, or that the Blog and Blog Posts are deleted. Write to the Blogger Support Team using another email account. Give them as much details as possible and allow them time to investigate the cause. Since Google servers would have backed up our data, it should be possible for them to reinstate your Blog upon proof of ownership.

Where the contents cannot be entirely retrieved, you may have to re-create the Blog. In moments like this, you would appreciate the importance of keeping backups of the template source codes and saving copies of the articles you have written.

Further reading:-

As mentioned, if the Blog page load takes longer than usual, it is not necessarily caused by a virus. Blogger.com could be experiencing a downtime, or the external sites where information is retrieved from may be causing the delay. This usually happens when we put a number of third party applications and widgets into our site, such as advertising services, gadgets and scripts.

Sometimes, the photos, images, pictures or graphics do not show or display in a website in Internet Explorer (“IE”) browser or an email in MS Outlook Express. Instead, where the pictures ought to be, there is a Red X or a placeholder.

Several factors could have caused this problem of images not being displayed in IE. In this Help guide, we’ll look at these reasons and the solutions to show images in IE. Some of the possible causes may only be resolved by the webmaster. If you are an owner of a Blog or a webmaster, these tips might be useful to note when you are uploading images onto your Blog or webpage.

1. Image type not supported by IE

When you see a red X or placeholder, right-click on it to view the “Properties” of the image. Look at the image “Type” and “Address (URL”). IE supports images with .art, .avi, .bmp, .emf, .gif, .jpeg, .jpg, .mov, .mpeg, .mpg, .png, .wmf, and .xbm extensions. As a webmaster, if you have to put images on your website, try to stick to the usual image formats or have alternative images in these formats.

2. “Show Pictures” option in IE not selected

If you are using IE 7, under Tools -> Internet Options -> Advanced tab, there is an option called “Show pictures” under the “Multimedia” heading. Select this option and press OK to save the change. In other IE versions, the option may fall under a different heading.

3. Scripts disabled in IE

Webmasters may use Active scripts, Scriptlets, Java applet, ActiveX control, or cookies to display the images on their sites. If the security setting in IE browser is set to “High”, these features may be blocked. To enable them, go to Tools -> Internet Options -> Security tab. View the “Internet” zone and under “Security level for this zone” change it to “Medium” or “Medium-high”. You can also reset the zone to “Default” level. Likewise, under Tools -> Internet Options -> Privacy tab where you define the cookie settings, you may set it to “Default” level. Click OK to save.

4. Scripts disabled by Firewall

Other than IE, the configurations in your Firewall program (Norton Personal Firewall, Zonealarm, McAfee, BitDefender, etc.) may have disabled some of these scripts. View the help file of the program you are using and follow their instructions to enable some of these scripts. For this reason, webmasters should avoid using too many scripts for the main contents of the sites. Consider adding text using <noscript> tags to cater to those who have scripts disabled.

5. Web bugs

Be careful when you are configuring the above settings. The web pages you view or emails you receive may sometimes contain hidden web bugs. These are usually small little graphics 1px by 1px that track user statistics like location, usage, pages visited, or whether an email has been read. This is even used in organizations and companies to find out how many times a message is forwarded or read by the staff. They do not pose major threats, but there are those who do not like this infringement of privacy. Take a stand and configure your security and privacy settings accordingly.

6. Images blocked in Outlook Express

We touch briefly on the problem of images not displayed in Outlook Express email program. When you are in Outlook Express, go to Tools -> Options -> Security and you’ll see a “Download Images” configuration. If you want to view images in your email, do not tick the “Block images and other external content in HTML e-mail” option. Click OK and save the change. You should now be able to view images in Outlook and not see the red X symbol.

7. Images not sent in Outlook Express

Also, if you are sending email with images, you could have disabled these images in the configuration. Those receiving your email will only see the red X or placeholders rather than the images. The solution to this is to go to your Outlook Express Tools -> Options -> Send tab. The “Mail Sending Format” should be “HTML” and not “Plain Text”. Click the “HTML Settings” button and check the box next to “Send pictures with messages.” Click OK to save.

8. Character Set not recognized by IE

This sounds rather technical. In layman terms, the browser interprets the code page or encoding of the web page. If your IE browser does not recognize this character set, or if a file in your browser software is corrupted or missing, the images may not be displayed when viewing the web page. For instance, the web page may be in a foreign language. If so, see that this language has been added to the browser settings. In IE, go to Tools -> Internet Options -> General. Under “Appearance” there is a “Languages” button. (In other versions of IE, the Language option may be under a different heading.) Add the languages that you would use to read the web page and click OK to save. If you are still unable to view the page, it is possible that a file or registry key is corrupted or missing. To resolve this, you may follow the Microsoft Help guide on your desktop to restore or repair your Windows software.

9. Image Server is down

Since free blogging platforms including Blogger.com have limits on the amount of storage space taken up by the Blog photos, images and graphics, it is worth considering hosting these images on an external server and linking to them from your Blog. These too have limits on space and bandwidth. All servers, even Blogger.com, can have downtimes. When these image hosts are busy, undergoing maintenance, temporarily suspended, offline, or when the download bandwidth has been exceeded, the images linked to the Blog will not be displayed. The problem could be temporary, and should you need to see these images on a particular Blog, revisit the Blog an hour or so later.

10. Image links are broken or dead

Since the images are hosted on another platform and linked, there could be instances when the webmasters typed a wrong URL, placed the ” at the wrong places or omitted the closing image tags. The image HTML code and attributes are discussed in Hyperlinks and Image Links. The image links could be broken or dead when webmasters delete the images from the server or switch image servers without updating the image links. It is also possible that the image is not hotlinked. By this we mean that when the image is stored on the image server, the link given is not a direct link to the image, but a page containing the image and other contents. Hotlinking takes up bandwidth and some image servers do not provide that service. If such URL is used in the image HTML code, the image will not show.

11. Cache not cleared

The Browser cache stores web page content of the sites you have visited on your hard disk. These are the Temporary Internet Files which supposedly speed up the page download when you revisit a site since some of the contents are already stored. However, these files can comprise cookies and JavaScripts too. Make it a habit to clear the cache regularly to remove these files. In IE, go to Tools -> Internet Options -> General and under “Browsing history” click “Delete” button. Delete all the Files and offline content. These are temporary files that can be removed. If you are unable to view images, sometimes deleting these Temporary Internet Files may solve the problem.

The Blogger or Blogspot Navbar is a default feature that appears at the top of every Blogger powered blog. It is a useful navigation tool which allows readers to search the blog for targeted content, mark the blog as objectionable, and randomly view other member blogs.

The Navbar can be disabled for users who publish contents via FTP, but it will appear on all freely hosted BlogSpot blogs. While the feature is undeniably useful, some people find that its position at the top of the page looks obtrusive even with a choice of 4 colors. Some therefore pick a template with a black background to blend well with a black navigation bar. There are also parents and educators who find the ‘view random blogs’ feature inappropriate, as their children may inadvertently view objectionable blogs.

Nevertheless, this article is not a discussion on the merits or demerits of a Navbar. That is for you to decide. Here, I am assuming that you have made a conscious decision to hide or remove the Navbar. Having so decided, this is the guide on how you can do it.

Log into your dashboard, go to Template -> Edit HTML. Scroll to anywhere on the template and insert the following CSS style definition in red within the head section.

Preview the template. You will notice that the Navbar is no longer displayed, and (depending on your template) your contents might shift upwards to take up the space reserved for the Navbar.

[Update:

This code display:none no longer works. Those who have used this may want to try out the other 2 methods (height and visibility) instead.]

Now, try this style definition:-

This will reduce the Navbar height to zero, effectively removing the Navbar. You can also explore this other style:-

You will notice that your contents do not shift upwards. The space is still reserved for the Navbar, but the Navbar is now hidden and not visible.

Either one of the above codes would do. You can also combine them if you’d like. For example, giving a numerical value for the height of the Navbar and hiding the visibility will give you a margin at the top and yet without the Navbar. Choose one that best fits your blog design. If you change your mind in future, and wish to have back your Navbar, simply remove the style definition.

Search Box

If you decide to remove the Navbar. This is one of the great features in the Blogger Navbar.

Feedburner is a very popular feed aggregator and provides a host of services which you can tap on to publicize and promote your Blog. One widely used service is their FeedCount Chicklet which displays your Blog Feed’s circulation statistics. The chicklet can be static (displaying the number of “readers”) or animated (showing the number of “readers” via feed). Although you can change the background and text color for the graphic display, there is no option for you to change the text. This hack will explain how to change and personalize the FeedCount Chicklet text as well as to change the animation settings so that it rolls the text more than once.

For those who have yet to sign up for a Feedburner account, consider doing so right away. Now that it is under the Google family, there is an easy way for you to channel all your Blogger feed subscribers to Feedburner. Login to Blogger, and under Settings -> Site Feed, enter your Blog’s Feedburner Feed address into the box beside “Post Feed Redirect URL.” Readers who click the “Subscribe to: Posts (Atom)” link or the RSS icon in their browsers will be redirected to your Feedburner Feed.

FeedCount Chicklet

When you are logged into Feedburner account and are viewing your Feed details, click the Publicize -> FeedCount tab. This is where you can generate a code to display a chicklet in your Blog which shows the subscriber count. Whether or not you already have a high number of subscribers doesn’t really matter. A nice chicklet can draw readers’ attention and make it easy for them to click the Feed link.

Choose the custom colors of the body and text and click “Activate”. You will be given a HTML code for the Chicklet. We have to edit this code. Open MS Notepad (usually found under All Programs -> Accessories in Microsoft Windows) or a word processor program. Copy and paste this code.

Static FeedCount HTML Code

The static FeedCount code will look something like this:-

This is the standard FeedCount chicklet you see:-

To change the word “readers” to some other text such as “Viewers”, insert this other code (shown in red). You can change the word “Viewers” to other text, but because of the space constraint, keep it to no more than 7 characters.

The FeedCount chicklet now looks like this:-

You can change the text to capital letters or include characters, e.g., “*FANS*”, and your new FeedCount Chicklet will look like this:-

Animated FeedCount HTML Code

The animated FeedCount code is rather similar except that the animation value is set as “1” instead of “0”.

When the page is loaded, viewers will see a one-time rolling text of number of “readers” via feed.

The word “readers” can be changed to other text like “Members” by inserting the code (shown in red):-

This is the new FeedCount Chicklet you will see. Insert the relevant text that suits your Blog.

Animation to play more than once

Other than the change in text, you can also set the animation to play more than once by changing the anim value to something greater than 1. Since readers are unlikely to stay on a page for too long, it need not be too big a value. When the page is refreshed, the animation count will start all over again.

Our animated FeedCount Chicklet will now look like this:-

Further reading:-

Another useful service that Feedburner has is their Headline Animator. You can create a nice animated banner that automatically displays the titles of your recent posts.

When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-

The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

but this:-

If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “FEQS-Frequently Encountered Questions”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-

Instead, they should be written as such:-

3. Container elements must have closing tags

This is not correct:-

In XHTML, there must be a closing tag with a forward slash (/) at the end:-

Examples of the many non-empty elements that have opening and corresponding closing tags are:-

4. Standalone elements to be closed

Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-

Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-

The second way is to add a corresponding closing tag like this:-

5. Elements to be properly nested

This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

6. Document to have only one root element

In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-

7. Attribute minimization is not allowed

In XHTML, all attributes should be in the form name=”value”. Even if the value is the same as the name, it cannot be minimized to one word. Hence the textarea code is not this:-

but this:-

XHTML Character Entities

Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.

There is now an icon in your Post Editor allowing you to upload a video into your post, in the same manner as you would for photos. At the moment, the feature is only available in the Post Editor and not as a Page element. However, we shall explain how you can insert the video into the Sidebar Page Element and not merely have it in the Post. As well, you will learn how to resize and align the uploaded Blogger video.

Upload Video

When creating a New Post, you can see a new “Add Video” icon in the toolbar:-

Write the post and when you want to add a video, click this link. You will be asked to upload a video file from your computer. This file has to be in AVI, MPEG, QuickTime, Realplayer, and Windows Media formats and should not exceed 100MB in size. We don’t know if there are bugs but we tried uploading 10 videos in different formats and were not successful in 8 of them. If you do see an error message, you can report it to Blogger Support citing the incident ID and try to upload it again. At the same time, assign a title to the video.

Video Upload Terms and Conditions

At the bottom, you will have to check the box to indicate that you have read and agreed to the Upload Terms and Conditions. These are the terms imposed by Google Video which Blogger is using for their video upload function. Most of us would not have bothered to read the standard terms. Nevertheless, from a layman’s perspective, some salient terms are worth noting:-

1. Google has a non-exclusive, world-wide, royalty-free license to use your name, logo and brand for advertising or promotional purposes.

2. If Google offers a service whereby you may charge end users to download or view your videos, you will receive only seventy percent (70%) of the gross revenues.

3. You warrant that you have the right to use and upload the video. Among other things:-

a. You are at least 18 years of age and are legally allowed to enter into the Agreement and grant license rights.

b. The video is not, in whole or in part, pornographic or obscene.

c. You own all the necessary rights, such as copyrights, trademark rights and rights of publicity in the videos.

d. The display or use of the videos do not and will not violate any applicable laws or regulations and will not be in breach of any rights of persons or intellectual property. (Bear in mind that YouTube has faced many threats of actions and lawsuits by notable figures around the world for illegal videos uploaded onto their site.)

4. If there should be any liability imposed on Google, you have to indemnify them.

Storage Space for Videos

Once you are done, the upload process will start, and since the files are usually big, it will take much longer than photos. You can in the meantime continue to work on the remaining contents of your Post. There is a 1GB storage limit for photos and images uploaded into your Blog. Since videos are hosted under Google Video and not Picasa Web Album, the video files will not be taking up this storage space. The Google Video terms do not seem to stipulate a storage limit for uploaded videos.

Resize Video

The Blogger video has a width of 320px and a height of 280px. This should fit nicely into the Blog Post segment of all standard Blogger templates. Some people may have customized their Blog layouts and reduced or extended the width of the Blog Posts. To adjust the size of the uploaded videos, after uploading it, view the post under “Edit HTML” mode instead of “Compose” mode.

Locate the video code. It should look something like this:-

You can change the width and the height (shown in red). Just ensure that the width does not exceed the width of the main post column, which is usually found under the #main-wrapper or #main-wrap of the template source code.

Align Video to Center or Right

By default the video is aligned to the left of the post. If you want it in the center, you may add this code (in blue) to the above video code.

Change the word “center” to “right” if you want it on the right side of the post.

Place Video in Sidebar

As mentioned above, there is presently no “Add Video” option under “Add a Page Element”. To have a Blogger video in the sidebar, we have to first create a post. It can be a temporary post which you can delete later. Upload the video and follow the above guidelines to resize it to a small screen. For example, we resized our test video to a width of “200″ and height of “180″. Publish the post.

Refresh your Blog. You should see the temporary post together with the small video. View the source code of your Blog. For Firefox users, in your browser toolbar, go to View -> Page Source or press Ctrl+U. For Internet Explorer users, View -> Source. Next, press Ctrl+F, enter the word “video” to search for the video code. It is a rather long code and looks something like this:-

Block copy this entire piece of code. Now go to Template -> Page Elements -> Add a Page Element in the sidebar, and choose “HTML/JavaScript”. Paste this code. If you want the video to be in the center of the sidebar, add the alignment tags outlined in the earlier section. After saving, drag and drop the element to the part of the sidebar where you want it to appear and Save the Template. You may go to Posting -> Edit Posts to delete the temporary post. View your Blog to see the Video in the Sidebar!

You can display an alert message box to give a special announcement, provide information, or warn the readers before they view the full contents of your site. The pop up box will contain your message and have an “OK” button for viewers to proceed, or a prompt or cancel button to redirect readers to another site. We can further customize our Blog by asking for the reader’s name and inserting this input automatically into a welcome message. This tutorial will show you how the JavaScript for these alert and dialog boxes can be inserted into your Blog.

Do note that because JavaScript programs run the moment the page is loaded, many users may, for security measures, set their browsers to disable JavaScripts. Also, too many of these scripts may make your . Insert this only if you think it appropriate or useful. Since these are system dialog windows, they may look different in different browsers and operating systems.

Alert Box with OK button

You can have a serious message for sites with adult contents:-

Or a light-hearted humorous message just for the fun of it:-

To create an alert message box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. Paste the code shown below:-

Substitute the words in red with the message that you want to have displayed when users view your Blog. The words in green are the alternative text which will be displayed if the users have turned off their JavaScript functions.

Alert Box with Confirmation button

Although free speech is the order for the day, as authors of Blogs, we should be sensitive to the ethics and morality concerns of the people all over the world. If the Blog contains contents that are explicit or unsuitable for a select group of people, give the readers a choice not to proceed to read your Blog. The JavaScript for this alert box shows two buttons – “OK” and “Cancel” – which the readers can select. If their option is to “Cancel”, they will be redirected to a safe site. For this example, we have used Google’s site as the safe landing page.

To insert the alert dialog box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. Paste the code shown below:-

Your message appears in the red portion. Enter your Blog URL in the blue colored part of the code. This is where your visitors will go to if they click “OK”. In the orange part, enter the URL of the place to redirect your visitors to should they click “Cancel”.

Alert Box with Prompt field

Another type of dialog box prompts the user to enter some information. For instance, the prompt box can ask the reader for his name and use that to customize the web page. Be reminded that many browsers are configured to disable scripts that ask for information. Have fun customizing your Blog but don’t make this a key aspect of the contents. For example, if you have a story that keeps mentioning the name of the reader, the parts where the name should be will appear “null”.

In Template -> Page Elements -> Add a Page Element we add a HTML/JavaScript and paste the following code:-

The question can be changed. The user will be prompted to enter something in the dialog box. He can of course leave it blank and press “OK” or click “Cancel”.

Below this JavaScript, in your main body, add another HTML/JavaScript page element. This time, you can type in this:-

This is what will appear in your Blog, based on the input that the reader keys in.

Change the wordings to suit you and wherever you want the reader’s name mentioned, add the script (shown in red). Try to phrase the wordings such that if the user enters nothing and clicks “OK”, the blank space is not obvious. A prompt dialog box like this adds a personal touch to your Blog.

This tutorial shows you how to create widgets or boxes with scrollbars. When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

The “overflow” style property

Let us first explain what the code is about. We use the “overflow” property to create the scrollbars in CSS or the stylesheet. There are several values that can be assigned to it, although not all are useful for our purposes.

1. overflow:visible

This is the default value. The extra content is either rendered outside the box or the length of the box is extended to include the extra content. Don’t bother to use this in Blogger blogs because you will see the contents of the widgets overlapped like this:-

2. overflow:hidden

This will cut off the extra content that overflows and there will be no scrollbar to the box. It doesn’t serve our purpose as well.

3. overflow:scroll

The content is clipped but there will be scrollbars at the sides.

4. overflow:auto

We like this attribute. Basically, it tells the browser to display a scrollbar only when necessary i.e., when the content overflows the width and height settings.

Scrollbar in All Widgets

Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */ :-

In our example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

Scrollbar in Widgets of One Sidebar

Let us assume for our discussion that you have modified your template to include an additional sidebar using our Three Column Template guides. We may have all the AdSense Ads in one sidebar and we want to add the scrollbars into the widgets of the other sidebar. The style that can be inserted into the template will be this:-

Or this:-

depending on which sidebar your widgets are at. Preview the template and if it is what you want, save the Template and refresh your Blog.

Scrollbar in One Widget only

We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-

This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in red.

Scrollbar in All Widgets except One

A further variation is to add scrollbars to all the Widgets except one or two. As mentioned earlier, AdSense widgets should not have scrollbars and it might be your intention to have scrollbars in the rest of the widgets.

Follow the guide above to insert scrollbars into all the widgets. After that for the ones that you do not want scrollbars to appear, specify a bigger value for the height:-

For example, if your AdSense unit is a 160×600 Vertical Wide Banner, put the height of the widget as 600px. Since the contents fit nicely into this size, the scrollbars should not appear. Change the widget ID accordingly to point to the widget that you want to exclude and adjust the height value.

Scrollbar for Links and Labels

We need scrollbars usually for Label lists and Blogrolls created using Link lists because these are usually lengthy. You may have noticed that using the above codes, the entire widget is included in the scroll. Supposing we want the title to remain static and have a scrollbar only for the links or labels, we can insert a code as follows (remember to enter the relevant ID into the part shown in red):-

Scrollbar for Blog Posts

Should you want the scrollbars for each of your blog posts, scroll to where you see this code and add the portion (shown in red):-

Scrollbar for text within Blog Posts

Perhaps you might not want to have scrollbars for all the Blog Posts, but only for a piece of text within a Blog Post. You can follow the steps in this guide to insert scrollbars to text within the post.

Scrollbar for Long Text

If you have a long piece of text like those found in the usual Terms of Service, User Agreements, Rules, Privacy Policy, etc., scrollbars will be very useful in minimizing the text area and yet allowing readers to view the full contents.

Under Template -> Edit HTML, /* Sidebar Content */ , define a class as follows:-

What we have done is to specify that the text will be contained in a box with scrollbars automatically added if the text overflows the 200px x 200px area. The values of the border, height and width can be changed to suit your needs.

We can now type the text. This text can either appear in a Blog Post, or as an element in the Template. If it is in a Blog Post, after you have typed the TEXT in the Post Editor, switch to “Edit HTML” mode and insert these tags (shown in blue):-

The TEXT can be inserted directly into the template via Template -> Page Elements -> Text. Similarly, if you have typed it in the rich editor mode, you can click the “Edit HTML” link at the top right corner and insert the above tags.

After publishing the post or saving the page element, you will be able to see the TEXT within a box and the scrollbars automatically inserted.

This article is updated to address the difference in the way the code is interpreted by the different browsers, namely Internet Explorer and Mozilla Firefox. We have also included a sample music file which you can use to test the effects of adding the sound file to your Blog.“Music, the greatest good that mortals know,
And all of heaven we have below.” … Joseph Addison

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple - have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server.Upon uploading, note down the URL of the file.

Alternatively, there are several sites that offer free download of their music files. You can enter search words like “free music download” or search for a popular artist name in the Google search box. Most of the sites that offer free download will lead you to the file location stored in their servers. Copy the URL of the music file that you have chosen.

If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Google Pages - http://ownlblog.googlepages.com/BalladePourAdeline.mid - whenever you are prompted to enter the “URL of music file”. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played.

Link for reader to click

This is a text link. Your visitor can click the link if he wants to hear the music.

Remember to enter the URL of music file into the above code. This code can be inserted into your Blog post. If you want to put it in your sidebar, you can go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript and insert the code. Whatever words you type into the “Click to hear music file” will appear as the text link.

Music with a console

A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

You can either insert the music console into your Blog post or your sidebar. If you want it in the sidebar, go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript.

The code to insert is this:-

For instance, using the following code:-

this is what you see:-

It will look different in IE and Firefox, depending on the installed plugins.

Note the following attributes and how they work on different browsers:-

1. Insert your URL of music file into the code.

2. The width of the example you see above is “300″. If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.

3. The height would depend on your preference and space constraints.

4. The autostart attribute has two options. If you choose “true”, the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as “false”. If the visitor wishes to hear the music, he can click the play button to start the music.

Note, however, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is “false” which means the music will not play automatically. The default setting for Firefox is “true”, and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to “false”. If you are working on the Mac, the default setting for both browsers is “false”.

5. The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are “false” or “true”. If the attribute is “false”, the music ends after it is played once. If it is “true”, the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose “true”.

For certain versions of Netscape browsers, another attribute that might work is loop=”n” where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.

6. You can specify the number of times the music is to be played. In the above example, where playcount=”2″, the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Background music to play automatically

For the music to play the moment your page is loaded, the code will have to appear in the HTML document of your site. Note that in so doing, there are no controls for the visitor to choose whether or not to listen to the music, nor options to turn it off. Login to your Dashboard and under “Template”, click “Edit HTML”. Somewhere near the top, after the word <Head>, insert this code:-

Remember to insert the URL of music file into the code. There is no image of a console and readers cannot choose to turn off the music. Use this option with discretion.

Troubleshooting

The sound files can be in any format provided that your browser has the necessary plugin to play that file. Many people have problems playing MP3 files because their Firefox browsers do not have the necessary plugins. To check what your Firefox browser can support, enter this command into your browser:-

It will list all the installed plugins and the media files that can be played. If you need additional Mozilla Firefox add-ons, you can visit their Add-ons Page.

Further reading: