Home Domains Hosting Resellers Servers Log-in Coeur Internet Order-Now

Archive for August, 2008

Google Sitemap Generator

Friday, August 29th, 2008

Every Heart Internet Hosting Package comes with the use of our powerful eXtend 2.0 Control Panel.  eXtend 2.0 is packed full of powerful tools and features to not only run your hosting account but to help add extra functionality to your website, one of which is a Google Sitemap generator.

With Google being the world’s most popular search engine, it’s vital that your website is ranked well within it. The best way of making sure Google can find your content as easily as possible is to create a .xml Sitemap.  A Sitemap is a file containing a list of every page within your website, it is extremely useful for alerting search engines to your content allowing it to be indexed more effectively. Google Sitemaps are particularly handy if your site is new and has few links to it or has an archive of pages which are not linked to each other, a Sitemap will ensure that Googlebot (Google’s search engine spider) will crawl through each link submitted.

Creating a Sitemap manually is normally a laborious and complicated task. Using our eXtend 2.0 control panel you can use our Google Sitemap generator tool to create a Sitemap within seconds. We can even upload your Sitemap to Google to ensure that Googlebot will spider your website as quickly as possible. We recommend that every time you update your website you run this tool to re-generate the sitemap file with the new links so they can be indexed much quicker.

If you would like to find out further information about our eXtend control panel, or would like to try a demo of its powerful features, please click the link below:

http://www.heartinternet.co.uk/extend-h.shtml  

Tags: , , ,
Posted in Heart Internet, eXtend | No Comments »

Create a drop shadow effect for your website using CSS

Sunday, August 17th, 2008

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out.This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:

http://www.heartinternet.co.uk/HI_Drop_Shadow.zipThe shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your <body> using CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:
<div id=”container”>
     <p>Your Content Here</p>
</div> CSS Code:
body {
     background-image: url(images/background_760.jpg);
     background-repeat: repeat-y;
     background-position: center;
     background-color: #f7f4ee;
}#container {
     width: 760px; margin: 0 auto; text-align: center;
}Download the full tutorial here:
http://www.heartinternet.co.uk/HI_Drop_Shadow.zip

Tags: , ,
Posted in Web Design | No Comments »

Create a super fast website navigation with a single image and CSS

Wednesday, August 6th, 2008

This tutorial will show you how create a navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions.

The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly.

HTML Code: (This goes between your <body> </body> tags)
<div id=”navigation”>
     <ul>
          <li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li>
          <li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li>
          <li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
</div>

Stylesheet Code:
#navigation ul {
     width: 333px;
     height: 27px;
     background: url(navigation.gif) no-repeat 0 0;
     list-style: none;
     padding: 0;
     margin: 0 auto;
}
#navigation li {  display: inline; }
#navigation li a:link, #navigation li a:visited {
     display: block;
      text-indent: -7000px;
     outline: none;
     height: 27px;
     width: 100px;
     float: left;
}
#navigation li.navhome a:hover {
      background: url(navigation.gif) no-repeat 0 -27px;
}
#navigation li.navhosting a:hover {
      background: url(navigation.gif) no-repeat -100px -27px;
}
#navigation li.navcontact a:hover {
      background: url(navigation.gif) no-repeat -200px -27px;
}

And that’s it!

Be sure to add the CSS code either within the <head> tag of your website or within a separate stylesheet.

Don’t worry if you are having troubles with this tutorial, you can download all the files associated with it below. If you look in the code of the html you will see everything commented to help you understand how it works and also help you modify it for your own website.

Download this tutorial:
http://www.heartinternet.co.uk/blog/HI_Tutorial_Navigation.zip

Tags: , , ,
Posted in Web Design | No Comments »

We Have Moved!

Monday, August 4th, 2008

Just to let you all know that we moved offices this weekend (not the data centre!). We have been working on our new offices for a quite a few months and they will give us plenty of room to expand over the next years. Our new address is:

Heart Internet
2 Castle Quay
Castle Boulevard
Nottingham
NG7 1FW
UK

Tags:
Posted in Heart Internet | No Comments »