Spice Up Your Blog

Millions Of New Blogger Templates For Your Blog

2010-03-12T14:05:00.001Z

There had been hints and whispers that blogger had something big planned for templates and blog design.I thought they were going to add more default templates and let designers submit new blogger templates to a gallery.But what thy have done it a Whole Lot Better ! The blogger template designer was realised today and it is the real deal.

I have been known to have the odd rant about the customization on blogger when in the forum, but even i have to give kudos for this (I will find something else to rant about).The reason I'm so excited about the blogger template designer is not just the features realised today on Blogger in draft but also the possibility's that have been opened going forward.You really have got millions of new blogger templates, you could give your blog a new look every day.

How The Blogger Template Designer Works

To get all the info go to the Blogger In Draft Blog : Blogger in Draft: The Blogger Template Designer

When Blogger release a new feature the first make it available in draft.This way any problems or errors can be ironed out before it is released on the main blogger site.This usually takes a week or two.So Remember to use the template designer you must be logged into Blogger in draft : http://draft.blogger.com/

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 !

Let me know what you think of this cool new feature, will you be going wild with the design of your blog ?

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

2010-03-10T21:55:00.002Z

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

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.

Remove The Blogger Quick Edit Pencil And Spanner Icons

2010-03-06T23:25:00.002Z

A recent question i received was about the quick edit icons on blogger.The quick edit icons are the spanner and screwdriver that appear below all the gadgets on your blog and the pencil that appears at the top or bottom of your blog posts.

These icons are shortcuts you can use when on your blog to make quick changes.The spanner and screwdriver can be clicked to make a change to any gadget in your sidebar or elsewhere on your blog while the pencil can be clicked to edit a post. I actually find these very useful, however if you want them removed from your blog it's an easy process.

Screenshot Of Blogger Quick Edit Options

The quick edit pencil for editing your posts and the quick edit spanner and screwdriver for editing your gadgets are removed separately and here's how it's done.

Remove Quick Edit Pencil

Step 1. In your blogger dashboard click 'Layout'

Step 2. Click the 'Edit' option for your blog posts as shown below :

Step 3. UN-Check the 'Show Quick Editing' box as shown below :

Step 4. Click save and the quick edit pencil will no longer appear on your blog.

Remove Quick Edit Spanner and Screwdriver

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. Paste the following code Directly Above / Before ]]></b:skin>

.quickedit{display:none;}

Save your template and the quick edit tools have been removed from 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 !

You can always switch back in the future, and remember if you keep them in place no one else can use them.

Have you removed the quick edit options, and if so why ?

How To Add A Reply Option To Blogger Comments

2010-03-06T03:20:00.003Z

One of the options the default blogger comments lack is the option to reply to an individual comment.In fact it was one of the reasons i changed from blogger comments to Disqus comments.I have however come across a cool blogger hack that will enable comment replies for blogger.

With a small piece of code your comments will include a reply option.This cool tutorial was originally posted on thisischen.com.

ScreenShot :

You can see a quick demo of the effect on this blog : Demo Blog - Comment replies

This is a really helpful blogger trick and you have have the comment reply option on your blog in just three steps !

Adding Comment Replies To Blogger

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:commentPostedByMsg/>

Step 3. Paste the following code Directly Below/After <data:commentPostedByMsg/>

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to comment]</a></span>

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 your blog I.D. added save your template and the comment replies have been added.

If you need more help just ask, have you added the reply option ?

How Much Advertising is too Much?

2010-03-03T21:30:00.001Z

Guest Post By : Stacey Cavanagh

Advertising is a great means of generating revenue from your blog. But whether you use AdSense, InfoLinks, Kontera or one of the other similar pay per click platforms or you even sell your own ad space, there’s a limit you should impose.

A blog with too much advertising on it is detrimental to your readers, your advertisers and you!

Excessive ads, particularly graphical ones, detract attention away from the content of the site, which is what your readers are interested in. If attention is deflected from the content, your readers aren’t getting what they came to your site for. Why, therefore, would they ever come back? This means you lose out on readers.

Advertisers suffer too. Take, as an example, an amazing blog about classic cars. Let’s say this blog has 1000 subscribers and a further couple of thousand daily readers. If this blog already has a clear layout, one ad on that site (providing the advertiser is in a related niche)is going to get attention. Two ads will get noticed and each has a reasonable chance of being clicked on. Put twenty on there, however, and not only does each of the advertisers have a far lower chance of being clicked on but your readers are also likely to be irritated by the over presence of material designed to try and get them to buy something.

But just where is the line? Is there a magic formula to this? No. There isn’t. How much advertising you can realistically use on your blog before it becomes too much depends on several factors. It depends on the type of advertising, location of the advertising and how it is located in relation to your content. Flashing banners ads, for example, are much more intrusive than the Adsense text ads. So where you can probably use 5 or even 6 text ads from Google in your side bar, six vertical blingy banners would be far, far too much.

Before deciding on how much advertising to use, consider how many posts you have too. A blog with three posts, for example, that is only updated once in a blue moon yet has thirty ads on it screams out to readers that it’s a blog specifically for revenue generation and not essentially about providing information to readers. If you have a new blog, advertising should be introduced slowly.

I suppose to key rule is that the focus of the blog should not be lost to advertising. Your readers read your blog because the content covers topics they are interested in. They don’t read your blog because they are looking for sponsored links by Google. And while most readers are perfectly understanding of the fact that bloggers putting time and effort into maintaining a site want to generate some sort of revenue, when advertising becomes the main focus, you lose the readers who are interested in content.

It’s a fine balancing act, that’s for sure. But if you’re not sure whether you have too much advertising or not, you can always ask for honest and brutal feedback from your readers.

This is a guest contribution from Stacey Cavanagh. Based in the UK, Stacey works in Internet Marketing for Tecmark: SEO London

If you would like to be a guest writer on Spice Up Your Blog it couldn't be easier.
To see how it works check out the info page : Guest Blogging On Spice Up Your Blog

How To Add A Table Of Content Page To Your Blog

2010-03-02T22:40:00.002Z

A table of content is a list displaying all the posts on your blog in a clean easy to navigate format for readers.In this post i will show you a table of content that is extremely easy to set up and can be added to your blog in minutes.The recent addition of static pages to blogger provides a great way to display the table containing your complete archive.

This is in fact the table of content I'm currently using on Spice Up Your Blog.I have it in a post as the static pages were not available when i first created it.All the posts are sorted by date and you can see it here : Spice Up Your Blog Table of content.

The code that creates the table is actually very simple but you will first need to create a post or static page for your blog.Here's the three steps required to create a table of contents and add it to your blog.

Add A Table Of Content To Your Blog

Step 1. Create a new post or static page for your blog and give it the title 'Table Of Content' or something similar.

Step 2. In the top right of the post editor you will see the options to use Html and Compose modes make sure your in 'Edit HTML mode.

Step 3. Copy the code below and paste it into the posting area :

<script style="text/javascript" src="http://spiceupyourblogextras.googlecode.com/files/bloggertableofcontent.js"></script>
<script src="http://www.YOUR-BLOG.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Credit & Thanks : Abu Farhan

Note : Change http://www.YOUR-BLOG.blogspot.com in red to your actual blog address.If you use a custom domain replace the Url in red with your custom URL.

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 now publish the post or page and yes it is that easy !

If you do need more help let me know, do you provide a table of content on your blog on your blog?

How To Add AdSense And Other Gadgets Beside Your Blogger Header

2010-03-01T21:50:00.004Z

Many blogs now have AdSense Units or other ads and widgets in the header section of the blog.The most popular is the AdSense 468x60 unit beside the header text or image.In this post i will show you how you can also make the most of this space and have the option to place ads or any gadgets beside your header.

The default setting on Blogger is for the header to span the width of the blog and be used for the blog title only but this can easily be changed.The change used splits the header section into two separate sections and you are left with your actual blog title area on the left and you can add gadgets such as AdSense on the right.

To show the effect using a two section header on your blog i added it to a demo blog.You will see i added the popular 468x60 AdSense unit to the blogs header.

This was the layout before the change

And after the change you can see i have a new 'Add A Gadget' area :

You can see a demo of the result on this blog using the blogger minima template : Blogger Split Header

This post is in response to a comment by dil2010 on the post Add A Full Lenght Gadget Or AdSense Leaderboard Below Your Blog Header great question dil2010, if you want to suggest a post you can contact me or leave a comment.

To split your blogs header into two sections you need to replace two pieces of code in your blogs html.Although they are two small sections of code any time you replace code you have to be careful and take your time.

First make sure your template is backed up and follow the steps - You can do it !

Split Blogger Header Into Two Sections

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

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

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Note : The easiest way to locate this section is to first find #header and the rest will be below.This section in your template might be slightly different.

Step 3. You must now replace that section with this code :

#header {
float:left;
width:40%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header2{float:left;
width:60%;
height:200px}

Note : If you feel comfortable you can change the width and height.

Step 4. Now find this section of code in your template :

<div id='header-wrapper'>
<b:section class='header' id="header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'>
</b:widget>
</b:section></div>

Note : Once again start by locating <div id="header-wrapper"> and you will see the rest below it.

The part in red will be the actual title of your blog.

Step 5. Replace that section of code with this code :

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

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Note : As shown in red above you must add your blogs title.Leave the part (Header) in blue as it is.

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 !

Step 6. Once you have made the changes you can save your template and you layout page will now show a two piece header for your AdSense or other gadgets.

If you do have any difficulty just drop a comment and i will be glad to help, if you are planning to use the new section for AdSense make sure to check out some other AdSense tips.

I also have a very Popular AdSense article on Infobarrel you should check out.

Have you changed your header ? Let us know !

Move The Blogger NavBar To The Bottom Of Your Blog

2010-02-28T19:48:00.002Z

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 ?

How To Generate A Sitemap And Submit To Yahoo

2010-02-27T21:55:00.003Z

With the popularity of Google many people don't consider the free search traffic available from Yahoo.In this post i will show you how to generate a sitemap and submit it to Yahoo.Yahoo site explorer is very similar to Google webmaster tools. Once signed up you can see detailed information of how Yahoo see your site on the web.

You can generate the same sitemap for Yahoo as for Google, as showed in a previous post i on How to submit 2 site maps to google.To generate and submit a site map to Yahoo you will need to first create a Yahoo account and verify your the owner of your blog, both will only take a few minutes.

Submit a sitemap to Yahoo

Step 1. Go to Yahoo.Com and create an account

Step 2. Once you have your Yahoo account details log into Yahoo Site Explorer

Step 3. You now must verify your ownership of your blog, there are two options for doing this.The easiest way is to copy the meta tag supplied and place it into your template.

The meta code goes directly below the <head> tag in your template.

Step 4. In your Blogger dashboard click 'Layout' > 'Edit Html'

Your will see <head> very near the top of your template Html paste the meta code below it.

Once the meta code is in place save your template and go back to Yahoo site explorer and click “Ready to Authenticate”.

Note : Unlike the Google and Techonrati verification code you must not remove the Yahoo meta code in place.

Step 5. Your blog is now verified click 'Manage Site' in your Yahoo dashboard then click 'Feeds' in the side menu.

Step 6. You will see the option to enter a feed/sitemap for your blog, you can enter the same 2 we entered for google.

You will see a section similar to the image below :

Copy this code and paste it into the area shown with the arrow above the click add feed :

atom.xml?redirect=false&start-index=1&max-results=500

Now repeat the step with this code and click 'Add Feed' :

feeds/posts/default?orderby=updated

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 have just generated a sitemap for Yahoo and it's submitted.It will take a day or so before Yahoo start crawling your sitemap but once they do you should see you blog rank higher and an increase in search traffic from Yahoo.

Do you get much Yahoo traffic to your blog ?

The Key Factors To Writing Great Blog Posts

2010-02-26T19:50:00.004Z

Many people enter the world of blogging with a strong opinion and a lot to say and these are key ingredients in making yourself a successful blogger.But there is a skill involved in transferring these great ideas in your mind to interesting posts on your blog.

After blogging for many years i have learned that a computer keyboard in the wrong hands can lead to disaster.This was true for me when i first started blogging, many posts were wild rants with no direction.

Like my old school report cards the message was clear 'Must Try Harder'.Putting pen to paper or fingers to keys and expressing yourself in a manner people will want to read is actually not too hard once you keep a few key factors in mind.

These were the 'Rules Of Thumb' i applied to writing blog posts.

1. Keep It Fresh - While you will want to write on a variety of topics try to publish lots of posts on current issues.This doesn't mean write about current topics in the news but rather the hot topics in your niche (Main Subject You Write About).People always remember where they heard something first so were possible be the one breaking the news or reviewing the latest products.

2. Speak Your Mind - Don't sit on the fence trying not to offend anyone, it's your blog and blogs are about opinion.Readers love blogs because they are different to regular websites and have personality.It's that very personality that will decide if your blog is 'a stud or a dud' in the blogisphere.

3. Get to the point - Even the most active souls become lazy and have short attention spans when sat in front of the computer screen.You don't have long to impress so let the reader know were you plan on going with the post early, and once your opinion or message is made wrap it up.You can mix in some longer posts by using the Killer Blog Post And Filler Blog Post method.

4. Think Of The Search Engines - Format your blog posts in a way the search engines will like as much as your readers.Add keywords for your chosen niche in the title of the post and in the opening paragraphs.Keywords are words people may search for, so think what search terms might lead someone to your post and more importantly what words do you want your post to be indexed under.Add these words and phrases to your post and take control of how Google and other search engines see your blog.But don't over do it, too many keywords can do more harm than good.

5. Keep Readers On Your Blog - In the closing paragraph ask for readers opinions in the comments, also make sure to add a link to another post on your blog that is on a similar topic.This will keep them busy and hopefully turn passers by into regular visitors.

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 make a Blog That Rocks, it's the little things that make all the difference.

Have you a 'rule of thumb' when it comes to writing blog posts ?

Get The Monster Social Bookmarking Widget For Your Blog

2010-02-25T21:50:00.004Z

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.

Add A Full Lenght Gadget Or Adsense Leaderboard Below Your Blog Header

2010-02-24T22:41:00.004Z

At the time of writing i have a 728x90 AdSense leaderboard between the header and post area on the home page of the blog.Basically i have added a gadget that spans the entire with of the layout.The default settings for this template and for lots of custom templates do not allow you to place gadgets in this area.

If your in the same position you will be glad to know changing this setting is easy.I have opened up this area for an AdSense unit but once you have changed the code you can of course add any gadgets across the top of your blog.

You may also be thinking why cant you see the AdSense leader board on this page, i recently posted a hack showing How to show gadgets on only your blogger home page or post pages.With this hack in place the leaderboard is only visible on the homepage.

Cross Column Gadgets

Gadgets Not Allowed - This area is called the Cross Column and the screenshot below shows there is no option to place gadgets in the cross column :

Gadgets Allowed - Once we change the code you will have a brand new 'add a gadget' area :

Placing gadgets in the cross column

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

Step 2. In your template find the following code :
(Click CTRL and F for a search bar to find the code - More Info)

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

Step 3. Change Showaddelement='no' to Showaddelement='yes' as shown below :

<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

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 now save your template and return to the layout page where you will be greeted with the new 'add a gadget' option.

Allow Gadgets In All Available Areas

Break down the change you made - There may be other areas you can add gadgets to your layout that are blocked.The code i changed is 'showaddelement' which breaks into 'Show Add Element'.Search your template for every occurrence of 'showaddelement' and switch 'no' to 'yes'.

You may also want to see how to put AdSense above or below your header.

More Help Is Only A Comment Away.

The 5 Reasons I Changed From Blogger Comments To Disqus Comments

2010-02-23T18:21:00.003Z

You may have noticed i changed the blogs default comment system to Disqus comments this week.The decision to make what is a major change to Spice Up Your Blog was not taken lightly.Comments are important to all bloggers and the feedback from comments can determine the direction we take going forward.On a Help blog like this it's also important to make it easy for people to ask questions and also easy for me to reply.

The change to Disqus probably would have been made earlier, but the comments already left on posts in the archive would have been deleted and for me this wasn't an option.There was an option to use Disqus comments only on new posts, but it looked odd when you went from a post with Blogger comments to a post with Disqus comments and Visa-versa.Recently Disqus added the option to Import all the existing comments onto their system and that was the green light needed for me to make the change.

Top 5 Features Of Disqus Comments

There are lots of small settings and functions that swayed me to make the change but here are the deciding factors, they may help if your thinking of changing to Disqus.

1. Moderate And Reply Options

When a new comment is posted i receive an Email the same as with Blogger comments however the options to reply to a comment are much more versatile.

Reply by Email - With Disqus i can reply to the comment directly from the email.I click the reply button in my Email and enter my reply directly below the comment as it appears in my inbox , once i click send my reply is posted on the blog.

Reply from the dashboard - When I'm away from the computer for a few hours if i have received for example ten comments i can go to my Disqus dashboard to manage the comments.From here i can read the comments and see which posts the comments were posted on.I can click on each comment and reply or delete the comments from the dashboard, now i am replying to 10 comments on one page without the need to go to the blog.

Direct reply - The default blogger comments do not allow you to reply directly to a comment, this can lead to confusion and i often see bloggers having to use '@' to specify which person the were replying to for example '@Pat...' '@John...' i can now post a reply and it will be attached to the bottom of each comment.

Image : The Disqus Dashboard / Moderate comments

Circled In Blue : Recent Comments
Circled In Brown : Replied To comments Via Dashboard
Circled In Red : Most Recent Commend Click To Read And Reply

2. 'Comment As' options and attachment options

The Disqus comments allow users to comment as a guest with their Name and URL or if they have a Disqus account they can comment with that profile.But they can also comment with their social network and online profiles.I have provided the options to comment using the following profiles :

*Twitter *Facebook *Yahoo *OpenId (Did You Know Your Blogger URL is an open Id?)

When you leave a comment you can also add an image or video to your comment.

Image : Disqus Comment Options

Circled In Red : Comment With Your Social Accounts
Circled In Blue : Set How To View Comments

3. Reactions

If you share a post on Twitter, Facebook, Digg or any of the main social bookmarks or networks it is displayed as a reaction below the comment area.If for example you share this post on twitter it will be displayed with a link to your Twitter account and a link to your blog or website.Extra encouragement for users to share posts and more posts being shared for the blogger.You also have a 1 click option to share you actual comment on your Twitter and Facebook.

4. Ratings

The rating system is similar to the Facebook option of 'Like This' .Each comment has the option for users to click 'Like This' if they see a comment they like.While this is a nice social feature for your comments it also serves in deciding the order in which your comments are displayed.

I have my comments ordered by 'Popular' so the comment that most people liked Will appear first not the comment posted first.I can also order by date, newest first or oldest first and the user can change how the comments are ordered with the drop down menu show in the image Above.

Image : Disqus Reactions And Rating

Circled In Blue : Like This And Reply Options
Circled In Brown : Who Liked The Comment
Circled In Red : Reactions

5. Appearance

We cover many topics on Spice Up Your Blog but the main subject is appearance and Disqus comments simply look better.There are three default styles you can use *Narcisuss *Classic A *Classic B and you can also add custom css to style the appearance or choose color themes to suit your blogs theme.

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 : If you decide to make the change be sure to click the option 'Import old comments' and follow through to the import page.

The other most popular comment system is Intense Debate and you may want to check them out before changing.

I'm not saying you should change there is nothing wrong with the default blogger comments but if you are looking for more comment options Disqus is a great solution.If you decide to stay with the default comments, there are some Tips and Tricks for Blogger comments you can try.

I would love to hear your opinions on Disqus and if you like the change, also if your a Disqus user why did you change ?

If you need any help with any aspect of the post you can try out the new comment system and leave a comment and i will be glad to reply...Directly.

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

2010-02-22T19:50:00.002Z

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://s941.photobucket.com/albums/ad259/spiceupyourblog/?action=view&current=shadowlycanthrope.jpg" target="_blank"><img src="http://i941.photobucket.com/albums/ad259/spiceupyourblog/shadowlycanthrope.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 !

10 Methods of Refining Your Writing Technique

2010-02-20T22:05:00.005Z

Guest post by Tom Walker

It’s a rare find to discover a writer who is ever truly happy with his or her technique. For most writers, there is a constant search for ways to better themselves when it comes to their trade. There is a variety of areas upon which an author might be looking to improve, including style, ability, proofreading, tone, grammar or descriptive word power. If you are looking for ways to better your writing technique, here are some tips that could help you in your efforts.

1. Understand Your Topic

There are few more aggravating things to someone reading your work than to think they are reading about one subject only to find themselves reading about something completely unrelated. Not only is this aggravating to the reader, but to the publisher as well. This is why it is important to read and understand the publisher’s directions before you start writing. You don’t want to write an entire article only to discover after the fact that you’ve completely missed the mark when it comes to discussing the assigned subject matter.

2. Know Your Audience

Understanding who will be reading your work is almost as important as how well you write it. Are you writing for children who still have a limited comprehension of the English language? Are your readers in foreign countries where American slang doesn’t quite compute? Knowing for whom you are writing content can significantly alter the way in which you write it.

3. Writing Style

With the recent prominence of online writing, styles have changed. Blog posts, search engine optimized writing, and keyword articles often differ greatly from newspaper and magazine writing. It is pertinent that you know what type of writing you are expected to do before you begin a work.

4. Try to Find Your Groove

Almost everyone has a certain time of day or night when they write more effectively. Try to find when you hit your stride and make an effort to buckle down and do the majority of your work or your most difficult work during these times. Knowing your more productive periods can allow you to schedule the rest of the day around those times and make the most of them, filling the down times with more menial, less mentally taxing activities, and putting the peddle to the metal when it’s time to work.

5. Outline

Sometimes getting started is the most difficult part of writing. Putting together an outline can bring the structure of your writing together and form a layout that you can follow to put your ideas in order in a coherent and easy to follow way. If you are tired and don’t feel like forming paragraphs or getting into detailed descriptions, jot down ideas, phrases, and keywords to remember your ideas by so that you can come back later when you are fresh and expound upon your thoughts.

6. Proofread

Even the best writers must proofread and edit their material. You’ll be amazed that those words that flowed so fluently from your mind onto the paper or computer screen, and sounded so great, don’t always look so good when you re-read them. Look for grammatical mistakes, improper word usage, and tense changes as common errors when you proofread.

7. Read it Aloud

Sometimes proofreading your work isn’t enough. When mentally reading the words that you wrote, it’s easy to remember the phrases as you meant them to be read, and scan over typos. Try reading the words aloud. You might be surprised at the mistakes you catch.

8. Be Receptive to Criticism

There are few things a writer hates more than criticism. However, healthy, constructive criticism can be a great way to improve your writing. Don’t be frustrated by the opinions of others. Instead, listen to what they have to say, consider their ideas, and reevaluate what you have written or how you have written it.

9. Read Other Authors

Whether it is by way of blogs, news articles, magazines or novels, reading other authors can help to improve your writing by observing the style of others. Most great artists don’t become great on their own. By watching and learning from others, you can pull the best pieces of their creativity to mold your own unique writing style.

10. Put Yourself Out There

You likely won’t learn anything new by playing it safe. Sometimes you have to put yourself out there and take a chance. Explore new topics, try new writing styles, and look for new areas to discover. Expanding your horizons when it comes to writing can help you build your experience and can lead to new areas of writing in which you never imagined yourself working.

This is a guest post by Tom Walker, a writer and designer who works with a supplier of Epson original ink, toners, paper and accessories. He blogs regularly on the CreativeCloud.

If you would like to be a guest writer on Spice Up Your Blog it couldn't be easier.
To see how it works check out the info page : Write A Post

The Killer Blog Posts And Filler Blog Posts Format

2010-02-19T22:55:00.001Z

A few years ago i was writing a blog on affiliate marketing, at the time it was my main niche (subject you write on) and i used to do quiet well from it.All the posts i wrote would include a well placed referral link and i managed to build downlines for affiliate programmes through the blog.

This niche has became much more professional and at the time even though i was doing well i always felt it was in some way seedy and you were misleading the readers as most affiliate programmes promised a huge return on investments that was simply not achievable.

I eventually stopped blogging and quit almost all online activity but when i started back blogging last year some of the lessons i learned proved very valuable.

One of the lessons was not to try write 'The Best Post In The World' every day.I have said on this blog before that it's important to consistently update your blog and try to write a post every day and that remains true but the nature of the posts can vary.

Killer Blog Posts

A killer post is a common term among bloggers and referrs to not only your best work but to your most in dept and informative posts.Writing a post that covers every aspect of a given subject broken into sub categories and well presented would be classed as a killer post.

When i first start writing the affiliate blog i felt i had to write awesome life changing killer posts every day and it put me under extreme pressure.Every post genuinely took six to eight hours to write and i not only exhausted myself but also the topics i was writing about.After 50 posts each 1,500 words long you don't really have anything left to say.And there is also such a thing as too much information for readers, that's were filler posts come in.

Filler Blog Posts

While the term 'Killer Post' is common, i came up with the term filler posts for two reasons.First it rhymes with killer posts and makes a good title (Lets be honest) secondly we realise writing a Killer post everyday is not healthy for you or your blog so how do you fill the gaps between the killer posts.My solution was to write filler posts.While the name may sound like your filler posts should be quick unthoughtful posts they can actually be high quality just sharper and more to the point.

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 !

Killer Post Components - I set myself the target of one killer post a week usually around the 1000 words area, and the other posts would be more in the region of 250 to 300 words.The killer post would be published on the same day every week and i choose Thursdays because some guy with a clipboard said that was the best day for blog traffic.Every other day i published filler posts and i got into a great routine, i would also really work hard to promote the longer posts and they were like the blogs resume.

Filler Post Components - Typical filler posts would be reviews of products or programmes or comments on recent news connected to the niche. A very popular type of filler post was writing a 'mini series' of connected posts like '5 Ways To Success Part 1' then the next day Part 2 and so on.In a way your writing a killer post but breaking it up and keeping the readers attention.

This proved very successful for me and it rely helped that blog.The same format is harder to implement on Spice Up Your Blog because as a lot of the posts involve exact steps.But i do still work with the killer post and Filler post format were possible, and I'm sure you can too.

So whats your experience, do you try to write 'The Best Post In The World' every day ?

Also is this a Killer Post or a Filler Post ?

I would love to hear you thoughts...

Overcoming The Disadvantage Of Writing Blogs In Your Second Language

2010-02-18T21:05:00.001Z

In this post i want to take a step back from design and gadgets and look at some of the home truths of blogging.

If your first language is not English and more to the point if you have some English but are not fluent and choose to write your blog in English you could be at a big disadvantage.Internet users couldn't care a less were your from but Internet users do want information in a clear to the point format and they want each step to be fully explained.If you don't offer that someone else will.

Blogging has turned into an information source, the original weblog idea of sharing photos and family and friend activity through blogging has moved to social networking sites.Your blog might not directly be presented in a 'How To' format but if you stand back and take a look most blogs are information blogs in some way.

Search Engine Trouble

Not only is it harder for bloggers without fluent English to connect with their readers and get their point across in a way that is understandable they are also at a disadvantage when it comes to search engines, the readers of your blog may take the time to understand the point your making Google will crawl and discard your blog without a second look.

Most of the blogs i subscribe to are in a similar niche as Spice Up Your Blog, Tech blogs, Gadget blogs and other Blogger help blogs.I really enjoy One blog in particular that posts some great content, although this blogger posts about all things tech and Internet based, he uses the blogger platform so he also posts lots of blogger tutorials and most are great useful tips.The writer of the blog is from India and is currently still learning English, this has had a huge impact on the success of his blog.

Finding Help

I have left lots of comments on his blog and we would often send five or six comments back and forth so i felt comfortable enough to contact him and offer him some help.

First lets look at an example of how his limited knowledge of English was effecting his blog.
(He has asked for his blog not to be named in the post)

Lets say for example this blogger writes a post with a new 'Recent Posts Gadget' this would be how the post is presented :

Post Title : "Another Blogger Gadget" <-- Does not include the name of the gadget or the purpose of the gadget.Its important that the title includes terms people will search for and titles that will be clicked in search results.Also if you are already on his blog and see the archive in the sidebar a title like this will not entice you to check it out, it could be anything.

Post Content- First Paragraph : "Step 1 click..." <-- The blogger has given no introduction or description for the post, just jumped into how its done.Not only is an introduction important for readers its absolutely Vital for search engines.Google place more importance in the first two paragraphs of posts than anything else.He should include the words 'Recent Posts Gadget' and 'Blogger' at least twice in the first two paragraphs as well as explaining the advantages of using it.Basically he needs to sell the Post.

End of the post : "Click Save that's it" <-- No explanation of what was just done, no links to other posts to keep readers on the blog (A link to a similar post before the finish will get much more clicks than a list of related posts), no offer of extra help or mention of comments.

The post is poorly set up for readers and is almost invisible to search engines.The main keyword in the post is 'Step' so his blog could be indexed totally wrong by search engines.This of course is not the bloggers fault, he is learning English and picking effective titles and post formats is at the moment beyond the leval he has reached.
(Although much better than any effort i would make at another language)

So what can be done to fix this ?

OK it's very easy point out the problems but are their solutions. The one thing their is no shortage of within the blogging community is people willing to help but most of the time you must seek help. I contacted this blogger and put forward two ideas :

Google Translate

First write his posts in his own language, once the post is complete copy the entire post go to Google Translate paste the content into the area provided and translate it into English.

Proof Readers

But Google translate can make errors so this was the second proposal - Once he has translated the post go to Google Docs and put the post into a document and send it to me, i will give the post a quick proof read and fix any errors, once that done i send it back and he publishes it.

Translating the post into English takes about 30 seconds, adding it to a document takes another 30 seconds, the proof read takes less than 2 minutes by me...Easy.

All you really need is to reach out and look for help, but to make sure this works you must look at some extra points.

Notes

I think it would be important to find more than one other blogger that is willing to proof read your posts, i will not always be available.I suggested this to him and he now has another blogger willing to help.

I think it's very important the blogger or bloggers you pick to proof read write in the same niche, it's easier if they understand the posts you write and what they are about.Also if you do contact a blogger see if you can offer anything in return, not cash this will only complicate the arrangement.

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 !

This has worked out great for the blogger in question and he is already seeing the advantages with an increase in subscribers and an increase in search traffic.If you going to make it as a blogger you must be willing to to leave your comfort zone and put yourself out there.

Your Opinion ?

Are you writing a blog in your second language ? I would love to hear how it has effected you.

And if you were contacted by someone looking for a proof reader would you be willing to help ?

How To Display Gadgets On The Page Of Only One Post In Blogger

2010-02-18T05:41:00.003Z

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.

jQuery Animated 360 Degree Sharing Icons For Blogger

2010-02-17T19:50:00.005Z

Video Post - For Extra Help See The Video Tutorial Below The Post.

This is one of the coolest gadgets i have seen, the effect achieved is five popular share buttons rotating 360 digress and they can all be clicked to share your blog.The effect is created using jQuery and you can use your cursor to control the movement of the share icons.I couldn't explain the look in text so take a look at the demo.

You can see a working demo on Blogger Here : Animated Sharing Bar In Blogger

The effect is similar to the animated tag cloud you see on some Blogger blogs, if you hover your cursor to the right the buttons go left and visa-versa.The share gadget has counter buttons for Twitter, Facebook, Dzone, Digg and Reddit.To be honest it hard to not want to click one of the buttons so your posts will defiantly be shared more and social bookmarking can have a big effect on your blog.

This gadget was created by Martin Angelov on Tutorialzine in the post Animated Sharing Bar With jQuery & CSS and although it took a little work to get it to display properly on Blogger i got there in the end.There is three sections of code to be added so make sure your template is backed up in case you make a mistake.And just because there is a lot of code does not make it any harder, if you follow the steps anyone can have the gadget on their blog.

Here we will add the gadget to the bottom of your posts.

Adding The Animated Share Buttons To Your Blog

Step 1. In your dashboard Click 'Layout' > 'Edit Html' > 'Expand Widget Templates' for your blog.

Step 2. Find the following piece of code in your blogs html
(Use CTRL and F for a search bar to find the code - More Info on Search Bar)

]></b:skin>

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

#share{
/* The share box container */
width:500px;
background:#ececec;
height:220px;
margin:60px auto;
overflow:hidden;

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

#share-label{
/* The image on the right */
background:url(img/share.png) no-repeat 50% 50%;
float:left;
height:220px;
width:200px;
}

#stage{
/* This is where the animation takes place */
position:relative;

border-right:1px solid #DDDDDD;
width:290px;
height:220px;
background:white;
float:left;

border-bottom-left-radius:12px;
border-top-left-radius:12px;

-moz-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;

-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px;
}

.btn{
/* This class is assigned to every share button */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}

.bcontent{
/* Positioned inside the .btn container */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
/* Individual rules for every share button */

.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}

.thanksto{
position:absolute;
bottom:2px;
right:4px;
font-size:10px;
}

.thanksto a,.thanksto a:visited{
color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
display:block;
}

span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
display:block;
}

Step 4. Find the following code in your template :

</head>

Step 5. Paste the following code Directly above/Before </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ikb.fileave.com/rotating%20social.js"></script>

Step 6. Find the following code in your blogs template :

<data:post.body/>

Step 7. Paste the following code Directly Below/Under <data:post.body/>
(If you use the 'Read More' feature <data:post.body/> will appear twice in your template, place the code below the second one)

<div id="share">
<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>

</div>

<div id="share-label">

<img border='0' src='http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/share.png'/>
</div>

</div>

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 change many of the settings for the gadget and you could also change the image beside the gadget.If your comfortable making the changes go ahead, if you want some help just leave a comment.

jQuery Share Bar - Video Tutorial

More Video Tutorials | Spice Up Your Blog On YouTube
Save your template and check it out !

I love it, What do you think ?

10 More Great Blogger Gadgets For Your Blog

2010-02-16T23:59:00.005Z

Every now and then i like to write a post with lots of quick tips and gadgets for your blog.Most of the tips are too short for a full post but defiantly will spice up your blog.So in this post we will focus on ten Blogger gadgets you can use.I have the code for most of these gadgets in the post so it couldn't be easier.There are lots more gadgets available and more being created everyday, so it wont be long before the next list !

Most of these gadgets are added as Html/Javascript gadgets in your layout page.If your unsure about how to add a Html/JavaScript gadget, at the end of the posts i will show exactly how it's done.

Ten Great Blogger Gadgets

1. Display the current date on your blog - The first tip is great and very easy.Display the current date on your blog, and i have it broke down to just one line of code.

Preview :

Code - Add code to a Html/Javascript gadget :

<script src='http://spiceupyourblogextras.googlecode.com/files/simplecalendar.js'></script>

2. Disable Right Click On Your Blog - Personally i don't like to see right click disabled but if you want it disabled on your blog here's how it's done.

Code: Add this code to a Html/JavaScript gadget on your blog :

<SCRIPT language=JavaScript>

var message = "function disabled";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</SCRIPT>

3. When Did Google Last Visit Your Blog - This cool gadget will display when the google bot or spiders last crawled your blog.To get the gadget go to This website and enter your blog URL.When you click 'Check Google Bot Last Visit you will generate some html code.

Preview :

Note : Add your code to a Html/Javascript gadget on your blog

4. 5 Star Rating gadget for your blog - This is the ourbrain rating system, go to the outbrain website Click Here and they have an option to add the gadget directly to Blogger

Preview :

5. Add Google Talk To Your Blog - You can add a Google Chat widget to your blog and Chat with your friends without leaving your blog.

Preview :

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;span class="blsp-spelling-error" id="SPELLING_ERROR_17"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;lt&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;span class="blsp-spelling-error" id="SPELLING_ERROR_18"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Code : Add the following code to a Html/JavaScript gadget on your blog

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350">
</iframe>

6. Add A Wibiya Tool Bar To Your Blog - The Wibiya toolbar has become very popular amongst bloggers on all platforms.The Toolbar includes bookmarking buttons, Twitter integration, Facebook integration, Chat features, Rss features and lot more.I used it for a while and really liked it, you have a selection of colors to suit your template.

Preview :

You can go to the Wibiya website to set up your toolbar, once you generate the code paste it into a Html/Javascript gadget.

7. Add This To Your Technorati Favorites Button - Technorati is one of the most respected blog directories and list the most popular blogs online, and in each category.This nice button will allow your visitors to quickly add your blog to their faves.

Preview (It's live so you can save this blog to your faves)
:

Code :
(You must replace my URL in red with yours)

<a href="http://technorati.com/faves?sub=addfavbtn&add=http://www.spiceupyourblog.com/"><img src="http://static.technorati.com/pix/fave/tech-fav-1.png" target="_blank" /></a>

8. Add popular posts list to your blog - I covered this in a previous posts but it's very simple to add to your blog.Go to This site and click the add to blogger button they will look after the rest.

Preview:

9. Round the corners of your images and let your readers round their images - This is a gadget from Roundpic and it can be easily added to your blog.The gadget allows you or anyone on your blog to round the corners of images.You will have the very same gadget as below on your blog.

Working preview :
(Try it out)

Code :Add as a Html/Javascript gadget :

<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>

10. Feeds In Tabs - This gadget is in the Blogger Gadget gallery (When you click 'add a gadget' in your layout page the pop up window contains the gadget gallery).But i don't see it used much even though it is very useful.If you have more than one blog you can display the recent posts for 3-4 of your blogs in a tabbed format, or you could add your twitter feed, feeds for your favorite blogs or news channels etc..

Preview :

To get this gadget go to This site and you will get more info, their is a one click 'add gadget to blogger' button.There are also lots more gadgets from the Blogger Gadget gallery on that 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 !

Adding a Html/Javascript gadget to your blog

1. In your dash board click 'Layout'

2. In your Layout page click 'Add a gadget'

3. From the pop up window choose 'Html/Javascript'

4. Paste the code into the area provided.

So there are 10 great gadgets you can use to make your blog stand out from the crowd.Improving your blog can be so easy, check out the last Quick Tips list - 5 Built In Blogger Features You Should Be Using

Have you a favorite gadget from the list ?

How To Create A Mobile Device Version Of Your Blog For Free

2010-02-16T01:05:00.001Z

In this post we are going to bring your blog to a whole new audience.Have you ever tried to view your blog on an IPhone ? Not a pretty sight and very hard to navigate so by the end of this post you will have a Mobile version of your blog available with it's very own URL address, a cool look, Mobile phone friendly and it's free.

According to IDC (Interactive Data Corp) there will be over 1 Billion people using the mobile Internet 2013.We bloggers have to jump on that bandwagon, that's 1 Billion potential readers for your blog.The mobile traffic available from Twitter and Facebook alone is huge.You can even monatize your mobile blog with AdSense and other ad publishers.

The great thing is how easy the mobile version is to set up, it only takes a few steps and you can add a small piece of code to your blogger template that will detect when someone access your blog with a mobile device and send them to the mobile view.

I have set up a mobile version of Spice Up Your Blog so you can see how it works and it genuinely took me less than 3 minutes.You can later go into detail and you could even build a totally custom mobile layout but we will look at first getting your blogs mobile version 'Live' .

Your Blogs Mobile URL

You can buy a custom domain for the mobile version of your blog, i have used the free sub domain and here it is :

www.spiceupyourblog.mobify.me

If you have a mobile device connected to the Internet you can check it out, if not you can still see the page on your computer and get an idea of whats displayed.

I have not had the chance to do much work with the mobile blog yet so you will notice i only have the header and posts included.

How to get your mobile blog online

Step 1. Go To Mobify.me and register for a free account.Once registered ou will arrive on your dashboard.

Step 2. Enter your blogs address in the 'Mobify a website' section and click Mobify

Step 3. You will Now View Your Blog inside a frame, choose the areas of your blog you want to be available on your mobile blog.

You choose what is to be imported onto the mobile version of your blog with a simple 'Select and Click' method - Hover your cursor over the area you want added and you will see red borders appear around the area, press select and it's added.

For larger areas drag the red border until it covers the whole area.It's recommended to use a one column layout, basically your header, posts area and footer.

Read More = Full Posts

On the Home page of this blog i use preview boxes (Click here to see the home page in a new window) that contain a thumbnail image and short summary.I simply dragged the red border over the whole area and all the summary box's.As you see on the mobile Spice Up Your Blog this converted into my full posts being showed.The same will apply to blogs with the 'Read More' function.

Once you have selected the areas you want added click save to get a preview and then 'LAUNCH' - Your mobile version blog is live online.

Directing Mobile Traffic From Your Blog To Your Mobile Device Blog

You now need to add a piece of code to your template that will send mobile visitors to the mobile version of your blog.

In your Mobify dashboard click 'Live' under your your blog title - You can see it in the screen shot above with the text bubble 'Have you launched your site yet'.

Scroll to the bottom of the page and you will see the code needed as shown below :

No in your Blogger dashboard Click 'Layout' -> 'Edit Html'

Find the following code in your blogs html :
(It's at the very top)

<head>

Paste the code you copied from mobify Directly Below <head>

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

These steps will get you started but when you have the time take a look at the mobify forum for extra help and tips on adding extra css style and page elements to your mobile blog.

What do you think - Cool Yeah ?

Extra Note - When i was checking the numbers of Mobile Internet Users the report i mentioned also stated that more than 2.2 billion people, over one-third of the world's population, will be using the Internet in some form by 2013.That's up from around 1.6 billion today, it's a great time to be a Blogger.Once your mobile blog is live you can click 'Advertising' in the edit page to put an AdSense unit on the page.

Google Buzz - How To Add A Google 'Buzz This' Button To Your Blog

2010-02-13T18:45:00.009Z

Video Post - For Extra Help See The Video Tutorial Below The Post.

The new Google Buzz is the hot way to be social and share links, pictures and pretty much all the things you were already doing on Twitter Or Facebook but from your Google / Gmail account.Google have not yet released a Buzz This gadget like the Tweet This Or Digg This buttons that are so popular on blogs.However the Mashable blog have added their own Buzz This gadget and so can we.

Mashable have not shared the code for their button but just a small bit of work with the image used on Mashable and adding similar code as the Tweet this button means we can put the button on our Blogger blogs.As the Buzz button is new it could be a great way to get people sharing your posts and bring new visitors to your blog.

Preview :

Here is a working preview of the Google Buzz button - Try It Out :

Add the Google Buzz This Button To Your Blog

We will look at three places to add the button .

1. Go To Your Blogs Html - In your dashboard Click 'Layout' > 'Edit Html' > Tick the 'Expand Widget templates' box.

First this is how to add it to the right of your post title as i have on this blog at the time of writing :

Add Button Beside Post Titles

Step 1. Find the following code in your blogs html
(Click Ctrl and F for a search bar to find the code - Click here for more help with this)

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

If You Cant Find That Code Look For This Code :

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

Step 2. Add the following code Directly Below/Under <div class='post-header-line-1'>

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'><div style='text-align:right;margin-top:-42px;'><img border='0' alt='Buzz This' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/S3bpV5rrp6I/AAAAAAAAA-U/-HHFe26-2KE/s200/BUZZ+THIS.bmp'/></div></a>

Click Save And You Button Is Added.

Add the button to the top or bottom of your posts

You can add the button wrapped in text at the top or bottom of your posts.

Step 1. Find this code in your blogs html :

<data:post.body/>

Step 2. Copy the code below :

<div style='float:left; margin-right:10px;'>
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'><img border='0' alt='Buzz This' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/S3bpV5rrp6I/AAAAAAAAA-U/-HHFe26-2KE/s200/BUZZ+THIS.bmp'/></a></div>

Top Of Posts : To place the button at the top of your posts put the code Above/Before <data:post.body/>

Bottom Of Posts : To place the button at the bottom of your posts place the code Below/Under <data:post.body/>

Google Buzz Button - Video Tutorial

More Video Tutorials | Spice Up Your Blog On YouTube

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'm sure Google will release some buttons and gadgets for Buzz but until they do this button is a great option.

Are you using Google Buzz ?

If your having trouble Extra help is only a comment away.

How To Add A Featured Posts With Thumbnails Gadget To Your Blog

2010-02-11T22:00:00.009Z

Video Post - For Extra Help See The Video Tutorial Below The Post

In this post i will show you how to add a Featured Post list to your blog.There are a number of reasons you may want to display featured posts, the main reason would be to have a list of your best posts easily available expecially to new visitors.This would keep new visitors on your blog and possabley turn them into Rss subscribers or followers.I like to have a list of the good posts on differant subjects in my featured posts gadget, this really shows the varity available.

First of all this widget uses a similar method as used in the recent posts with thumbnails widget, if you arrieved here from a search looking for the recent posts widget you will be glad to know it is actually available in the Blogger gadget gallery and you can add it in seconds without the need for any code, i will show you how at the bottom of the post.

Preview

Below is a preview of the featured post widget on this blog at the time of writing :

Adding the featured posts gadget

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

Step 2 . You will get a pop up menu - from the pop up menu choose 'Html/Javascript'

Step 3. Copy the code below and paste it into the 'Html/JavaScript' area in the pop up :

<a href="http://www.spiceupyourblog.com"target="_blank"><img src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/S1qQGNL4GFI/AAAAAAAAAws/AgXpPVbIftc/s320/featured+posts+sig.png" border="0" alt="Featured Posts Spice up your blog" /></a><br /><style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><script style="text/javascript" src="http://spiceupyourblogextras.googlecode.com/files/spicefeaturedposts.js"></script><script style="text/javascript">var numposts = 6;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 50;</script><script src="http://www2.blogger.com/feeds/8563022360444004311/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Edits : You must make one change to the code - In order for the gadget to display the posts for your blog you must add your blogger I.D.

To find your Blogger I.D. simply go to your layout page, posting page or any of the pages you access from your dashboard and copy your I.D. from the address bar at the top of the page.

Your Blog I.D. is a the number that appears in the URL - This is how your I.D. will be displayed :

Optional Extra Changes :You also have the option to make some extra changes to the appearance of the gadget - all the code in bold can be edited :

Numposts =6 - Change how many posts are displayed
showpostsummary = false - Display the first few lines of the post below the title on the gadget, change to true to activate this setting.
numchars = 50 - If you decide to show the summary this setting lets you choose how many charaters are displayed in the summary.
showpostdate = true - The date of the post is displayed, change to false to hide the date.
Also included are the settings to show thumbnails and show the ammount of comments you can toggle these settings with 'True' and 'False'.

Step 4. Click save - You can now drag and drop your new gadget into place on the home page.

Adding Posts To The Featured Posts Gadget

Now you must choose what posts to show on your featured posts gadget - Your new featured posts gadget displays posts using a label.

Add the label Featured to any posts you want displayed on the featured posts gadget for your blog.The gadget will then display the last 6 posts using that label or the number of posts you choose to display.If You Dont Add The Label No Posts Will Be Displayed.

This post will show you how to add and remove multible labels from your posts at once, or you can just edit the posts and add the label.

This is a cool gadget and i have been using it for sometime but i cant remember exactly were i came across it, so for now i will give credit to the creator of the original recent posts with thumnails - BloggerTricks

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 !

And thats a good introduction to quickly adding the recent posts with thumbnails - Heres the steps.

As above in your dasboard click > Layout > Add a gadget.

This time use the search bar to look for 'Recent Posts' as shown below :

The search will return a list of results, when you scroll down you will find The 'Recent Posts' gadget from Blogger Buster and The 'Advanced Recent Posts' from Blogger widgets as shown below :

Choose the 'Advanced' version circled in red above.

Note : Be sure to add your URL in place of the Blogger Plugins URL and edit the other settings were required - Then save.

Featured Posts Gadget- Video Tutorial

That's the featured posts with thumbnails added to your blog and an easy way to add the recent posts with thumbnails, will they be seen on your blog ?

There are lots more cool Blogger gadgets available check them out.

If you run into trouble just leave a comment I'm glad to help.

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

2010-02-10T21:10:00.004Z

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 ?

Image:
or URL: