Spice Up Your Blog

Use A Background Image On Paragraphs Of Text Or Full Blog Posts

2010-06-03T10:10:00.004+01:00

It's amazing how many posts on Spice Up Your Blog are now published in reply to comments and Emails from the readers.While I'm constantly working on ideas for posts and code or methods to bring them posts to life a simple comment will ask a question and i have a 'light bulb idea' moment.Basically You guys rock so keep asking questions and i will try to keep answering.

This post is in reply to a question in the comments for the How To Add A Background Image Behind Blogs Posting Area post, the post as the title suggests shows you how to have a background image on all your posts.The comment by Zahid asks : "I would like to place an image behind text for a specific post. how can it be done ?" and the answer is it can be done and we are going to see how.There are a few ways this could be done but the easiest technique would be using the table attribute.

In this post i will show Zahid and all you guys how to have a background image for a specific post and how to have a background image for just a piece of text in a post.So if you want to have an image behind just one paragraph you can also do that...Cool ehh.

So lets first look at using a html table to have a paragraph of text with a background image.We will then see how to have an entire post with a background image.

How To Have An Image Behind Text

As you can see this paragraph has a yellow rose as a background.You can use any image for a background but it is important the image has the right colors to work.You could off course change the text color if for example you wish to use a dark background image you can change the text color to a brighter color.As this is only a paragraph you dont really get the full effect of the rose so image choice is also important.Here is the code i used to make this paragraph.

In the code below the image URL is highlighted in red and the text is highlighted in blue.So by copying the code and changing the image and text you will have your own text with a background image.

<table border="0" background="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TAdpt162J2I/AAAAAAAABX4/o8IfBmkpHJA/s1600/yellow-rose-800.jpg"><tr><td>THE TEXT FOR THE PARAGRAPH GOES HERE</tr></td/></table>

How To Have A Full Post With A Background Image

How is it done ? In fact we do it the very same way using the very same code as the paragraph, instead of placing the code around a paragraph we add the code around the entire post.I have created two posts on a test blog to show you the result check them out.

Example one using the yellow rose : Go To Demo

Example Two Using An Orange Peel : Go To Demo

Here is the code for the post with the Yellow Rose background :

<table border="0" background="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TAdpt162J2I/AAAAAAAABX4/o8IfBmkpHJA/s1600/yellow-rose-800.jpg"><tr><td>

All the text for your entire post goes here.

</tr></td/></table>

So to sum up just copy the codes i have provided and change the image URL in red and the text in blue.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

So yes it's that easy and i think this trick could really add some spice to your blog.Go crazy and have a different background image for every post :D

Thanks to Zahid for the question and if you have any questions drop a comment or use the contact me link in the top menu bar to send me an Email.Remember you can find out how to have the same background image automatically on all your posts by checking out this post Image Behind All Blog Posts.

What do you think will you try out some background images on your blog posts ?

View Versions Of Your Blog From The Past

2010-05-13T12:16:00.002+01:00

Yesterday i removed a sidebar gadget from this blog accidentally, a little silly but it can happen.I'm sure a lot of bloggers have had that "Oh No" moment when they mistakenly removed something.I no longer had the code for the gadget yet within a few minutes i had the gadget back in place.

How ?

The way i managed to get the code back for the gadget was using "Google Cached Pages".

Every time Google crawl your blog they store a version of your blog at the time they visited.This is true for every individual post on your blog also and you can see your blog on the date they last crawled very easily.The version Google provide of your blog when they visited is called "Cached" and i simply went to the cached page were the gadget was still in place, viewed the source, grabbed the code and added it again.

In this post i will show you how to view cached web pages and how to view the code that makes up any page on the web.

How To See Cached Pages

Presuming your blog is not brand new and Google have crawled and indexed it you should be able to access a cached version.

Lets look at the example of this blog - if you search Google for "Spice Up Your Blog" (Click Here To See The Google Results) you will get this :

Below the results circled in red you can see the cached option :

When you go to the cached page you will see a information header stating when the page was captured :

For more information on cached pages use this link to go to Google explanation : Catched pages

How Often Will Your Blog Be Cached

Because Spice Up Your Blog is well established it is crawled very often by Google the cached version is updated most days, You may find your blogs cached version is updated weekly, either way its good to know the option is there and it may come in very useful as it did for me yesterday.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

How to get code from a cached page

As i said above i managed to retrieve the code for a gadget from the cached page so how do we get code from a web page ? This is a little difficult to follow for a beginner but you can get the hang of it.

You can in fact get the code that makes up Any page on the Internet.Once on a web page click the 'View' button at the top of your browser and then click 'View Source' (May differ depending on your browser).You will then be presented with a document containing the code that makes up that page :

You can use 'Ctrl and F' for a search bar to find the exact code you are looking for in the document.

You may not need to get a cached version of your blog or any web page today, you probably wont need to see the source of a web page at the moment but I'm certain this information will come in very useful in the future.

If you have any additional questions or have something to add just leave a comment and i will do my best to help !

Add The Title Tag Attribute To Text And Image Links

2010-03-20T22:05:00.003Z

There are many extra attributes or tags you can add to the text links and image links you use on your blog and in your blog posts.One of the attributes i use are title tags, by adding a title to your links and images you can let people know were the link is leading to or for images you can use it to describe an image.Once you add the title when someone places their cursor over the text link or image the title you added will appear.This is like a tool tip effect and although its not required it is a nice extra for your links and images.

Even when the link is descriptive you can add the title for extra info.Hove your cursor over this link and you will see the tool tip "Go To The Spice Up Your Blog Homepage" :

Spice Up Your Blog

This Image is also using the same title tag :
(The title attributes can be added to images along with the alt tag)

You will also notice most links on Spice Up Your Blog such as the links in the menu bar and sidebar have the title attribute added.In face were ever possible i use the title attribute, for gadgets link recent posts it is out of my control.I used the titles on these links not only to give more information but also it's something not seen on all blogs so it's a neat extra.

Adding Title Tags To Your Links

This is the text link above without a title :

<a href="http://www.spiceupyourblog.com/" target="_blank">Spice Up Your Blog</a>

Now you can see were i added : title="Go To The Spice Up Your Blog Homepage"

<a title="Go To The Spice Up Your Blog Homepage" href="http://www.spiceupyourblog.com/" target="_blank">Spice Up Your Blog</a>

Note : Make sure there is a space between the end of the title and the start of the next piece of code.

For the image you do the very same thing, This is the Image code without title attribute :

<a href="http://4.bp.blogspot.com/_rKG-ziTSNUQ/S6U_2R8P1DI/AAAAAAAABSM/CCVtxt24pQI/s1600-h/blogger+guy.png" target="_blank"><img style="cursor: pointer; width: 64px; height: 64px;" src="http://4.bp.blogspot.com/_rKG-ziTSNUQ/S6U_2R8P1DI/AAAAAAAABSM/CCVtxt24pQI/s200/blogger+guy.png" alt="Go To The Spice Up Your Blog Homepage" border="0" /></a>

Now the title is added to the image code :

<a title="Go To The Spice Up Your Blog Homepage" href="http://4.bp.blogspot.com/_rKG-ziTSNUQ/S6U_2R8P1DI/AAAAAAAABSM/CCVtxt24pQI/s1600-h/blogger+guy.png" target="_blank"><img style="cursor: pointer; width: 64px; height: 64px;" src="http://4.bp.blogspot.com/_rKG-ziTSNUQ/S6U_2R8P1DI/AAAAAAAABSM/CCVtxt24pQI/s200/blogger+guy.png" alt="Go To The Spice Up Your Blog Homepage" border="0" /></a>

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

I think it's a good idea to use titles for links and it only takes a few extra seconds while writing your posts.If you want to add titles to the links in menu bars or other links in your template you will have to add the attribute in your templates html.

Were you already using the title attribute on your links or will you start now ?

How To Use An Opacity Blurred Hover Effect On Images And Pictures

2010-02-22T19:50:00.004Z

A very popular and very cool effect you can use with the images on your blog is the "Hover Opacity Effect" and in this post i will show it's done.To achieve this image effect you need to add a small piece of code to your template and then add an extra tag to the code of images you want the effect on.Once you've followed the steps the image will appear blurred until users place their cursor over it and then it will brighten up.

Working Preview

Here is an example of the hover effect you can see its blurred until you mouse over it:

Cool I'm sure you have seen it used so here's how you can use it

Steps To Use Opacity Effect On Your Blog

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following code in your blogs html
(Click CTRL and F for a search bar to help find the code)

]]></b:skin>

Step 3. Paste the following code Directly Above/Before ]]></b:skin>

.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

You now have the code in your template to allow the effect to work.
The next step is to add code to the images you want to use the effect on and its easy.

Step 4. When you add this tag to an image it will become a hover effect image :

class="hovereffect"

Below is the code used for the image in the example above and you can see i added the hovereffect code directly after the opening anchor tag :

<a class="hovereffect" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_rKG-ziTSNUQ/S4LRZC8-v8I/AAAAAAAABIA/keigC_daGZc/s1600-h/hover+image.jpg"><img style="cursor: pointer; width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/S4LRZC8-v8I/AAAAAAAABIA/keigC_daGZc/s400/hover+image.jpg" alt="Hover Effect" id="BLOGGER_PHOTO_ID_5441141528036556738" border="0" /></a>

Place it in the same area for the images you want to have the opacity effect.
This image was uploaded to blogger but it will work with any images you use.

This is an image from Photobucket :

And here is the code used :

<a class="hovereffect" href="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Photography/color1.jpg" target="_blank"><img src="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Photography/color1.jpg" border="0" alt="Photobucket"></a>

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

Every image you add that tag to will become an opacity hover effect image.Another great effect for images is the Rollover Image Effect and you should also check that one out.

Try it out and let me know what you think !

How To Use A Search Bar To Find Code In Your Blogger Template

2009-12-14T16:28:00.009Z

OK so your reading a tutorial in this Blog and im going through the steps and then i say 'Find the following piece of code in your blogs template' .You think "You want me to find a small piece of code among the millions of characters in my blogs html"?

So to help i always follow that line with :
(Click 'Ctrl F' for a search bar to find the code)

You think 'Click what for a what'?

So here I'm going to show you exactly how to use the search bar to find the code :

You have followed the steps of a tutorial and you have reached the 'Edit Html' page as seen below :

Now you have to find a piece of code in your Blogs Html, for this example lets say i told you to find this piece of code :

</head>

Heres the easy way to find it

The first thing you do is click and hold the 'CTRL' key on your keyboard.

Now while holding the 'CTRL' key Click the letter 'F' on your keyboard :

(If you use Safari don't worry, just use the Apple+F keys to get the same effect)

Once you have clicked 'CTRL + F' a search bar will appear at the bottom of your page as seen below :

Now paste or type the code or text your looking for into the search bar.

We are looking for </head> so i typed it into the search bar and and as i did the search bar jumped to were the code is in my blogs html and highlighted it for me see the example below :

We Are Nearly Finished - First A Quick Reminder:
If you need more help or have an opinion or suggestion Please leave a comment Below.It also really helps me to get feedback.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
OK Back to business....

Notes:

Now you have quickly found the code you can follow the rest of the steps to complete the tutorial.

You can also click "Next" or "Previous" to jump between instances of your search term on the page.

Depending on your Browser the search box may look different or be placed different don't worry it works the same.

The search bar can also be accessed by clicking"Edit" then "Find" in your browser's toolbar menu.

We all want to add some spice up our blogs did this helps you speed up the process ?

Html Parse Tool - Display Html Code In Your Blog

2009-11-30T15:11:00.031Z

Want to display some Html code or script on your Blog, website or webpage ? This tool can be used to display html code in your blog posts and Parse AdSense ads.
Once you Parse html code and place it in your blog it will not form but will show up as code.

Example:

If i wanted to show the code for a html link to this blog i would parse the code and it would display as below:

<a href="http://www.spiceupyourblog.com">www.Spiceupyourblog.com</a>

Somtimes you need to parse your adsense code, It can also be used to parse AdSense code.

Simply paste your code into the box below and click the 'Convert' Button
It's So Easy ! You Can Bookmark The Page In Case You Need To Display Code Or Parse Adsense In The Future.

If For Some Reason The Gadget Does Not Appear Just Refresh The Page

Once your code has been parsed paste it were you need it to appear.

If You Need More Help Just Ask In The Comments.

How To Add A Contact Us Page To Your Blog

2009-11-29T05:00:00.010Z

In this post i will show you how to create a 'Contact Us' Page for your blog.I have a 'contact me' link at the top of this blog and it leads to a page within this site were you can fill out a contact form.

These pages are a are way to let people contact you without providing you Email address on your blog.I think all bloggers should have a way for readers of their blog to contact them and it also looks more professional and thrust wordy.

Click Here To See My Contact Page In A New Window / Tab

I will also show you how to have your contact page back dated so it wont show up on your blogs homepage or recent posts.

UPDATE : Blogger now allows you to add your contact page as a 'Static Page' Click Here for more details.

First Here's how to create your contact page:

1. Go to www.Emailmeform.com .Sign up for your Free account and follow the simple steps to create your 'Contact Us' Form.
(Once someone fills the form to contact you, you receive an email and can reply)

2. Once you have completed the steps to create your form you will be on this page:

The link underlined in blue would lead to a pop up window with your contact form.

3. We are interested in the html code for your contact us form so click the link underlined in red to get the html code, you will get this page:

4. Copy the html code for the form.

UPDATE : You do not need to add your contact form as a post you can now add your contact page as a 'Static Page' Click Here for more details.

If you would still like to add the contact form as a post continue :

5. Now create a new post for your blog with the title 'Contact us' or 'Contact Me' and paste the code for your contact form into the posting area.

You can add some text etc... above the form as i did in my page.
Or other ways to contact you like fax or phone could be added to this page.
(Obviously be careful when providing information like this)

We Are Nearly Finished :
If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

Don't want the contact page on your home page / recent posts?

5. Below the post area click the 'post options' button:

6. Bottom right you see 'post date and time' set the date back a few months .
(I suggest setting the date back to around the time you started the blog)

Click publish post and your 'Contact Us' Page is ready.

Making a link to your Contact page

If you have a menu you could add it there.

If not you can add a link or button to your sidebar for people to click to contact you.

Click 'Layout' > 'Add a gadget' for your blog >Choose 'Html/Javeascript'

Now copy the code of the link or button below and pasted it into the area provided.

Option 1 a text link :

Preview :

Contact Us

Code:

<a href="CONTACT-US-PAGE-URL-HERE">Contact Us</a>

Note: Change CONTACT-US-PAGE-URL-HERE to your contact me page URL.

Option 2 a button link:

Preview:

Code:

<FORM METHOD="LINK" ACTION="CONTACT-US-PAGE-URL-HERE">
<INPUT TYPE="submit" VALUE="Contact Us">
</FORM>

Note: Change CONTACT-US-PAGE-URL-HERE to your contact us page URL.

That's it have you added a contact page to your blog?

How to fix the problems with the 'Sharing Is sexy' bookmark buttons

2009-11-10T19:11:00.004Z

A lot of people have been having trouble with the 'Sharing Is Sexy' bookmark buttons.The problem is with an image hosted by imageshack.In the post i recently published showing how to add the buttons to your blog i have fixed the problem.

You can fully re-install the buttons Install Sexy Bookmark Buttons

Or

If you have already installed the buttons and are having the image problem here's how to quickly fix it :

1.Click 'Layout'-->'Edit Html' for your blog

2.Find this piece of code in your blogs html :
(This is the problem image)

http://img509.imageshack.us/img509/3131/sexysprite.png

3.Now replace it with the following code :

http://i941.photobucket.com/albums/ad259/spiceupyourblog/sexybookmarksbuttons.png

Click save and your buttons should be working fine again.

Any Questions ? Drop A Comment Below..

How to make a Rollover / Mouse Over image link

2009-10-29T19:01:00.008Z

A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites.When you use this effect with an image you add to your blog the image will change to differant image once you hover your cursor over it.It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image :

Place your cursor over the image to see it change:

The image is also a clickable link so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos.In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera). "You can check out how the results here - Kates Mouseover Images

Making a rollover image is quick and easy heres the steps :

This is the code we use to make the image.

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked.

In the above code change the following:

1.TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.
Example : http://www.spiceyupourblog.com

2.URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here this is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3.URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there, this is the image that appears when your cursor hovers over it.
Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

We Are Nearly Finished - If you need more help or have an opinion or suggestion Please leave a comment Below.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

Once the changes are made your done you can place the image in your blog posts/sidebar or anywhere html can be used.

Another Cool Effect For Your Images Is The Opacity Blurred Hover Effect Check It out.

Thats it a nice easy trick that can be used in so many ways, Do you like it ?

How to add a fixed floating image to your blog

2009-10-27T18:20:00.005Z

A floating image is an image that will always appear in the corner of your blog even when you scroll up and down the page.

In this blog you can see a floating image most of the time i change them regularly at the moment i have two :.

If i am not currently using it click here to see a live demo

This is the first:

When clicked it leads back to my blogs home page.

This is the second :

It leads to my blogs Rss Feed.

Heres how to add a floating image to your blog:

1.Click Layout-->Edit html for your blog

Tick the 'Expand widget template' box.

2.Find the following piece of code in the html:

]]></b:skin>

3.Add the following piece of code above it :

#float_corner { position:fixed;_position:absolute;bottom:0px;left:0px;clip: inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

You can change the following attributes : bottom :left
Change them to make the image appear were you like :

top left
top right
bottom left
bottom right

4.Now find this code in your html :

</body>

5.And place this code before it :

<div id="float_corner"> <a href="ENTER TARGET URL HERE"> <img src="ENTER IMAGE URL HERE" border="0" /></a> </div>

You Must change the following attributes :

ENTER TARGET URL HERE - Place the address you wist the image to lead to when clicked here.

Example: http://www.spiceyourblog.info

ENTER IMAGE URL HERE - Place the Url of the image you want to use here.

Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

We Are Nearly Finished - First A Quick Reminder:
If you need more help or have an opinion or suggestion Please leave a comment Below.
It also really helps me with future posts if you let me know if a tip has worked on your blog.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
OK Back to business....

(You can find images on image hosting websites like Photobucket)

If you wish to use the images i use in this blog here they are with their Image URL :

URL for this image:

URL for this image:

To add a second floating image just repeat making sure to add the image to a differant corner.

How to make an easy email me or mailto link or picture link for your blog

2009-10-07T00:05:00.008+01:00

If you would like to give your blog readers the option to email you, a quick and safe why to do this is with a email me or mailto link.In this post i will show you how to make a mailto link, mailto picture link or mailto button and add it to your blog.It's easier than you may think.

All three are made up of just a short piece of code and are very easy to add to your blog.You could place on in your sidebar of footer or even in a post if required.

Here i will show how all three are made.

1.Mailto Link

Here's a preview of a mailto link :

Click Here To Contact Me By Email

And here's the code:

<a href="mailto:spiceyourblog@gmail.com.com"> Click Here To Contact Me By Email</a>

Note

Simply change my email in Bold above to your email address.

change the text 'Click Here To Contact Me By Email' in Bold above to the text you want displayed.

2.Mailto Picture Link

Here's a preview of a mailto Picture link:

And here's the code:

<a href="mailto:spiceyourblog@gmail.com" ><img src="http://i631.photobucket.com /albums/uu40/paulcrowe/email-3.png" alt="Click to email me" /></a>

Note:

Simply change my email in bold to your email address.

You can change the picture link in bold to another picture if you want.

3.Mailto Button Link

We Are Nearly Finished:
If you need more help or have an opinion or suggestion, Please leave a comment Below.

Here's a preview of a mailto button link:

Here's the code:

<form> <input value="Email Me" onclick="location.href='mailto:spiceyourblog@gmail.com'" type="button"> </form>

Note:

Simply change my email in bold to your email address.

You can change the Text 'Email Me' in bold to the text you want displayed on your button.

To add one to your blog copy the code add your Email and paste the code were you want it.The code can be placed anywere Html is accepted.
To add one to your sidebars in your dashboard click 'Layout' > 'Add a gadget' > Choose 'Html/Javascript' from the pop up menu > paste in the code and save.

Another option is to add a contact me form to your blog Click Here to see how.

Did you add a mailto link to your blog? Did it work..

How to create two types of easy drop down menus for your blog

2009-10-06T23:02:00.003+01:00

Drop Down menus can be used in so many ways in your blog from creating a menu for your visitors to linking to past posts etc...Their popularity is mainly down to how tidy they are taking up little room yet displaying an infinite amount of links that would otherwise fill your blog.Here i will cover two types of html drop down menu
.Both these menus can be added in your posts/sidebar are anywhere you want them.

1.A drop and click menu.

2.A drop down menu with a go button.

Drop and click :

Here is how the menu looks:

And here is the code that makes the menu:

<select id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" class="text_noresize" name="select">
<option selected="selected">Change This To Title You Want</option>
<option value="http://Spiceyourblog.info"> This is the title of your first link</option>
<option value="http://Spiceyourblog.info"> This is the title of your second link</option>
<option value="http://Spiceyourblog.info"> This is the title of your third link</option>
<option value="http://Spiceyourblog.info"> This is the title of your forth link</option>
<option value="http://Spiceyourblog.info"> This is the title of your fifth link</option>
</select>

Just copy the code above paste it were you want your menu and you just have to make a few quick changes.

1.The text in red is displayed on the front of your menu just change to suit.
2.Change each of the URLs in green and their corresponding titles in blue to suit.
3.You can of course add more links or remove links.

This is a drop down menu with a GO button:

And this is the code:

<form title="jump">
<select name="menu">
<option value='URL ------- 1 here' > title 1</option>
<option value='URL ------- 2 here' > title 2</option>
<option value='URL ------- 3 here' > title 3</option>
<option value='URL ------- 4 here' > title 4</option>
<option value='URL ------- 5 here' > title 5</option>
<option value='URL ------- 6 here' > title 6</option>
</select>
<input type="button" onClick="
location=document.jump.menu.options
[document.jump.menu.selectedIndex].value;" value="GO">
</form>

This menu has two differences,
First it has a go button
Second the title of the first link is the title displayed on the front of the menu.

If you need more help or have an opinion or suggestion,
Please leave a comment Below.

You an change GO in red to select/advance etc....
Add your UR L's and Ti tiles as shown with the first menu.
You don't change name="menu"

Job Done !

Both very effective and both very simple.

How to add a small search box to your blog

2009-09-28T01:42:00.006+01:00

Its easy to add a search box for your readers to search your blog.
On blogger we have the option to add a google search to our blog.
I think the google search box is too big and un-editable so i added my own small search box.

This search is just as effective and very easy to add to your blog and you can make it appear to suit your blogs style and colors.

This is the search box:

To place this on your blog you just gotta copy the code below and replace by URL with yours and you have the option to make some changes to its appearance.

Below is the exact code that makes up my search box:

<form id="searchthis" action=" http://www.spiceyourblog.info/search" style="display:inline;" method="get"><br /><strong>Search Spice your blog<br/></strong><br /><input id="b-query" maxlength="255" value=" Type and search..." name="q" size="20" type="text"><br /><input id="b-searchbtn" src=" http://i631.photobucket.com/albums/uu40/paulcrowe/searchbuttonsbx.jpg" type="image" align="top"><br /></form>

Only one part of this code must be edited before adding it to your blog that is the URL :

1.The URL : http://spiceyourblog.info/search - change this to your blogs address : http://www.yourblogaddress.com/search

Your search box is now ready and will search Your blog OR you have the option to make three more changes to personalise your search box .

We Are Nearly Finished
If you need more help or have an opinion or suggestion,
Please leave a comment Below.

2.The text : Search Spice Your Blog- is the text that appears above your search box you can change it to anything you like or leave blank to have no text.

3.The text : Type and search... - is the text that appears inside the search box and can be changed or left blank for no text inside the box.

4.The URL : http://i631.photobucket.com/albums/uu40/paulcrowe/searchbuttonsbx.jpg - is the URL of the image that appears below the search box.This can be changed (check Photobucket.com for some small search icons) or it can be removed to have no image.

So theres your small search box enjoy.

How to make a clickable picture link

2009-09-26T07:00:00.005+01:00

How to make a picture (an image, photo or screenshot) clickable, that is, become a hyperlink.

The first thing is you must get the picture up on the web. This you can do by uploading to Photobucket.

You can choose one of the billions pictures they have or if you have an account or open an account (its free) you can upload an image.

Once you upload or select an image you will get code for the image in four formats you must select HTML.

So for this we will use this image.

When you click this image it will lead you to Photobucket.com.
So we gotta change the direction.

This is the Html for this picture its the same as the code you use sending any pictre comments in Myspace etc...

We are interested in the address http:// photobucket.com.

<a href="http://photobucket.com" target="_blank"><img src="http://i631.photobucket.com/albums/uu40/paulcrowe/info.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" /></a>

The address determines were the picture leads to when clicked.
So we simply change it to were we want the picture to lead to.

In This case we will change it to http:// spiceyourblog.info :

<a href="http://spiceyourblog.info" target="_blank"><img src="http://i631.photobucket.com/albums/uu40/paulcrowe/info.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" /></a>

By changing the address the picture now leads to this site.
Easy.

But were not finished yet take your cursor and put it over the picture

You will see a line of text appear "Photo Sharing and Video Hosting at Photobucket" (does not work in all browsers)
We can also change this it gives a discription of the image and also helps get your image indexed in Google image searches.

We Are Nearly Finished - First A Quick Remunder:
If you need more help or have an opinion or suggestion,
Please leave a comment Belo

The code we are interested in here is "Photo Sharing and Video Hosting at Photobucket".

<a href="http://spiceyourblog.info" target="_blank"><img src="http://i631.photobucket.com/albums/uu40/paulcrowe/info.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" /></a>

We simply change this text to whatever we want it to say like this :

<a href="http://spiceyourblog.info" target="_blank"><img src="http://i631.photobucket.com/albums/uu40/paulcrowe/info.jpg" border="0" alt="Type the text you want here" /></a>

Now the text will show "Type the text you want here"

Try it out :

You now have a simple professional hyperlink that leads to anywhere you choose.

How To Make An Easy Clickable Link

2009-09-26T06:23:00.008+01:00

In this post i will show you how to make a text link or hyperlink.

Making the link is very simple.

This is how you would create a link directing to this site:

<a href="http://www.spiceupyourblog.com"> Click Here</a>

And this is how it looks:

Click Here

To make the link direct to your site or any web page you want all you have to do is replace my link (the bit in red) with your link.

<a href="Replace this with your link">Here</a>

You may also change the text that shows.

So instead of "Click Here" you could have :

<a href="http://www.spiceupyourblog.com">abcdefghij</a>

Which appears as so:

abcdefghij

This is just a simple html text link for more help and a more indept look at creating links check out w3Schools.

More help is only a comment away.

How To Make A Youtube Video Auto Start Or Play

2009-09-26T02:58:00.006+01:00

This is very easy to do and also a very common question.When you place a YouTube video on your blog the default setting is set for the video not to start unless play is clicked.If you would like the video to start automatically when someone arrives on your page you just need to add a simple piece of code.

Simply paste the code of your chosen video were you want it like the example below :

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

To make it autoplay, just append "&autoplay=1" after the video ID so it looks like this:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

We Are Nearly Finished - If you need more help or have an opinion or suggestion,
Please leave a comment Below.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

Thats it !

Now your video will start automatically.