Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jul 16, 2007

Digg This Story

Alert Message and Dialog Box

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 page slow to load. 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:-

Alert Message and Dialog Box

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

Alert Message and Dialog Box

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:-

<script type="text/javascript">
alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')
<noscript>Enable javascript in your browser to view an important message.</noscript>

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.

Alert Message and Dialog Box

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:-

<script type="text/javascript">
confirm('This site contains explicit contents. Are you sure you want to continue?');
if (confirm('This site contains explicit contents. Are you sure you want to continue?')) {
window.location = "";
else {
window.location = "";

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:-

<script type="text/javascript">
var yourName = prompt("How can we address you?", "Reader");

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”.

Alert Message and Dialog Box

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

Welcome back <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, mention us in your post or link to this site. Hope to see you again <script type="text/javascript">document.write(yourName)</script>

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

Alert Message and Dialog Box

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.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


coupon code said...

your message on anonymous postings is strange.

i just wanted to thank you guys for giving tips for new bloggers

BlogmasterPg said...

Very funny and useful this javascript. I'll add sure in one of my blogs ( I think it will be useful so in a wordpress blog, (it's java).Thanks. I'm writing to you an e-mail: i have a problem with one blog: IF you'll have 5 minutes..

Kesh said...

You are great guys..Just little too late for me to found your web guys

Anonymous said...

i do have a question in regards to the prompt box. i post it and then it redirects me to my blog with the prompt box there again.

admin said...

i wish 2 place JavaScript only one main page..but even when readers click labels it shows again alert box
can u help me quickly.


butchik said...

thank you for this but i have a problem. when i click ok button my blog starts loading then the alert message appears again. this continues for eternity. please help me fix this. thanks

shashank said...

thanks for this dude....
it hepls a lot...

somogyvari said...

The alert box code doesn't work: It keeps reloading the alert box after visitor clicks OK.

Mason Colby said...

is there any way to set the warning message so that it only prompts when the site blog is first visited? i am using a page and any time a new page is brought up, say an archived post, etc, the warning message shows again.


DirtDigger (Tessa) said...

Hey, great site guys- you have helped me so much!

I was wondering if you can have the warning alert come up for only the main home page instead of showing up every time you view posts in the archive? I put one on mine and found it annoying (but funny) because I kept having to hit 'ok'- or maybe a check box for the option don't show me this again while they are on for that session? just a thought- don't know if that is possible.



Nidhi said...

i tried the most simple one.. it didnt work :(

all my life said...

thank for ur tips n trikc, so helpfull
one again, thx very much,....

Keisye said...

Hi bizwhiz!
Great info! Thanks!
I want to use it on my site, to ask for donation in return to free games. But i need to make sure if it's against adsense policy to use them. Is it the same as pop-ups?

I really hope you answer this question. Thank you!