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.

Wednesday, September 23, 2009

How to Backup/Restore Blogger Template?


Many a times, we need to customize blogger template. Sometimes we want to change body colour and sometimes width of body. If I am not happy with 2 column default template, I may want to change it to 3 or 4 column template.

In this process, its quite possible that the template becomes corrupt and we lost several settings.
Thus make it a habit that before making any change to blogtemplate, take the backup of it. In case, anything goes wrong, we can restore the template from backup file.

Backup template


Step1:- Go to Layout - Edit HTML.
Step2:- Download Full Template
Step3:- Save template to hard disk.






Restore template



In case you want to restore the template, follow these steps:
Step1:- Go to Layout - Edit HTML.
Step2:- Browse and then upload template (saved at hard disk)
Step3:- Save the template

Tuesday, September 22, 2009

Blog Layout - understand its basic


I will discuss about basic Minima template and once you are comfortable about basics of template, you can apply this learning to understand other templates also.


Here is an image of Minima template Layout.

Hierarchy goes like this
  1. Navbar
  2. body


    • Header
    • Outer wrapper
      • Main wrapper
      • Sidebar



    • Footer
Navbar:- Navbar is provided by Blogspot and there is a little about its customization. We can just change its colour and this customization is available in only  4 colours.
You can't remove (or add costomized) text to Navbar.
For me, it doesn't look professional. Hence, I usually prefer it to hide/remove.
Link:- How to hide/remove Navbar.


Body:- This section is completely in your hand and you can modify it as per your preference. This is the parent of Header, Outer wrapper and Footer.
If you have defined any style at body level, all children will follow it unless the same style is overridden at child level. Assume if you define background colour (say yellow) at body level, whole body will appear in yellow unless you separately define background colour at header/outer wrapper/footer.
Here you can
  • increase/decrease width of body
  • change default 2 column template to 3 or 4 (or any number) column template
  • change text decoration for whole body
  • change link css
Tips for professional blog:-
  • Keep width of header, outer wrapper and footer same.
  • If body colour is not white, keep different colour for header/outer wrapper/footer.
  • don't go for more than 4 column in the template

Monday, September 21, 2009

How to remove dotted bottom border from post?





In this post, we will discuss that how can we remove bottom border (which is a dotted line) from post.

Step1:- Go to Layout - Edit HTML

Step2:- Find below mentioned code:-
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Step3:- modified this code as
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

Its done and bottom dotted border has been removed from your post.

BlueOcean

 

Popular Posts

Popular Posts On EAB

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

Man Behind This Blog

My Blogs