JavaScript - Small Tips II (How To Make An Alert Message Pop Up Box)

Before we go any further to discuss this JavaScript - Small Tips II, I must remain you as in JavaScript I, that at least there are 2 think we must be consider to use the JavaScript apps , because to many JavaScript in your template will slowing down your web page to load. Besides that, for security reason, many user set their browser to disable JavaScripts. To resolve these problem, we must be wise to choose which the JavaScript that will be install into our template (choose the appropriate and useful JS apps) and use the "warning message" that we using JavaScript .

How To Make An Alert Message With JavaScript.

The functions of an alert message is to provide announcements, information or warning to the guests before they go to see or read the entire contents of our site.
There are a few display an alert message that we can create, an alert message box which only has a button 'OK', "OK" button and "cancel" to divert to other sites, and an alert message box with a dialog box.

Note: This tricks maybe annoying to some people, because this pop up box will STOP our browsing activity, we will not be able to do anything until we execute this pop up box (click OK or X).

An Alert Message Box With 'OK" Button.

We usually seen this message on "adult" or "serious" sites, the messages give warning to their visitor about the content of the sites and their restriction or limitation.
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. And paste this code shown below.

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>

Just change the Red words with your message..!, this words will be displayed as a pop up alert box when the visitors view your site / blog. The Purple words will show up when our guests disable their Javascript on their browser.
Look at this example below..

I put this "alert message" page element right under my header. This alert message box just for an information cause both choices, click "OK" button or click "X" will bring our visitor directly into our site (continuing to open our site).


An Alert Message Box With Confirmation ( "OK" and "Cancel" ) Button. 

For any reasons, sometimes we need to give our guests a choice not to continuing or cancel to visiting our website / blog. If our guests prefer to cancel, then they will be redirect into another URL address.
So if we want to do this trick, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area or even below your header, and select HTML/JavaScript and Paste this code below.

<script type="text/javascript">
confirm('This site contains sadistic materials. Are you sure you want to continue?');
if (confirm('This site contains sadistic materials. Are you sure you want to continue?')) {
window.location = "http://doit2us.blogspot.com/";
}
else {
window.location = "http://www.google.com/";
}
</script>

Change the Red words with your message..!, the Blue URL is the URL destination address when our guests click the "OK" button, and the Purple URL is the URL destination address when our guests click the "cancel" button or click "X".
 

An Alert Message Box With Dialog Form

Besides give a warning or information to our guest, with this simple Javascript trick below, we can build a warning or information message + dialog form. In this example below, This trick is to give a warning to our guest, knowing the name, and give a welcome message. It,s a rather weird isn't it, but this just a sample, you can created better than this, I just want to share an Idea...

First Script

<script type="text/javascript">
alert('You are about to enter our "serious" site. This site contains violence and sadistic material, persons under 18 years old are prohibited ... Beware!')

var yourName = prompt("Please, write your name first...!", "Reader");
</script>

<noscript>Enable javascript in your browser to view an important message.</noscript>
<script type="text/javascript"></script>

The way what we done it, is the same with both  How To Make An Alert Message With JavaScript. above, I put the FirstScript page element below my header. Because this is a dialog box, of course we must have a follow up, to continuing the action, So I put a second script  in top of my post body as my welcome message.

Second Script

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

So this is what we got with those trick.
When first opened our site or blog, there will be a pop up box warning message just like the first trick,

after click "OK" or "X" button, there will be shown another pop up dialog box like this,

If the Guest write their name into the dialog box (eg. Mc4tur) and click "OK", then they will be brought to continuing opened our site with a welcome message in the place where we put the second script page element.

Well that's all, you can combined those tricks or make a modification (eg. put into the post). but please remember choose wisely because of the disadvantage of the JS tricks.

How To Change The Blogger Blog Post Footer

B efore we continuing discuss about How To Customize The Blogger Blog Post Footer, Let,s look at this picture bellow for the description...

1. Change The "AUTHOR" Text
Actually, this AUTHOR'S name is the name that shown on our blogger profile. To change this name then followed this steps.
Log in to Blogger, in Your Dashboard select your blog (if you have more then one) >> Layout >> Edit HTML and click Expand Widget Templates box. Then find this words data:post.author

<div class='post-footer'>
  
      <div class='post-footer-line post-footer-line-1'>
       <span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/> <data:post.author/>
          </b:if>
        </span>      
        <span class='post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
          </b:if>

A. To change your author's name, just replace the <data:post.author/> with whatever name you like.. This is mine when I change Mc4tur (before) with Admin.

Note: We can "decorate" our name with HTML code, I make it bold by adding Tex

B. To change the POSTED BY phrase, replace the <data:top.authorLabel/> with yours. This is mine when I change it into WRITTEN BY

 Note: We can decorate this with HTML Code too..


2. Change The "AUTHOR" Text With An Image
Because this tricks are about "knowing the posistion" of the AUTHOR, and we also know that we can "decorate" it with HTML Code. Instead of Text, we can replace it with our Image, or even combined them.

To do this tricks, of course we must have an Image (small signature will be better) first. Let's just say that we already have the image that we store in a host sever. Please remember the URL of your image.

Note: You can learn how to have free web storage in Using Google Groups and Google Sites as A Web Storage Space and how to use it in Create a Rainbow Colored Link

A. To change the Author text with your Image and blog link, just replace <data:top.authorLabel/> <data:post.author/> with this script.. 

<a href="Your Blog URL"><img src="Your Image URL" /></a>

If you don't want to insert your blog link, then just deleted it and only insert <img src="Your Image URL" /></a> Then the final script will be like this:

<div class='post-footer'>
  
      <div class='post-footer-line post-footer-line-1'>
       <span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <a href="Your Blog URL"><img src="Your Image    URL" /></a> 
          </b:if>
        </span>      
        <span class='post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/>
          <b:if cond='data:post.url'>
            <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
          </b:if>

B. To combined with the text, choose which one will be replaced by the image. <data:top.authorLabel/> or <data:post.author/> . Usually we replace our name with Image. We can also combine with Text Replace (1B.)  either, to make WRITTEN BY "IMAGE NAME".

How To Make A Scroolbar Within Blog Post

This trick is rather similar with How To Make A Spoiler In Second on purposed and the final display, Each technique have their "positive and negative" factor. I don't want to discuss the "more and less" of each trick, is up to you to decided which one that will fit to your purpose. Scrollbars will be very useful to minimized the text area and allowing readers to view the full contents by clicking the bar. We usually saw this technique implemented  for Terms of Service, User Agreements, Rules, or Privacy Policy.

To make a scrollbar within the blog post, first we must define a class (write into HTML Template), this action is giving the "name" to this class and setting the display when it show, and then to applied within the blog post, we must "call" the class (by writing the class in our blog post).

Log in to Blogger >> In your Dashboard choose your Lay out blog >> Edit HTML >> and Find /* Sidebar Content */ and put this script to define a class below it:

.scrollingpostbar {
height:350px;
width:450px;
border:0;
overflow:auto;
}

You can rename .scrollingpostbar as you like, as long as you remember the "name", set the height and weight and border by adjust 350, 450 and 0 to make it fit with your post.


After finished, then we can type the text, although the tittle is How To Make A Scroolbar Within Blog Post, actually we can use this scrollbar mode in the page element in our template, exactly the same as How To Make A Spoiler In Second .

To show up in our blog post, after we have typed the TEXTARTICLE in the Post Editor, then click “Edit HTML” and paste these tags, exactly as this position:

<div class="scrollingpostbar">TEXTARTICLE</div>

I wrote this article again and applied this trick to show up how is the final display for example:

This trick is rather similar with How To Make A Spoiler In Second on purposed and the final display, Each technique have their "positive and negative" factor. I don't want to discuss the "more and less" of each trick, is up to you to decided which one that will fit to your purpose. Scrollbars will be very useful to minimized the text area and allowing readers to view the full contents by clicking the bar. We usually saw this technique implemented  for Terms of Service, User Agreements, Rules, or Privacy Policy.

To make a scrollbar within the blog post, first we must define a class (write into HTML Template), this action is giving the "name" to this class and setting the display when it show, and then to applied within the blog post, we must "call" the class (by writing the class in our blog post).

Log in to Blogger >> In your Dashboard choose your Lay out blog >> Edit HTML >> and Find /* Sidebar Content */ and put this script to define a class below it:

.scrollingpostbar {
height:350px;
width:450px;
border:0;
overflow:auto;
}

You can rename .scrollingpostbar as you like, as long as you remember the "name", set the height and weight and border by adjust 350, 450 and 0 to make it fit with your post.


After finished, then we can type the text, although the tittle is How To Make A Scroolbar Within Blog Post, actually we can use this scrollbar mode in the page element in our template, exactly the same as How To Make A Spoiler In Second .

To show up in our blog post, after we have typed the TEXTARTICLE in the Post Editor, then click “Edit HTML” and paste these tags, exactly as this position:

<div class="scrollingpostbar">TEXTARTICLE</div>

To make a scrollbar in page element.  Our Text or HTML/Javascript Code can be inserted directly into the template via Layout -> Page Elements -> Add a Gadget >> Text or HTML/JavaScript. Similarly, if we have typed it in the rich editor mode, we 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 or HTML/JavaScript gadget within a box and the scrollbars automatically inserted. 
Note : this trick only works on Text or HTML/JavaScript gadget.

How To Make A Scrollbar In Your Blogger Widgets III : Each Widget Scrollbar

T his article is the end of my "trilogy" How To Make A Scrollbar In Your Blogger Widget I, II, and III.

As I mention in HTMS II  The best result of the "scrollbar mode" is when applied to each widget, because we can full-controlled which of our widget that we want to make it in "scrollbar mode" and which one is not.. This method is a bit complicated but give us the best results.

The technique of "how to make it scrollbar mode" is the same as HTMS I and II. But the secret of this method is "to find the name of each of our widget".

The following are some examples of the widget "name":

Adsense
Blog
BlogArchive
Followers
Header
HTML
Label
Linklist
Text

 Those "name" represents the widget, so in the application, we can estimate the  widget (location) by their name. Actually those "name" are following by the number as an complete "Id" eg. Adsense1, HTML4. If we only have one widget in our template than the following number is 1 eg. Adsense1, if we add a second same widget eg. we put another adsense into our template than the widget name will be Adsense2 and so on. Note : Blog means the blog post.

If you not sure with which one is? Take it easy, just try it and preview it, if you find it wrong than you can delete the script and try the other, you just make sure to remember what you have done before to corrected it later.

To be more easily understood, I will use my HTML Template for the explaination.

I want to make my "BLOGGER TIPS ARCHIVE" in "scrollbar mode" From the "name" this widget must be the BlogArchive, because I don't have another archive widget, I can assure that the widget Name/Id in my template is BlogArchive1. So I Go to my Dashboard >> Layout >> Edit HTML.
To make it sure that I maybe forgot have been installed another blog archive and or have "wrong script blog archive"then I try to find BlogArchive (I use Ctrl+F in my FF Browser).
After sure that I've only got BlogArchive1. Next... I find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ) and add the script right after it:

/* Sidebar Content */
#BlogArchive1{
height:200px;
overflow:auto;
} 

This is before:

And this is after:

 How To Overcome The Third-Party Display Rules Widget.

As we've discussed in HTMS I, when installing third-party widgets eg Google Adsense, we are forbidden to cut display or display them truncated. 
By knowing the name of our widget, then we can set the height and weight for each of our widget. We can also set the scrollbar to all of our widget (like HTMS I) or by sidebar (like HTMS II) and make exceptions to certain widget.
For example, if our AdSense unit is a 160x600 Vertical Wide Banner, then we must set the height of the widget as 600px. Because the contents fit nicely into this size, then the scrollbars should not appear. So it will not break the Third Paty rules.

/* Sidebar Content */
#AdSense1{
height:600px;
}

That's All.. You have another trick about scrollbar ? Please share with us..

How To Make A Scrollbar In Your Blogger Widgets II

In How To Make A Scrollbar I, we have discussed about making the scrollbar on the whole widget (Sidebar), unfortunately this situation will be a problem if we install a third-party widgets that forbids us to change / cut their display widget (eg Google Adsense).

To overcome that problem we need advanced trick.

One Sidebar "Scrollbar Mode"

If your template has been modified to have 2 sidebar (like this blog), then we only need to put the third-party widgets on the first sidebar along with other widgets to apply non "scrollbar mode" sidebar, and to place the other widgets on the second sidebar to be made "scrollbar mode". In the other words, we classify the widgets into 2 groups and put into the separate sidebar, non "scrollbar mode" sidebar and "scrollbar mode" sidebar.
This method is the same as we do in How To Make A Scrollbar I, but we have to insert the script below one of the "sidebar-id's" that we will create a "scrollbar mode" sidebar.

The most important is you must know and find  your "modification (add) sidebar name", cause this is the key of this method,  so you can put the script below it. Let us use my blog as a sample, I make 3 modification sidebar, named #sidebar-wrapper, #second-sidebar1-wrapper, and #second-sidebar2-wrapper (please look at the position..!).

 So, depend of my choice to make a scrollbar mode on one of my sidebar, than The script that can be inserted into my template will be like this (Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ in some case, may be you'll found like mine, with -----  and add this script right after it) :

/* Sidebar Content */
#sidebar-wrapper{
height:200px;
overflow:auto;
}

The display will be like this:

Or this,

/* Sidebar Content */
#second-sidebar1-wrapper{
height:200px;
overflow:auto;
}

Or this,

/* Sidebar Content */
#second-sidebar2-wrapper{
height:200px;
overflow:auto;
}

Unfortunately, all of your widget in your "scrollbar mode" sidebar  become only "one scrollbar".

Actually, the best result of the "scrollbar mode" is when applied to each widget, this method is a bit complicated but give us the best results.
We will discuss it in the next post...

How To Make A Scrollbar In Your Blogger Widgets I : In Second

There are several ways to customize the look of widgets that are too long in our blog pages. Two of them have been discussed in How To Make A Dropdown List I and II.

If in How To Make A Dropdown List I and II. we abbreviate the display of labels and other widgets with a dropdown list, then in this article we will discuss how to adjust our widget display in the form of scrollbar.

According to Wikipedia, a scrollbar (Also known as a handle in the very first GUIs) is a graphical object in a graphical user interface (GUI) with which continuous text, pictures or anything else can be scrolled  including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or viewport.

With scrollbarr method, we can set how long the display of our widgets, so that the view from our blog pages will become more neatly arranged.

Actually, it's very easy to make a scrollbar in our widget.  Log in to your Blogger Blog, Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ), we only need to add this simple script code. just below /* Sidebar Content */

/* Sidebar Content
----------------------------------------------- */
.sidebar .widget{
height:250px;
overflow:auto;
}

This is my blog page views before :

And this is after :

We can set the height of the scrollbar to fit our blog page by change the value 250 (px), Please try  to change into 200px or 300px, you'll know the differences and will be found your match lenght...

When there is a sentence in the widget contents that exceed the sidebar limit, like in my NEW BLOGGER TIPS LABELS, then there will be a horisontal scrollbar automatically show up.

If you want to (I personally do not need it because there is already wide settings sidebar), you can also add Horisontal Scrollbar deliberately to set the width of the widget, by copy this script code width: 200px; (change the number 200 as you want) and paste right under height:250px;, so it will look like,

/* Sidebar Content
----------------------------------------------- */
.sidebar .widget{
height:250px;
width:200px;
overflow:auto;
}

ATTENTION : This trick will set all of our widget in sidebar being a scrollbar mode, So please make sure if you have installed widgets from third parties (like Google Adsense), this scrollbar tricks does not violate their Term Of Service or their rules. I am not responsible if you get in trouble because of this trick...!!!

To overcome those problems, we can make a scrollbar in our blogger widget separately one by one... We will discuss it soon in my next post.. How To Make A Scrollbar In Your Blogger Widgets II and III.

Blogger Team made millions of tutorials blog looks like a "foolish tutorial"

I am too late knowing a great news, because just today I know that 11 days ago I got an email from Blogger Team, whose contents are as follows:

We’re excited to announce that the Blogger Template Designer is now available on Blogger in draft, Blogger’s experimental playground.

The Blogger Template Designer makes it easy to customize the look and feel of your blog without knowing any HTML or CSS. Here are a few of the new features available in the Blogger Template Designer :

    * Beautiful new templates to start from
    * Custom blog layouts with one, two and three columns
    * Hundreds of background images
    * Customizable colors, fonts, and more...

What are you waiting for? Express yourself in style with the Blogger Template Designer. Learn more at www.blogger.com/templates.

The Blogger Team

With great enthusiasm I hurried to follow the link provided in the email ..

Wow .. If prior to the date 03-27-2010 Blogger only offers standard templates as we already know (rather boring) since last few days, the Blogger add facilities to enhance your display settings templates.

There are quite a lot of facilities added to the Blogger settings, ranging from the addition of templates with different variations, a variety of background images, to the layout settings, and other settings such as the division of the column footer into 2 or 3 columns.

Everything we can do with an easy step in a few clicks, yes .. exactly like the contents of an email from the blogger team, we can modify our templates without needing to know HTML or CSS code.

This could be a "big punch" to many "tutorial blogs" that so far has a busy traffic because of the many novice bloggers who are looking for information about the articles that contain how to modify the blogspot template (by modifying the template CSS and HTML code).
Blogger Team made millions of tutorials blog looks like a "foolish tutorial", killing mosquitoes with a shotgun.

Although not apply yet to my personal blog because of my limited time to explore, but this is really great news, additional facilities have been long-awaited by millions of users Blogspot.

I hope I could write my experience in using of these Blogger latest facilities as soon as possible