Spice Up Your Blog

How To Add Social Bookmark Buttons To The Top Of All Posts

2010-07-22T11:17:00.001+01:00

You have probably noticed most blogs now have social bookmarking options above as well as below their posts.Here on Spice Up Your Blog we have almost 20 different sets of social bookmarking gadgets for below your posts so i think its about time i covered how to add a social bookmarking gadget above the posts.By above the posts the position i am referring to is directly below the post title and before the first line of text.Of course you could add any bookmarking gadget above the posts but in general it will look out of place, you want the bookmarking gadget above the posts to be compact and just include the main options.The gadget we have for you in this post is perfect, it wont take up too much room at the top of your posts, it look great and includes buttons for Twitter, Facebook, Digg, Stumble Upon as well as a Email This Post option.

Preview And Demo

Below you can see an image preview of the Top Bookmarking Gadget.

To see how the gadget works you can view a live Demo / Sample here - Demo Of Top Bookmarking Gadget

How To Add The Top Bookmarking Gadget To Your Blog

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.

Step 2. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Paste The Following Code Directly Above ]]></b:skin>

.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px; }.social .si { float:left;padding-top:3px;}
.social .social_button.dg { margin: 0px 0 0 30px ; padding-top: 2px;}
.social .social_button.tm { margin: 0px 0 0 32px; padding-top: 4px;}
.social .social_button.fb { margin: 0 0 0 15px; padding-top:3px;}
.social .social_button.su { margin: 0px 0 0 35px; padding-top: 2px;}
.social .social_button.em { margin: 0 0 0 35px; padding-top: 3px;}
.social .social_button.em a{background:#eee url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat; padding:2px 3px 2px 22px; font-size:10px; border:#ddd 1px solid; text-decoration:none; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.social .social_button.em a:hover {background:#ddd url(http://img180.imageshack.us/img180/1989/emailj.gif) 3px 50% no-repeat}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}
.clear{clear:both;}

Step 4. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-header-line-1'/>

Step 5. Paste The Following Code Directly Below <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == "item"'>
<div class='social'>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<script type='text/javascript'>
tweetmeme_style = "compact";
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='social_button fb'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button em'>
<a expr:href='"mailto:?subject=Sharing:" + data:post.title + "&body=Hi ! I Saw This Cool Post And Thought Of You.Check It Out :%0A%0A" + data:post.url' target='_blank' title='Email This'>Email This</a>
</div>
</div>
<div class='clear'/>
</b:if>

Step 6. Save Your Template

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 or Click here for other Rss Options. 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 !

Once your template is saved the new bookmarking buttons should be added to the top of your posts.

You can find lots more Social Bookmarking information, tips and gadgets here - Spice Up Your Blog Social Bookmarking

Feedback

Drop A Comment Below To Let Us Know What You Think Or If You Need More Help !

How To Copy And Use The Favicon From Any Site

2010-07-12T02:27:00.005+01:00

One of the subjects i have not covered on Spice Up Your Blog is Favicons.A Favicon (Favirote Icon) is the small image that appears at the top of the browser and in the address bar when on any website or blog (See Example Image Below).The main reason i haven't posted about Favicons is because there are hundreds of posts already showing how to add Favicons to your blog.However although there are posts showing how to create a favicon for your blog wouldn't it be much easier to just get a cool Favicon someone already created ?.Those of you who have experience with favicons have probably landed on a site and thought 'That Favicon Would Look Cool On My Blog'.

Example - Below you can see the current favicon on Spice Up Your Blog

Note - I have since changed to this favicon :

Having recently created a Guitar Chords Blog i hadn't yet got the chance to create a Favicon for it, then i landed on a guitar site with a cool Favicon that would really suit my new blog....So i took it.Although there are no set rules against you using a Favicon from another site i still think you need to keep a few things in mind.Firstly you don't want to use a Favicon from a very popular site as most people will be familiar with it and it will look very unprofessional.Secondly you don't want to use a favicon from a rival blog, if your blog is about cookery don't copy the Favicon from another similar cookery blog.The Favicon i used was from a Static Website (A website that does not add fresh content).Once you stick to these suggestions you should be fine.

So in this post i will show you how to get the Favicon from any Blog or Website And use it on your site.If you don't yet know how to add a Favicon to your blog don't worry i will also show you how that's done.

How To Get The Favicon Image From Any WebSite Or Blog

So once you have seen a cool favicon here is how to get the image code, remember for a favicon to work the image must be .ico format (If you don't understand what that means don't worry).

1. Copy The URL from the site that has the Favicon, Example : www.spiceupyourblog.com

2. Follow this link to GetFavicon.org

3. Enter the URL of the site in the bar at the top of the GetFavicon website and click Get Favicon.

4. You will now be shown the favicon and the image URL (See Image Below)

5. Right Click on the favicon image URL and copy the link location, you can now add the image URL to your template as i will explain below.(As you can see in the image you are told to save the link but just copy link location)

Adding The Favicon To Your Blog

We now want to add the favicon to your blog, there are a number of ways to do this but i think i have the easiest way.Remember this method will also work for a favicon you create yourself.

1. In your dashboard click 'Layout/Design' > 'Edit Html'

2. Find The following piece of code in your blogs Html
(It's easy to find at the very top just a few lines down)

<head>

3. Paste the following code directly below <head>

<link href='FAVICON IMAGE URL GOES HERE' rel='shortcut icon'/>

4. Add the Favicon Image URL to the code in the position shown in red above.

Example - <link href='http://www.iconj.com/ico/8/m/8m9k6q1dkq.ico' rel='shortcut icon'/>

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 or Click here for other Rss Options. 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 !

Once you have the code added to your template with your Favicon image URL in place save your template and check out your blogs new look !

What do you think have you seen a cool favicon you want to use on your blog ?

Let us know if you add a favicon to your blog...

Seven Of The Best Image Effects Tips And Tricks For Blogger

2010-05-31T14:55:00.004+01:00

Recently we have published some more blogger tips helping you create cool effects with images and pictures used on your blog.While writing the last post showing how to make images fade or blur when hovered over i thought i should list the best effects in one post.So in this post we will look at the best image tips and tricks we have covered in the archive.Not only will we look at effects like the blur effect but also some of the other image and picture tutorials.

You don't need a great knowledge of code to use any of this image tricks and effects and I'm sure there is something for everyone in the list.So in the order of when first posted here are some of the best image effects, tips and tricks for your blog.

Seven Great Image Effects And Tips For Your Blog

1. How To Round The Corners Of Any Image

This post shows how you can easily spice up an image by rounding the corners.The effect is easily achieved with only a few clicks required.

Link : Round The Corners Of Pictures And Images

2. How To Add A Fixed Floating Image To Your Blog

This post shows how you can have a fixed image on your blog.A fixed image is an image that will appear for example in the corner of the page and will stay fixed in place when the page is scrolled.Any image can be used and the image can be a Hyperlink (Clickable link).

Link : Fixed Floating Image Tutorial

3. How To Add An Image Divider Between Your Blog Posts

This post is still very popular and the tutorial is quiet easy.If you want to create some space between posts on your homepage or just add a decorative divider this one is for you.Included are some images you can use as dividers.

Link : Image Divider Between Posts

4. How To Create A Roolover Changing Image Effect

Once again a very popular post that i recently updated and improved.The effect achieved here is awesome yet surprisingly easy.The trick involves two images, when you hover your cursor over the first image it changes to the second image.You really should check out the post to see the preview.

Link : Roolover Changing Image Effect

5. How To Create A Stylish Signature And Place It Below Your Posts

Want to add some style to your blog posts ? Why not sign off with a neat handwritten signature.This post shows the steps required to have you actual signature below your blog posts or pick from hundreds of premade signatures.

Link : Create Signature For Your Blog

6. Image Opacity Blurred Hover Effect

This post show how to add a blurr effect to selected images on your blog.The effect makes images appear blurred but they become clear when you place your cursor over them.

Link : Hover Blurr Effect For Images

7. jQuery Blurred Picture Effect

The tip in this post is almost the opposite to the effect in the post above.While the opacity effect turns images from blurred to clear this effect turns images from clear to blurred.

Link : jQuery Blur Image Effect

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 that's just a few of the posts we have published helping you create something different with the images you use on your blog.You can find more in the archive and if you have seen an effect elsewhere and wondered How can i do that ? let me know and maybe we can help.

What do you think, are you using any of these effects and do you have a favorite ?

How To Add An Exploding Fireworks Effect To Your Blog

2010-05-25T14:35:00.003+01:00

In today's post we are going to have a look at a very cool Fireworks effect you can add to your blog.The effect looks like exploding fireworks falling down all the pages of your blog.Last Christmas i published a post showing how to add a snowfall effect to blogs, the post was hugely popular so In January i followed up with a Falling flower effect that showed how to have three different types of flowers falling gently down your blog, once again a very popular post.So it's about time i added another tutorial with a new effect.

I choose to go with a firework effect because it looks great and whether you want the effect on your blog permanently or just for occasions like maybe your birthday or July 4th or Halloween the Exploding fireworks effect is easily added and just as easily removed.

Once again i have tried to create a effect that will add to your blogs appearance without effecting or obstructing the reader.The image used should not block the text or images on your blog.Of course you will want to see how the fireworks effect looks on a blog so i have a preview or demo set up for you to have a look.

Demo Of Fireworks Effect

Here's the link : Fireworks effect demo

So lets look at the steps required to add the fireworks effect to your blog.

Add Exploding Fireworks To Your Blog

Step 1. In your dashboard click 'Layout' > 'Add A Gadget'

Step 2. From the pop up menu choose Html/Javascript

Step 3. Copy the following code and paste it into the the Html/Javascript area

<script src="http://spiceupyourblogextras.googlecode.com/files/fireworkseffect1.js" type="text/javascript">
/***********************************************

* Fireworks effect by Paul Crowe @ www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/05/exploding-fireworks-effect-blogger.html" target="_blank"><font size="1">Get Fireworks Effect Effect</font></a>

Step 4. Click save at the bottom of the pop up.

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 !

Once you have saved the gadget go back to your blog and the Exploding fireworks effect will be added.

If you need extra help just ask - What do you think ?

Have you any requests for effects you would like covered in a post ?

Let me know in the comments.

jQuery Blurred Image Effect For Blogger

2010-05-24T21:55:00.008+01:00

Back in February i published a popular post showing how to use an opacity or blurred effect with images on your blog.In the post i showed you how to add some code to your template and images which resulted in images being blurred until you placed your cursor over them.So i thought maybe some of you would like to have the effect but the other way around.In this post i will show you how to have all the images on your blog clear but they will blur when your place your cursor over them.This time the blurred image effect is achieved using jQuery so there is only a small piece of code needed.

Got the idea ?

Never mind i currently use the effect in the template gallery blog so you can check it out.Hover your cursor over any of the images in the posts or the post previews on the home page - Link : Template Gallery

Remember while the original Opacity effect could be used on selected images this effect will be on all images within your blog.Heres how it's done..

jQuery Blurred Image Effect

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

Step 2. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Copy and paste the following code Directly Before / Above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

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 !

With the code in place you can now save your template and check out the cool new image effect on your blog.

If you want to check out the original post with the opposite opacity effect here is the link : How To Use An Opacity Blurred Hover Effect On Images And Pictures

What do you think ?

How To Use A Wrapped Large First Letter In Your Blog Posts

2010-03-10T21:55:00.004Z

Many newspapers make the first letter of their articles a feature.I'm sure you have seen newspaper articles with a large first letter that stretches down four or five lines, with the text wrapped around the large letter.I have heard this called a newspaper effect but for the want of a better term we will call it the large letter effect.And with this blogger tip you can have this cool large letter effect on your blog posts.

To get the first letter of your blog posts large and wrapped in text you must add a small piece of code to your template and a tag to the first letter in your posts.This blog trick is easy set up and you can use it on all future posts or go back and make a slight change to your archive posts so they have the large letter effect.

Screenshot of large letter in blog post :

You can see the post this screenshot is from here : Large Letter Effect

Using The Large Letter Effect On Blogger

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 find the code - More Info)

]]></b:skin>

Step 3. Place this code Directly Above / Before ]]></b:skin>

.post large { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

Step 4. Save your template - But were not finished

Step 5. You now have the code in your template that will allow the effect to be created, but now we must add a tag to the letter we want to have the large effect.

To do this you add the following tag to the first letter in your posts :

<large>FIRST LETTER HERE</large>

In the example i showed above the letter B is large so i placed the tags on each side of B :

<large>B</large>logger

You could of course start every paragraph with a large letter or selected paragraphs with the large letter effect.

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 !

Save Time By Adding The Tags To Your Post Template

You can now use your post template to have the large tags automatically added to each post thus saving time.

1.Click Settings > Formatting

2.Scroll to the bottom of the page were you will locate the post template setting

3.Add the tags <large></large> into the post template area and save.Now every time you create a new post the large tags will already be in place you just put the first letter between them.

If you wish to use the effect on your older posts you will have edit the posts and add the large tags.

If you have any problems help is only a comment away !

I think its a great effect and add some style to your blog posts, what do you think ?

How The Change The Width Of The Blogger Comment Form

2010-03-09T15:56:00.005Z

A very popular recent post we did showed how to add a reply option to the blogger comments.So i decided to add another nice blogger comments trick that can improve both the appearance and performance of your comments.The area you write the text of your comments into, known as the comment form is by default very narrow.This is not a big problem, but when you see the comment forms on other blogs they tend to be similar in width to the post area.This makes the form look better and fit well with the layout of a blog and also it's easier to write comments, especially longer comments.

Changing the width of the comments on blogger is very easy and i have it broke into a few steps for you.First lets look at some examples.I have changed the width of the blogger comment form on one of my test blogs and here you can see the before and after screenshots :

Blogger Comments Default Width

Blogger Comments After Width Change

You can also see the comment form on this blog : Wide Comment Form

Changing The Width Of Blogger Comments

Step 1. In your dashboard click 'Layout' > 'Edit Html' > Tick The 'Expand Widget Templates' box

Step 2. Find the following piece of code in your blogs html :
(Click Ctrl and F for a search bar to find the code - More Info)

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Step 3. We now have to change the piece of code i highlighted in red above.

We must change it from Percentage (%) to Pixels (px) and also find a width that suits your template.

The example i showed in the images and test blog is using the minima stretch template and i changed the code :

From - 100%
To- 600px

So now the code looks like this :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='600px'/>

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 would recommend first changing the width to 500px, see how it looks and you can go back and make adjustments as required.If your using a custom template you can find the width of your main-wrapper and work with that width.

So that's another nice trick to help your comment area, you can find lots more blogger comment tips here,

If you need more help or have anything to add just let me know in the comments.

Move The Blogger NavBar To The Bottom Of Your Blog

2010-02-28T19:48:00.003Z

A recent suggestion i seen in the comments for Blogger Buzz the official Blogger Blog, was to provide the option to display the NavBar on the bottom of your blog instead of the top.

A lot of blogs have Removed the Navbar but it can be very useful for both the author of a blog and especially for the readers so this seemed like a great idea.

However it's highly unlikely Blogger will consider this suggestion but if you also like this idea don't worry, i have a way you can move the navbar to the bottom of your blog in just 3 steps.

To show you how it looks take a look at this demo : Bottom NavBar

Move The Blogger Navbar

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

Step 2. Find the following piece of code in your blogs html :
(Click Ctrl and F for a search bar to find the code - More Info)

]]></b:skin>

Step 3. Place this code Directly Above/Before ]]></b:skin>

#navbar-iframe {
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}

Click Save and the Navbar on your blog is now positioned at the foot of your blog !

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 !

Very easy, another cool effect is using a Hover Effect Navbar.This effect makes the navbar only visible when you place your cursor over it.

Will you move the NavBar of have you removed it completely ?

Get The Monster Social Bookmarking Widget For Your Blog

2010-02-25T21:50:00.005Z

In this post we have another great social bookmarking set of buttons for your blog, but this time were going BIG.A lot of blogs are taking the 'Bigger is better' approach to social bookmarking and so can you.This bookmarking widget includes large bookmarking buttons for the top seven social networks and bookmarking sites with two counter style buttons.While the Bookmark icons are cool its the large 'Share It !' banner that sets this gadget apart from the rest.

With all blogs now offering social bookmark options they have become invisible to most readers but this set will defiantly stand out.Once you follow the steps below the monster bookmarks will be below all your posts.

This is a screen shot of the gadget :

You can also see a demo of the gadget on a live blog : Live Demo

Looks Great !

How to have the monster Share It Bookmarks to your blog

Step 1. In your dashboard click 'Layout' > 'Edit Html' > Tick the 'Expand Widget Templates' box

Step 2. Find the following code in your blogs html :
(Click Ctrl and F for a search bar to help find the code - More Info)

<data:post.body/>

Step 3. Place the following code Directly Below/Under <data:post.body/>
(If <data:post.body/> is in your template twice place it below the second one)

<br/>
<a href='http://www.spiceupyourblog.com/' target='_blank'><img alt='Monster Share Gadget' border='0' src='http://i941.photobucket.com/albums/ad259/spiceupyourblog/shareit.png'/></a>
<div style='clear:both; '>
<div style='width:60px; float:left;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<div style='width:60px; float:left;'>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a>
</div></div><small><a href='http://www.spiceupyourblog.com/2010/02/social-bookmarking-widget-share-it.html'>Blog<br/>Gadget</a></small><br/>

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 !

Once you have the code in place save your template.

The Monster Bookmark Set is now below all your posts !

We have lots more cool social bookmarking options for your blog : Social Bookmarking Sets

What do your think ?

More help is only a comment away.

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 Display Gadgets On The Page Of Only One Post In Blogger

2010-02-18T05:41:00.004Z

In a recent post we looked at how to display gadgets and widgets on only the home page or the post pages of your blog.The effect could give both your home page an post pages a unique look and make the most of the space on both.

A comment on that post from Kate asked the following :

Is there a way to make a gadget appear on only ONE of the extra "Pages" that Blogger allows us? Or, a way to add a gadget to one Blog Post that I can create a hyperlink to?

I looked at using a similar technique as in the other post and it worked, So The answer is Yes You can display gadgets on only the page of a specific post, great question and here's how it's done.

Post Specific Gadgets In Your Blog

Step 1. You must first have the post published and then add the gadget as normal.

You will have to find the gadget in your blogs html so make sure to give it a unique title.You should give it the title xxxxx and later change this or remove it.You will also need the URL address of the post you want the gadget to be available on.The URL is the address that appears in the address bar at the top of your browser.

Once the gadget is added you can move to the next step.

Step 2. In your dashboard Click 'Layout' > 'Edit Html' > Tick the 'Expand widget templates' box

Step 3. Now you want to find the gadget in your template so you look for the title of your gadget or xxxxx if you used that name.

(The easiest way to do this is to click 'CTRL and F' for a search bar to help find the code - for more info on this Click Here.)

Step 4. Once you find the gadget it will look similar to the code below you can see the title xxxxx, the code displayed here is the entire code for the gadget :

<b:widget id='HTML1' locked='false' title='xxxxx' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>

Note: For some gadgets like your archive, the section will be larger but you want everything between :

<b:widget id='HTML1' locked='false' title='xxxxx' type='HTML'>

And

</b:includable>

Step 5. Now we have the code for the gadget we have to add two pieces of code to make it display on only one post.

Copy the code in red below and add it to the positions as shown :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "PUT-THE-POST-URL-HERE"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Now replace PUT-THE-POST-URL-HERE with the URL of the post you want the gadget to be on.

Once you sure you have the code added correctly you can save your template.The gadget should only appear on the page of the post you entered.

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 !

Note : You can edit the gadget and change the name from xxxxx or remove the title.

Great question Kate, i hope this helps and I'm sure it's a trick that will help other as well.Here is the link for the post on setting gadgets to post pages and the home page only.

If you ever have a question or a suggestion for a post you can use the comments or the 'Contact me' form I'm always looking for suggestions.

How To Display Gadgets On Only Your Home Page Or Post Pages In Blogger

2010-02-10T21:10:00.005Z

Over the last few days i have been making lots of changes to the layout, look and feel of Spice up your blog.I have also been working with the adsense units I'm using and the areas in which they are displayed.One of the changes i wanted to make was to get the most from the space on the blogs homepage and also make the actual post pages unique.

To achieve this i added some code to my template that would allow me to have some of the gadgets and widgets i use in the sidebars and above the posts only be displayed on the home page of the blog.I also used a similar trick to have some of the gadgets only appear on the post pages of the blog.

Update : You can also make gadgets only appear on the page of a specific post.

Home Pages & Post Pages

For the very new readers and bloggers the home page is the page you see when you land on the blog and a post page is the page you see when you click to read a post, on most blogs they look the very same but they can be set up to have a very different look.In fact you can do lots more than i have done so far if you so wish.

I was only using one adsense unit on my home page and it was at the bottom of the sidebar.I want to keep the header section for my own ads, currently i have a link for InfoBarrel in the header so i needed a way to add another AdSense unit into a prime position on the homepage.

Examples

(I do change the design here quiet a lot so it might not be the very same by the time your read this but you will get the idea)

I decided the best place for a AdSense unit was above the post summery boxes, and it was also the only place i could fit one of the highest paying AdSense units.Because i was pushing the post summary's down by doing this i added the recent post list beside the AdSense Unit on the home page so new visitors wouldnt arrive and only see ads.Now i have the adsense unit in prime position and i am still displaying the recent posts in prime position :

You can Click Here to see the home page in a new window to see the effect for yourself.

Now i dont want the new AdSense ad and the recent post list beside it on the blogs post pages so i add some code to make it only appear on the home page.

I dont want the recent posts list in the sidebar on the home page but i do want it in the sidebar of the post pages so i add the code to make that happen.Heres the sidebar example :

Home Page - The translate gadget is followed by the sponsers.

Post Page - Now the recent posts can be seen below the translate gadget.

So now we know what it is lets look at how you can use the same techinque on your blog.The first step is of course to decide what gadgets you want to display on your home page only or your post pages only.

Steps To Display Gadgets On Home Or Post Pages

If the gadget you want is not already on your blog add it first.For this example i am using a test blog and i am going to use the same recent posts widget.I have already added it to the blogs sidebar.

Name The Gadget - You will later have to find the gadget in your blogs template so to make this easy make sure the gadget has a name or title, i am looking for my recent posts gadget so it has the title recent posts if the gadget you want to move does not have a title just give it the title xxxxx and you can remove it when finished.

Step 1 - In your dashboard Click 'Layout' > 'Edit Html' > Tick the 'Expand widget templates' box

Step 2 - Now you want to find the gadget in your template so i looked for 'Recent Posts' you look for the title of your gadget or xxxxx if you used that name.
The easiest way to do this is to click 'CTRL and F' for a search bar to help find the code - for more info on this click the extra help link at the top of the post.

You want to find a section of code similar to the one below :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>

For some gadgets like your archive the section will be larger but you want everything between :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>

And

</b:includable>

Step 3 - Now we have the code for the gadget we have to add two pieces of code to make it display on the home page only.You can see the two pieces of code i added to make this happen in red below :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Copy the code in red and add in place for your gadget.

Take you time and make sure you have it added correctly, once your sure you can save your template.

Adding a gadget to your blog post pages only

To make a gadget display on the post pages only follow the same steps to find the gadget in your template.The only difference is the code added.This time you use the two piece of code shown below :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

Once again copy the code in red and put it in place for your gadget.
When your sure the code is added properly save your template and your done.

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 !

You can do this with as many items in your sidebars as you like and with any gadgets, if you need extra help you only need ask in the comments.

Will this help you with your blog ?

Add A Feed Icon Beside Your Labels And Give Every Category It's Own Feed

2010-02-02T02:29:00.003Z

Recently we have been talking a lot about Rss Feeds, Email feeds and Feedburner.In this post we will stay on that subject, the trick i cover in this post has a few purposes but the main purpose is to give readers of your blog the option to subscribe to a category you write on as well as subscribing to your entire blog.Every label on your blog has its own feed by default but there is no easy way for people to access it.Once you have made this change every label in you labels list will have a feed icon beside it.

You can see the effect used in my labels in the sidebar, i have titled my labels list 'Recommended Categories'.If you click any of the icons you will go to the feed page for that category and will have the option to subscribe to all posts i write using that label.

As well as giving the option to subscribe to a single category, i think the icons look great and enhance the appearance of your label list.To that end i will show you how to change the feed icon image from the one i use and i will give you some samples.

Here is a screenshot of the result :

This tutorial involves replacing a section of code and although it's only a small section make sure your template is backed up in case you go wrong, click the 'Extra Help' link at the top of the post to see how.

Adding the icons

Step 1. In your dashboard click 'Layout' ► 'Edit Html' ► Tick the 'Expand Widget Templates' box

Step 2. You now have to find a small section of code in your blogs html.
Dont worry i will walk you through the process.

Here is the section we will be replacing :

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

The best way to find the section is to find the first line of the code shown below :
(Note: Click CTRL and F for a search bar to find the code - For more info on this click the 'Extra Help' link at the top of the post)

<b:loop values='data:labels' var='label'>

Now from the first line you can scan down to locate the entire section.

The section starts with - <b:loop.....
And ends with - </b:loop>

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Step 3. Now you replace the section of code with the code below :

<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img alt='Subscribe To Label' src='http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-feed-16.png' style='vertical-align:middle;border:0'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Once you have replaced the code save your template and your feed icons have been added.

Change The Image

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 !

You will notice part of the code above is in Bold, that is the URL of the Feed icon being used which is this :

I have a few different images you could use instead, to use one of the images below just replace the URL in bold with the URL provided below.

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

http://i941.photobucket.com/albums/ad259/spiceupyourblog/red-feed-16.png

http://i941.photobucket.com/albums/ad259/spiceupyourblog/16-1.png

For more help with Feeds and using them to improve your blog Click Here.

Thats it have you added the Icons ?

Complete Guide To Adding The New Static Pages And Menu To Blogger

2010-01-24T18:25:00.002Z

Blogger in draft this week announced a great new and much sought after feature simply called 'Pages'.Upon it's release i wrote a post informing you about it but you may have felt short changed as i did not go more deep into how the pages are added.Fear not in this post i will do a step by step tutorial on exactly how to add the static pages to your blog.

For those who missed my original post you can see it Here.But basically if you wanted to add some 'Extra Pages' to your blog, pages that were not a usual post but rather information pages like 'About Me' or 'Contact Me' or the Required 'Privacy Policy' (AdSense require you to have a privacy Policy Click Here for more on this) you would have to write a post and use the post as you About me page etc..

The problem with this was it would be sent to your Google friend connect followers, your Rss subscribers, Your E mail subscribers and would be in your recent posts and Archive.I had shown you some tricks to avoid as much of this as possible but the Rss and Followers could not be stopped.

Now with Static pages you can add 10 stand alone pages, They will still be within your blog and these pages will be displayed as links in a top or sidebar menu.Another quiet common request was for built in menu bars so we are killing two birds with one stone.

First off you can see a menu bar i add to my demonstration blog Click Here to see the Sample / Demo .

I will show you at the bottom of this post how to create the Contact me form and other Static pages first we will look at adding the pages.

Blogger In Draft.

The first step is to log into blogger via Blogger in draft.Blogger in draft is a way for Blogger to allow users to test new features, if the users find problems with the new features they can report them, if there are no problems or once all problems have been fixed the new feature gets added to the main blogger site.

Recent features that were launched in blogger in draft and are now available on the main blogger site are : * Import / Export * Posting Gadget * Embedded Comment Form * Reactions * New Dashboard * Google Gadgets *Feed Subscription * Blog List * Scheduled Posts * OpenID Provider * OpenID Commenting

So once any glitches have been ironed out of static pages it will be available in the main blogger site.For now you will need to log in to Blogger via Blogger in Draft, and that's the first step..

Adding Static Pages To Your Blog

First off if your using a custom template you may have to add some extra code i will show you how at the bottom of the post

Step 1. Log Into Blogger Via Blogger In Draft : Click Here

You are now in Blogger in draft and it looks much the same (It's a bit more blue :D)

Step 2. In Your Dashboard Click 'New Post' ► 'Edit Pages' ► 'New Page' as shown below :

Step 3. Once you click New Page you are brought to an editor the same as your post editor.You add the new page in the very same way as you would write a post, If you were using the old Blogger post editor (I still do, old habits die hard) you will notice a difference as the new editor is default in Blogger in draft.Don't worry it works pretty much the same.

For this example i am going to add a contact me page, Take a look at the image below for the following points :

►I have added the code for the contact form in html mode with the red arrow.
►In compose mode with the green arrow i added some text and color.
►I have the title circled, i used 'Contact me'..very clever.
►And circled at the bottom you can see I'm ready to publish my page.
(Once again for people used to the old editor you will notice the preview in the new editor is a pop up) :

Step 4. I have now clicked publish page and i have 3 options as to how and were the page will be displayed.As i said earlier the pages are displayed as a menu but you can do any of the following as shown below :

► Display Pages in a menu across the top of your blog.

► Display Pages as a menu in the sidebar of your blog.

► Publish the page and add the link to a menu you already have.

If you choose the third option then the link to your new page will be like this :

http://YOURBLOGADDRESS.blogspot.com/p/NAMEOFPAGE.html

Example : http://spiceupyourblog-demo-page.blogspot.com/p/contact-me.html

Once you chose how you want the pages to be displayed click 'Save and Publish' and the page has been added.You will notice Blogger have cleverly also added a 'Home Page' link to the menu.

You can now repeat the steps to add more pages to your menu with a limit of 10 pages.

You can also edit how the pages are displayed :

In your 'Layout' Click 'Edit' for your pages and you have the option to choose the order in which the pages are displayed or choose to stop displaying a page without deleting it.
At the bottom you will see a tip, this basically tells you if you have your Page as a horizontal menu at the top of the page and move it to the sidebar it will automatically change to a vertical menu to fit the sidebar :

This is a nice new feature and you should take advantage of it.I believe every blog should have a Contact Me page, Personally i get between 10-20 people using the contact form on this blog and it helps build relationships with your readers.

If you use a custom template you may have to add some extra code to see how Click Here

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 !

Notes :

Now that we know how to add the pages lets look at making the pages we want to add.I have a few helpful posts showing how to make extra pages :

How to make a Contact Me page

How to make a Privacy Policy

That's it go add your static pages to your blog and if you need any extra help it's just a comment away.

Remove The 'Showing Posts With Label' Message From Your Blogger Results

2010-01-24T02:10:00.002Z

This post shows you an easy hack that has become quiet popular, i originally posted this as an answer to a query in the Blogger help forum.I spend as much time as i can helping bloggers in the Google Blogger help forum were i am a level 3 moderator.Although as i get busier online with this blog and other ventures and offline with the usual stuff i find it hard to get to the forum as much as i used to or would like to.

Most questions i answer in the forum are very specific to an individual blog or blogger, someone will have messed up their template or need some html help - something may not be working on their blog and a lot of the time its beginners coming in with very basic questions.The community of moderators in the forum are nothing short of amazing and go to extreme lenghts to help with the only return on their time being the joy we all get from helping others and the gratitude of the blogger who had the problem in the first place.

Popular Hack In The Help Forum

This post is based on a question i answered in the forum some time ago.Most questions i answer just fall into the archives but this particular hack was obviously very popular as to this day people still leave comments thanking me for showing how it's done.

What are we Changing ?

When you click on a label or do a search in a blog you get a list of posts using that label or search term.Above the list of posts you will see a small message and link similar to this :

"Showing posts with label XXX XXX. Show all posts" .

You can see a screenshot of the message circled in red below after i clicked the label 'Blogger Templates' on this blog :

A lot of people dont like the message and want to remove it.There is nothing stopping you from removing it if you want so here are the steps..

How To Remove the message

Step 1. In your dashboard click 'Layout' ► 'Edit Html' ► Tick the 'Expand Widget Templates' Box.

The next step requires replacing a section of code so do make sure you have your template backed up use the link at the top of the post to see how.

Step 2. Find the following Code in your blogs html :

Tip: Click CTRL and F for a search bar.Find the first line of the code.Once you have the first line you can find the rest below it.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 3. Replace that code you found with the code below :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

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 !

Finishing Notes.

Once you have made the change the message should no longer appear when someone clicks a label or does a search within your blog.

This hack is one that some bloggers will like and some wont bother with, however i covered a trick recently that displays your posts as a list instead of displaying full posts when someone clicks a label or searches your blog.

I personally recommend that you implement that hack : Click Here To See The Post

Since we started this post talking about the forum here is a link to my profile page in the forum were you can access the main forum pages from Click Here

Let us know if you made the change and as always help is only a comment away !

Use Google Docs To Make An Easy Slide Presentation For Your Blog

2010-01-22T22:07:00.002Z

Google Docs offers some awesome tools that can be used by Bloggers.Once you break down the Jargon and don't let yourself get intimated you can use docs to spice up your blog.I use the Google Docs Slide Presentation on another blog quiet a lot and it's an easy to use yet professional looking feature.

The slide presentation, not to be confused with a Slide show can be used in many ways and I'm sure you have seen it being used on some of your favorite blogs.

I am thinking of using a slide presentation as my about me page, i could add some video and images, i could use Google maps to show were i am, and much more...

Here is a quick slide presentation i made for this post.You can click Play to make the slides move every 3 seconds or click the next button to move through the slides manually.

Let It Slide

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

To be honest i would love to go deep into how it all works but it's one of those things were you just need to get clicking and try out all the options.

The editor for the slide presentation is very similar to the post editor in Blogger using a lot of the same icons for adding Images, videos and text styles or colors and links.If you do get stuck just let me know.

Adding the Slide Presentation To Your Blog

Once you have created your presentation you will want to get the embed code to add it to your blog :

1. Click Share -> Publish - Embed (In the top right while in presentation editor of Google Docs Presentation).

2. Select the player size and then select time after which presentation shows the next slide. By default 3 seconds is selected.

3. Tick or check option “Start slideshow as soon as the player loads” for auto play of slideshow. You can also select option “Restart slideshow after the last slide”.

4. Copy the embed code and paste it were you want the presentation, if you want to add one to your sidebars or footer click 'Add a gadget' and choose 'Html/Javascript.

So get over to Google Docs and get creative !

Let us know if you created your own and as always more help is only a comment away.

How To Put Adsense Ads At The Top And Bottom Of Your Blog Posts

2010-01-21T00:50:00.002Z

AdSense ad units can be placed almost anywhere on your blog, from the top to the bottom of the Blog it's self to the top or bottom of the posts.I have in previous posts showed how to place AdSense ads in your header section and how to place AdSense inside your posts i will leave a link to those posts at the foot of this post.

Here i will show you how to have AdSense ads automatically fixed directly below the posts title and under the last line in every post.These positions are two of the highest best paying places to put ads.

You can use any size and any type of AdSense ads although you will have to consider what looks best and fits best on your template.

I am going to try and write this in a way everyone can follow just take your time if your a newbie.I will do this by breaking it into three sections, in the first two you will see were to put the code but make sure to look at the third section as AdSense code added directly to your template wont work.

Three Parts To Adding The Code

1. I will show you were to place the code to have AdSense under the post title.

2. I will show you were to place the code to place AdSense directly below the post.

3. I will show you how to parse the code so it will work on your blog.

How to Place AdSense Below The Title

Step 1. In your dashboard click 'Layout' ► 'Edit Html' ► Tick the 'Expand Widget Templates' box.

Step 2. Find the following code in your blogs html :

<div class='post-header-line-1'>

Step 3. Place the AdSense code Directly Below the code you found.

If you cannot find that code in your template leave a comment and i will find the code you need.

How to put AdSense directly below the posts.

Step 1. In your dashboard click 'Layout' ► 'Edit Html' ► Tick the 'Expand Widget Templates' box.

Step 2. Find the following code in your blogs html :

<data:post.body/>

Step 3. Place the AdSense code Directly Below the code you found.

Parse And Add the AdSense code.

Before you can add any AdSense code to your blogs template you must parse the code.Don't worry this is not hard and i have a tool on this site for you to parse the code.

Step 1. Click Here to go to your AdSense account in a new window.

Step 2. Log in and create the new AdSense ad unit you want to use for the top or bottom of your posts and generate then copy the code.

Step 3. Click Here to go to my AdSense Parse Tool.

Step 4. Paste the AdSense code into the Parse box and click convert, copy the converted code and place it in the positions shown above.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Note : You can place banner ads or even text and pictures in these positions, you don't need to parse banner codes that is only for AdSense.

To see how to put AdSense ads in your header section Click Here.

To see how to put AdSense inside the middle of your posts Click Here.

If you have any trouble with any part of the post just leave a comment I'm glad to help, if it worked for you let us know.

Use A Different Background Color For The Authors Comments On Your Blog

2010-01-18T22:40:00.004Z

This is becoming a very popular trend in the blogging community.The hack is simple and the effect is used to make the admin comments stand out and let people easily see which comments are yours.Regular readers will have noticed i have been using the hack for a while and all my comments have a black background with white text while all other comments have a white background with black text.

Once you have made the change all your comments will show in a different color and you can choose the color schemes it does not have to be black and white like i use.A few months back i had been considering using a different comment system like discuss or intense debate but decided to Spice up the default blogger comments instead and there is a lot you can do with the Blogger comments, i will be covering more comment tips in future posts.

In a recent post i showed how to add images and text above the comment section Add Images Above Blogger Comments Click Here to see that post.

This trick is a little harder as we need to make a few changes so make sure your template is backed up.

Here is a preview of how my comments look :

So lets change your comments

Step 1. In your dashboard click ►'Layout' ►'Edit html'► Tick the 'Expand widget templates' box:

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

]]></b:skin>

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

.comment-admin {
clear: both;
margin: 10px 0 14px 0;
padding: 10px;
width: 400px;
background: #000000;
color:#ffffff;
}

Note: The two parts highlighted in red are the Background Color and text Color they are currently the same as mine using a black background and white text :

Background: #000000 (black)
Color: #ffffff (white)

You can change these Click Here for a color code chart to pick new colors.
( ? ) You will see a 3-6 digit code beside the colors use that code.

This next bit can be a bit tricky as you need to replace a large section of code so take your time

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 3. Find the following section of code in your template
Tip: Use CTRL and F to look for the first line and then locate the entire section.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

Step 4. Replace that entire section of code with the code below :

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-admin'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>

Once you have it replace click save and check out your new comment section !

Hopefully you will get it first time but as long as you have your template backed up you can repeat until you get it right.

If you have trouble making the change or need more help with any part just leave a comment and i will be glad to help.

The Top 10 Dark And Black Style Free Blogger Templates

2010-01-15T21:07:00.002Z

In this post i have 10 awesome Blogger Templates with dark and black themes.Once again picking just ten was almost imposable, i felt like a judge on a reality TV show having to choose a top ten.There was a time when outside of the default Blogger templates the options were limited, but the templates available for Blogger now are unbelievable as designers let their artistic side run wild.All these templates are free and are tested to work on all major browsers.

Note - We now have a sister blog bringing you the best blogger templates daily ! You can check it out here : Spice Up Your Blog Template Gallery

Most of these templates have extra Gadgets and Widgets built in like :

►Social bookmark buttons ►Re-tweet buttons
►Email subscriptions ►Search bars
►Read more functions ►Featured content sliders
►Menu bars and more..

How to get the template.

When on the Demo page for a template below you will see the 'Click here to download' option in the first post , follow that link for details on adding the template to your blog and information on how to edit the Gadgets and widgets.

So i managed to pick a top 10 but i have not put them in any particular order.

Heres the list :

1.Old Black Template.

Live Demo And Download Details

2.All Black Template.

Live Demo And Download Details

3.Fantastic Flowery Template.

Live Demo And Download Details

4.Like Coffee Template.

Live Demo And Download Details

5.Modern Magic Template.

Live Demo And Download Details

6.Artistic Sky Template.

Live Demo And Download Details

7.HPA Wood Template.

Live Demo And Download Details

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

8.Emo Template.

Live Demo And Download Details

9.Curtain Template.

Live Demo And Download Details

10.Fashion Press Template.

Live Demo And Download Details

To see my Top 10 Magazing Style Templates Click Here
To see My Top 10 Artistic Style Templates Click Here

Thats my top 10, Thanks go to Theme Craft and BloggerStyles.

All the tip's and gadgets in this blog will work great on these templates you could start by adding four columns to the footer Click Here to see how or add the Flower falling effect Click Here to see that post.

Please remember to back up your old template before changing just in case you want to change back.The templates you download have to be unzipped.

I will add more Great lists of templates for you in the future, if you need more help let me know.

Have you a favorite or did i leave out a great dark style template ?

How To Create A Stylish Signature And Add It To Your Blog

2010-01-14T23:55:00.005Z

If you look at the bottom of the posts in my blog you will see they all finish with my signature.I think the signature looks great and adds a bit of style to the posts.These signatures are very easy to create and add to your blog and in this post i will show you how.

You can actually use a small pad to write you signature or pick from one of hundreds of pre-made signatures.I picked the pre-made signature, using the pad to create your actual signature is almost imposable.

Create the signature

Im going to create another signature and walk you trough the steps.

Step 1. Go to My Live Signature and click 'Start Now' you don't need to register.

Step 2. You have 2 free options here, choose to use the wizard as i did or be brave and try to write one.

Write in your name as i did below :

Choose the font you want to use from the hundreds they have and click next as below :

Follow the steps to design the signature :

►You now choose the size i choose size 3.
►Select the color, i choose a transparent background.
►Choose the angle slant, I choose 2.

Now your signature is ready, click on 'Want to use this signature?' as below :

Now choose 'Generate html code' you will be provided with the code :

This is the code for my new signature :

<a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54488/48/010EAA2D956848A1728F82E9602766AD.png" style="border: 0 !important; background: transparent;"/></a>

And this is the new signature :

If you know how to upload the image to Blogger or Photobucket or any image hosting you may want to do that, if not don't worry we will use it as it is.

We only want the image and we don't want the image to be a link back to My live signature so you can remove the code in blue and keep the code in red :
(If your not sure how just change www.mylivesignature.com to the address of your blog)

<a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54488/48/010EAA2D956848A1728F82E9602766AD.png" style="border: 0 !important; background: transparent;"/></a>

Add the signature to your blog

There are two ways to add the signature to your blog the first way is the easiest but it wont be in you previous posts.
The second way adds it directly to your template.

First way to add the signature to your blog.
.
1. Click 'Settings' in your dashboard and then choose 'Formatting' in the top menu as below:

2.Scroll down to 'Post Template' and paste in the code and save:

Now everytime you you go to write a post the signature will be already in the post.

Second way to add the signature to your blog.

In your dashboard Click 'Layout' > 'Edit Html' and cick the 'Expand Widgets Box' :

Find the following code in your blogs html :
(Click 'CTRL and F' for a search bar to find the code)

<data:post.body/>

Paste the code for your signature Directly Below or After <data:post.body/>

Note : If <data:post.body/> is in your template twice place it after the second one.

If you have any trouble or need more help leave a comment below.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Now save your template and your signature has been added.

Have you added a signature and were you able to write your own signature using the pad ?

Put a multiple option save and share button under all your blog posts

2010-01-13T13:41:00.000Z

This addtoany save / share button has become extremely popular with bloggers.It is not too invasive on your blog style, takes up little room yet covers all the options you must make available to your blog readers to increase return visitors and provide social bookmarking options.

We all want visitors returning so no need to explain that one.If your unsure of the advantages of social bookmarking to your blog (and they can be staggering) i covered it in a previous post How Social Bookmarking Helps Your Blog .

Here is the button you will be adding under your posts
(Hover your cursor over the button to reveal all the options)

We will add the button under your blog posts in 4 easy steps

1. Click : 'Layout'-->'Edit html' for your blog
(Check the "Expand widget templates")

2.Find the following piece of code (use CTRL F to use search)

<data:post.body/>

3.Paste the code Directly Below <data:post.body/>

<a class="a2a_dd" href="http://www.addtoany.com/share_save?linkname=&linkurl=YOURBLOG.BLOGSPOT.COM"><img src="http://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0" alt="Share/Bookmark"/></a><script type="text/javascript">a2a_linkname=document.title;a2a_linkurl="YOURBLOG.BLOGSPOT.COM";</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>

Edit : You must make 2 changes

YOURBLOG.blogspot.com appears TWICE and must be replaced :

You must replace "YOURBLOG.blogspot.com" with your blog address.
Example : spiceyourblog.blogspot.com

If you use a custom domain no problem just replace YOURBLOG.blogspot.com with your custom URL.
Example : spiceupyourblog.com

4.Click save and your addtoany button is ready and waiting, What do you think ?

For more Social Bookmarking buttons and options check out these posts Social Bookmarking Posts

If you need more help drop a comment below !

Falling Flower Effect Add 3 Types Of Falling Flowers To Your Blog

2010-01-13T02:25:00.002Z

In this post we will see how to add a falling flower effect to your blog.The Snow Fall effect was very popular over Christmas and as promised in that post i will show you how to add the flower fall effect.I had been meaning to post this earlier and a comment by Aata paata reminded me, thanks Aata.

As always i want to give you options, especially as everyone has different styles and colors in there templates.With that in mind i spent a few hours creating 3 types of falling flower scripts.Just like the the snow fall effect they are very easy to add to your blog and just require you to add a gadget and i will walk you trough it.

Once added your blog will have the effect of flowers gently falling down the page.The flowers are transparent enough to not obstruct the readers.(The transparent Images were hard to find i ended up taking them from a Myspace hack..Shhh)

Flowers and demo.

Here are the 3 flower types available:

I have made a demo or sample page so you can see the effect in action, i used the pink flower on this page but all 3 look the same although the purple is a bit more full on Click Here For The Demo.

Lets add the flower effect to your blog

Step 1. Click 'Layout' ► 'Add a gadget' for your blog.

Step 2. Choose 'Html/Javascript' from the pop up menu and you will open the area to place the code.

Step 3. Copy the code for the flower you want below and paste it into the Html/Javascript area.

For the pink flower use this code:

<script src="http://flowerfall.googlecode.com/files/spiceupyourblog1.js" type="text/javascript">
/***********************************************

* Flower fall effect by Paul Crowe www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/01/falling-flower-effect-add-3-types-of.html" target="_blank"><font size="1">Get Flower Effect</font></a>

For the purple flower use this code:

<script src="http://flowerfall.googlecode.com/files/spiceupyourblog2.js" type="text/javascript">
/***********************************************

* Flower fall effect by Paul Crowe www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/01/falling-flower-effect-add-3-types-of.html" target="_blank"><font size="1">Get Flower Effect</font></a>

For the Yellow flower use this code

<script src="http://flowerfall.googlecode.com/files/spiceupyourblog3.js" type="text/javascript">
/***********************************************

* Flower fall effect by Paul Crowe www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com/2010/01/falling-flower-effect-add-3-types-of.html" target="_blank"><font size="1">Get Flower Effect</font></a>

Once you have placed the code in the box click save.
You have the option to give the gadget a title although this is not required.

If you need any extra help or have anything to add just comment below.

Is there another type of object you would like to have falling down your blog ?
Let me know maby i will create it.

Now go check out your blog and see the cool effect in action.

Add An Awesome Ferrari Style Font To Your Blog In 2 Minutes

2010-01-12T19:16:00.004Z

In this post i will show you how to add a cool Ferrari style font to your blog.This is the second font i have covered in this blog and as with the Aircut Light font we covered this can be easily added to your blog in just two minutes.Before these posts adding a stylish font to your blog was a long drawn out process and as i said before a pain in the behind .

This font is called Ferro Rosso and you can see a preview or demo of this font used on the Blogger minima template Click Here.

Who Can Use It.

As with the Aircut Light font there is one restriction.The font color is black and this can not be changed.If you use a black background or theme unfortunately it wont work, if just your header background is black you can maby use an image for your header or use a white background, you can find lots of header images for blogger just do a search.

Lets add it to your blog

Remember you can get all these tips sent directly to your Email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 1. Click 'Layout' ► 'Edit Html' for your blog.

Step 2. Find the following code in your blogs html :
(You wont need to search It's at the very top)

<head>

Step 3. Copy the code below and paste it Directly Below <head> :

<link href='http://www.fontburner.com/css/fontburner.css' media='screen' rel='stylesheet' type='text/css'/> <link href='http://www.fontburner.com/css/fontburner_print.css' media='print' rel='stylesheet' type='text/css'/> <script src='http://www.fontburner.com/fontburner.js' type='text/javascript'/> <script src='http://www.fontburner.com/js/black/ferro_rosso.php' type='text/javascript'/>

Now save your template and the Ferro Rosso font has been added, to switch back just remove the code.

If you have any questions or need more help just let me know.I have so many more fonts to share with you so keep posted.

Have you a favorite font you would like me to cover in a future post ?

Add The Numbered Next And Previous Page Navigation Gadget Under Your Blog Posts

2010-01-07T23:11:00.002Z

Once again we are trying to make it easy for people to navigate your blog.The easier it is for people to Navigate you blog the more likely it is they will stay and become return visitors.I'm sure you have seen this script used on lots of blogs and thought 'I would like that on my blog'.You probably thought adding it to your blog would be hard but once again i have a nice easy piece of code you can add to achieve the effect.

So what exactly is the page navigation widget.

Basically when someone reaches the end of a post they have the option to go to the next page, previous page or click a number to skip to that post, Its something we see on millions of web pages even the Google search page.

Here is how it looks on my blog :

You can see it starting from the first page with just the next option, in the image at the top of the post you how it looks with next and previous.

You can try it out at the bottom of this post, However the template i am using is a specialized template using a specialized read more function that shows posts in a preview box not only on the home page but on all pages so it will work much better on your blog than mine.On your blog it will skip to the the full page of your next post.

Adding it to your blog

Step 1. Click 'Layout' > 'Add a gadget' for your blog

Step 2. Choose Html/Javascript

Remember you can get all these tips sent directly to your email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 3. Copy the code below and paste it into the Html/Javascript area provided :
(There is a lot of code so be careful to get it all)

<script type="text/javascript">

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type="text/javascript">

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999"><\/script>')
}
}
</script>

Once you paste in the code click save.

Putting the gadget in place.

Before we finish : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow blog.

You will now want to place the gadget under your posts.
Click on the gadgat and 'Drag and Drop it' below the post area as shown below :

Once you have the gadget under your posts click the save button in the top Right of the layout page.

If you want there are some changes you can make to the appearance of the gadget.I wont add them here as it will only confuse people.If you have some knowledge of code and script you can edit the code yourself or you can drop a comment and i will try help you out.

I think this is a great gadget and a 'Must Have' gadget what do you think ?

Add A Handwriting Font To Your Blogger In Two Minutes

2010-01-06T22:47:00.007Z

Using stylish fonts on your blog is nothing short of a pain in the behind.It is not that they cant be added it's just the process of adding them, especially if your a newbie.For that reason i have been looking to find an easy tip to help you to use different fonts on your blog.

The solution i have came up with is easy and i have some great fonts lined up.To make the change you only have to add a small piece of code to your blog and your finished, the font will be used for all the headings in your blog : Blog title, Post title, Post date, Sidebar titles.

I wanted to show you how to use this handwriting font and see what the reaction is, if you like it let me know and i will add lots more fonts for your blog in future posts.

Who can use it.

There is one restriction, the font color is black and this can not be changed.If you use a black background or theme unfortunately it wont work, if your header background is black you can maby use an image for your header you can find lots of header imgaes for blogger.

The font we are adding is called aircut light

Before we go on take a look at a demo / sample of the font on my demo's blog : Click Here

I have just added the Ferrari Style font Ferro Rosso to see that font Click Here

Lets add it to your blog

Remember you can get all these tips sent directly to your Email and stay a step ahead.Its quick easy and of course a free service provided by Google just fill in the form below the post.

Step 1. Click 'Layout' ► 'Edit Html' for your blog.

Step 2. Find the following code in your blogs html :
(You wont need to search It's at the very top)

<head>

Step 3. Copy the code below and paste it Directly Below <head> :

<link href='http://www.fontburner.com/css/fontburner.css' media='screen' rel='stylesheet' type='text/css'/> <link href='http://www.fontburner.com/css/fontburner_print.css' media='print' rel='stylesheet' type='text/css'/> <script src='http://www.fontburner.com/fontburner.js' type='text/javascript'/> <script src='http://www.fontburner.com/js/black/aircut_light.php' type='text/javascript'/>

Once the code has been added save your template and the aircut light font has been added to your blog.

What do you think, does it suit your blog ?