Powered By Symoon

Free XML Skins for Blogger

Powered by Blogger

Friday, February 5, 2010

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 :





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 :







the results :


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






the results :


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 :




the results :


Hmmmm.. how do think about this menu?

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. yahoo control panel
  4. Click "Easy Upload". See the pictute :
  5. Easy Upload
  6. Click "Browse" button, insert image file at your computer and then click "Upload File". See the picture :
  7. Upload file
  8. If your upload has been succes will show a display, click at "File Manager"
  9. Upload result
  10. 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):
  11. view
  12. 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:
blog tutorial

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">blog tutorial


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


blog tutorial

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">blog tutorial

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) :

blog tutorial

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

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 :



digg button on the post



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 :