Wednesday, December 30, 2009

Create a popup webpage in Blogspot posting


In one of my previous post, I've already discussed that how to use JavaScript in a post.
(For your reference, we can use JavaScript directly in a post. Its very similar as we use HTML in a posting.)

In this posting, we will discuss how to create a pop-up window (of course, if user clicks at a button. I am well aware that how irretating a pop-up window could be), which can launch a webpage but without a toolbar.

For an example, click on this link. It should bring you google home page, but with restriction in size and is not having a toolbar associate with it.






Here we discuss that how to create such a button.
Here are the two blocks of code:
First one is a JavaScript function. It can be put either in the blogspot header and in that case, it will become global. All posts will be able to call this function programatically. Else in another case, you can also place it in the same post. The only condition is that funcition should be declared before it is being called.

Second block of code is just a use of html form/button, which calls JavaScript on clicking on it.

<!--1st piece of code. It is a JavaScript funtion. Place it either in header of blog or above user of 2nd piece of code in a posting.-->
<script LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=400,left = 390,top = 250');");
}
// End -->
</script>
<!--2nd piece of code. This will open a window, showing google.com home page-->
<form>
<input type=button value="Open the Popup Window" onClick="javascript:popUp('http://www.google.com')">
</form>

You must have noticed that in the first piece of code (JavaScript function), I have put value of scrollbars=1. Thus scrollbar appears in the wwindow. If you want to suppress it, put scrollbars=0.
Similarly, you can adjust other settings also.

That is it. Hope I explain it in lucid manner.

Regards,
B.O.

How to make a sticky post in Blogger?




First of all, I would like to describe what a sticky post means?
Simple enough, it is the post which will always be displayed at the home page of your blog irrespective of your postings.

If a blog is not having a sticky post on it, every time a new post is posted, this new post will appear first on the blog.
However sometime one may not like the idea of changing home for every post and sticky post is a solution for that.

We can create sticky posts by two methods.

Method1:- Create a future dated posting.
As we know, all the posting in a blog appears chronologically. Latest will be on the top (1st posting) and oldest will be at last.
Here is the trick.
If we create a posting for a future date (say 1-Jan-2099) and if rest of all the postings are having system date/time then till 1-Jan-2099, future-dated posting will appear as 1st post and will work as sticky post.

However Blogspot won't allow to publish something immediately which is scheduled for future date.
You will have to perform a trick once again.
(1) create your post and publish it with post date/time as system date/time.
(2) Edit this posting and Set date and time of this post as future date. Remember to set it too far, so that you won't have to reset it again.
If you will set it to very near future, you will have to update it again and again to keep it stuck at the top.




Method2:- Create Sticky post using page element
As we know, page elements will appear irrespective of postings, whether first or last.  If we can create a page element which appears on the top, it will be always there whether its home page or a permalink.

However, I don't like this idea to make something (its not a post) sticky. And reason is the same as described above. This sticky notes will always be at the top, no matter you go to anywhere/any link in your blog.

Here is the method to create this sticky page element.
(1) Above main-wrapper, add a page element.



(2) Select HTML/JavaScript widget for this new page element.
(3) And finally, introduce the text whch you want to appear as sticky notes to your blog. As it is an HTML/JavaScript widget, you can show your skills here.

Such Sticky notes can be used as a welcome message or a brief introduction to your blog.


Regards,
B.O.

 

Popular Posts

Popular Posts On EAB

Demo Donation
This demonstration will accept a fixed amount of $0.05.

Man Behind This Blog

My Blogs