|
This is Dick's Constant Creation. Touch. Move. Inspire. Best veiwed with Mozilla Firefox browser. |
'Pagelets' Revisited - A Mini Tutorial
I have recently added a new widget, which I fondly call Pagelets in my blog. I though it would be nice to share this piece of information I got to everyone who would want to make something like it.
This may seem technical to some, but I really tried my best to keep it as simple as I can. If you do have any clarifications, don't hesitate to contact me or place a comment below.
So let's get straight to the point.
Basically, there are two parts to the pagelet:
1. The link
2. The content
1. The link
2. The content
THE LINK
First, I'll show you how the links are created..
Ex.
This is the code to my first two links. Notice that the structure is similar, thus, you can have as many links as you want, just copy the code and change the necessary details.
Let's focus our discussion to the code for the first link (lines 1-7). Let's dissect it from the bottom going up. Look at line 6. It is actually our link to the pagelets. It can be an image or a simple text. In my case, I used an image (button).
I suggest you use an image as well, so that you can make use of the power of attributes of the to make the button dynamic.
Now speaking of span tags, you can actually notice that line 6 is enclosed in a <span tag>, so let's look at it deeper. For my case, I added 4 attributes:
1. onmouseover
2. onmouseout
3. style
4. onclick
1. onmouseover
2. onmouseout
3. style
4. onclick
However, what you really need to simply link the button/text to the pagelet is the 4th attribute which is the onclick. (Although if you would rather want the pagelet to load when the users hover over the button/link you can also do so by putting the code of the onclick attribute to the onmouseover attribute, but you can just try it on your own. You can even experiment even further by placing the code to the onmouseout attribute which would cause the pagelet to load after removing the focus from the button/link..)
Anyway, enough about experiments. Let's direct our attention to line 5. Attribute is actually assigned the value:
Worry not about the syntax, for I myself don't fully understand why it is such. The gist is just that this links the content of your pagelet with the id 'profile'. Elaborating, in a little while, we will be making a pagelet with the id (or simply name) 'profile' so that when the the link is clicked, the pagelet is loaded.
Ok, two things you need to take note of..
1. The first element id ('welcome')
2. The second element id ('profile')
1. The first element id ('welcome')
2. The second element id ('profile')
Upon loading, the pagelet with the id 'welcome' will be displayed. So if you named your initially loaded pagelet's name, you should also make sure that you change it in this line of code. For my case, I used 'welcome' as the welcome pagelet id.
To make it simple, let's just skip the discussion of the other attributes for now. You can discover it on your own or you can ask me if you still have clarifications.
THE CONTENT
Now, let's proceed to the second part, the content. There are actually two sub-divisions for this:
1. The main content box
2. The actual pagelet
1. The main content box
2. The actual pagelet
The Main Content Box
Ex.
I don't think I don't have to dwell too much on this part. It's pretty much straight-forward. You basically design your contentBox to your heart's content. You can have scroll bars or not. You can add your own background. You can have a border or not. You know the drill!
The Actual pagelet
Now, let's look at how the pagelets are declared.
Ex.
Do you notice anything familiar.. Basically, you are just declaring the divisions with their particular id. Therefore, you can pretty much add in whatever code you would want your pagelet to contain. This is what you will place inside your Main Content Box.
And you're done. For bloggers of the new blogspot, you can simply place all these codes in an HTML/Java Script widget..
Here's another sample code (my other two links: Links and Contact):
Notes to remember:
1. Host your own images.
2. I didn't talk about the name attribute of the image/button above. Make sure you also take that into consideration when you want to add mouseover effects to the button. It will take some time to load though. But I think it's manageable.
1. Host your own images.
2. I didn't talk about the name attribute of the image/button above. Make sure you also take that into consideration when you want to add mouseover effects to the button. It will take some time to load though. But I think it's manageable.
Quote of the Day:
"Life is like a combination lock; your job is to find the right numbers, in the right order, so you can have anything you want." -- Brian Tracy
"Life is like a combination lock; your job is to find the right numbers, in the right order, so you can have anything you want." -- Brian Tracy
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_b.png?x-id=8d791091-e8fe-45fb-9d16-ef8716cdb8a7)
Subscribe to:
Post Comments (Atom)
Subscribe To
Posts
Comments
6 proposals:
i will try this on my money making blog where i use blogger...
thank you
Hi adads, that's great. Give me a link once you're done so I can check it out also.. :)
Just like what I thought... Again and again, full of complex codes, arrgghhh... but I'll try it on my other blog.
Thanks for sharing the codes, Dick.
where's the sample? ahehehehehehe inform me if there's a sample... http://babydesertwolf.blogspot.com/
Hehe, it's quite methodical if you ask me.. I think it's just a matter of familiarizing yourself with a different language.. learning how to speak in a different tongue.. Don't worry, I'll help if you need any..
Good luck D. ;)
Hello po, before anything else? Where can I vote for you for the 2009 CANDY Teen Blog Awards..? Hehe..
Regarding the sample.. It's actually at the top of this page.. :)
Do you speak Bisaya too? Maybe we can exchange links.. I already followed you.. I'll just add you in my links when give me the go signal.. :)
Post a Comment