html

Image Rollover Effect – using Simple HTML

When visitor roll mouse pointer over a image, s/he will see a different image, when s/he moves mouse pointer out of the image focus, s/he will see the previous image. This is called RollOver Effect. This method is mostly done using JaveScript. It is used mainly on images, while building menu etc.

Yesterday I had written an article about OnlineProfits re-lauch and I had used rollover effect to one of the images there, and some people asked me how I did it(Simple Ans: See the source code 😉 ).
So here is the simple code to achieve this design effect:

<a href="Destination Address" 
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" ' 
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" 
'><center><img src="ImageURL-to-be-shown-by-default" 
NAME="thinkwithsatish"/></center></a>

Explaination:
ONMOUSEOVER and ONMOUSEOUT are valid JS effects. Since all most all browsers support JS, this works fine.

Give a name to the actual image to be displayed:
<img src="URL-of-default-image" NAME="thinkwithsatish"/>
I have named above tag src as thinkwithsatish. Now Refer to this name by using ONMOUSEOVER and ONMOUSEOUT commands.

ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '

ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" '

Hope the rest of the code is self explanatory.

Code in action!:

Now you can test it by taking your mouse pointer in and out of image area. If you don’t see any changes, place the mouse pointer over the image for some time – because in some cases, it takes some time to load.

I see that, it works perfectly in Mozilla FireFox, Internet Explorer and Chrome. I haven’t tested it in other browsers. And interestingly, I saw it working even in RSS feed!

Many people use content management system software like WordPress, to publish their content. So in order to include a RollOver effect using JavaScript means – editing the header part or installing a plugin which does the job etc. So instead we can incorporate this simple coding to get the design effect.

Design Tip: This is just the coding/programming part. To get the effect on the design, you must choose such images which will have good effect on users mind. So choose the images wisely.

I am not sure, how helpful it is to you. But it surly helps me sometime to get some minimal design effects on my WordPress blog posts.

Your blogger blog template search ends here!

Antonio Lupetti an Engineer, Pro Blogger, Mac user, Musician, Web Addicted from ROME – ITALY has released a wonderful blogger template. Actually he is a master of that template, as he himself use the template on his blog. That means, he has tested it, used it so long that he has almost cleared all the bugs in it.

I had always loved his blog template and hesitated to ask for the source code(to modify, without violating the copy rights). But to my surprise and Antonio Lupetti’s goodness, he has finally released his template source code to the public.

woork-blogspot-template-released-to-public

He has actually released the HTML version rather than XML source code, because HTML is more common than XML and we can easily modify the HTML codes using many software.
Just copy and paste the HTML codes and it will work. Many people think that, they must use only XML in blogger templates, but that’s not true, you can also use valid HTML codes.

The template looks so professional. The template supports easy integration of third-party advertisements (both AdSense or any other ad network and custom 125×125 banners), the best part for people trying to make more money is — you can integrate ads within post(look at the individual post page),Twitter, Job board, Flickr pictures, delicious bookmarks, and you may also embed RSS feeds via the FeedBurner service. And more importantly, I love the comment section of the template. It looks great. But the fact that, blogger platform doesn’t allow for user friendly commenting, we need to migrate to some other page to comment. Hope its done for spam controlling purpose!

And I think this theme works with old Blogspot users also, who haven’t migrated from the Classic HTML template yet, because this is a HTML source code, and theoretically it must work. I haven’t tried it practically, and I am waiting for someone to clear this doubt.

I was very excited to write a post about customizing the template, but Antonio Lupetti himself has done the job and he has explained the customization part of the template from Top to Bottom. Its great article and a must read if you are a blogspot user.
He explains- Adding Blog Logo, Adding tab on the navigation bar, Search field, Customizing Home Page, Your name below each post title, Adding sections on the sidebar, About me section, Recent Post*, Categories on the sidebar, etc. If you have any problem with the template, you can always contact Antonio Lupetti or do a Google Search(if its a general blogger problem).
Happy Blogging 🙂

Blogging Made Easy by "Windows Live Writer" – A Small Review

This is my first post in Technotip.org about Windows Live Writer(WLW) and I am now writing this article using “WLW” itself. I have previously used it to write articles for my blogger blog.

Why we thought about an alternate editor, when we have a simple and good editors(Visual & HTML) in WordPress ?

As always, we wanted some more features to write articles and we use to face some problem while using default WordPress editors.

Problems that we had faced in default WordPress editor:

1. We had problem with adding and aligning the images. Each time we added a image to our article, consumed lot of time.

2. Sometimes when we open the old posts and save it again, we noticed that some irrelevant “Category” got added to it automatically from our “Categories” list.(Hope this is a typical problem only with us!)

3. Loading time….(I agree that, loading time has been improved a lot with new versions of WordPress, but WLW loads superfast as it is an Desktop application.

4. Problem inserting “tables” :- There is no option to insert a table in WordPress editors. This surprises me!

We need to have “insert table” feature that will be of use many times. We know that, using tables may slow down the page loading time, and its good to use CSS/DIV to get the tables, but everybody using WordPress are not programmers or geek’s to do that. And many blogger’s don’t have patience and time to do it.

5. Each time we see the preview of the article it even loads the advertisements. This will make our own impressions on those advertisements. Those impressions will be OK, if they are less in number, but I don’t want any advertisers to pay me for my own impressions on my own blog.

6. We had problem with italicizing the words. When we press the Italicize button, the selected word would be in Bold!

We use to insert <i> </i> tags in html mode to get the results.

7. And the <code> </code> was not working!

(Hope many problems listed above are topically problems only faced by us. Because we have never seen anybody else reporting these problems).

Actually I like the new WordPress editors for many reasons, but the above mentioned points make me to use WLW.

Actually, I write articles in WLW and then save it directly to my WordPress draft and then again modify it there if necessary.

Why we like “Windows Live Writer” ?

This is the actual reason to write this article..

1. Many features, and many tools/plugins to make blogging much more easy.

2. Offline blogging. This will really help a lot. Just try this for 1 week and you will know the power and impact of offline blogging.

No distraction from Chatting buddies, emails etc. In the beginning I got irritated, as there was no Internet connection, but now I am getting used to it and my articles are now more focused. And actually I have installed “WLW” in my laptop and I can now start blogging from almost any place I love.

And more importantly, I can now keep blogging, even when there is problem with my “ISP”(Internet Service Provider), and I can publish the posts by taking my laptop to my friends home, who are using someother ISP.

3. Lot of options to play with images I insert into my articles now. We can revert the image in one click, we can contrast, sharpen etc.

4. Faster loading..Saves lot of time, over time.

5. Publish to most major blog services: Including Windows Live Spaces, SharePoint, WordPress, Blogger and many others.

6. Insert photos and videos, maps, tags and lots of other cool content, all in a snap. Powerful editing features include tables, spell checker, and quick hyperlinks.

7. We can write for multiple blogs using the same “WLW” :

Just add another weblog account and you can start writing for both blogs.

8. All the other options which is present in WordPress are also present in “WLW”.

There are many advantages of using Windows Live Writer and We recommend everybody to give it a try. Mac users can try Ecto. And for people who want to use simple and neat interface can try blogdesk.

Whatever you use and try, but don’t forget to give a try to “Windows Live Writer“, it has been improved a lot over time, and its latest release will really impress you, by the way it works.

Here are some screen shots of installing “WLW”:-

Select the software you want to install from the list and sit back and do whatever you want to do. Internet connection needed!

After installing “WLW”, click on the shortcut and configuration window opens- See Below screenshot, to configure your weblog account.

Weblog Homepage URL: Put your blogs homepage. Ex:- http://technotip.org

And in the username and Password section, type the username and password of your account(Windows Live Spaces, SharePoint, WordPress, Blogger or any other, that you use as your blogging platform.)

After successful installation and configuring, you can just test the power of “Windows Live Writer”.

WLW is a must use tool for bloggers using blogspot.com(bloger.com). Blogger(Blogspot) editor seems to be too bad(my personal opinion), using WLW helped get rid of all silly problems and now blogging has become more friendly.

What’s your opinion about “WLW” ? Which editor do you use ? Do you still use the default WordPress/blogger editors ?