How to do a PHP redirect

PHP redirect is a way to redirect pages, it sends your visitors from a page to another page using a PHP script. This kind of redirect is said to be more search engine friendly than using Meta Refresh redirect. There’s several reason webmasters need to redirect pages includes making their long url shorter or because the changes they made to their site’s directories. You can easily redirect your readers to a different page using a small snippet of PHP code (or also known as php redirect). Using this method, your visitors can be transfered to the new page witthout having to click a link to continue. Fortunately redirecting pages using PHP is an easy task.

Here’s how to do it:

• Create and name your new folder. Your folder’s name will be used as part of the url link which you are going to use for redirecting. Let’s say the name of your folder is “mypage” then the redirect link will be www.yoururl.com/mypage

• Create a php file (you can use a notepad), copy paste the following php code below into the notepad and remember to save it as index.php. Replace “your URL” with the URL where you want the redirection to take place and store the file in the folder that you just created.

• Upload the folder to your hosting account and it’s done. Test the new file in all major browsers, like this: www.domainname.com/nameofyourfolder. The redirect should be instantaneous.

Note that this method will not cloak your affiliate url in the address box. This basically just do a simple redirection.

How to use PHP include

If you have a website with plenty of pages to update, to edit each page and change it one by one will be very tedious and boring things to do. The more page you have, the more possibility that you make mistakes. Using PHP include is certainly something you need and it is very helpful because not only it enables you to uniform certain parts of your content pages, but also update them all by only editing a single file.

Before you start using PHP includes, make sure that your web host or server can handle PHP files. Secondly, when you are using PHP includes on any pages, make sure the extension of those page is “.php” instead of “.html”. By using this PHP include script, once uploaded to the web, all of your files will merge appropriately to form one page.

Here’s how the PHP code looks like:

<?php include("filename.php"); ?>

The code can be pasted into sidebars, header, tables and anywhere you like.

Change the "filename" to anything you like, to make things easier to remember, it is suggested that you give it a name which correlates to the content you will be putting in it. For example if it is “header.php” then the file should be made especially for header. If the file contains advertisements for your site, then you can name it “ads.php”.

Next, you will want to create a page where the content of this page will appear in the page that contains the PHP include code. Make sure you save it with the exact same name you assigned to the code above, otherwise the script wont work.

Sometimes the path names doesn’t work and therefore you need to use alternative way, that is using the URL in the include instead, like this:

<?php include("http://www.domainname.com/directory/filename.php"); ?>

Using this method is less efficient in terms of server resources because (just like a browser) it has to create an HTTP session, get the file and then pull it in (even both of them located at the same server). This method of course is slower than using a pathname.

You can include files with .html, .php, .txt, .asp and other extensions.

How to do a PHP redirect How to use PHP include How to redirect using meta refresh tag

Learn CSS basic codes

CSS stands for Cascading Style Sheets, is a tool to add layout to your websites. It controls the presentation of web pages. CSS provides information to the browser about how the content on the page should be displayed. CSS covers fonts, lines, margins, width, height, advanced positions and background images. It controls layout of many documents from a single style sheet, apply different layout to different media-types (print, screen, etc) and many more. Compared to HTML, CSS offers more options and is supported by all browsers today.

To structure content html is used, but to format structured content, CSS is used. CSS command consists of three parts: selector – property – value.

Selector {property: value; }

Selector comes first, followed by property and then value. Each property and its value is separated by a colon and ended with a semi-colon. They are also have to be surrounded by curly brackets. Example:

body {background-color: red;}

Selector: what html element applied in this area
Property: what will be changed to the selector.
Value: the value of what you are going to change.
Note: Don't leave spaces between property value and the units. It only works in IE but not in Opera or Firefox.

CSS can be applied in 3 ways to an html document:

• by using the html attribute style (inline) – example:
  
  <body style="background-color: yellow;">

• By inserting the CSS codes between style tag (<style>) – example:
  
  <html>
  <head>
  <title>Example</title>
  <style type="text/css">
  body {background-color: yellow;}
  </style>
  </head>

• By inserting the CSS codes in an external style sheet (a text file with the extension “.css”) and linked to the html document. The link can be created with a line of html code that is inserted in the header section of your html file (between <head> and </head> tag):
  
  <link rel="stylesheet" type="text/css" href="name-of-the-folder/name-of-the-file.css" />

We will look at the one which is the most preferred and widely used: external (the last option above). To understand how it works, you can simply copy and paste each of two of the following codes into a separate notepad and save one as “.htm” and the other as “.css” file but keep both files in the same directory or folder:

Save this to "mypage.htm":	Save this to "style.css":
<html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Hello, I’m Edy Bright</h1> </body> </html>	body { background-color: red; }

Open the .htm file by double-click it and you will see that the css file will effect the other file in terms of layout or design. You can change the CSS file to update the style of all HTML documents that linking to it.

Some other common CSS coding:

Properties and Values:

Colors and background
color:green; - (choose the color)
background-color:#ff0000; - (choose background color)
background-image:url("mypic.gif"); - (background image)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y; - (image background pattern)
Background-attachment:scroll/ fixed - (whether still image or movable)
background-position:2cm 2cm/ 50% 25%/ top right - (image background position)

Font
font-family:"Times New Roman", serif; - (what types of font will be used, a comma appears between alternate values, it means if the browser can’t find Times New Roman, it loads Serif). A comma can also separate multiple selectors.
font-style:italic;/ oblique; - (font style)
font-variant:small-caps;/ normal; - (font variant)
font-weight:bold;/ normal; - (font weight)
font-size:30px;/ 12pt;/ 120%;/1em; - (font size)

Text
text-indent:30px; - (text indent)
text-align:right;/ center;/ justify; - (text align)
text-decoration:underline;/ overline;/ line-through; - (add a line in the text)
letter-spacing:6px; - (space between letters)
text-transform:uppercase;/ lowercase;/ none;
list-style-type:circle;/ square;/ upper-roman; - (list item markers)
p:first-letter{color:#ff0000;font-size:xx-large;} – (to change the first letter of a paragraph)
p:first-line {color:#0000ff;font-variant:small-caps;} –(to change the first line of a paragraph).


Margin, Padding, Border
margin-top/ right/ bottom/ left: 100px; - (position of the margin)
or margin:100px 40px 10px 70px; - (clock-wise= top, right, bottom, left)
padding:20px 20px 20px 80px; - (padding= space between the border and content)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed; - (adding different border style from top-right-bottom-left/ clock-wise direction)
border-top/ left/ bottom-color:red; -(apply a color to only one side of a border)
border-bottom/ top/ right-style:solid; -(add style to only one side of a border)
border-top/ left/ bottom-width:thick; -(set the size of a border)
outline:green dotted thick; - (a line drawn around elements (outside the borders).
outline-color:#00ff00;/ style:dotted;/ width:5px;


position:absolute;/ relative; top:150px; left:500px; - (locating an element whether in absolute or relative position)
z-index:1;/2;/3; etc. - (To make an element become layers and the value of its property can be used as an order of which elements overlap one another)

visibility:hidden – (to hide an element, but it still take up the same space as before)
display:none – (to hide an element and it will not take up any space)
max-height:/min-height:/max-width:/min-width:100px; - (set the maximum/ minimum height and width of an element)
display:inline – (to change block element become inline)
display:block – (to change an inline element to a block element)



Selectors:

Link
a:visited - (a visited link)
a:active - (a link the moment it is clicked.)
a:hover - (when you place a cursor over a link)

Class, Id and Div
class="....." - (to specify a style to a particular element or group of elements)
id="....." - (to specify a style for a single, unique element)
span class="....." - (for adding visual features to selected parts of text)
div id="....." - (to group one or more block-level elements)

Comment
/*put your comment here*/ - (you can add comment on top of css coding to explain your code, comments are ignored by browsers)

Part 1: HTML Part 2: HTML Attributes Part 3: HTML Table Part 4: Colspan and Rowspan
What's the difference between HTML and XHTML What is CSS?

How to Modify and Delete Borders in Blogger

For those using Blogger with Minima template, you can actually remove or change the borders from the header or sidebar. But if you just simply want to change the color of your borders, the easiest way is through Dashboard --> Design --> Template Designer --> Advanced.


From there you can choose the color you like, or make the color of the border the same as your blog background in order to ‘hide’ them. After that you can press “Apply to Blog”.

To alter other border such as header, you need to go to dashboard --> Design --> Edit HTML, then search for these lines:

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center; color:$pagetitlecolor;
}

To change the size (height and witdh) of the border, you can insert the following line/s inside the curly brackets of the header-wrapper:

height:140px; (this is for the height)
width:780px; (this is for the width)

Just change the amount of pixel you want for your border.
If you want to remove the border around your image, you can just delete the whole line that i highlight in green (see below).

/* Header
-----------------------------------------------
*/

#header-wrapper {
height:140px;
width:780px;
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

In the Minima template, the below codes create the border at the bottom of your every widget including the bottom of your main post:

.sidebar .widget, .main .widget {
border-bottom:5px dotted $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

If you want your border at the bottom of your sidebar to be different from the border at the bottom of your main post, you can split the above codes like this:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

you can change the style of your border to Dots, Solid, Groove, Double, Dashed etc.
If you change the -bottom above to -top, -left, -right, that setting will apply to border only in those areas.

You can actually steal other template's border and add it to your template so that you can have similar border style from the template you taken from.

Howto make posted image unclickable

If you upload an image or picture to your blog especially Blogspot, the image uploaded will be clickable which means that visitors will be able to click the picture to enlarge it or find out the image url. Many people do not know that their picture can be hacked in order to be unclickable, this is a useful hack for people who want their image not to be clickable for certain reasons.