Showing newest 14 of 20 posts from November 2009. Show older posts
Showing newest 14 of 20 posts from November 2009. Show older posts

Monday, November 30, 2009

Html Parse Tool - Display Html Code In Your Blog

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

Example:

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

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

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

Simply paste your code into the box below and click the 'Convert' Button

It's So Easy ! You Can Bookmark The Page In Case You Need To Display Code Or Parse Adsense In The Future.




If For Some Reason The Gadget Does Not Appear Just Refresh The Page
Once your code has been parsed paste it were you need it to appear.


If You Need More Help Just Ask In The Comments.
Read More View Comments

Sunday, November 29, 2009

How To Add A Contact Us Page To Your Blog

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

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

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

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

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

First Here's how to create your contact page:

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

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


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

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


4. Copy the html code for the form.

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

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

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

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

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

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

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

blogger post options

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

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

Making a link to your Contact page

If you have a menu you could add it there.

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

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

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

Option 1 a text link :

Preview :

Contact Us

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


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

Option 2 a button link:

Preview:



Code:

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


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

That's it have you added a contact page to your blog?
Read More View Comments

Saturday, November 28, 2009

How To Add A List Of Random Posts To Your Blog

How To Add A Random Post List Widget To Your BlogIn this post i will show you how to add two types of random posts lists to your blog.This blog tip is very easy to add to your blog so you will have it up and running in a few minutes.The first widget will list the titles of some random posts from your blogs archive.The second widget will list the titles with a short summery of random posts from your archive.

The random post gadget will be another great way to display posts to your readers they might otherwise never see.This will keep visitors on your blog and hopefully turn them into return visitors and subscribers, Sounds Great lets do it !

With both you can choose the amount of posts you want listed and with the second you can choose how long you wish the summery to be.

Here's a screenshot of the first widget titles only:



Random Posts Widget


Here's a preview of the second widget titles and summery:

Random Posts Widget


And Here's how to add the widget to your blog :

1.Click 'Layout' For your blog

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

3.Select 'html/javascript'


4.Paste the code below in the code area provided :
(Use a title like 'Random Posts' 'Popular Posts'...)

Widget with titles only:

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>


Change this piece of code to set how many posts are displayed:
var numofpost=5


Widget with titles and summery :

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;var wordnumber=9;</script>
<script style="text/javascript" src="http://bloggertipspro.googlepages.com/random-posts-with-summary.js">
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

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

Change this piece of code to set how many posts are displayed:
var numofpost=5

Change this piece of code to set how many words ore displayed in the summery are displayed:
var wordnumber=9
Once your happy with the settings click save.

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

Have you gone random ?
Read More View Comments

Friday, November 27, 2009

How To Add A Background Image Behind Your Blogger Posts

How To Add A Background Image Behind Your Blogger PostsIn this latest blog i will show you how to use an image in the background of your blog posts.This background image will only be behind the post area of your blog.

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

1.How To Use A Background Image For Your Blog

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

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


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

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

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

#main-wrapper {


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

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

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

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


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

We Are Nearly Finished :
If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog.

Example:


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


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

What do you think ?
Read More View Comments

Thursday, November 26, 2009

How To Add A Snow Falling Effect To Your Blog

How To Add A Snow Falling Effect To Your BlogIn this post i will show you how to add an a snow-fall effect to your blog.Once you add the code it will look like snow is gently falling down your blog pages.This will really spice up your blogs appearance over the Christmas.

Note: I have add an effect for 3 types of flowers falling on your blog Click Here to see that post.

Obviously the darker the background of your blog the better the effect will look but even if just parts of your blog like the header use dark colors it will look great.

To see a working sample / demonstration of the snow effect click here

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


1.In your dashboard Click 'Layout'

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

3.Select 'html/javascript'

4.Paste the code below into the area provided :

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript">
/***********************************************

* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com/2009/11/how-to-add-snow-falling-effect-to-your.html" target="_blank"><font size="1">Get snow effect</font></a>

Cellphones at LightInTheBox.com

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

(You dont need to give the gadget a title just leave title area blank)

5.Click save.

Another great christmas tip for your blog is: How To Add A Fixed Floating 'Merry Christmas' Banner To Your BlogClick Here to see how.

Thats it ! Easy...Your Snow Effect Has Been Added...Now lets hope for some Real snow this Christmas !
Read More View Comments

How To Add A Background Image To Your Blogger Sidebars

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

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

1. How To Use A Background Image For Your Blog

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

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

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

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


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

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


#sidebar-wrapper {


If you cant find that code it may be:


#side-wrapper {


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


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


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


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

We Are Nearly Finished:
If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog .

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

Example:

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

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

Were you able to add an image ? Let me know how you did.
Read More View Comments

Wednesday, November 25, 2009

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

How To Add A Stacked Recent Posts Widget To Your BlogIn this post i will show you how to add a stacked animated recent posts widget to your blog using Google Ajax feed API.

The widget is easy to add to your blog and can be placed in your sidebars under/over posts or anywere you can add html/javescript gadgets.

In a previous post i covered adding a single scrolling recent posts widget to your blog using the same format Click here for that post

Heres a screenshot of how the widget looks showing my recent posts :
Recent Posts Widget
Click Here To See A Working Demo Of The Widget

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


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

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

3.Select 'html/javascript'

4.Paste the following code into the area provided:


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

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

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

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

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

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


Now you must make the following changes to the code:

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

Example: Spice Up Your Blog

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

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

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

You can do much more with Google Ajax feed API Click here to go to the Google page.
Read More View Comments

Tuesday, November 24, 2009

How To Use A Background Image For Your Blog

How To Use A Background Image For Your BlogIn this post i will show you how to have an image as the background of your blog.Adding the image is easy and can be completed in a few steps.

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

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

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

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

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

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

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


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

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

body {


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

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


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

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


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

We Are Nearly Finished - : If you need more help or have an opinion or suggestion Please leave a comment Below.This is a Do-Follow Blog.

Example:

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


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

Have you added a background image to your blog ?
Read More View Comments

Friday, November 20, 2009

How to add a Related Posts list under your blog posts

How to add a related posts list under your blog postsIn this post i will show you how to place a related posts widget under your blog posts.Displaying related posts under your blog posts is a great way to keep visitors to your blog - on your blog.

The gadget works by displaying a list of posts that have the same label/labels as the post currently being viewed, so there is a good chance the visitors will also be interested in the related posts.

To add the recent posts widget we must add two pieces of code to your blog.

Adding Related Posts To Your Blog.

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

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

</head>


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


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

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


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

Optional : Change Icon

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

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

How to add a related posts list under your blog posts

This is the URL of that image :

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

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

--

4. Now find this piece of code in your blogs html :
<data:post.body/>


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


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

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

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

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

Read More View Comments

Tuesday, November 17, 2009

Ten Free Visitor Hit Counters For Your Blog

Ten Free Visitor Hit Counters For Your BlogIn this post i will list ten free visitor or hit counters you can add to your blog to keep track of how popular your blog is who is visiting etc...

You can now keep track of so much information and in real time and most counters just need you to add a small piece of code.

Here's the list in no particular order:


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

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

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

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

  • Statssheet Free Website Counters, Website Tools, & Articles

  • 24counter All types of counters for your blog

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

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

  • Freehitcount Selection of novelty counters

  • Totallyfreecounters Change colors and styles ot your counter

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

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

    Read More View Comments

    Monday, November 16, 2009

    How To Add Gadgets Above Or Below The Header In Blogger

    cool bloggerIn this post i will show you how to edit your blog to allow gadgets be placed above or below your blogs header section.This is great for adding Menu bars, adsense, search bars and more

    In most blogger templates you can add gadgets to your sidebars and under or over your posts but by default not below or above the header area.

    You can however make a quick change to your blogs html that will allow you to add gadgets below or above your blogs header.

    You can also add gadgets like adsense inside your header section Click Here to see a post on this.

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


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









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










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











    Heres how to make the changes :

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

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


    <div id="header-wrapper">



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


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


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


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

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

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

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

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

    What do you think ?
    Read More View Comments

    Sunday, November 15, 2009

    How to make a Recent Posts widget with Feedburner

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

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

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

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



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

    Here's how to get yours :


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

    2.Click 'Publicize' in the top menu.

    3.Click 'Buzz Boost' in the side menu

    4.Edit the look of your widget - Number of posts, Title etc...
    120x90_Blue_PCConnection_Logo
    5.Now use the one click option to add widget to your blog OR Copy the widget code available.
    We Are Nearly Finished - First A Quick Reminder:
    If you need more help or have an opinion or suggestion Please leave a comment Below.It also really helps me to get feedback.
    This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.
    OK Back to business....

    Job done.

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

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


    • Read More View Comments

    Thursday, November 12, 2009

    How To Improve Your Blogs Google Rank With Meta Tags & Description

    How To Improve Your Blogs Google Rank With Mata Tags & DiscriptionIn this post i will show you how to add Meta Tags And Meta Description to your blog.

    Improving your search engine rank is key to the success of your blog.This is known as S.E.O. (Search Engine Optimization).
    Large companies spend a fortune on S.E.O. ,That's great if you have a fortune to spend !

    Search engines use automated spiders and crawlers, to collect information from your blog.They collect URL'S ,Titles,etc...
    They also collect keywords from the early parts of your blog posts.

    However you don't know which words are taken as keywords connected to your blog, It's likely the keywords been taken are not relevent to your blog at all. In this case your blog won't be indexed properly in search engines.
    Theres also a chance your highly relevant keywords might not even be used to index your blog.This will result in your blog being ranked behind Thousands of others in searches !

    But you can take control !

    You can add Meta Tags and Description to your blog.

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

    So lets do it !

    First you must copy the code below and add a meta description and meta keywords (as shown in bold) as follows:
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
    <meta content='PUT BLOG DISCRIPTION HERE.' name='description'/>
    <meta content='PUT, KEYWORDS, HERE, SEPERATED, BY, COMMA,' name='keywords'/>


    Heres an example of how the code might look for this blog:
    (Just a quick example not my actual meta content)

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


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

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

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

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

    • Adding The Code To Your Blog :
    We Are Nearly FinishedIf you need more help or have an opinion or suggestion Please leave a comment Below.It also really helps me to get feedback..

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

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

    <head>

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

    4.Click save and your finished.

    In a previous blog i covered Improving S.E.O. by Changing the way Google sees your blog this is also important: Click Here To See That Post

    For a list of S.E.O. tips on this blog Click Here

    Read More View Comments

    Wednesday, November 11, 2009

    Five Types Of Google Translate Widgets For Your Blog

    How to add a Google Translate widget to your blog
    In this post i will show you five different types of Google translate widgets and how to add them to your blog.

    The blogosphere is a Global phenomenon so its important to make your blog available in all languages.

    Below i will cover how to Add the translate widget code to your blog.

    First here's the five types of Translate widgets with the code needed:


    120x90_Blue_PCConnection_Logo
    1.Small Drop Down Menu:

    Small drop down translate menu

    Small Drop Down Menu Code:



    2.Single Column With Flags:

    How to add a Google Translate widget to your blog

    Single Column Code:




    Single Column code With Transparent Background :



    Single Row With Flags

    How to add a Google Translate widget to your blog

    Single Row Code:




    Double Row With Flags

    How to add a Google Translate widget to your blog

    Double Row Code:




  • How To Add the code to your blog

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

    1.Choose a widget above and copy the code

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

    3.Choose html/javascript in the pop up window

    4.Paste the code into the area provided

    5.Click save.

    Your Google Tanslate widget has been added.

    Read More View Comments
    Subscribe to: Posts (Atom)
     

    Recommended Money Makers

    1. Info Barrel Paid To Write, if you can write a blog you can write for I.B.

    1. Xomba Paid To Write, Another great paid to write articles website

    3. Chitika Ads For Your Blog, work well alongside AdSense

    4. Aw Surveys Paid Surveys, Get paid to take surveys and referr new members.

    Thanks For Calling

    free counters

    Admin Options : Home | Layout

    Random Post List From The Archive

    Who Writes This Stuff ?

    Hi Im Paul Crowe,

    I have an insane interest in how things work.I've been a Blogger for a long time but after an almost 2 year break i've come back with Spice Up Your Blog.

    Working on Blogger design, Widgets, Gadgets and all things to do with improving the Blogger experience.Throw in some Writing and Promotion methods and we have our selves a Blog !

    You cant keep a good man down..

    View My Full About Me Page

    Latest From Info Barrel

    Want To Join In ?

    Write A Guest Post On Spice Up Your Blog !
    It's Easy Just Click Here For Details

    Blog Archive