Working together for a living planet

Showing posts with label html tutorial. Show all posts
Showing posts with label html tutorial. Show all posts

Friday, March 27, 2009

how to place floating image icon on your blog...

i remember sometime early this year i recommended 'floating icon' that i learned via AdiWidget.

guess what people. the thingy is actually called "floating image icon". i have found out of an easy way to do it from here. eventually the html code provided on the site is for floating 'top-of-page' icon. but i altered it a bit to fix my requirements.

floating image icon


so today i will show you how to add floating image icon with direct url at the right side of your blog. you can see this button at right side of my blog. this hack useful if you wanna promote something from a specific links. it always maintains the same position. if you click on it, it will take you to the url you wanna your readers to read i.e. in my case, i placed the links about earth hour 2009 and nuffnang music bash 2009. this saves your visitors from an unnecessary hassle of searching it.

  1. login in to Blogger dashboard

  2. go to Layout

  3. click on Edit HTML

  4. under Edit Template, tick on Expand Widget Templates

  5. template sample.ppt

  6. copy and paste the below code in above opened editor before /body code. replace the texts in red with yours... then voila! you did it!

  7. floating image icon-html code

now isn't it kewl people? let me know if you need help by emailing me or leave some comments in the comment box.

by the way have you people registered with EmailCashPro yet?

"EmailCashPro is the FIRST Get Paid To Read Emails Site in Singapore and is now expanding its reach to Malaysia, Philippines US, UK, Australia and other parts of the world.

it's based on the idea of paying you to read emails that you are interested in." so wait no more people... register yourself now here!





Saturday, January 17, 2009

CNY mood

its just like yesterday we celebrated christmas then new year. and now another festive season is just around the corner... oh wow... how time flies very fast. megat went to school today to cover the school's extra CNY holidays from 24 january to 1 february 2009. 26 and 27 january 2009 are the national's public holidays. blimey! looks like i gotta plan some projects to do with megat for that 9 days break :D

as you could see, my blog is in the same mood as well weee...

CNYmood


  1. for the scrolling marquee, get the html code from here. although the site is dedicated specially for kids to learn simple html codes, but who cares right. as long as i could learn something from there then it should be no problem at all. in fact i have learned a lot from Lissa Explains! i find other sites are too complicated ;)

  2. for the floating widget (is this correct), i got mine from http://adiwidget.blogspot.com/ . i found the clip art on the web some time ago. i am so sorry that i couldn't remember of where i got it from. i save the clip art under .gif file (of course i edit it to a transparency mood first), then load it in to my photobucket... voila! simple as that :)

kuE' note:
do not feel hesitate to contact me for further queries or clarifications. i would be much glad to help you as far as i could.




Thursday, November 06, 2008

how to share / (social) bookmark websites


i just wondered if anyone has used: AddThis — #1 Social Bookmarking Sharing Button — Del.icio.us Digg Facebook Widget :~)

the AddThis button spreads your content across the web by making it easier for your visitors to bookmark and share it with other people, again… and again… and again. this simple yet powerful button is very easy to install and provides valuable analytics about the bookmarking and sharing activity of your users. AddThis helps your visitors create a buzz for your site and increase its popularity and ranking.

this very cool button is very powerful for boomarking and sharing your valuable posts with other people in the internet.


adding Addthis button on the bottom of your posts is so simple—

  1. go to Edit HTML under layout and tick the "Expand Widgets box"


  2. search for the follwing line:

    &ltdiv class='post-footer'> tag.

    NOTE:
    if you have chosen the first code,
    the AddThis button will be above the post body items.

    if you have chosen the 2nd code,
    the AddThis button will be at the bottom left part and directly beneath the post (scroll down and see where my AddThis button is placed).


  3. simply add this Addthis code after this line. done!














Saturday, October 25, 2008

how to create a signature under your blog post

its been a month or so since i have been putting a kind of signature in almost all of my blog post' like this—




now before i start my so gonna called
tough saturday*, let me share with you people of how to do it.


  1. create a signature—i am so sorry that i have forgotten of where i got the link that i created mine, cuz i did it as soon as i found it while browsing online. then i just saved it under .jpeg in my thumb drive, with thinking that i will find a way of doing this signature thingy one day. alas...

  2. .gif file only and make it transparent—open a photo editing program i.e. photoshop. open your signature file. amend the size as you required, then save it under .gif file.

    *take note that the way you SAVE this image is very important! if you have a transparent background to work with, then in order to maintain that look, you have to save it as a .gif image. if you have not chosen to use a transparent background, then it’s okay to save it as a .jpeg .

  3. uploading image—you’ll need to upload your image to an image hosting website such as photobucket.com .

  4. sign it!

    • in your template page, find this line of code:



      please be aware that the above code is specifically for blogger.com . unfortunately for other blog service provider, you are advised to check with them of where you shall placed the following code.

      then paste this line of code into your html:


      change the capitalized IMAGE to the actual URL or DIRECT LINK for the image you want to use.

      voila! you have got your signature done.

      the above instructions allow you to include your signature graphic on every post you write and publish. you do not have to manually add it once you have followed that instructions.


    • but for me i prefer to sign mine in each post manually cuz that way, i'll know/remember of basically when i first started practice this. it won't be that troublesome though. i just have to copy and paste the code whenever i wanna create one.


  5. complete—preview your template. if you're happy with the result, save your work.


congratulations! now you have a custom signature to give character to each one of your blog posts!

do not feel hesitate to email me for further queries or clarifications. i would be much glad to help you in any way i could... god willing.





Friday, August 22, 2008

kuE's favicon


what is a favicon?

favicon (pronounced fav-eye-con) is short for 'favorites icon'. a favicon is a multi-resolution image included on nearly all professional developed sites. within internet explorer, also now mozilla firefox browser the favicon is displayed on the address line and in the favorites menu. the favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. often, the favicon reflects the look and feel of the web site or the organization's logo.

actually i am one of the millions (?) of people on the net who really wanna know of how to create favicon on my blog address. thanks a lot to marogal for highlighting about this in nuffnang's innit that now you people can see my very own favicon next to my blog's url. i did it myself! yea...


there's only 3 simple steps to be done--

  1. create a logo/icon that you want beside your url. resize it to 16 X 16 pixels will be just perfect. then save it under *.png or *.jpg or *.ico

  2. upload your logo/icon on to the web i.e. imageshack, photobucket.

  3. place the link into the quotes below (type for *ico is "x-icon") --








    paste the quotes in your html, just before ''< / head>''

    please refer to the screenshot below as an example--















    kuE's note: click on the image for a larger view.


then voila!... i told you its sooooo damn simple! you can go here and here to find out more about this.

p/s to all nuffnangers!!! as usual, nang it! occay?!! tqqq...