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

<script type="text/javascript"> alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!') </script> <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.



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 = "http://feqs.blogspot.com/"; } else { window.location = "http://www.google.com/"; } </script>

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"); </script>

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

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.



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.

Read more >>

Add Digg button to Blogger or Blogspot

This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.



Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

<p><data:post.body/></p>

If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

If you would like the button to appear at the end of your post, replace with this following code instead.

<p><data:post.body/></p> <div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

If you want to have the button at the top left corner of your post, change the alignment.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

Digg has another compact button. If you insert this code:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

You can also change the background color of the button to blend with your site. For example, a code like this:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_bgcolor=&quot;#BDEDFF&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

[Update] This segment is added in response to user's request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p>

If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; digg_skin=&quot;compact&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

Move the Digg button code above the labels if you'd like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-

<div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div style="float:right; margin-left:10px;"> <a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>

You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

The button 91x17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.

Button for selective posts

The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.







Take note of the image URL. For example, the image URL of this button is

http://digg.com/img/badges/91x17-digg-button.gif

Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the orange portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.

<a href="http://digg.com/submit?phase=2&url=URLofyourstory" target="_blank"><img border="0" alt="Digg my article" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a>

Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

For this article, I have manually inserted the Digg button.

Read more >>