Html Parse Tool - Display Html Code In Your Blog

| | 6 comments
Below is an instant html parse tool.This can be used to display html in your blog posts.Once you enter html the parsed code will be generated and that code when added to a post will be displayed as code not formed.This tool can also be used to parse AdSense code as it needs to be parsed before being added to templates.

Enter Code:
Parsed Code
Continue Reading

How To Add A Contact Us Page To Your Blog

| | 11 comments
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)

Create Contact Form For Blof

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:

blogger post options

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?
Continue Reading

Add A New Random Post List Gadget To Your Blog

| | 7 comments
new random posts gadget blogThis post has been rewritten on 22-09-10 to include a new improved random post gadget.The previous gadget had stopped working.Thanks to Sylvia from Classical Bookworm for the heads up.

Most blogs have Recent Post and maybe Popular Posts gadgets in the sidebar and footer and these help keep readers on you blog and display some of  your best posts.But only the random posts gadget really digs deep into your archive and helps keep those old posts rotating.Adding the Random Posts Gadget will only take a minute so lets look at the steps.

Add A Random Posts Gadget To Your Blog

Step1. In your dashboard click 'Design' > 'Add A Gadget'

Step 2. Choose Html/Javascript Gadget and paste the following code into the area provided :

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Note : You can change the number in red to choose how many posts you wist to have displayed.

Step 3. Give the gadget a title, Like : 'Random Posts', 'Posts From The Archive' etc.. Save The Gadget.


You have just added a cool new way for people to navigate your blog, make sure to check out some more great Blog Gadgets you will love !

Comments And Questions Welcomed Below.
Continue Reading

How To Add A Background Image Behind Your Blogger Posts

| | 8 comments
In this latest blog i will show you how to use an image in the background of your blog posts.This background image will only be behind the post area of your blog.

This is part 3 of 3 on adding background images to your blog recently i posted:

1.How To Use A Background Image For Your Blog

2.How To Add A Background Image To Your Blogger Sidebars

Be careful selecting an image to put behind your posts you don't want an image that makes your blog hard to read.You can find images on image hosting websites like Photobucket.


Once you choose your image here's how to add it to your blog:

1.Click 'Layout'-->'Edit html' For your blog

2.Find the following piece of code in your blogs html:
(Click'CTRL F' on your keyboard for a search box to help find code)

#main-wrapper {


You will see ' #main-wrapper { 'Followed by code similar to this :

#main-wrapper {
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3.Now add the following code Directly Below ' #main-wrapper { '

background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */


4.Replace the text 'PUT IMAGE URL HERE' above with the URL of your image.

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.

Example:


#main-wrapper {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Once you have added the code click save and your finished adding the image.

What do you think ?
Continue Reading

Christmas Snow Falling Effect For Blogger Blogs

| | 39 comments
In this post we have a very cool effect you can use to Spice Up Your Blog over the Christmas.With just a small piece of code you have Snow Flakes gently falling down your blog.The Snow Fall effect we use is simple and wont disrupt the readers.Before you add the Snow to your blog you can check out the demo.

Live Demo - Click To See The Demo : Snow Fall Demo

Update - This effect will work on all custom or older templates but unfortunately not with templates from the Blogger Template Designer.If you using a template designer template or if you want some more cool Christmas effects we have just published 10 Spectacular Falling Christmas Objects For Blogger including a Falling animated Snowflake, snowman, Santa and Christmas Three check it out.

Update 2. - Click to see how to get the snow effect with differant colors.

Add Snow Fall Effect To Your Blog


Adding the effect is easy and can be done in a few quick steps:

Step 1. In your dashboard Click Design > Add A Gadget > Choose Html/Javascript








Step 2. Copy And Paste The Code Below Into The Html/Javascript Gadget :

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
/************************************************ Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript * Script featured available at Dynamic Drive at http://www.dynamicdrive.com/ * Please keep this notice intact ***********************************************/
</script><a href="http://www.spiceupyourblog.com/2009/11/how-to-add-snow-falling-effect-to-your.html" target="_blank"><font size="1">Get snow effect</font></a>

(You don't need to give the gadget a title just leave title area blank)

Step 3. Save The Gadget and check out your cool snow Effect.

With Christmas In Mind  Check Out How To Add A Fixed Floating 'Merry Christmas' Banner To Your Blog.We also have a cool tutorial with 3 types of flowers falling for your blog.More Christmas design for your blog ? We have a transparent Christmas Corner Banner

Drop Your Comments, Views And Questions Below.
Continue Reading

How To Add A Background Image To Your Blogger Sidebars

| | 4 comments
In this post i will show you how to use a background image behind your sidebars in your blogger blog.Adding the background image is very simple and just requires a small piece of code.

This is part 2 of 3 on adding background images to your blog recently i posted:

1. How To Use A Background Image For Your Blog

2. How To Add A Background Image Behind Your Blogger Posts

First you will have to select the image you want to use.

You can find images on image hosting sites like Photobucket.
The code is set to tile/repeat the image across the background so a small decorative image will do.

Once you choose the image here's how to add it:


1.Click 'Layout'--.'Edit Html' For your blog

2.Find the following piece of code in your blogs html
(Use 'CTRL F' for a search bar to find the code)



#sidebar-wrapper {


If you cant find that code it may be:



#side-wrapper {


You will see '#sidebar-wrapper'followed by code similar to this :



#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


3. Now add the following piece of code Directly Below #side-wrapper {



background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */


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 .

4.Replace the text 'PUT IMAGE URL HERE' above with the URL of your image.

Example:


#side-wrapper {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

5.Now click save and your Background image is added to your blog.

Were you able to add an image ? Let me know how you did.
Continue Reading

How To Add A Stacked Scrolling Recent Posts Widget To Your Blog

| | 1 comments
In this post i will show you how to add a stacked animated recent posts widget to your blog using Google Ajax feed API.The widget is easy to add to your blog and can be placed in your sidebars under/over posts or anywere you can add html/javescript gadgets.In a previous post i covered adding a single scrolling recent posts widget to your blog using the same format Click here for that post

Preview

Heres a screenshot of how the widget looks showing my recent posts :

Recent Posts Widget

Demo : Click Here To See A Working Demo Of The Widget

Get Your Stacked Recent Posts Gadget

Heres the steps to add the widget to your blog displaying your recent posts :

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

2.Click 'Add a gadget'
add a gadget blogger

3.Select 'html/javascript'

4.Paste the following code into the area provided:



<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Recent Posts Loading...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Recent Posts - YOUR BLOG TITLE HERE',
url: 'PUT YOUR FEEDBURNER URL HERE'
}];
var options = {
stacked : false,
horizontal : false,
title : ""
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->


Now you must make the following changes to the code:

1.Were you see 'YOUR BLOG TITLE HERE' in the code above replace with your blog title

Example: Spice Up Your Blog

2.Were you see 'PUT YOUR FEEDBURNER URL HERE' in the code above replace the text with your feedburner URL.

Example: http://feeds2.feedburner.com/spiceupyourblog
(Don't have a feedburner feed? Click here to get one.Its a Google service only takes a few minutes.)

Once you Have made the changes click save and your done !

You can do much more with Google Ajax feed API Click here to go to the Google page.
Continue Reading

How To Use A Background Image For Your Blog

| | 20 comments
In this post i will show you how to have an image as the background of your blog.Adding the image is easy and can be completed in a few steps.

This is part 1 of 3 on adding background images to your blog recently i posted:

1.How To Add A Background Image To Your Blogger Sidebars

2.How To Add A Background Image Behind Your Blogger Posts

First you must find the image you want as your background you can find images on image hosting sites like Photobucket of do a Google image search.

You can find/create an image big enough to cover the entire background of your blog.

Most people will just find a small image that will repeat across the background i have set the code to accommodate both.

How To Use A Background Image For Your Blog

Once you have your image here's how to add it :

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

2.Find the following piece of code in your blogs html:
(Click 'ctrl F' for a search box to find the code)


body {


You will see 'body {' followed by code similar to this:


body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}


3.Add the following piece of code Directly Below body {


background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */


4.Replace the text 'PUT IMAGE URL HERE' above with the URL of your image


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.

Example:


body {
background:url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}


5.Click Save and you have your background image added.

Have you added a background image to your blog ?
Continue Reading

How to add a Related Posts list under your blog posts

| | 16 comments
In this post i will show you how to place a related posts widget under your blog posts.Displaying related posts under your blog posts is a great way to keep visitors to your blog - on your blog.The gadget works by displaying a list of posts that have the same label/labels as the post currently being viewed, so there is a good chance the visitors will also be interested in the related posts.To add the recent posts widget we must add two pieces of code to your blog.

How to add a related posts list under your blog posts

Adding Related Posts To Your Blog.

1. Click 'Layout'-->'Edit html' for your blog
(Tick the expand widget templates box)

2. Find the following piece of code in your blogs hmkl:


</head>


3. Copy and paste the code below Directly Before </head>



<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:left;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.3em;
font-weight: italic;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:red;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:10px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Hey ! Here's Some Related Posts You May Like&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->


Note: The heading is currently - 'Hey ! Here's Some Related Posts You May Like' - this can be changed as to anything you like.

Optional : Change Icon

Petrina asked in a comment can the image be changed and the answer is yes.

This is the small icon that is displayed beside every title :

How to add a related posts list under your blog posts

This is the URL of that image :

http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg

Simply find that URL in the code and replace it with the URL of the image you want to use.Make sure to use a small image around 16x16 to 25x25.

--

4. Now find this piece of code in your blogs html :

<data:post.body/>


5. Copy and paste the following code Directly Below <data:post.body/>



<!-- Related Posts Code Start-->
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.spiceupyourblog.com' style='display:none'>Related Posts Widget</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End For Info: www.spiceupyourblog.com-->


We Are Nearly Finished - First A Quick Reminder:
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.

Note: You can change the maximum amount of related posts listed its currently 6
Simply change this section above : max-results=6

Once you click save the related posts list has been added.What do you think ?

Continue Reading

Ten Free Visitor Hit Counters For Your Site

| | 2 comments
In this post i will list ten free visitor or hit counters you can add to your blog to keep track of how popular your blog is who is visiting etc...You can now keep track of so much information and in real time and most counters just need you to add a small piece of code.

Ten Free Visitor Hit Counters For Your Blog

Here's the stat counter list


  • Blogpatrol Who is reading your blog? What is your most popular content? How do visitors find your blog?




  • Statcounter Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time!




  • Free-counters Very original styles,Get a counter in one click!




  • Freebloghitcounter Looking for a quick and simple way to keep track of your web page visitors?




  • Statssheet Free Website Counters, Website Tools, & Articles




  • 24counter All types of counters for your blog




  • Website-hit-counters provide one of the most comprehensive selections of free, attractive and very reliable website hit counters




  • Shinystat ShinyStat ISP enables its partners to measure the traffic of numerous sites at the same time and to enjoy particularly advantageous resale conditions.




  • Freehitcount Selection of novelty counters




  • Totallyfreecounters Change colors and styles ot your counter





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

    This is a list of i have found usefull there are lots more counters out there,be sure to explore all the options on the sites.

    Continue Reading

    How To Add Gadgets Above Or Below The Header In Blogger

    | | 23 comments
    In this post i will show you how to edit your blog to allow gadgets be placed above or below your blogs header section.This is great for adding Menu bars, adsense, search bars and moreIn most blogger templates you can add gadgets to your sidebars and under or over your posts but by default not below or above the header area.You can however make a quick change to your blogs html that will allow you to add gadgets below or above your blogs header.

    You can also add gadgets like adsense inside your header section Adsense In Header Blogger to see a post on this.

    Take a look at how i changed this sample blog to allow the gadgets :


    Blogger maxwidgets
    In this image you can see the gadget is not allowed below or above the header.









    Add gadgets above header blogger
    Now once the code is changed we can add gadgets above the header.....










    Add gadgets to header blogger
    And we can also add gadgets below the header.










    Heres how to make the changes :

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

    2.Find the following piece of code in your blogs html :
    (use 'ctrl f' for a search bar to find the code)



    <div id="header-wrapper">



    3.This is the section of code you will see under <div id="header-wrapper">



    <div id="header-wrapper">
    <b:section class="header" id="header" maxwidgets="1" showaddelement="no">
    <b:widget id="Header1" locked="true" title="Sample Blog (Header)" type="Header">
    </b:widget>
    </b:section></div>


    All you have to do is change the 'Maxwidgets' from '1' as seen above to '5' as seen below :



    <div id="header-wrapper">
    <b:section class="header" id="header" maxwidgets="5" showaddelement="no">
    <b:widget id="Header1" locked="true" title="Sample Blog (Header)" type="Header">
    </b:widget>
    </b:section></div>


    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.

    You could change it from 5 to as many as you want but its unlikely you would want to add more than five gadgets.

    You can also add a wide gadget across the entire width of your blog under the header check it out !

    Click save and your finished Gadgets can now be added above and below the header!

    What do you think ?
    Continue Reading

    How to make a Recent Posts widget with Feedburner

    | | 0 comments
    How to make a Recent Posts widget with FeedburnerIn this post i will show you how to make an Easy Stylish Recent Posts widget using Feedburner.This widget can be created in a few clicks and can be styled to your taste.

    All you need is a feedburner feed,Creating a Feedburner feed for your blog is a must if you don't have one click here to see how to get one.

    Feedburner even offer a one click button to add the widget to your Blogger or Typepad blog so you don't have to copy any code.

    Here's an Example of the widget using my feed :



    You can also edit : Number of posts to display, Author name, Lenght of description, Date, Feed link and more.

    Get Your Recent Posts Gadget

    1.Log into your Feedburner account and select your blog feed.

    2.Click 'Publicize' in the top menu.

    3.Click 'Buzz Boost' in the side menu

    4.Edit the look of your widget - Number of posts, Title etc...

    5.Now use the one click option to add widget to your blog OR Copy the widget code available.



    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....

    Job done.

    Note:


  • Feedburner offer more great features take some time out to explore the options available.




  • You can place the code in your other blogs or website to have a link to your blog



  • If You Have Any Questions Drop A Comment Below.
    Continue Reading

    Improve Your Blogs Google Rank With Meta Tags And Meta Description

    | | 19 comments
    How To Improve Your Blogs Google Rank With Mata Tags & DiscriptionIn this post i will show you how to add Meta Tags And Meta Description to your blog.Improving your search engine rank is key to the success of your blog.This is known as S.E.O. (Search Engine Optimization).

    Large companies spend a fortune on S.E.O. ,That's great if you have a fortune to spend ! Search engines use automated spiders and crawlers, to collect information from your blog.They collect URL'S ,Titles,etc...
    They also collect keywords from the early parts of your blog posts.

    However you don't know which words are taken as keywords connected to your blog, It's likely the keywords been taken are not relevent to your blog at all. In this case your blog won't be indexed properly in search engines.

    Theres also a chance your highly relevant keywords might not even be used to index your blog.This will result in your blog being ranked behind Thousands of others in searches !

    But you can take control !

    You can add Meta Tags and Description to your blog.

    Now YOUR telling the search engine spiders and crawlers the key words and description YOU want your blog to be indexed under.

    So lets do it !

    First you must copy the code below and add a meta description and meta keywords (as shown in bold) as follows:

    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
    <meta content='PUT BLOG DISCRIPTION HERE.' name='description'/>
    <meta content='PUT, KEYWORDS, HERE, SEPERATED, BY, COMMA,' name='keywords'/>

    Heres an example of how the code might look for this blog:

    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
    <meta content='SPICE UP YOUR BLOG BLOG TIPS TRICKS' name='description'/>
    <meta content='blog, tips, tricks,' name='keywords'/>

    Notes on Description:'PUT BLOG DISCRIPTION HERE'.- TRY KEEP IT LESS THAN 150 CHARACTERS

    This explains its self,Keeping it under 150 characters is search engine friendly,you don't have to use 150 characters it can be as short or long as you wish once its relevant to your blog.

    Notes on Keywords :'PUT, KEYWORDS, HERE, SEPERATED, BY, COMMA,'-YOU CAN ADD AS MANY AS YOU LIKE - SEPARATE BY COMMAS - DON'T USE THE SAME WORD MORE THAN 5 TIMES

    -Think which words or phrases best describe your blog.Repeating a word more than 5 times can be seen as spam by search engines.

    Adding The Code To Your Blog :

    1.Click 'Design'-->'Edit Html' For your blog.

    2.Find the following piece of code in your blogs html:
    (Its very close to the top)


    <head>

    3.Add the meta content code Directly Below <head>

    4.Click save and your finished.

    In a previous blog i covered Improving S.E.O. by Changing the way Google sees your blog this is also important: Improved Blogger Title Format.Check out more of our SEO Tips

    Drop Your Comments And Questions Below
    Continue Reading

    Five Types Of Google Translate Widgets For Your Blog

    | | 2 comments
    In this post i will show you five different types of Google translate widgets and how to add them to your blog.The blogosphere is a Global phenomenon so its important to make your blog available in all languages.Below i will cover how to Add the translate widget code to your blog.First here's the five types of Translate widgets with the code needed:

    Translate Gadgets

    How to add a Google Translate widget to your blog

    1.Small Drop Down Menu:

    Small drop down translate menu

    Small Drop Down Menu Code:



    2.Single Column With Flags:

    How to add a Google Translate widget to your blog

    Single Column Code:




    Single Column code With Transparent Background :



    Single Row With Flags

    How to add a Google Translate widget to your blog

    Single Row Code:




    Double Row With Flags

    How to add a Google Translate widget to your blog

    Double Row Code:





  • How To Add the code to your blog








  • 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....

    1.Choose a widget above and copy the code

    2.Click 'Layout'-->'Add a gadget' for your blog

    3.Choose html/javascript in the pop up window

    4.Paste the code into the area provided

    5.Click save.

    Your Google Tanslate widget has been added.

    Continue Reading

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

    | | 0 comments
    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 :

    How to fix the problems with the sexy bookmark buttons


    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..
    Continue Reading

    How to make all links in your blog open in a new Window Or Tab

    | | 8 comments
    In this post i will show you how to make all links in your blog open in a new window when clicked.This will make sure to keep visitors to your blog On your blog.

    The Steps

    Heres how its done :

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


    2.Find the following piece of code in your blogs html :
    (Its at the very top)


    <head>




    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....

    3.Put this code Directly Below<head>


    <base target='_blank'/>



    4.Click save your done all click on your blog will open in a new window.



    If you have any questions drop a comment below.
    Continue Reading

    How to add a scrolling recent posts widget to your blog.

    | | 2 comments
    In this post i cover using Google Ajax feed API as a recent posts gadget for your blog.The widget can be added anywhere on your blog and will scroll trough your most recent posts.You can also add a Stacked version of this widget click here to see how

    How to get a scrolling recent posts widget for your blog.

    Preview

    Here's a screenshot of the widget if your still not sure which one I'm talking about :

     Google Ajax feed api as a recent posts gadget


    Get This Gadget

    To add this gadget to your blog follow these steps :

    1.copy the code below :

    <!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
    <!--
    // Created with a Google AJAX Search and Feed Wizard
    // http://code.google.com/apis/ajaxsearch/wizards.html
    -->

    <!--
    // The Following div element will end up holding the actual feed control.
    // You can place this anywhere on your page.
    -->
    <div id="feed-control">
    <span style="margin:10px;padding:4px;">Loading...</span>
    </div>

    <!-- Google Ajax Api
    -->
    <script src="http://www.google.com/jsapi?key=notsupplied-wizard"
    type="text/javascript"></script>

    <!-- Dynamic Feed Control and Stylesheet -->
    <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
    type="text/javascript"></script>
    <style type="text/css">
    @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
    </style>

    <script type="text/javascript">
    function LoadDynamicFeedControl() {
    var feeds = [
    {title: 'Recent Posts',
    url: 'PUT YOUR FEED URL HERE'
    },
    {title: 'Recent Posts',
    url: 'PUT YOUR FEED URL HERE'
    }];
    var options = {
    stacked : false,
    horizontal : true,
    title : ""
    }

    new GFdynamicFeedControl(feeds, 'feed-control', options);
    }
    // Load the feeds API and set the onload callback.
    google.load('feeds', '1');
    google.setOnLoadCallback(LoadDynamicFeedControl);
    </script>
    <!-- ++End Dynamic Feed Control Wizard Generated Code++ -->


    2.In the 'Layout' section of your blog click add a gadget and paste the code into the space provided.

    3.You now Must make two changes to the code for it to display your recent posts :

    1.You can see : 'PUT YOUR FEED URL HERE' twice in the code - replace with your feed URL.

    Example :http://feeds.feedburner.com/spiceupyourblog

    Don't have a feed for your blog?

    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....

    Click here to see how to get a feed

    Once you have made the changes click save and your finished !

    There are a few different versions of this widget i will be covering in future posts.
    Continue Reading

    Make Blogger Blogs Available For Print Plus Print Icon For Posts

    | | 4 comments
    How to add a 'Print This Page' icon to your blog posts.In this post we will see how to make your blog posts available to be printed by readers.No matter what topic your blog covers it is a good idea to offer the option to print the posts.We will be adding some code to your template that will make the posts on your blog 'Print Friendly'.Basically readers can print the important information on the page and not the entire screen.I also have a print icon you can add to your posts that can be clicked to get the printing process started.

    Update - I have recently added a post showing Print Friendly And PDF Buttons For Your Blog Posts.

    Icon Preview

    This is the icon you will be adding :

    How to add a 'Print This Page' icon to your blog.

    Steps To Make Your Posts Available To print

    Adding The Print Page Code

    1.Click Layout-->Edit html for your blog 
    (Tick the 'Expand Widget Templates' box)

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


    &lt;/head>


    3.Add the code below Directly Before &lt;/head>


    &lt;style type="text/css" media="print">
    #noprint {display: none;}
    // Hide unwanted elements
    body {background:fff; color:000;}
    // Black text on White background
    a {text-decoration: underline; color:00f;}
    //Underline Hyperlinks in blue
    }
    &lt;/style>

    Add The Print Icon

    1. Now Find this piece of code in your blogs html :


    &lt;data:post.body/>


    2.Add the following piece of code Directly Below &lt;data:post.body/>


    &lt;a href='http://www.spiceupyourblog.com'>&lt;img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/>&lt;/a>&lt;br/>&lt;center>&lt;a href='javascript:window.print()'>&lt;img src='http://4.bp.blogspot.com/-sDWF6NT0Pdw/TXeh_SjVvEI/AAAAAAAAC98/VYe73Fl-MGo/s320/print-this-page.png'/>&lt;/a>&lt;/center>

    I think the image i have used as the icon is perfect but if you want to use a different image replace the image code with your image :

    http://4.bp.blogspot.com/-sDWF6NT0Pdw/TXeh_SjVvEI/AAAAAAAAC98/VYe73Fl-MGo/s320/print-this-page.png

    Now click save and your Blog is ready to print with a cool new button.Drop your comments, views and questions below.
    Continue Reading

    How to add the Sharing is sexy social bookmark buttons to your blog

    | | 15 comments
    sharing is sexy bookmark gadegtThe most eye catching set of social bookmarking buttons i have seen are the 'Sharing Is Sexy' buttons.These buttons are embedded below your posts and have an animated effect when a user hovers their mouse over a button it pops up ready for your content to be shared.Social bookmarking is a vital too in promoting your blog as i covered in a previous postThis tutorial is a bit harder with plenty of code to be added so make sure to back up your template to see how use the link at the top of the post.

    Important !

    The code for this gadget no longer works as the image host no longer hosts the images.You can get the updated working version by following this link - V2 Sharing is sexy Bookmarks.

    Social bookmarking is a vital too in promoting your blog as i covered in a previous post This tutorial is a bit harder with plenty of code to be added so make sure to back up your template to see how use the link at the top of the post.

    Here's how the buttons look as you see they appear just above Author and Labels

    Preview.
    How to get sharing is sexy bookmarking buttons


    New : I have just added the same bookmarking buttons with the message 'Sharing is caring' in place of Sharing is sexy you can see a preview below, to get that set Click Here.
    sharing is caring bookmark icons

    The buttons contained in the set for your readers to share your posts are for the most popular bookmarking websites :

    ►Delicious►Digg►Technorati►Reddit►Stumbleupon►Designflost►Facebook►Twitter►Furl

    The also contain a Rss feed link and an Email link.

    Here's the steps to add the code to your blog:

    --------
    Code No Longer Works Go To This Post - V2 Sharing is sexy Bookmarks.
    --------

    1. Click 'Layout'--> 'Edit html' for your blog
    (Tick the 'Expand widget templates' box)



    Blogger layout

    edit html blogger

    Expand widget templates blogger


    2. Find this piece of code in your blogs html:


    </head>


    3. Now add the code below Directly BEFORE </head>



    <style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    }

    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
    position:absolute;
    right:-17px;
    }

    div.sexy-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left:10px;
    }

    div.sexy-bookmarks ul.socials li {
    display:inline-block !important;
    float:left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }

    div.sexy-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;

    }

    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
    background:url('http://i44.tinypic.com/1znbj83.png%27') no-repeat !important;
    }

    .sexy-furl {
    background-position:-300px top !important;
    }
    .sexy-furl:hover {
    background-position:-300px bottom !important;
    }
    .sexy-digg {
    background-position:-500px top !important;
    }
    .sexy-digg:hover {
    background-position:-500px bottom !important;
    }
    .sexy-reddit {
    background-position:-100px top !important;
    }
    .sexy-reddit:hover {
    background-position:-100px bottom !important;
    }
    .sexy-stumble {
    background-position:-50px top !important;
    }
    .sexy-stumble:hover {
    background-position:-50px bottom !important;
    }
    .sexy-delicious {
    background-position:left top !important;
    }
    .sexy-delicious:hover {
    background-position:left bottom !important;
    }
    .sexy-yahoo {
    background-position:-650px top !important;
    }
    .sexy-yahoo:hover {
    background-position:-650px bottom !important;
    }
    .sexy-blinklist {
    background-position:-600px top !important;
    }
    .sexy-blinklist:hover {
    background-position:-600px bottom !important;
    }
    .sexy-technorati {
    background-position:-700px top !important;
    }
    .sexy-technorati:hover {
    background-position:-700px bottom !important;
    }
    .sexy-myspace {
    background-position:-200px top !important;
    }
    .sexy-myspace:hover {
    background-position:-200px bottom !important;
    }
    .sexy-twitter {
    background-position:-350px top !important;
    }
    .sexy-twitter:hover {
    background-position:-350px bottom !important;
    }
    .sexy-facebook {
    background-position:-450px top !important;
    }
    .sexy-facebook:hover {
    background-position:-450px bottom !important;
    }
    .sexy-mixx {
    background-position:-250px top !important;
    }
    .sexy-mixx:hover {
    background-position:-250px bottom !important;
    }
    .sexy-script-style {
    background-position:-400px top !important;
    }
    .sexy-script-style:hover {
    background-position:-400px bottom !important;
    }
    .sexy-designfloat {
    background-position:-550px top !important;
    }
    .sexy-designfloat:hover {
    background-position:-550px bottom !important;
    }
    .sexy-syndicate {
    background-position:-150px top !important;
    }
    .sexy-syndicate:hover {
    background-position:-150px bottom !important;
    }
    .sexy-email {
    background-position:-753px top !important;
    }
    .sexy-email:hover {
    background-position:-753px bottom !important;
    }

    </style>


    4. Now find This piece of code in your blogs html :


    <data:post.body/>


    5. Add the code below Directly AFTER <data:post.body/>



    <div class='sexy-bookmarks'>
    <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-syndicate'><a href='ADD YOUR FEEDBURNER FEED URL HERE' title='Subscribe to RSS'/></li>

    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    </ul>
    <span class='sexy-rightside'/></div><a href="http://www.spiceupyourblog.com" target="_blank">Get This</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 !
    Now there is just one piece of the code you must change:

    Were you see ADD YOUR FEEDBURNER FEED URL HERE

    Replace with your feedburner feed

    Example : http://feeds.feedburner.com/Spiceupyourblog

    Click here if you Don't have a feedburner don't know what it is.

    Once you have add your feed URL click save and the buttons have been added.

    Need help, have an opinion or suggestion ? That's what the comments are for !
    Continue Reading