How to Upload A Blogger Template

How to Upload A Blogger Template

By   07:13:00

As we all know there are numerous Second Life Residents who have a blog relating in some way to their SL experience, so if you are considering starting your own blog the first thing you'll need is a template that makes your blog stand out.

The kind of template or theme you choose for your blog will largely depend on the subject. For instance, if the blog is going to be mostly picture orientated then perhaps a theme aimed at photographers may be approproate. On the other hand, if your blog is going to have more of a magazine feel, then there are plenty of magazine or newspaper templates available.

You may already have noticed that Blogger has a series of themes for you to start off with, but in my opinion it is much better to upload one from a website that specialises in designing Blogger themes -  a quick Google search will bring up many places you can download templates from. These templates tend to look a lot more professional than the generic Blogger themes, and they are often designed for use on mobile devices so your blog can also be viewed on the go.

Once you find a template you like you'll need to download it onto your hard drive and unzip it. If you don't have software that can compress/uncompress files try 7-Zip , its free.

Uploading A Template

Once you have decided on a title for your blog and have covered all the preliminary steps in Blogger it is time to upload your selected template.

1/ Sign into your Blogger Dashboard then to the right of the blog name click on the down arrow (see area highlighted in red above), then from the drop down menu select Template.

2/  In the top right of the new page that opened there is a Backup / Restore button. Click on this.

3/ A small window will now open. Click on the browse button and navigate to the Blogger template on your hardrive and open it.

4/ The Backup / Restore window will now look similar to the above with the name of the template to the right of the Browse button. Click on Upload.

Thats all there is to it - as soon as Blogger has finished uploading the template it will be live on your blog, and if you haven't done so already you'll be ready to start adding posts.

Quick Tip On Changing Templates

Once you see a template on your blog you may decide its not quite what you're looking for and you may decide to upload quite a few before you find the template thats right for your blog. If you do upload a number of templates it is much better to go back to a default blogger theme and delete as many widgets as possible inbetween uploads. 

The reason for this is that you will accrue far too many widgets on your blog and you will lose track of which widget belongs to which template. Also, uploading one template after another can sometimes affect how they look on your blog.

Read More

Creating Textures With PatternCooler

Creating Textures With PatternCooler

By   22:23:00

The free online Patterncooler software created by Harvey Rayner is a remarkable tool for creating seamless patterns to use as backgrounds on blogs, web and graphic design projects, wallpapers, and of course textures for Second Life.

Getting Started

Because Patterncooler offers so many variations, it can be difficult to know where to get started, so after clicking the centre of the screen to open the Patterncooler interface, the best option seems to be to select a texture thumbnail at random and experiment.

Once you see how this works, you can also click on the 'Show color variations as thumbs' tab, which will allow you to edit the colours of the texture in the main window.

The Pattern Spread App

Patterncooler allows another way to work with textures other than the method above. Next to the Patterncooler logo is a white inverted arrow. Hover your cursor over this and from the drop down menu select Pattern Spread App. You will then be presented with a number of galleries of textures. Once you have selected a texture to work with, a window similar to the image above will open.

Under the Pattern Spread App, each texture is constructed of a number of layers of patterns. Each layer can be edited and new ones can be added and existing ones removed, by using the '+' or 'X' buttons next to each pattern. It is also possible to edit the size of each pattern on the texture as well as its colour values.

Registering With Patterncooler

Another option offered to users of Patterncooler is to register with the site, which will enable you to save projects and come back to them later as well as adding them to the gallery. You will also be able to view what textures you have downloaded, which all helps to make this app much more user friendly.

One of the remarkable aspects of Patterncooler is that it is free to use and that you can use the patterns you download pretty much as you like. However, depending on what the pattern will be used for, there is an option to pay for each download which allows for a better quality images. Also there is a donate button which I think is worth using considering everything Patterncooler offers its users.

This is a basic run through of what Patterncooler can do, so its worth taking a look and seeing just how useful a tool it is for creating online patterns for blogs and websites, and possibly textures to use in Second Life.

Read More

Creating A Cubed Icon Or Logo With Gimp

Creating A Cubed Icon Or Logo With Gimp

By   07:06:00

If you have a blog, website or a business in Second Life, it is likely you have created an icon or Logo as a way of making it more distinctive. It can be useful to display that icon in a number of ways, so in this tutorial we are going to create a cubed icon or logo with Gimp.

1/ The first step is to load your icon into Gimp. Then select Filters > Map > Map Object.

2/ The above window will open, and in the drop down list select Box. Also select Transparent Background so we can add our own background to the finished cube. Next click on the Orientation tab.

3/ You will see there are sliders so you can place the cube at the angle you want. Experiment with these sliders to get the look that suits you.

You can also see from the image above there is a live update option so you can see what your cube will look like. However, with large image this can take a while to update. Using the wireframe mode is much quicker.

4/ After adjusting the rotaion of the cube there is another tab that allows you to adjust the lighting. Again experimentation is the best way to find what you like.

5/ When you are ready click OK and Gimp will create your cube with your icon or logo on each face.

Your cubed icon is complete, although there are further steps you can take to improve its appearance, such as adding a shadow and a background.

Before continuing with the following steps, autocrop the cube layer and export it. Now open a new window in Gimp that is larger than the cube icon image, (you may want to scale the cube image to make it smaller if necessary).

Adding A Shadow

1/ Add the cubed icon image to the new window with File > Open as Layer. Now create a new layer that is transparent and place it below the cube layer.

2/ Using the Paths tool, draw an outline of the cube, clicking with your mouse at each corner to change direction. Hide the cube layer and make the transparent layer the active layer.

4/ When you have finished select the Edit radial button below the tools icons, and then select Selection from Path. Using the Bucket Fill tool, fill the shape you have created with black. Your finished layer should look something like the image above.

5/ From the Toolbox, select the Perspective tool. By placing your cursor over the corners of the grid and holding down the left mouse button you will be bale to deform the shape you created until it looks like a shadow for the cube. The shape can be repositioned by dragging the central circle on the grid.

This stage may take a little trial and error, and you can of course use the Undo option if you need to. When you are ready click Transform in the small window (pictured above).

6/ Next go to Filters > Blur > Gaussian Blur and select a blur that suits your image. something like 25 may be a good starting point. Experiment with the Opacity slider at the top of the Layers panel until the layer looks like the kind of shadow you want.

You can of course save your cubed icon as it is, but next we are going to soften the corners on the cube here

Rounding Off the Cube's Corners And Edges

1/ First create another transparent layer and place it above the cube layer.

2/ With the Color Picker tool select the color of the lower right face of the cube (or whatever lower face that has the lightest tone).

3/ Now make sure the new layer is the active layer, and select the Brush tool. Choose a brush size that will suit your image. A little trial and error may be needed, although one with a blurred edge is most useful.

4/ Place the cursor at the bottom corner of the cube and holding down shift drage the cursor up to the top corner of this cube edge.

5/ Repeat this for the top interior edges of the cube but use the Color Picker tool to select the lighter tone of the upper surface. Right click on this layer in the Layers Panel and Merge it with the cube layer.

6/ To round off the exterior corners, select the Eraser tool and gently draw a curve on each corner. Zooming in on each corner makes this easier to do, as well as selecting the right sized brush for your particular image. This should also tidy up any messy bits created by smoothing the interior edges.

7/ When you have finished, go to Filters > Blur Gaussian Blur and choose a blur radius that will suit your image. Click OK and if necessary you can make this layer less opaque by using the slider at the top of the Layers panel.

Your cube should now have rounded corners and smooth edges. All that needs to be done now is to add a background. In the example here I used the Blend tool to create a gradient of the foreground and background colours by holding and dragging the cursor from the bottom to the top of a new layer, then placing it below the other layers.

Creating a cubed icon or logo using Gimp takes just a few steps, and from there each person can decide on whether to add rounded edges and a background. This tutorial has also introduced those quite new to gimpt to a number of uses for some of the tools in Gimp.

Read More

Symbaloo: A Second Life Start Page

Symbaloo: A Second Life Start Page

By   18:43:00

For those of us who store a lot of bookmarks from both official Second Life websites as well as residents' blogs, one of the best ways to manage all that content is by using Symbaloo.

Symbaloo is a start page that simplifies managing bookmarks by allowing its users to create a visual icon ('tile') for each bookmark. Symbaloo is therefore a very convenient and easy way to keep track of all your Second Life content, rather than the conventional method of searching through a list of standard bookmarks stored in your browser.

Since Symbaloo  stores all of your bookmarks 'in the cloud' this means you won't lose any of your Second Life bookmarks, and you'll be able to access them from anywhere including on all of your devices. Once you've created a page ('webmix') of tiles you can also share them with the wider Second Life community.

Creating A Symbaloo Webmix 

A webmix is the name Symbaloo has chosen for a page of tiles on a specific subject. For instance, if you are an enthusiastic fashion guru in Second Life you may wish to create a page of tiles dedicated to that subject. Creating your own webmix is simple:

1/ Click the '+' sign at the top of the Symbaloo page and the window pictured above will open.

2/ Give it a name and click 'Add' and your webmix is ready to add tiles to.

As you can see there are other options to begin your webmix, such as using the quick start option. This will allow you to add existing tiles created by Symbaloo to your page rather than starting with an empty webmix.

Adding Tiles To Your Symbaloo Webmix

Once you have a webmix page and named it, adding tiles is easy.

1/ Hover your curor over an empty cell and click it.

2/ A side window will open (see image above).

3/ Paste a url in the space provided and name it in the space below the url.

4/ The window may then automatically select an appropriate icon for you. You can choose to use that icon, select another, or upload your own image. If you use your own image a small one is best (around 100 X 100 pixels).

5/ When you have finished click 'Save' and your tile will be added to your webmix.

The Second Life Webmix

The Second Life webmix (click to go to page)

The Second Life Webmix is a selection of urls and SLurls I have collected that are not only useful to me but possibly to a number of other residents (click the image above to go to the webmix page).

Functionality of the Second Life Webmix

The central panel is used to display a number of features when the relevant tile is clicked:

• Three clocks that can be set for different time zones (very useful for Second Life).
• Google search
• A compacted version of your Facebook page and Twitter feed.
• Your YouTube page can also be displayed here in a compressed form.
• Any RSS feeds added to the webmix will also be displayed here.

These websites can also be viewed in a new tab in your browser by clicking the appropriate tile. Other popular websites used by creators within Second Life such as Gimp and Blender are also included. Bloggers can also quickly access their accounts through the Wordpress or Blogger dashboard tile.

Second Life website tiles

The top of the webmix page has all the essential Second Life websites allowing very quick and easy access:

• Wiki
• Marketplace
• Events
• Blog
• Search
• Classifieds
• Dashboard
• Viewer Download 

There are also a number of the most popular residents created websites (including of course SL-Inspiration and its sister blog, WU-Gallery). These are sites that are generally the most informative whilst others contain very useful tutorials.

The other tiles are mostly taken up with some of the most popular and useful SLurls, including sandboxes, and some of the more popular clubs and art galleries. Hovering your cursor over each tile will display the name of the SLurl.

Creating Quick Access To The Second Life  Webmix

Once the Second Life webmix has been added to your Symbaloo start page (click on the image above to get it), you can of course use it as your homepage. However, as not everyone will want to do this there is another way to create quick access to it, rather than searching through a list of bookmarks.

1/ Open the Symbaloo page in your browser.

2/ Drag the icon next to the url address near the top of your browser to your desktop. If the url on your desktop does not show the Symbaloo icon, to make it easily recognisable you can do the following:

3/ Copy the Symbaloo icon  image above to your PC.

4/ Right click on the url on your desktop and select 'Properties'

5/ Select 'Change Icon' then click 'Browse'

6/ Browse to where you saved the image above and select it.

7/ Click 'OK'

Now you can instantly access all your Second Life web content as well as your favourite SLurls, which means you can enter Second Life at the place of your choosing and not necassarily your home or last location.

Using Symbaloo as a Second Life start page can be a very useful tool. Try out the page I created, and if you like it you can create and share your own Second Life webmixes on Symbaloo.

Read More

Creating a Web Button in Gimp

Creating a Web Button in Gimp

By   13:46:00

 This is quite a comprehensive tutorial on how to create a web button in Gimp, and since there are many styles of web buttons, I will first show how to create the standard shiny Web2 button, then a simple matt effect button. I will then use the matt web button to show how to make a rollover button using CSS rather than javascript.

Creating a Shiny Web 2. Button

1/ Open Gimp and create a new transparent layer to a size that suits the button for your website. The buttons here are large to make the images clearer for explaination purposes.

2/ Choose the Rectangle Select Tool from the Toolbox then draw out the shape of your button. Make sure the rounded corners option has been selected and you have added the size of the curves for your button. Something between 15-20 should be good.

3/Once you have drawn you button use the Bucket Fill tool to fill it with colour, then add another transparent layer.

4/ From the Select menu click on Shrink and choose a setting of around 2, then click OK. This will create a clean edge for the button.

Adding Gradients

5/ Now select the gradient tool. With white as the foreground colour select the FG to Transparency gradient. Using the image below as a guide, add the gradient to the active layer. You can tweak the opacity of the gradient if it looks too stark.

6/Create a new layer and select the Rectangle Select tool again. In the upper half of the button draw a rectangle as in the image above. Now fill it with same gradient you used earlier so the new selection looks similar to the image below.

7/ Add another layer and using either the Paintbrush or Pencil tool draw a straight line towards the bottom of the button, using a size of brush that looks natural for your button. Now select Filters > Blur > Gaussian Blur and in the window that opens add a blur of around 12. Now click OK and your button should look something like the image below.

Adding Text

8/ Select the Text icon from the Toolbox and click on the button image. In the window that opens type in the text for your button, With the text window still open, you can select the size, font and color of your text in the Toolbox panel. When you are happy with your text click OK.

9/ To give the text more definition you can add some shadowing. Select Filters > Light and Shadow > Drop Shadow. In the window that opens set the X and Y offsets to 0, and the blur radius to around 10, then click OK.

10/ To add more definition to the button, make the original button layer the active layer and then select Drop Shadow from Filters again. With the same settings for the text click OK.

Creating a Matt Button

Fashions change in web design and matt buttons are appearing more and more. They are simpler to make than shiny buttons too.

1/ Follows steps one to four above.

2/ using the Gradient tool with the same settings as above, add a gradient that suits your button. You can tweak the opacity of the gradient as well as giving it a Gaussian blur. However, if you do add a Gaussian blur as well as a drop shadow to the button it will tend to have an out of focus appearance. One or other of the effects is advisable.

Creating Rollover Buttons with CSS

To create your rollover button you will need to create an image of two buttons with one placed directly underneath the other. The lower one will be what is shown when a cursor hovers over the button.
The purpose of stacking the buttons as one image is that it helps to avoid flickering when the cursor is placed over it, as well as keeping down the number of images you need to add to your website.

HTML code for the Button

The HTML for the button is one simple line of code:

<a id="wugallery" href="#" title="Wu Gallery"><span>Wu Gallery</span></a> 

The link is given an id so that it can be styled with CSS. When creating your own button, you will naturally give it its own id, and add your own title. The text between the span tags is what search bots will see, but will be hidden in regular browsers.

The CSS code

#wugallery{
  display: block;
  width: 100px;
  height: 25px;
  background: url("wugallery.gif") no-repeat 0 0;
}

#wugallery:hover {
  background-position: 0 -25px;
}

#wugallery span {
  display: none;
}

The width element in the code should be the same width as the buttons, but the height is half the image of the two combined buttons. The URL segment is the path to your button image. Run your cursor over the button below to see how it works in practice.


That is essentially all there is to creating rollover buttons with CSS. To create more than one button is simply a matter of giving each button a unique id in both the HTML and CSS code, as well as changing the URL path for each button.

Read More