Make a marquee effect

What is the marquee? Marquee is a HTML code to make an object can moving or walk. Marquee code is a popular code because many blogger using this code at them blog's. Marquee effect can make by using ... tag . However marquee just work if viewed at Internet explorer, if you looking at firefox it's bad looking.

The attribute which almost used is :

BGCOLOR="color" → to manage background color of an object (teks, image, ..etc).

DIRECTION="left/right/up/down" → to manage direction of the moving object .

BEHAVIOR="scroll/slide/alternate" → to manage behavior of the moving object .

Scroll → object moving scroll.

Slide → object moving 1 time and then stop.

Alternate → object moving from left to right and then return again.

TITLE='message" → The title or message will emerge when the computer mouse at the marquee object.

SCROLLMOUNT="number" → to manage the speed of marquee, ever greater of number is faster his speed.

SCROLLDELAY="number" → to manage delay time, it's on second.

LOOP="number|-1|infinite" → to manage sum of looping.

WIDTH="number" → to manage width of marquee object, it's on pixel (px) or persen (%).

So that clearer I will show the example :

The example of marquee from direction :



this is example of marquee, the text moving from rigt to the left



the result :

this is example of marquee, the text moving from rigt to the left



Change the word "left" with other word what you want, there is : right, up, down.

The example of marquee from behavior :



this is example of marquee from behavior



The result :

this is example of marquee from behavior

The example from marquee of text variation with background color.

The example of marquee of text variation with background color.

The result :

The example of marquee of text variation with background color.

There is differ various from marquee, namely when computer mouse is reside in the marquee area the object will stop and when computer mouse in re-shifting to the other place the object will moving again. To make this effect only adding a few code at the marquee code.

For example, Please drop your computer mouse to the marquee area :



Please drop your computer mouse to here and you will be see the effect



The result :

Please drop your computer mouse to here and you will be see the effect

The example of marquee with links object :



Rubrik Elektronik


Blog kang Rohman


UniQue Template


CSS Library




The result :



Rubrik Elektronik

Blog kang Rohman

UniQue Template

CSS Library



Perhaps only that for example, please creat other various of marquee effect with your self. See you at may next post. Happy blogging!

Support me on SEO Contest Kampanye Damai Pemilu Indonesia 2009 Kampanye Damai Pemilu Indonesia 2009

Make a Drop Down Menu With Same Width

Hi every body ! meet you again at my new tutorial. Several weeks ago, I'm ever posting about How to make a drop down menu at this post. One of my reader ask to me, it's the question :

Hi Rohman,

Thanx for the piece of code! Now I have a set of drop down menus on my blog. But I have one query... Is there any way I could have them all of the same width? It kinda looks ugly to have different sizes for each drop down menu... Thanx in advance!

Allright, i will give you an example :

- Blog Tutorial - Start to blogging Blog setting Backup template backup widget

- Blogspot Tutorial - Start to blogging Blog setting Backup template how to backup widget

Is there looks ugly for you? don't worry, you can make a drop down menu with same width. Only add a little code, your menu will looks with same width. it's the code :

style="width:200px"

200px is value of width, you can change this number with other value, maybe 150px, 220px, or other value.

Now, i will give you an example. this is my previous code :

- Blog Tutorial - http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">Blog setting

- Blogspot Tutorial - http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">How to seeting

the results :

- Blog Tutorial - Start to blogging Blog setting

- Blogspot Tutorial - Start to blogging How to seeting

And this is the code with : style="width:200px" :

- Blog Tutorial - Start to blogging Blog setting

- Blogspot Tutorial - Start to blogging How to seeting

the results :

- Blog Tutorial - Start to blogging Blog setting

- Blogspot Tutorial - Start to blogging How to seeting

What dou you think about this? looks prety?


Except same width, with style you can manage the other function such as the color of alphabet, background of your menu, and etc.

for example :

style="width:200px;color:#ff0000;background:#B2DDFB"

#ff0000, #B2DDFB is the code of color, you can change this code with your color code.

this is the example of drop down menu with color and background color :

- Blog Tutorial - style="width:200px;color:#ff0000;background:#C3F4BD">Start to blogging style="width:200px;color:#ff0000;background:#CDDCE7">Blog setting

the results :

- Blog Tutorial - Start to blogging Blog setting

Hmmmm.. how do think about this menu?

If you feel enjoy this post please Digg It!

I think enought for today, see you at my next tutorial. Happy blogging.

Support me on SEO Contest Kampanye Damai Pemilu Indonesia 2009 Kampanye Damai Pemilu Indonesia 2009

How to Remove the Number of Label

Somebody ask to me, how how to remove teh number of label? allright, do you understand the meaning of the above question? please take a look at the following picture :

Do you wish to eliminate the number at lable too? this is the steps :

1. Login to blogger with your ID



2. After entering the dashboard page , click Layout. Please saw the picture :







3. Then click edit HTML tab. Please saw the picture :







4. Click the Download full template link. Save your template:







5. Please mark the little box beside Expand Widget Templates. Wait for a moment.







6. Go to your template code, and find the code like this :




()




7. If you was found the above code, please delete.



8. Click Save Template button.



9. Done. Please see the result.

Now your label will not with number.

If you enjoy this post please Digg It!

See you at my next post.

Add a Clock to Your Blog

So that your blog see interesting and beautiful, you can add some blog accessories, one of them is by add a Clock. If you interesting to add a clock to your blog, you can get it for free at http://www.clocklink.com site. The example of clock from http://www.clocklink.com is like this :

Feel interest to add a clock to your blog? please follow the steps :

Step #1

1. Please check out http://www.clocklink.com.



2. Click at "Gallery" tab.



3. Click at the categories of clock which you want, there is Analog, Animal, Animation, Count Down & Up, Dark Background, Digital, Holidays, Logo & Custom, Seasons, Sport, Transparent, and Wallpaper.



4. If you have found the clock you wish, click at "View HTML tag" below of the clock.



5. Click at "Accept" button.



6. Choose the time which match with your zone beside "Timezone" text. Example : for west indonesia, choose GMT+7:00.



7. Set the measure of the clock beside "Size" text.



8. Copy the code and then paste at Notepad or other text editor. Save into your computer.



9. Close your browser.

Step #2

1. Login to blogger with your ID.
2. After entering the dasboard page , click Layout. Please see the picture :

3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.
5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Open your Clock code, copy and then paste into available column.



7. Click



8. Done. Please see the result.

Now you have had a Clock at your blog.

If you enjoy this post please Digg It!

Enjoy your beutiful clock. See you at my next tutorial. Happy blogging.

Add Favicon to Your Blog URL Address

Do you ever seen your blog URL? what do you see beside your blog URL? yea.. beside your blog URL address is a blogger icon, see the following sreenshot :

The icon beside URL address named with Favicon ( favourite icon ). If you ask to me, do blogger icon can be changed with your icon or might be with your photo's? the answer is you can do that. See the following sreenshot :

How about the step to do that? this is the steps :

1. First you must have an image, for example like this:

2. After that, you must change your image to be icon. For do that, you can use favicon Generator, please check out http://www.favicongenerator.com



3. Click at the "Browse..." button.



4. Insert your image which will change into favicon.



5. Click at "Generate Favicon!" button.



6. After the process is complete, click at "Click Here to Download your favicon".



7. Save into your computer.



8. Next step is you must upload your Favicon to image hosting. For this step, you can read at this post!.



9. Now I assume you have had the URL address of your favicon. For example, I have a favicon URL address like this :


http://www.geocities.com/amn_tea/favicon.ico


10. You must change the favicon URL address to be like this :


http://www.geocities.com/amn_tea/favicon.ico"/>


11. Next step is login to blogger with your ID.



12. Click at "Layout".



13. Click at "Edit HTML" tab.



14. Click at "Download full template" link. Save your template into computer (importan !):



15. Find the code :



16. Place your "Favicon code" below of . For example :


http://www.geocities.com/amn_tea/favicon.ico"/>


17. Click "Save Template" button.



18. Done. Now you have favicon at your blog URL addres.

To see the result, please use Fire fox or Opera browser.

If you enjoy this post please Digg It!

Allright, I think this enought. Enjoy your new favicon.

How to Make a Logo and Image Button

If you are which have ever been skilled use graphical design program such as adobe photoshop, coreldraw and another program, make a logo is not a difficult work, and possible this tutorial not interesting to reading. However perhaps there are some from the readers is same with with me that is not expert at graphical design program, you can use the site provide this service. One of the sites which provide this service is http://www.cooltext.com.

if you use service from cooltext.com, you'd be very easy to make a logo or image button, this is the steps :

1. Please visit http://www.cooltext.com.



2. For create a Logo, click at Logos tab.



3. Click at the example logo style which you love.



4. Write the text wishing in making the logo beside Logo Text. For example : Blog Tutorial.



5. Write the measure of text in wishing beside Text Size. For example : 50.



6. Click at the colourful icon beside Text Color to choose the color of text. Please choose the colour whict you want.



7. Choose the format of image beside File Format. Better .JPG or .GIF



8. Click at Render Logo button.



9. Wait for a moment, your logo is processed.



10. See the logo result, if you want to change the logo, click at Edit this Logo. If you want to download the logo, click at Download Image. Save into your computer.



11. Done. Now you have had a Logo.

If you want to make a Image Button, please following the above step, but don't choose logos, please choose buttons


Allright, so that the logo can display at your blog, you must upload your logo to the Image Hosting. For upload an image to image hosting , you can read at this post. For example, I have had upload my logo to http://www.phtobucket and the image URL is :

http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg

To display this image URL, you only add a little code like this :



This is the result :

If you want to resize the image, just add the value of width and hight. For example :

width="130" height="40">



This is the result :

If your logo want to make a link, you must have a link target. for example : I want to the logo linked to http://template-unik.blogspot.com. This is the code :




This is the result :

How about the Image Button, that is the same way with Logo. This is the example for image button with link :

Where I place the above code? if you post, please at Edit HTML and if want to sidebar, please choose HTML/Javascript element.

If you enjoy this post please Digg It!

I think this is enought for this post. See you at my next tips. Happy blogging.

How to Upload an Image to Image Hosting

Hi brother/sister meet you again at my new tips. In this opportunity I will try to give you a tips about how to upload an image/picture to image hosting.

if you have an image or picture in your computer and wish in presenting online on internet, hence you must upload that image to image hosting as the server. Free image hosting is very much, and the most popular is such as Yahoo Geocities, google page creator, image hack, photobucket, and etc. To upload an image to their server, first step is you must registered at that site.

However, for this post i will only write how about an image/picture uploaded to Yahoo Geocities. First you must have an account at yahoo! Don't have a Yahoo! ID? Sign up here. Now I assume you have had an account in yahoo. For upload to Yahoo Geocities please follow the step below :

1. Please login to Yahoo geocities with your ID.



2. Click "Manage" tab at yahoo control panel. See the picture :

3. Click "Easy Upload". See the pictute :

4. Click "Browse" button, insert image file at your computer and then click "Upload File". See the picture :

5. If your upload has been succes will show a display, click at "File Manager"

6. Right click at "View" link, then "Copy shoertcut", open your "Notepad" and then paste at notepad. That is your Image URL. See the picture (please click at the image for large image):

7. Now you have had an image URL.

How to display/show your image URL at your blog? allright this is the steps :

Example, I have an image URL like this :

http://www.geocities.com/amn_tea/blogtutorial.gif

to display this URL, only make the code like this :



Result :

For good SEO (search engine optization), always use "Alt="..."" tag at every your image. With "Alt="..."" tag, if the mouse computer drop to the image, that is will appear the title of "Alt="..."". For example :

alt="blog tutorial">

Result, please drop your computer mouse to the image, that is will appear a title of the image:

Do the image can be made to link? the answer is yes.

For example, i will made a link from the above image to my other blog, the URL is http://template-unik.blogspot.com. This is the code :

http://template-unik.blogspot.com">

Result, please drop your computer mouse to the image and then click, you will visit my other blog :

If you do the step above, your page will be lost and will change with new page. If you want your page not be lost when the image link clicked, you must add "target="_blank"" at the code, example :

target="_blank">

Result, please drop your computer mouse to the image and then click, you will visit my other blog but this page will not be lost (open new page/window) :

Remember. To do this tutorial, if you want to display the image at your post, you must at , and if the image will show at sidebar, please choose "HTML/Javascript"

If you enjoy this post please Digg It!

For today I think is enought, see you at my other tips. happy blogging.

Add Digg Button to Post Page

Do you know Digg.com? I'm sure you know about digg.com, because digg.com is a most popular site in the world. With digg.com you can discover and share your blog content. So it's one of the way to increse your blog traffic. But I do not want to converse many hitting about digg.com, which I will focussed is the step of installing the digg button on your page post. Yea, this is my mean :

With Digg button you can easy to submit your post with your self or with your visitor to digg.com. Feel interesred to add digg button to your blog? this the steps :

1. Login to blogger with your ID



2. After entering the dashboard page , click Layout. Please see the picture :







3. Then click edit HTML tab. Please see the picture :







4. Click the Download full template link. Save your template:







5. Please mark the little box beside Expand Widget Templates. Wait for a moment.







6. Go to your template code, and find the code like this :








7. Delete the code above and alter with following code :
















How to get it? please following the steps :



1. Please visit www.histats.com.



2. If you was on the histats site, click Register at the top tab.



3. Content the form with your information, such as email, password, your blog url and etc.



4. Click Continue button.



5. Choose the style of histats counter, click Choose a counter from this category.



6. Please mark the radio button beside the counter style you wanted.



7. Click Continue button at the bottom of page.



8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.



9. Click Continue button.



10. Wait a moment, your counter is updating.



11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.



12. Logout and close your internet browser.



13. Done. Now you has have a counter code to add at your blog.




Next step is add your counter code to your blog, please following the steps :



1. Login to blogger with your ID.
2. After entering the dasboard page , click Layout. Please saw the picture :

3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.
5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Open your Counter code, copy and then paste into available column.



7. Click



8. Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :



• http://www.neoworx.net


• http://www.webfooted.net


• http://www.fastonlineusers.com






See you next time at my new tips. Happy blogging.

Add a shoutbox to blog

Once of my friend ask to me, how to add a shoutbox to blog?

Allright, before i answer this question you must know what is shoutbox? shoutbox is a little box for sending a short message, with shoutbox you can chat with your blog visitor. An example of shoutbox is be like this :

Where you can get a shoutbox? there is very much site provide this service. One of them is http://www.shoutmix.com. At this site you can get a shoutbox for free (basic account). This is the steps for get a shoutbox at shoutmix :

1. Please visit http://www.shoutmix.com.



2. Before you must register, please click "CREAT YOUR SHOUTBOX NOW", or you can click "SIGN UP" at upper tab.



3. If you are has registered at shoutmix, please login with your ID.



4. At the column with title Style, click appearance.



5. Then click pull down menu beside Load From Preset for setting your shoutbox, please select which you want. If it is done, don't forget to click Save Setting.



6. To get HTML code for your shoutbox, please click "Use Shoutbox"



7. Click at "Place Shoutbox on web page", write the width and hight you want.



8. Copy all of the HTML code at text area below of "Generated Codes", paste at notpad and then save to your computer.



9. Click "Log out" and then close.



10. Done. now you have a shoutbox code for add to your blog.

Now you can add your shoutbox code to your blog, please following the steps :

1. Login to blogger with your ID.
2. After entering the dasboard page , click Layout. Please saw the picture :

3. Click at Page Element tab. See the picture below :

4. Click at Add a Page element.
5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

6. Open your Shoutbox code, copy and then paste into available column.



7. Click



8. Done. Please see the result.

Now you have a Shoutbox at your blog.

See you next time at my new post brother. Happy blogging.