Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts
Lusus

How To Add A Random Page Button To A Blogger Blog


After adding a random page button to this blog and to another I help to run, The Chilly Bear  I was asked a few times how to do this. So in the hope this will be useful I have decided to write this tutorial on how to add a random page button to a blogger blog.

Creating the Graphic For The Random Page Button

Firstly I should point out I am not a scripter so I didn't incorporate the button graphic into the javascript, but used the work around described here. If anyone knows how the graphic could be embedded into the script please add a comment below.

To create the button graphic you'll need to know the width of the sidebar on your blog where the button will appear. To find this:


1/ Open your Blogger Dashboard and on the blog you want to add the button to, click on the small arrow to the right of the blog name to reveal the drop down menu (highlighted in red above). Select Template.


2/ Click the Edit HTML button to view the blog template. 


3/ You'll need to view the blog's CSS file which will tell you the width of the sidebar. If you can't see the CSS of the blog find this line towards the top of the template:
<b:skin>......</b:skin>
then click on the triangle by the template line number (see image above).


4/ scroll down the blog CSS until you find a line similar to the above. As you can see in this example the width of the sidebar is 312px.

All CSS files are different for each blog template, so the line may appear differently for you, but there should be a line showing the width of the sidebar for your blog.

Now the we know the width of the sidebar we can begin to create the button graphics. Open your graphics software, select New then for the width of the graphic enter the width of the sidebar, and the height you want your graphic to be.

If you don't want your random page button to take up the full width of the sidebar, start with a transaparent layer and centre your button when you create it. When you export your graphic make sure it has an alpha channel so the background remains transparent.

You can be as creative as you like with the appearance of the button. Since the Chilly Bear is a Second Life club and music themed blog the button I created for it is a record label, (the image at the top of the page).

Once you have created the button graphic upload it to an image hosting website, such as Photobucket. You will need the code for direct layouts later.

Adding the Random Page Script To The Template

To create the random page button you will need to add a script to your template. Before you edit your template remember to create a backup by going to your template page and clicking the Backup/Restore button to the upper right.

1/ Copy the script Below:
<script type='text/javascript'>
/*<![CDATA[*/
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('mbl-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
/*]]>*/
</script>
2/  Go to your template page and click on the Edit HTML button to view the template.

3/ Scroll to the bottom of the page and just above the closing </body> tag paste the script.

4/ Save the template.

 Adding The Random Page Button To Your Blog

1/ To add your button, go to the Layout page of the blog and Click on Add A Gadget for the Sidebar.

2/ Select a HTML/Javascript widget and paste this into the window:
<div class='box'>
<div class='random page'>
  <div id='mbl-random'/>
<style type='text/css'>
#mbl-random a{
  display: block;
width:width of the button graphic;
height: height of the button graphic;
background: URL(url of the button) no-repeat 0 0;
font-size: 0px;
  }
</style>
</div>
</div>
3/ Replace 'width of the button graphic' with the width of your button in px. This should match the width of the sidebar.

4/  Replace 'height of the button graphic' with the height of your button.

5/ Replace 'url of the button' with the url for direct layout of the uploaded graphic.

6/ Click Save.

Your random page button should now appear on your blog

Troubleshooting

Because all templates are coded differently it may be that your random page button only appears on the home page of the blog. If this is the case you can make it appear on all pages by creating a widget for the button in the template.


1/ Open your template again and scroll down to where you see a line similar to the above, highlighted in red.


2/ Scroll further and you should see a search widget and as well as others, such as a social profile widget.

3/ Normally a random page button would be placed below these widgets, so when you scroll just past them add the following:
 <!--Random Page Widget-->
<div class='widget-container'>
<div class='random-button-widget'>
widget text
<div class='clear'/>
</div>
</div>
 Replace 'widget text' with the code you added to the sidebar widget when editing the layout.

5/ Save the template.

4/ Delete the widget you originally created when editing the layout.

Your random page button should now appear on each page.

Having a random page button on your blog can be very useful for bringing forward older posts that visitors may still find interesting, but were otherwise hidden among the numerous other posts you may have. It can also help to keep people on your blog for longer. If you find this tutorial useful then why not share it with friends.


Read More
Lusus

Adding An Avatar Social Network Button To Your Blog


Most Blogger templates come with social profile buttons added to the sidebar, but almost always you will find that some of these buttons are useful and some are not. It is possible however to edit which buttons are available on your blog by adding and removing them. One social profile button that is becoming increasingly relevant to add to a Second Life blog is the Avatar Social Network button.

Avatar Social Network

Avatar Social Network, as the name suggests is a social networking site for virtual world avatars, and is in fact the fastest growing site of its kind. As you would expect, it has pretty much all the features of a comparable site such as Facebook, but has the added feature of paying its members for their on site activity. This page explains in more detail why Avatar Social Network have chosen to do this .

As Avatar Social Network (or ASN as it is often called) continues to develop and its members continue to grow its social profile button on your blog becomes a must have feature, so this tutorial demonstrates how quickly and easily it can be added.

Before you add the button however, go to ASN and sign up if you don't already have a membership.

Adding The ASN Button To Your Blog

 Avatar Social Network Icon
The first thing to do is right click on the icon above and select 'Save Image As' to save it to your hard drive. Then upload it to an image hosting site such as Photobucket and copy the code for direct link layout.

Creating The Button Code

 The code for a social profile button looks like this:
 <a href='http://www.avatarsocialnetwork.com/profile/Lusus' target='_blank'><img alt='Avatar Social Network' src='http://i61.tinypic.com/2xxxx.jpg' title='Avatar Social Network'/></a>
To create the text for your own button:

1/ Go to your profile page on ASN and copy the Url.

2/ Replace 'http://www.avatarsocialnetwork.com/profile/Lusus' with your Url, but keep the quotation marks.

3/ Now replace 'http://i61.tinypic.com/2xxxx.jpg' with the url of the button mentioned above. Again, keep the quotation marks.

4/ You now have the code for your button. Drag you mouse over the entire code and copy it.

Adding the Button To The Blogger Template

The final stage is simply to paste the code for the button in the correct place in your Blogger template. You will need to edit your template here, so first make a backup of it by clicking the Restore/ Backup button.

1/ Sign in to your Blogger Dashboard and from the drop down list to the right of your blog's name select Template. Now click on the Edit Template button.

Blogger template social profile links

2/ Scroll down the template code until you find lines like above (click to enlarge the image).

3/ You can add the ASN button to your sidebar buttons by pasting it at the end of the code, or you can decide where you want it to show on your blog.

4/ If you look closely at the text you'll see names such as Facebook, Google+ etc, Decide which of these buttons you want the ASN button to appear after then look for this:
</a>
which signals the end of one button. Paste the code for the ASN button after this.

5/ Click the 'Save Template' button and you are done.

The ASN social profile button should now appear on your blog sidebar along with the Facebook, Twitter and Google+ buttons. Not only will you be able to easily access your own ASN profile, but so will all of the visitors to your blog. You can quickly see how this works by clicking on the ASN button in the sidebar here.

Read More
Lusus

How to Upload A Blogger Template

How to upload a blogger template

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.

How to upload a blogger 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.

How to upload a blogger 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.

How to upload a blogger template: Backup / Restore window

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
Lusus

How To Create a Lomo Effect Using Gimp

How To Create a Lomo Effect Using Gimp

In the days when the use of photographic film was the norm it wasn't uncommon for the last frame on the reel to show distortions. This would include unnatural colouring, some parts being over exposed whilst other parts underexposed. Now that photographic film is not used so much, in a sort of nostalgic way, the look of such images is reproduced digitally, and is called lomographic (or lomo) photography. 

Creating a lomo effect using Gimp is quite easy and can be done in a number of steps. As with all image manipulation processes it does however need a certain amount of judgement to get colour distortions etc how you want them, and this will no doubt differ from image to image. Here however are the steps of how to create a lomo effect using Gimp.

Adjusting Colours

1/ Open your selected image in Gimp and then choose Colors > Curves.

How To Create a Lomo Effect Using Gimp: Adjusting values
  
You will see a window like the one above. With Value as the Channel select two points on the diagonal line and drag to form an 'S' shape (see below). The extent of the curve you create will depend on the image you are working on.

How To Create a Lomo Effect Using Gimp: Adjusting values

2/ Now select the Red Channel and drag the line to create another S curve (see below).

How To Create a Lomo Effect Using Gimp: Adjusting red channel

3/ Do the same with the Green Channel.

How To Create a Lomo Effect Using Gimp: Adjusting the green channel

4/ With the Blue Channel create an inverted S shape.

Adding Noise To The Image

5/ Under the layers Panel create a copy of the image so you have two layers of the same image. With the top layer active select Colors > Map > Gradient Map. Before you do this make sure the default colours of black and white are the foreground and background colours.

6/ The top layer should now be monochrome. If this layer needs adjusting select Colors > Brightness - Contrast and use your eye to create an acceptable balance.

How To Create a Lomo Effect Using Gimp: Adjusting brightness and contrast

7/ Now we're going to add some graininess to the monochrome layer. Since this layer is going to be overlayed with the bottom layer the graininess needs to be very distinct. Select Filters > Noise > HSV Noise

How To Create a Lomo Effect Using Gimp: Adding HSV noise

Start with the Value slider then move the others to get a good grainy effect.

8/ At the top of the Layers Panel click on the small arrow to the right of  Mode and select Overlay from the drop down menu. Now decrease the opacity of the monochrome layer to roughly 50% or to whatever suits your image.

How To Create a Lomo Effect Using Gimp: Select overlay

Adding Vignetting

9/ Add a new layer then select the Blend Tool from the Toolbox Panel. Black should be the foreground colour. Select FG to  Transparent as the gradient, and from the Shape drop down menu select Radial. Finally click the double headed arrow just to the right of the gradient selection area to invert the gradient. Your Tool Options for the gradient should look similar to the image below.

How To Create a Lomo Effect Using Gimp: Adding vignetting

10/ Starting at the centre of your image drag your cursor to the edge of image window so that you create a darkened area on the outer area of the layer. Change the opacity of this layer to around 50%.

11/ Create another layer. This time make white the foreground colour and click the double headed arrow again so it is no longer inverted. With the new layer active, drag the cursor from the centre to the edge of the image again to create a blurred white area. 


Reduce the opacity of this layer to something that suits your image.

You have now completed your first lomo effect using Gimp. Below are the before and after images (they compare better when viewed full size). You can possibly tell that I have been a little conservative in applying the lomo effects to this image, so I am sure with a little practise and the ingenuity Second Life creators are known for you will be able to improve on my effort.

How To Create a Lomo Effect Using Gimp: Before lomo effect

Before.....

How To Create a Lomo Effect Using Gimp: After lomo effect

and after. 

Needless to say you can use this technique on real world photographs as well as Second Life images. Below are two more before and after shots.

How To Create a Lomo Effect Using Gimp: Before lomo effect

Before....

How To Create a Lomo Effect Using Gimp: after lomo effect

and after. 

I also added a hint of motion blur to this image to give it more of a snapshot feel. Enjoy experimenting with your lomo effects and do let me know how you get on with them.

Read More
Lusus

How To Create A Neon Sign Using Inkscape

neon sign
This is a simple tutorial which will hopefully be a good introduction to anyone new to Inkscape, although it does assume some familiarity with the more common Inkscape tools. Although a neon sign can be made in other software such as Gimp, one of the advantages of using Inkscape is that you do not have to decide the final size of the image until you have completed what you are doing, as we will see.

Creating The Neon Sign

1/ Open Inkscape and resize it to fit your screen. Press '5' so that the page area fits the Inkscape window.

2/ Select the text tool to the left of the window (F8) and type the text for your neon sign.

How To Create A Neon Sign Using Inkscape

3/ From the Command Bar select the Font tool ( Shift >Ctrl >T) to choose the font for your sign and the font size. From the window that opens (see image above) select the font and font size you want to use.

The font selected for this tutorial is called Neon 80s that I downloaded from Fontspace, a website with a good selection of free fonts.

After you have decided on your font and font size click  Apply.

4/ Choose the colour for your font from the palette at the bottom of the Inkscape window. Then hit Ctrl>D to make a copy of the text object.

5/ The copy of the text object will be above the original, and we are going to use this copy to create the highlights of the neon sign. We do this by first changing the colour to white, then selecting Ctrl>Shift>( which will inset the text.

To get the highlight looking just right you may need to hit Ctrl>Shift>( a few times. Be careful however not do this too many times because the result will become unpredictable and you will need to restart this step.
How To Create A Neon Sign Using Inkscape
6/ Once you are happy with the highlight bring up the Stroke and Fill panel by hitting Shift>Ctrl>F. Now using the slider add a little blur to make the highlight more realistic, (see image above).

7/ The text of a neon sign appears to glow, so we will create this effect by adding another copy of the original text object and then, instead of using the Inset tool (Ctrl>Shift>( ), we will use the outset tool.

8/ To make a copy of the original text object make sure it is selected and then hit Ctrl>D. You may need to zoom in to make sure you have the right object selected.
How To Create A Neon Sign Using Inkscape
9/ Send the copy to the back of the other objects by hitting the Page Down key a few times. Now use the outset tool to expand the object by hitting Ctrl>Shift>) a few times, until you are happy with the appearance of the object, (see image above).

10/ Hit Shift>Ctrl>F  to bring up the Fill and Stroke panel again, and use the blur slider to make the object seem like the glow of the text layer. In the example here a blur of around 5 was used.

11/ All the neon sign needs now is a background, so select the box tool from the Toolbox to the left of the Inkscape window (or hit F4), and drag your cursor over the neon text until you have a size that suits you.

Give it a black fill, then send it to the back of the objects by hitting the Page Down key a few times. The neon sign is now complete, and we just need to export it as a bitmap.

Exporting the Neon Sign

How To Create A Neon Sign Using Inkscape

To export the neon sign,  select File>Export (or Shift>Ctrl>E) and in the window that opens you will see you can choose the size of the image to be exported, see image above). Once you have chosen the size for your image hit the Export button.

neon sign in Second Life

If your sign is to be used in Second Life, all you need to do now  is upload the image and add it to a prim. The above image shows the sign created here placed in my gallery close to the cinema, which I hope shows how effective Inkscape can be in creating neon signs, particularly when used in Second Life.
Read More
Lusus

Creating A Cubed Icon Or Logo With Gimp

Creating A Cubed Icon Or Logo With Gimp

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.

Creating A Cubed Icon Or Logo With Gimp: 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.

Creating A Cubed Icon Or Logo With Gimp

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.

Creating A Cubed Icon Or Logo With Gimp: Using wireframe mode

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.

Creating A Cubed Icon Or Logo With Gimp

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.

Creating A Cubed Icon Or Logo With Gimp: Adding a shadow

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.

Creating A Cubed Icon Or Logo With Gimp

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.

Creating A Cubed Icon Or Logo With Gimp

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

Creating A Cubed Icon Or Logo With Gimp: Completed cube with transparent background

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.

Creating A Cubed Icon Or Logo With Gimp: Rounding off edges
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.

Creating A Cubed Icon Or Logo With Gimp: Cubed Logo
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.

Creating A Cubed Icon Or Logo With Gimp: Cubed logo with background

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