bloggerlayoutselect

How to Install a Blogger Template

This article was written by Richard Robbins 

While Blogspot’s default themes are nice enough, most bloggers would rather customize their blogs to accurately represent what they’re blogging about.  Fortunately, the Blogger control panel offers a way to quickly install Blogger templates.

Finding a Blogger Template
There are many web sites that offer free or paid Blogger Templates.  WebsiteTemplateDatabase.com offers a significant variety of Blogger Templates.  Performing a search for “blogger templates” will turn up hundreds of web sites that you can browse to find a template.

Blogger templates typically come in the form of XML files.   Sites that offer Blogger templates normally have a download link that will allow you to save the template on your computer.  After you have saved the template XML file, installing a Blogger template involves following these steps:

1) Login to your Blogger account.  If you don’t yet have a Blogger account, you’ll need to create one.  Blogger accounts are free and only require an email address to get started.

2) Click on the “Layout” link corresponding to the blog for which you want to install a new template.

3) From the Layout tab, click on the “Edit HTML” link.  This will take you to the screen that allows you to upload the XML file from your computer that represents the Blogger template you’re installing.

4) Click on the “Browse” button at the top of the page.  Using the browse window, find the XML file for your new template.  Select the XML file, and click “Open”.  The browse window will close.  Now click “Upload” to install your new template.

5)  If your new template was installed without any problems, you will see a message that says “Your changes have been save.” Followed by a link to view your updated blog.  Click on the link to verify that your new template is working the way you expect it to.

Using HTML Attributes

HTML tags provide the foundation for web page design.  To provide more flexibility with HTML design, attributes have been defined for HTML tags to alter the behavior of any particular HTML tag.  There are many instances while designing a web page when you will want to change the default behavior of the tag.  For instance, you might want to change the background color of the whole page or some section of the page.  You might want to change the alignment of a section of text or apply a unique style to a tag’s representation.  There are many instances when you would want to identify an HTML tag by giving it a name to identify it so that it can be referred to elsewhere.  Some tags, such as the one used to present an image (<img>) don’t do much of anything without having at least one attribute defined.  In the case of the image tag, you would need to have an attribute that tells the browser where the find the image to be displayed.

Some Examples of HTML Attributes
Using bgcolor and background with the body tag
A very visible example of the effect of an attribute used in an HTML tag is changing the background color or image for the entire body of a web page.  Browsers understand that the contents of the <body> tag will be displayed on the main part of the web page.  By default, the background used by browsers when they encounter the <body> tag is white.  If you want a background color other than white, you would use the bgcolor attribute.  The following tag changes the background color of a web page from the default white to gray:

                <body bgcolor=”gray”>

If you want to have an image comprise the background for a web page, you could use the following code:

                <body background=”/images/background.gif”>

This example assumes that you have a folder on your web server called images, and that inside that folder there is an image named background.gif.  In the case of a background image, if the image isn’t large enough to fill the entire background of your web page, the browser will repeat the image vertically and horizontally to fill the background.

Linking using the anchor tag
The world wide web’s fundamental usefulness hinges on its ability to link documents, providing web users with a quick connection from one page to another related page.  Linking documents in HTML is done using the anchor (<a>) tag.  The anchor tag by itself doesn’t tell the browser where to link.  Instead, you have to include the href attribute as in the following example:

                < a href=http://www.oursponsorswebsite.com>Visit our sponsor</a>

This piece of HTML code tells the browser that the text “Visit our sponsor” is the anchor text for a link.  When the user clicks on the anchor text, he is taken to the url www.oursponsorswebsite.com.

Displaying a picture using the image tag
HTML pages would be pretty boring without the use of images.  The need to tell the browser where to find an image is a good example of how to use HTML attributes.  Images are included using <img>.  Similar to the anchor tag example above, using the <img> tag alone wouldn’t suffice.  The image tag attribute “src” is required to tell the browser where to find the image to be displayed, as in the following example.

                <img src=”/images/logo.gif” width=”150”>

This block of code tells the browser to place an image in the document.  The browser is instructed to get the logo.gif image from the images folder located in the top level folder for the document.  You also notice a width attribute defined in the tag.  This constrains the image to be 150 pixels wide.  Conveniently, the height of the image is constrained proportionally when the width attribute is defined.

HTML Attributes Reference
Don’t feel like you have to memorize all the HTML tags and their corresponding attributes.  Instead, it is convenient to access a reference when trying to determine which attributes can be used with particular HTML tags.   The official definition for HTML tags and attributes can be found at www.w3.org.  You can also find other resources for understanding the same information by using a search engine to search for “html tags” or “html attributes”

Beyond HTML Attributes
In the mid-1990’s, a methodology called Cascading Style Sheets (CSS) was developed for use in web pages to make them more streamlined.  CSS is a standard for defining the layout and formatting for a web page.  Many of the attributes that were commonly used with HTML tags before CSS came around are now handles by CSS definitions.  For designers unfamiliar with CSS or who, for whatever reason, don’t choose to use CSS, HTML attributes that overlap with CSS definitions can still be used to change the behavior of HTML tags.  However, to be considered vogue in the world of web design, it is recommended that you learn and use CSS.

Link to WebsiteTemplateDatabase.com

Do you like what you see on our site?  Would you like to share it?  We’d be glad to have you link your blog or website to ours.  You can use any of the following code sections to link to us, or you could create your own custom link.  The words listed in the link text (between the anchor tags) are the keywords that are relevant to WebsiteTemplateDatabase.com.  Using those keywords in your link helps us rank higher in the search engines when people do a search for the keywords contained in the link.  If you want to understand how this all works, see our tutorials on search engine optimization.

Here you go…

Free Blogger Templates
<a href=”http://www.websitetemplatedatabase.com”>Free Blogger Templates</a>

 Free Website Templates
<a href=”http://www.websitetemplatedatabase.com”>Free Website Templates</a>

Website Tutorials
<a href=”http://www.websitetemplatedatabase.com”>Website Tutorials</a>

Photoshop Tutorials
<a href=”http://www.websitetemplatedatabase.com”>Photoshop Tutorials</a>

Illustrator Tutorials
<a href=”http://www.websitetemplatedatabase.com”>Illustrator Tutorials</a>

html-example

Introduction to HTML

HTML (Hypertext Markup Language) is the lingo of the internet.  It is the medium for web designers to essentially explain to web browsers how to present information to users of the Internet.  Using a reference to the former predominant information medium, newspapers, you can think of HTML in the context of a newspaper editor determining the typesetting and layout for an upcoming circulation.  The design staff would spell out page formats for various parts of the newspaper by determining fonts, positions, image locations, section layouts and other details.  The delivered product would be the result of the determination by the designers to use a size 50, Times New Roman font for the newspaper’s title, to include certain pictures and captions associated with stories and headlines, and to organize other aspects of the newspaper’s layout according to a model.

HTML works similarly.  The vocabulary understood by browsers includes markup tags such as <b> to bold text, <u> to underline text, <p> to create a new paragraph, and <ul>/<li> to create lists.  HTML obviously has much more capability than a newspaper.  The ability to quickly move between pages by following web links is a major advantage that web pages and the internet in general offer as an information medium.  Anyone who’s used the internet to check email, make a payment, or look up an address or phone number knows that HTML and related web technologies facilitate significant interaction between the user and the information supply.

A Simple Example
This exercise will give you a basic introduction to how HTML works.  On your computer open the Notepad program by going to Start Menu->All Programs->Accessories->Notepad.  When the Notepad editor comes up, type (or paste) the following:

<html>
   <head>
    <title>My first web page</title>
  </head>
  <body>
     <h2>My First Web Page</h2>
     <p>This text makes up the first paragraph.  You can’t see the paragraph tag itself, but you can tell that this section of text is set off from the next section of text by a paragraph tag.  The browser doesn’t show the tags themselves.  Instead, it uses the tags as instructions on how to present the information.</p>

    <p>This is another paragraph.  By default the text in this paragraph is separated from the previous paragraph by a line of white space, so that it appears double-spaced, similar to how two paragraphs would be separated in a typical document.</p>

    <p>Enter text here:  <input type=”text” width=”50″ />

    <p>What’s your favorite food?
                <select>
                <option>Hamburgers</option>
                <option>Pizza</option>
                <option>Mac and Cheese</option>
             </select>
  </body>
</html>

Now save the file using the name “html-example.html”.  After you save the file, open a web browser (Internet Explorer and Firefox are the two most popular), then open the file you just created by using the File->Open… or File->Open File… command in the browser.  When you open the html-example.html file in your browser, you should see something like this:

 

So how did all those tags turn into what you see in your browser?  I will explain.

HTML Tags
HTML segments are typically opened by a start tag and closed by an end tag.  The first tag you’ll see in an HTML page is the <html> tag.  At the end of the page, you’ll see a tag like this </html>.  The ‘/’ included in the end tag tells the browser, “This is where the html tag ends.”  Although it isn’t always necessary to close all HTML tags that have been opened, it’s best to explicitly provide a closing HTML tag for each tag opened.  HTML tags can be, and very often are, nested inside of other tags.  For example, every HTML tag on a page is nested inside of the <HTML></HTML> tag.

There are two main tags that divide an HTML document into its major sections.  After the <html> tag is the <head> tag.  The information enclosed in the <head> tag normally deals with describing what the HTML page is about.  In our example, you see a <title> tag enclosed within the <head></head> section.  You notice that the text inside the <title> tag is displayed at the top of the browser, but not actually in the main section of the web page itself.

HTML
           -> Head
           -> Body

The <body> tag is the section that contains the functional content of the web page.   Most of the interaction between a web page and its users occurs in the <body> section of an HTML document.

Common HTML Tags
Following our example above, the paragraph (<p>) tags tell the browser to set off the text contained within them as separate paragraphs.  You’ll notice that there is a line of white space between the first and second paragraphs on the page.  That’s because the browser is following the formatting standard for <p> tags.

The last two items included in our example HTML document are interesting.  To allow for interaction between the user and the web page, various kinds of user input tags exist as part of the web markup language.  The first one in our example, <input type=”text” width=”50”>, allows the user to enter text that can be sent to the web server and processed.  The ‘type’ attribute of the <input> tag tells the browser which kind of input box to create.  The ‘width’ attribute of the <input> tag tells the browser how many characters wide the input box should be.

 The last item in our HTML example, a drop-down box, is created using the <select> tag and associated <option> tags, which are used to create a list of choices within the <select> box.

There are dozens of HTML tags that can be used on a web page.  To find a comprehensive list of the HTML tags understood by browsers, you can visit www.w3.org or do a web search for “html tags”.

Beyond HTML

Although there is a substantial degree of design flexibility that can be realized using HTML tags alone, the advanced capabilities of browsers and the full functionality World Wide Web goes well beyond HTML.  Web programming languages such as PHP, ASP, and Java (JSP and Servlets), scripting languages such as JavaScript, and multimedia platforms such as Adobe Flash give web pages much more animation than could be achieved with HTML alone.

Visual Downloader Documentation

Visual Downloader is a download tool that allows Joomla! administrators to associate an image with a downloadable file so that users can preview what they are downloading.

Visual Downloader is packaged as a .zip file, which can be installed using the standard Joomla! installation tool.

Once you have installed Visual Downloader, you can create categories and sub-categories for your downloadable files.  When you create downloadable files through the Visual Downloader downloadable file manager, you assign each of them to one of the categories you have created.  If you upload an image preview file for a particular download, that image preview will be associated with your download file to give users a preview of the file(s) they are downloading.

Visual Downloader exists as a Joomla! component.  It can be linked to as a Joomla! Menu Item Type.  When this method is used, the menu item links to a page that includes all of the downloadable files you have created.  If you want to create a link to a Visual Downloader category instead, you would need to change the Menu Item Type from Internal Link->Visual Downloader to External Link and insert the URL of the Visual Downloader category you want to link to, for example:  index.php?option=com_download&view=download&cid=[categoryId], where categoryId is the id of the category you want to link to.

Illustrator Tutorial: Arching Text and other Warping Options

I worked with Photoshop for years before I did anything with Illustrator.  In fact, for a long time I avoided Adobe Illustrator.  It wasn’t that I didn’t want to learn how to use it.  Illustrator was just so different from Photoshop it seemed.  But once I was finally forced to start using Illustrator I learned that it is actually quite similar to Photoshop.  Many of the tools are similar, and most of the tool bars are the same.  There are definitely advantages of each.

There are some things that are way different however.  Sometimes it is frustrating trying to figure out the “new way” of accomplishing a task that seems so simple in Photoshop.  One of these cases is with arching text.  In Photoshop it is easy to arch text using the Text Tool, so that is naturally how I tried to arch text in Illustrator.  It is very different however.  This is how to arch text in Adobe Illustrator.Select the Text Tool from the Tools Menu. 

Text Tool

Write the text you want to arch.  You will need to adjust the font and size of your text now before you arch it, so make the necessary changes now using the Type Menu.  For this example I am going to use Garamond font at 72 pt.  I am also going to stretch the font 140% tall.  You can do this by clicking on Character in the Type Menu.  The Character Panel becomes available with more options for adjusting text.  Generally I have found that arched text looks better when it is stretched taller.

Character Panel

Once the text looks how you want it, choose the Selection Tool which is the black arrow on the Tools Menu. 

Selection Tool

Click on the text to select it.  A blue box with appear around the text.

Selected Text

In the File Menu select Effect>Warp>Arch. 

 Effect, Warp, Arch

The Warp Options Window will pop up.  I am going to Arch my text 20%.

Warp Options

As you can see, there are several other options here for warping your text.  You can Arc, Bulge, Shell, Flag, Wave, Fish, Rise, Fisheye, Inflate, Squeeze, or Twist your text.  If you insert a negative number for the Bend in the Warp Options Window the text will arch downward instead of upward.  You can also distort the arch effect by changing the percentages in the Distortion section.  Again a negative value will distort the text in the opposite direction a positive value will.

If you select Preview in the Warp Options Window, you will be able to see how your warping selection will affect your text before you apply it.  If your text did not turn out how you want it, don’t worry, you can still make changes.  To change the effect simply go to Effect>Warp>Arch again.  You can also select the Text Tool and make changes to your text.

Arched Text

 

Photoshop Tutorial: Separating Colors for Screen Printing

 


About the author:  Lisa is a part-time graphic (etc.) designer when she’s not being a mommy and helping her husband sell ultrasound therapy machines in their online store.


 

If you are new to screen printing, you may not know where to begin when it comes to getting artwork ready for printing.  Separating images into colors is an important step.  Luckily Photoshop makes this pretty easy.  I am going to show you how in just a few easy steps.

Separate Color Original Image

Open your picture in Photoshop.  Now select the magic wand tool in the tools panel.  Use this tool to select all of one color in the image.  If you need to select more than one area, hold the shift key down as you click on the picture.  You will see “dancing ants” around the selected areas.  If you click on the wrong area, simply press Ctrl+Z to undo the last move, or right click and select Subtract From Selection. 

Magic Wand Tool

I am going to select the red color first.  Then I am going to right click and select Layer via Copy.  This will create a new layer with just the red color in it.

Layer via Copy

If you look at the layers panel now you will see two layers.  Unclick the eye icon next to Layer 1 to hide the layer.  You should be able to see just the red layer left in the image.  I am going to change the name of this layer to Red by double clicking on the name and replacing the text.

Hide Background

Red Layer

If everything looks right, click the space where the eye icon was before to make Layer 1 reappear.  Follow the steps of selecting a color and Layering via Copy again until all colors are represented in their own layers.  Each time you select a new color for layering, you will need to make sure Layer 1 is active.  You can tell because that layer will be highlighted in blue in the layers panel. Layer 1 needs to be active because this is where all the colors reside originally.  If a different layer is active then when you try to use the magic wand tool to select a color, it will not work correctly because the color you are selecting is not present in the active layer.

Separated Colors

The blue layer is a little more complicated than the other layers.  First of all, I need to make sure I don’t forget the areas inside the letters of STONY BROOK.  I will zoom in when I select these areas to make sure I don’t miss anything.  Also, if I use the magic wand to select TM it will probably not look crisp when screen printed.  So I am not going to select this when I layer the rest of the blue.  Instead I am going to create a new layer and use the text tool to rewrite TM.  I am going to select Arial font and sent the type at 10pt.  Write TM in black and move the TM to the correct location on this image.  I am using a different color than the TM was originally written in so it is easy to see if the font is the right size, etc.  It looks like this font is a perfect match.

I am now going to hide all the layers in the layers panel except the blue layer and the TM layer.  Right click in the layers panel and select Merge Visible.  TM and the blue color are now together in one layer.

Merge Visible

I need to create registration marks now so the layers are easy to line up when screen printing.  Use a thin font like Arial and write the + sign in black in three corners of the image.  Use a font size that is easy to see but not too thick or it will be hard to line up.  The registration marks need to be far enough away from the image that they do not interfere with printing, but still close to the picture.  Once you print a few logos you will get a feel for how to create and place these marks.  In this example I used a 48pt font.

Registration Marks

Now select the blue layer.  In the file menu go to Image>Adjustments>Levels.  The levels options window will pop up.  Under Output Levels: there is a black and white bar with two arrows underneath.  Click on the white arrow and drag it all the way to the left end of the bar.  This will turn the blue layer black.

Adjustments

Adjust Output Levels

Do this with each layer until each layer is black.  Now you are ready to print.  You will want to print each color layer separately in black with the registration marks on each print.  Below are picture of how each printout should look.  Good luck printing!

Separated Colors

Final Tip: In this example it would actually be a good idea to use the entire logo to print the dark blue layer.  This is the layer I would print first when screen printing.  If you choose to do this, it will prevent the shirt you are printing on from showing through even if the screens are registered slightly off.

 

Finding the Right Host for Your Web Site

With the proliferation of the Internet, there are so many web hosts to choose from that it would be impossible to shop even a significant percentage of them.  However, finding the right web host can be critical to the success of your business, especially if your business is predominantly online.   Hosting packages can start as low as $4.95 per month for shared environments (I’ll explain later).  On the other end of the spectrum, established companies often budget thousands of dollars each month to web servers and related costs.  The type of hosting your business needs and the corresponding amount you’ll pay for that level of service depend upon what you are hoping to accomplish with your web site(s).  Here are a few tips and scenarios that will help you choose the web hosting platform that suits your needs.

“Free” Hosting
Visit any of the thousands of the Blogspot.com blogs that post Google AdSense or other affiliate ads, and you can see that there are many people who make at least some portion of their income by taking advantage of the free hosting accounts offered by blog hosts.  Setting up a blog-formatted website is simple and straight-forward.  All you need is an email address and an idea.  Because most of these free hosting accounts run on high performance web servers, it’s a rare case that your blog account and blog site would be down.  However, if you are trying to present yourself as a legitimate company, a serious web site with your own domain name and custom web site are essential.

Shared Hosting
If your web site is on a shared hosting plan, it sits on a web server that likely services anywhere from a few web sites to hundreds of them.  The biggest advantage of a shared web hosting plan is obviously the low cost.  Shared hosting plans are good for entrepreneurs who are prototyping their ideas to see if they can get them off the ground.  When my first internet business was young, I wanted to keep my costs down so that the significant investment was my time.  I chose a shared hosting plan that cost me less than $10.00 per month.  As the business grew and it became more critical to keep the site up constantly, we outgrew the shared hosting environment, and our host allowed us (as most gracious web hosts do) to transition to one of their Virtual Private Server accounts. 

Because most users of shared hosting accounts aren’t a skilled at administrating web hosting environments, most of the technical details (configuring the web server, etc.) are handled by the web host’s employees.  This simpler arrangement can be beneficial to people who don’t want to get bogged down in the details of configuring email accounts and databases and Apache web server files.

The main drawback for shared hosting plans is that they are typically not as reliable as other plans.  There is no way to tell (in most cases) what other web sites are sharing your server.  If you have the misfortune of being neighbors with an image download site that has tons of visitors, your web site is very likely to experience slow load times and periods where it’s inaccessible.  It can be frustrating to operate an online store and consistently know that your customers cannot even find you.  The downtime can even affect your search engine rankings.  If the Googlebot comes to crawl your site only to find that it’s unresponsive, you’re likely to get dropped in the search rankings.  In my experience, the technical support available to shared hosting plans drops a few levels from the attention given to plans that cost more.   If your web site is relatively new and doesn’t get a ton of traffic, this scenario may be okay for you.  However, if you cannot afford to have downtime, be prepared to pay more for hosting.

Virtual Private Server
A Virtual Private Server (VPS) is an upgrade to shared hosting.  It typically costs about $40-$60 per month.  VPS accounts give users greater access to the nuts and bolts web server account.  Often VPS accounts allow lower-level functionality such as the ability to use an ssh program to connect to a Linux VPS.  VPS accounts typically have quicker and better response from the web host’s technical support than shared plans.  The selling point of VPS accounts is that they don’t openly share all the resources (memory, CPU, bandwidth, etc.) that shared accounts do.  However, with a VPS setup, your web site is still sitting on the same computer as other web sites over which you have no control, so there can still be periods of slow response times and downtime.

Dedicated Server
Getting a dedicated server is like buying your own home and setting it up the way you want it.  At the low end, the price tag for owning a dedicated server is about $200.00 per month.  When you purchase a dedicated server plan, you are essentially renting a computer in your web hosts data center.  Dedicated servers give you a lot more control of your web site’s resources.  You can set up Apache the way you prefer it, and you can install extensions per your requirements.  With the low-level access comes responsibility, though.  Letting a novice mosey around on your dedicated server account could result in the destruction of one or more web sites being hosted there just by running a simple command from the black box.  If you think your web site(s) merits a dedicated server, make sure you’ve got someone capable of managing the setup.

Which host?
The types of web hosting accounts mentioned above are pretty standard in the web hosting world.  Despite the similarities between the types of accounts, there are often significant differences among hosting providers.  Before I settled on the host I use now (HostGator.com), I had to date and dump at least three other hosting companies.   Here are some things to look out for when considering who you should choose to host your site.

Reputation
It’s worth spending time checking the ratings on the host you are considering.  Nowadays it’s very easy to get the dirt on most companies.  There are several web host review sites online.  Reading the experiences of those who have used the host’s service can serve to settle your mind about committing or provide helpful warnings about the company you are considering.  One thing to remember when reading reviews is that the source of a review can often be a competitor trying to sabotage a host’s reputation, or on the other hand, nothing keeps a web hosting company from funneling employees to review sites to pat their backs in public.  Try to find objective reviews that list facts and details when checking out a potential host.

Technical Support
Before choosing a host, it’s probably a good idea to speak with their technical support to find out if they know what they’re doing.  Even though I have a pretty extensive background in web hosting related technologies, I still find myself needing to lean on technical support from time to time.  I’ve used many hosting companies whose technical support seem to be guessing, or who are simply reading scripts when they’re asked technical questions.  Before you commit to a hosting provider, it might help to ask some pertinent questions of the technical support staff, almost as if you’re interviewing an IT employee.  After all, that’s essentially what they’ll become.  Most worthwhile hosting providers have an online chat tool that allows you to easily access their highest level support people.

Hopefully you’ve learned some things from this explanation about web hosting.  Good luck with your web site and your business.