Spice Up Your Blog

In this post we will see how to add a great looking message bubble to your links.The message bubble will contain any message you choose and can be added to both text links and image links.In a post published last March i showed you how to use the title tag to give information about links to readers but the tool tip goes much further.




Below you can see a screenshot of a link with the tool tip message



To see the live working example of the text and image links follow this link - Demo of tool tip

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

</head>

Step 3. Paste the following code Directly Above / Before </head>

<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sv_TISo06uI/AAAAAAAAALc/9dj1-t3hN6o/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat bottom;
}
</style>

Step 4. You now have the code added to your template to display the tool tips the next step is to add code to your links.

When you create a text link use this code :

<a href="URL HERE" class="tt">TITLE OF LINK HERE<span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>

Example :

<a href="http://www.spiceupyourblog.com" class="tt">Spice Up Your Blog<span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>

When You Create An Image Link Use This Code :

<a href="URL HERE" target="_blank" class="tt"><img src="IMAGE URL HERE" /><span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>

Example :

<a href="http://www.spiceupyourblog.com/" target="_blank" class="tt"><img src="http://2.bp.blogspot.com/_rKG-ziTSNUQ/S3MX6onabII/AAAAAAAAA80/vGCYOSiMuCQ/s320/blogger+black.png" /><span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>

Note - The code for the links is a little harder to use than regular hyperlinks so take you time and im sure you will get the hang of it !

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

Remember you can use the tool tip for any images on your blog not just in the posts, for example in the sidebars and footer.


Will you use tool tip bubbles on your blog ?

Many of you will have noticed last month some of the images in the older posts on this blog were replaced with the ugly 'Bandwidth Exceeded' message from Photobucket.When i first started Spice Up Your Blog i hosted many images on Photobucket with no problems but as we became more popular and Spice Up Your Blog grew the Photobucket limits kicked in.Image hosting websites like Photobucket, Flickr and ImageShack manage to catch unsuspecting users with Bandwidth Limits rather than storage limits in an attempt to get them to pay for an upgrade.





Here's the simplified explanation - For example Photobucket allow free users a huge amount of storage.You can upload lots of pictures and images to your account without any problems it's when you share those images the trouble starts.When others use images you store in your account it adds to your bandwidth quota.The Bandwidth limit unlike the storage limit is quite small for free users so when i share an image on Spice Up Your Blog and lots of people use it on their blogs my bandwidth usage increases.With a blog as popular as this one it takes very little time to reach the bandwidth limit and see all the images replaced with the ugly bandwidth exceeded image.


Photobucket Quote

"...Bandwidth is used when digital content is viewed from a link you posted on another website or sent in an email (e.g., MySpace, eBay, message boards, etc.). Bandwidth is a measure of the number of bytes passed over time via direct linking. It is calculated by adding up the size of each of your images or videos as they are sent from Photobucket. The “Monthly Bandwidth" number is the amount of bandwidth you have used within the last month. The month is determined by the day of the month you registered your account...."


First off if you are a Blogger user try to upload your images directly to your blog.If you have an image you want to use in anywhere in your blog create a post and upload the image, remember you don't have to publish the post just grab the image URL.Did you know all the images you have uploaded to your blog are automatically stored in Picasa web albums ? You can check out your Picasa Web account here - Picasa Web Albums

No Bandwidth Limit Image Hosting - One of the image hosting websites i have found with no limit on Bandwidth is IMGboot.Although they have restrictions on other parts of accounts the storage and Bandwidth are unlimited.You can check them out here - IMGboot.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 or Click here for other Rss Options. If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

IMGboot is just one site with no limits on Bandwidth have you found other image hosting sites we should know about ?

The Link Within Related Posts With Thumbnails Gadget is hugely popular among bloggers using every blog platform.With no code needed to add the gadget to your blog and the script automatically generating the posts to be listed Link Within is easy to use and effective.However there are some changes you may like to make to the gadget in terms of appearance, Text and Position of the gadget.In this post we will see how to do the following.




1. How To Get The Link Within Gadget - How To Easily Add The Gadget To Your Blog.

2. How To Change The Text That Appears Above The Gadget - Change The Default Heading Text (By Default The Heading Is 'You May Also Like').

3. How To Place The Gadget In Different Positions Below Your Posts - By Default The Gadget Appears Below The Last Line Of Text In Your Posts But You Can Move It.

4. How To Have The Gadget Appear On Post Pages Only - If You Use The Read More Post Summary's You Can Hide The Gadget On The Home Page.



Adding the gadget to your blog is quick and easy.First follow this link to the Link Within Website.On the homepage fill in your Email, Blog URL, Platform (This Tutorial Is For Blogger) and number of related posts you want displayed.For most Blogger templates you should display 4 posts.Click Get Widget (You May Be Required To Add Your Blogs Rss Feed).You will now be directed to the second installation page.

*Click Install Widget for blogger to pop up in a new window.
*Log in if required.
*If you have more than one blog choose the blog you want the gadget added to.
*The widget title will be Link Within as shown below but i advise leaving the title blank.
*Click add widget as shown below.




Move Gadget - On your layout/design page move the gadget below the posting area as shown below.




The gadget has now been added to your blog.

By default The Text above the related posts is "You May Also Like" but you can change this.

A. In you dashboard click Design/Layout > Edit Html.

B. Find The Following Piece of code in your blogs html.It wont be hard to find it's at the very top :

<head>

C. Copy The Code Below And Paste It Directly Below <head>

<script>linkwithin_text='YOUR TITLE TEXT HERE:'</script>

D. Replace YOUR TITLE TEXT HERE with the title you want displayed and save your template.


If you have a number of gadgets below your posts like social bookmark buttons, AdSense or Rss options you may like to move the Link Within Related Posts Widget.Here is how you can place the gadget into position.

A. In your template place the following code were you want the gadget to be displayed :

<div class="linkwithin_div"></div>

Save your template.

If you use the read more post summary's on your blog you will want the gadget displayed on the post pages only.Check out this post in which i go into detail on Showing gadgets in post pages only.

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

That should help you get the most from the great Link Within related posts gadget.If you have any questions or suggestions drop them in the comments below.

I use a lot of screenshots on this blog and without the help of an add on it would be very time consuming.No matter what browser your using you can download an add on or extension to easily take screenshots for use on your blog.

How Screenshot Add Ons Work

Although each screenshot add on will have its own features in general they all work in the same manner.Once downloaded you restart your browser and a new icon will appear in the toolbar.When on any web page click the icon to launch the screenshot capture, you can now capture the entire page or drag a box over the part of the page you want.Once your happy save the image and it's ready to be uploaded to your blog...Easy.




There are a number of screenshot capture add ons available that you could use but i will provide you with options here for the three main browsers.






Link : Fireshot Screen Capture  (Scroll To The Bottom Of The Page For The Download Links)






Link : Screenshot Capture Firefox Extension

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 !

Have you found better screen capture add ons for your browser ?


Are there other add ons you find useful for Blogging ?


Let us know !

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

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

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



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

How To Have An Image Behind Text

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

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

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

How To Have A Full Post With A Background Image

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

Example one using the yellow rose : Go To Demo

Example Two Using An Orange Peel : Go To Demo

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

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

All the text for your entire post goes here.

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

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

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

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

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

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

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

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




1. How To Round The Corners Of Any Image

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

Link : Round The Corners Of Pictures And Images

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

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

Link : Fixed Floating Image Tutorial

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

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

Link : Image Divider Between Posts

4. How To Create A Roolover Changing Image Effect

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


Link : Roolover Changing Image Effect

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

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

Link : Create Signature For Your Blog

6. Image Opacity Blurred Hover Effect

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

Link : Hover Blurr Effect For Images

7. jQuery Blurred Picture Effect

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

Link : jQuery Blur Image Effect

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

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

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

One of the most popular Blogger tips ever was the 'Read More' or 'Post Summary's' hack.Before Blogger made the read more function standard you had to add a large amount of code to your template to achieve the effect of having only the first paragraph displayed on the homepage with a link to read the full post.The trick i will show you in this post goes a step further and only displays the post title on the home page which can be clicked to lead to the full post.You could show 20-30 posts on your homepage and they will appear like a recent posts list.This is a very useful trick and quiet easy to implement.By displaying only the post titles on your blogs home page you can have more posts listed, make the page load time faster and make your blog easier to navigate for readers.

Also Blogger have controversially started 'Auto Pagination' which limits the amount of content you can have on your home page.Unless you have a lot of full posts on your homepage you should not be effected but it's worth noting.I'm currently using this format on another blog and it fits perfect with the topic and theme of the blog.Only a small piece of code needs to be added to your template so lets walk through the steps.



Post Titles Only On Homepage

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 for a search bar to find the code - More Info)

<b:include data='post' name='post'/>

Step 3. Replace the code you found with the following code :

<!--Post Titles Only Trick-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--www.SpiceUpYourBlog.com-->

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

Once you template is saved you can check out your new style homepage.If your not happy with the post titles only style you can easily reverse the change.

Lets us know if your using this new format, the read more format or listing full posts on your homepage.

Once again this post was suggested by a reader asking how i managed to get the very wide Google Search bar below the posts on Spice Up Your Blog.The search bar in question is above the comments on every post and i have made a slight change to the code to make the bar stretch across the lenght of the posting area.First if you are not sure how to get the standard Google search box for your blog check out this post - Google Search Bar For Blogs or if you have an AdSense account you will find details in that account.



Change The Width Of Google Search Bar

Once you get the code for your search box you can add it to your sidebar or anywhere in your template.To change the width you simply change the input size.So look through the search bar code until you find this snippet :

<input type="text" name="q" size="31" />

Now change the size from 31 as it is above to the size you require.The search bar i use below the posts uses the size 62 :

<input type="text" name="q" size="62" />

You can play around with the sizes until you find what your looking for.

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 !

Important : While it is OK to change the width of the Google search bar do not ever change any code for AdSense ad units as it is against the AdSense T.O.S.

Just a nice quick tip if you need more help just ask.

Many bloggers have taken advantage of the extra options they can provide to readers by adding a toolbar to their blogs.You may have seen the toolbars in question on some of your favorite blogs and wondered how to add a toolbar to your blog or what are the advantages of using a toolbar, in this post we will look at were to get a toolbar and the options offered by the two big sites that offer free toolbars.

The two biggest free toolbar websites are The Meebo Toolbar and The Wibiya Toolbar and both offer options for sharing, chat, Stats, Rss and more.



Meebo Toolbar



The Meebo bar allows visitors to your blog to share posts on the major social bookmarking and networking websites.Visitors can also access their social networks and chat directly from the toolbar.Among the other features is an accurate analytics option to track how many hits your blog is receiving.You can see all the options and instructions for adding the Meebo bar to your blog on www.Bar.Meebo.Com

Wibiya Toolbar



The Wibiya toolbar probably offers more options than the Meebo toolbar however adding too many options may only confuse readers.Included in the options is a blog search, translate option, lots of facebook options including sharing and chat, live stats and much more including blog notifications.For more info and details on how to add the Wibiya toolbar to your blog check out www.Wibiya.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 !

Pros And Cons

Adding a toolbar to your blog is totally a matter of taste, both toolbars work well and wont slow page load time on your blog too much.Wibiya defiantly has more options and you can add or remove as many addons as you like.Check them both out and see if a toolbar can help your blog.

Opinions And Others

While their are other options such as the AddThis ShareBar i think these are the top two, but maybe you have found others if so let us know.

Will you be adding Meebo Or Wibiya to your blog ?

When people visit your blog it is important to keep them there for as long as possible, the longer someone is on your blog the more likely they will be to return and subscribe or follower.Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy.There are lots of recent posts gadgets and archive gadgets you can use but the one we will cover in this post will defiantly grab the attention of people on your blog.

This recent posts widget is similar to the standard recent posts with thumbnails but with one great twist.This gadget displays your most recent posts and includes a small thumbnail but it has the added extra of using an animated effect that smoothly scrolls through the posts.

You can see a working example of the gadget on the Demo page here : Demonstration Blog

Animated Recent Posts For Blogger

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





Step 2. From the pop up window choose the Html/Javascript gadget



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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.YOURBLOG.BLOGSPOT.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Thanks to Abu Farhan for this code.

Note : You must change the URL address in red to the address of your blog.

Optional Changes : There are lost of changes that can be made to the code if your comfortable making changes, the main edit you may want to make is the number of posts displayed.To change the number of posts that are scrolled through change the following :

numposts =10;

You can change from 10 to the number of posts you wish to have displayed.

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 !

To see how to add the original version of this gadget that does not use the scroll effect check out the Featured Posts With Thumbnails Post from last month.

If you need more help just ask !

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



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

Spice Up Your Blog

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



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

Adding Title Tags To Your Links

This is the text link above without a title :

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

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

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

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

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

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

Now the title is added to the image code :

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

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

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

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

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 ?

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 ?

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.

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 ?