Archive for the ‘Tutorials’ Category

Improve your index pages pagerank

Sunday, August 26th, 2007

Most people dont realise that when u dont have your .htaccess file setup properly for incoming links u can have 2 different page ranks for your domain.

for example:

Code:

http://www.bluepearl-design.com

Code:

http://bluepearl-design.com

May have different page ranks even though their the same page. Google will even sometimes penalise you for double content

Here is a way to use the .htaccess file so that all URLs resolve to just one domain. Please note this is for Apache servers

Code:

RewriteEngine On RewriteCond %{HTTP_HOST} !^www.bluepearl-design.com [NC] RewriteCond %{HTTP_HOST} !^$  RewriteRule ^(.*) http://www.bluepearl-design.com/$1 [L,R=301]

The first line turns on the rewrite engine so the code will work

The second line checks to see if current host is TRUE or FALSE

The third line is pretty much the same as the 2nd, these lines are testing to see what the current host is.

The fourth line is executed if the previous two conditions return TRUE

I hope this tutorial is helpful for members

Also because i have spent alot of time in the last few months optimising my sites for SEO, studying online books, reading SEO forums i have become pretty knowledgeable with web site SEO (Search Engine Optimisation) im going to create a new category on these forums for members who would like to ask questions or get advice on how to better improve their sites traffic.

 Here is the code to rewrite all incoming links to ‘domain.com/index.php’ or domain.com/index.html’ to domain.com

Code:

RewriteEngine On RewriteCond %{REQUEST_METHOD} GET RewriteCond %{THE_REQUEST} "T /index.php" RewriteCond %{QUERY_STRING} ^$ RewriteRule .* http://www.bluepearl-design.com/? [L,R=301]

This code used with the code in the first post will cause all incoming links to

Code:

http://domain.com domain.com http://www.domain.com/index.html http://domain.php

to all point to

Code:

http://www.domain.com

This will increase your pagerank because google will not have to divide the pagerank between all the various different domains that point to the same page.

Share this post
del.icio.us Digg Furl Reddit Ask BlinkList blogmarks BUMPzee Blogg-Buzz Google Ma.gnolia muti Netscape Newsvine PlugIM ppnow Rojo Shadows Simpy Slashdot Socializer Sphere Spurl StumbleUpon Tailrank Technorati Windows Live Wists Yahoo! Help

Creating a new phpBB template

Thursday, July 19th, 2007

This tutorial will teach you how to create a new  template directory for phpBB2.

  1. Copy your templates/subSilver/ directory to templates/YourTemplate/ including all subdirectories.
  2. In all .tpl files inside templates/YourTemplate/ replace all instances of “subSilver” with “YourTemplate”. You can do that in any text editor with search/replace feature. Make sure that “YourTemplate” is exactly the same as your directory name. It is case-sensitive, so “YourTemplate” and “yourtemplate” are different names.
  3. Rename subSilver.cfg and subSilver.css to YourTemplate.cfg and YourTemplate.css
  4. Open theme_info.cfg and replace all “subSilver” with “YourTemplate” (including all $subSilver[0]… with $YourTemplate[0])
  5. Save all modified files. You’ve got yourself a new template. Now you can install it in admin control panel (this document will help you) and edit colors in admin control panel and edit tpl files.

Please note:

  1. New template name cannot contain any spaces or dashes in directory name - otherwise it will cause errors and won’t install.
  2. Template name is case-sensitive. Make sure that YourTemplate inside .tpl files and theme_info.cfg and in filenames of .cfg and .css files are exactly the same as directory name.

Originally written by Cyberalien @ phpBB.com

Share this post
del.icio.us Digg Furl Reddit Ask BlinkList blogmarks BUMPzee Blogg-Buzz Google Ma.gnolia muti Netscape Newsvine PlugIM ppnow Rojo Shadows Simpy Slashdot Socializer Sphere Spurl StumbleUpon Tailrank Technorati Windows Live Wists Yahoo! Help

mySpace Layout Tutorial

Friday, June 22nd, 2007

In the last few months in my spare time i have been playing around a little bit with mySpace templates and i must admit trying to create a clean style is hard. If you think just because you can design Websites from scratch using only CSS this task will be easy then think again, unlike most stylesheets where you can use DIV and ID tags the CSS in mySpace is more CSS hacks for table layouts.

 For example:

table table table {
 border:1px solid orange;
 background-color: orange;
 }

table table table td {
 border:1px solid black;
 background-color: black;
 } 

In this tutorial i am going to attempt to define all the tables using  bright colors so we can see  exactly how the layout works.

Because i am not sure how this will look myself im not sure how this Tutorial will end up, maybe helpful maybe not lol.

First of all im going to test the below code:

table {
 border:1px solid red;
 background-color: red;
 }

table td {
 border:1px solid blue;
 background-color: blue;
 }

Which looks like this:

Myspace tutorial

Where Blue is table td and red is table.

Most of my reason for creating this tutorial was to have a resource for myself which i could look back on and see in screenshot form how the page layout works with CSS. What im going to do now is just add a screenshot and code for every table. And at the end i will add all the CSS together and see how it looks then. You can also see a preview here on my test mySpace account. www.myspace.com/bluepearltest

The 2nd Table

table table {
 border:1px solid green;
 background-color: green;
 }

table table td {
 border:1px solid yellow;
 background-color: yellow;
 }

myspace tutorial table table td

The 3rd Table

table table table {
 border:1px solid orange;
 background-color: orange;
 }

table table table td {
 border:1px solid black;
 background-color: black;
 }

myspace layout tutorial

The 4th Table

table table table table {
 border:1px solid pink;
 background-color: pink;
 }

table table table table td {
 border:1px solid purple;
 background-color: purple;
 }

myspace tutorial tables

The 5th Table

table table table table table {
 border:1px solid cyan;
 background-color: cyan;
 }

table table table table table td {
 border:1px solid brown;
 background-color: brown;
 }

myspace tutorial

The 6th Table

table table table table table table {
 border:1px solid yellow;
 background-color: yellow;
 }

table table table table table table td {
 border:1px solid green;
 background-color: green;
 }

myspace layout tutorial

 Combined CSS for all mySpace tables

 And this is a screenshot of all the above joined together.

final myspace layout with css

Im hoping that these screen shots will help others as i hope they will help me to properly understand the mySpace CSS layout. If mySpace had the same built in CSS editor like vBulletin life would be alot easier for mySpace template designers.

Check out http://www.myspace.com/bluepearltest for this tutorial in action.

Share this post
del.icio.us Digg Furl Reddit Ask BlinkList blogmarks BUMPzee Blogg-Buzz Google Ma.gnolia muti Netscape Newsvine PlugIM ppnow Rojo Shadows Simpy Slashdot Socializer Sphere Spurl StumbleUpon Tailrank Technorati Windows Live Wists Yahoo! Help

Choosing a DOCTYPE and Validation

Tuesday, June 19th, 2007

So that your site can be properly validated for standards - each page on your site requires a document type declaration which begins at the top of every XHTML page and and tells a validator which version of HTML to use in checking the document’s syntax.

The 2 most popular DOCTYPEs i have seen for web designers wanting to accomplish 100% validation is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 

and

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Where the first one declares the page XHTML 1.0 Strict and the second one declares the page XHTML 1.0 Transitional.
Of the 2 i personally use Strict now as i find it alot more friendly when coding complex sites in 100% CSS

There is also HTML DOCTYPEs for developers not using XHTML but now a days i think everyone serious about Web Site validation is using XHTML

Visit this link to check your site for validation http://validator.w3.org/

 The best thing about using this validation service is that not only does it check your script for validation it will also let you know if you have forgotten to end an DIV tag or TABLE tag. Very good for bug testing.

The most important things to remember when validating XHTML is:

  • write your code in lowercase
  • never skip ending tags like </p> or for images <img src=”" mce_src=”" /> or <br />
  • elements must always be nested properly
  • elements must always be closed
  • nested lists always use an ending tag </li>
  • XHTML documents must have one root element
  • Use CSS as much as you can for your elements.
  • ID classes can only be used once per document, use CLASS for multiple tags

Its 2am in the morning now, so i might add some more information at a later date.

Share this post
del.icio.us Digg Furl Reddit Ask BlinkList blogmarks BUMPzee Blogg-Buzz Google Ma.gnolia muti Netscape Newsvine PlugIM ppnow Rojo Shadows Simpy Slashdot Socializer Sphere Spurl StumbleUpon Tailrank Technorati Windows Live Wists Yahoo! Help
Bluepearl Network © 2004-2007 - Designed by Bluepearl Design