birghtyoursite » SEO Friendly

use php to get google page rank

admin — Tue, 01 Jun 2010 17:37:47 +0000

Since the google not give a API or interface to get the google page rank, we have to use google toolbar to get the PR. In order to use php to query toolbarqueries.google.com to the get PR, I did a search ,but most of the codes are too old and can’t use or not work well, at last i got following script works well.

use php to get google page rank

there is all the codes :


function StrToNum($Str, $Check, $Magic)
{
    $Int32Unit = 4294967296;  // 2^32
 
    $length = strlen($Str);
    for ($i = 0; $i < $length; $i++) {
        $Check *= $Magic;
        //If the float is beyond the boundaries of integer (usually +/- 2.15e+9 = 2^31),
        //  the result of converting to integer is undefined
        //  refer to http://www.php.net/manual/en/language.types.integer.php
        if ($Check >= $Int32Unit) {
            $Check = ($Check - $Int32Unit * (int) ($Check / $Int32Unit));
            //if the check less than -2^31
            $Check = ($Check < -2147483648) ? ($Check + $Int32Unit) : $Check;
        }
        $Check += ord($Str{$i});
    }
    return $Check;
}
 
//--> for google pagerank
/*
* Genearate a hash for a url
*/
function HashURL($String)
{
    $Check1 = StrToNum($String, 0x1505, 0x21);
    $Check2 = StrToNum($String, 0, 0x1003F);
 
    $Check1 >>= 2;
    $Check1 = (($Check1 >> 4) & 0x3FFFFC0 ) | ($Check1 & 0x3F);
    $Check1 = (($Check1 >> 4) & 0x3FFC00 ) | ($Check1 & 0x3FF);
    $Check1 = (($Check1 >> 4) & 0x3C000 ) | ($Check1 & 0x3FFF);
 
    $T1 = (((($Check1 & 0x3C0) << 4) | ($Check1 & 0x3C)) <<2 ) | ($Check2 & 0xF0F );
    $T2 = (((($Check1 & 0xFFFFC000) << 4) | ($Check1 & 0x3C00)) << 0xA) | ($Check2 & 0xF0F0000 );
 
    return ($T1 | $T2);
}
   //--> for google pagerank
/*
* genearate a checksum for the hash string
*/
function CheckHash($Hashnum)
{
    $CheckByte = 0;
    $Flag = 0;
 
    $HashStr = sprintf('%u', $Hashnum) ;
    $length = strlen($HashStr);
 
    for ($i = $length - 1;  $i >= 0;  $i --) {
        $Re = $HashStr{$i};
        if (1 === ($Flag % 2)) {
            $Re += $Re;
            $Re = (int)($Re / 10) + ($Re % 10);
        }
        $CheckByte += $Re;
        $Flag ++;
    }
 
    $CheckByte %= 10;
    if (0 !== $CheckByte) {
        $CheckByte = 10 - $CheckByte;
        if (1 === ($Flag % 2) ) {
            if (1 === ($CheckByte % 2)) {
                $CheckByte += 9;
            }
            $CheckByte >>= 1;
        }
    }
 
    return '7'.$CheckByte.$HashStr;
}
        //get google pagerank
function getpagerank($url) {
    $query="http://toolbarqueries.google.com/search?client=navclient-auto&ch=".CheckHash(HashURL($url)). "&features=Rank&q=info:".$url."&num=100&filter=0";
    $data=file_get_contents_curl($query);
    //print_r($data);
    $pos = strpos($data, "Rank_");
    if($pos === false){} else{
        $pagerank = substr($data, $pos + 9);
        return $pagerank;
    }
}
function file_get_contents_curl($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_URL, $url);
    $data = curl_exec($ch);
    curl_close($ch);
 
    return $data;
}
?>

How to use it

Save the previous codes to a pr.php , the test.php


include "pr.php";
$url='http://www.brightyoursite.com';
echo "$url  PR is ". getPagerank($url) ;
?>

Source File

php get google page rank

live demo

Update

Google have updated the pr search url,please change

  $query="http://toolbarqueries.google.com/search?client=navclient-auto&ch=".CheckHash(HashURL($url)). "&features=Rank&q=info:".$url."&num=100&filter=0";

 $query="http://toolbarqueries.google.com/tbr?client=navclient-auto&ch=".CheckHash(HashURL($url)). "&features=Rank&q=info:".$url."&num=100&filter=0";

nice web font with google font api

admin — Fri, 28 May 2010 11:25:01 +0000

Are you still use flash and images for the art font in your web? if so you should know the magic of Google Font Directory and Google Font API , you can use all the font in the Google Font Directory , also it’s very easy to install.

What’s google font api

Google Font API helps you add Google Font Directory web fonts to any web page.It provide high quality open source fonts,works in most browsers,also as other gooles services it’s very easy to use.

Add google font api to your site

First,you need add the google font css,for instance:

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

this import the Tangerine font style,but if you want to use multiple fonts,for example you need add 1 more font Inconsolata,the css link should be

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata">

then you need apply the css style to the element you want

CSS selector {
  font-family: 'Font Name', serif;
}

or use a inline css

 style="font-family: 'Font Name', serif;">Your text>

let’s see a live sample

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/* add this in the header*/
 
  style="font-family: 'Tangerine', serif;font-size:36px">Making the Web font  looks nice!>
/* add this in the body */

result is:

Making the Web font looks nice!

this sentence is ordinary text, so it will not effect the other style (like color,text-shadow….) you add for this sentence .

Complex sample

I think you may love it now,let’s see what’s more the google font api can do?The google font api provide more options for the font style, like italic or bold,here is the rules
"
To request multiple font families, separate the names with a pipe character (|).
the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,)
"
also for weights, you can alternatively specify a numerical weight; for example

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold|Tangerine:700

this means load Cantarell italic font ,Droid+Serif blod font and Tangerine font with font weight 700.
the live sample

 style=" font-size:30px ">Enjoyed it,Happy reading!>
 style="font-family:'Droid Serif';font-size:30px ">Enjoyed it,Happy reading!>

Enjoyed it,Happy reading!

Your first normal wordpress template

admin — Mon, 11 Jan 2010 15:28:49 +0000

Introduce

Now,let’s make all together (w3c valid 2 columns xhtml ,ul li css none-js SEO friendly sub-menu),we get a full wordpress home page html template–Click HERE to view.It looks nice simple & usefull, right ？let’s start to convert it to wordpress theme.

First,We should know some basic wordpress theme Knowledge:
What’s a basic theme include ?

css style (required,style.css,style the page also put your personal info. like theme name , author …)
index.php (required,WordPress Theme start with this file if without the home.php)
a screenshot (optionally,screenshot.png)
single.php (optionally,this file to generate the structure for a single post,if no such a file the wordpress will use index.php to generate the structure )
page.php (optionally,this file to generate the structure for a single page,similar as single.php)

so we know a very minimum wordpress theme should include (index.php,style.css) .but usually in order to keep the site in a more good structure and can maxmum reuse , flexible .The page’s structure is separated to
several parts:

header.php
sidebar.php
footer.php
comments.php
comments-popup.php

reference those in the template php file is very easy.For instance,header.php :

 get_headerer(); ?>

the comment, use the comments_template() template tag.
the sidebar, use the get_sidebar() template tag.
the footer, use the get_footer() template tag.

Also can use

include(TEMPLATEPATH . '/script.php');

to reference any php file in the template folder.

Start coding wordpress theme now

First ,we need declare the theme in style.css .For instance

/*
Theme Name: red theme
Theme URI: http://www.brightyoursite.com/blog/2010/01/11/your-first-normal-wordpress-template/
Description:Your first wordpress theme
Version: 1.6
Author: alex 
Author URI:  http://www.brightyoursite.com
Tags: red, fixed width, two columns, widgets 
*/

you can see the define theme name , url version aurhor …. there .
Next , do the page segmentation and create the header.php , footer.php , sidebar.php and index.php .
to make it easier we can copy the those files from the wordpress default theme . we just need copy our html codes and do some adjustment. for instace change the menu to wordpress page list ：

  
  
  wp_list_pages("title_li=&depth=2"); ?>

the main posts loop:

 if (have_posts()) : ?> 
   while (have_posts()) : the_post(); ?>
         post_class() ?> id="post- the_ID(); ?>">
        class="item_head">
        class="item_header_text">> href="" rel="bookmark" title="Permanent Link to  the_title_attribute(); ?>"> the_title(); ?>>					
	 > 
	  class="item_description"> the_content('Read the rest of this entry »'); ?>>
          class="tags" > the_tags('Tags: ', ', ', '
');  ?> >  
	 > 
	  endwhile; ?> 
	  class="navigation">
		  class="alignleft"> next_posts_link('« Older Entries') ?>>
		  class="alignright"> previous_posts_link('Newer Entries »') ?>>
	 > 
	   else : ?>
		 class="center">Not Found>
		 class="center">Sorry, but you are looking for something that isn't here.>
		 get_search_form(); ?> 
          endif; ?>

Online demo and free wordpress theme download

Preview red theme (1773)

Download there

The simple ul li css SEO friendly horizontal menu

admin — Sun, 10 Jan 2010 15:27:28 +0000

In this part we will use ul li css code some simple but usefull seo friendly menu.First let’s start with a Horizontal Menu with rollover image . we will use images,but most important is we need make it seo friendly.

ul li css SEO friendly simple horizontal menu

We need prepare 2 images. one for normal menu background while another for hover & current menu background.That’s all , very simple . Let’s look the HTML codes frame:

 id="navs">
>
> alt='Home' src='images/normalbg.jpg' /> href=''>Home>>
> alt='Portfolio' src='images/normalbg.jpg' /> href=''>Portfolio>>
> alt='Services' src='images/normalbg.jpg' /> href=''>Services>>
> alt='Projects' src='images/normalbg.jpg' /> href=''>Projects>>
> alt='Articles' src='images/normalbg.jpg' /> href=''>Articles>>
> alt='Contact' src='images/normalbg.jpg' /> href=''>Contact>>
>
>

Related css codes:

 #navs ul
 {
	 margin:0px;
	 padding:0px;
 }
 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	background:url(images/menuover.jpg) repeat-x left top;
 }
 #navs ul li a
  {
	 position:absolute;
	 display:block;
	 line-height:46px;
	 height:46px;
	 width:131px;
	 text-align:center;
	 left:0px;
	 top:0px;
	 text-decoration:none;
	 color:#1F1E1E;
  }
 #navs ul li:hover img
  {
	visibility:hidden;
  }

Click here to see the live demo .

IE6 below Issue
If you have IE6 , You may noticed that this menu rollover image function not work in IE6 and below .
What’s the solution:
We need use Third-party approach : The csshover3.htc . Add it to the same folder of css , then add this line “behavior: url(“csshover3.htc”);” to #navs ul li .So it should like this :

 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	behavior: url("csshover3.htc");
	background:url(images/menuover.jpg) repeat-x left top;
 }

But this cause a inssue : the css can’t pass w3c valid .i tried many ways , but didn’t figure it out. if someone have a more good solution,please let me know. Click here to see the final version .DownLoad HERE .

ul li css none-js SEO friendly sub-menu

admin — Sun, 10 Jan 2010 14:35:38 +0000

We will use ul,li,css to create non-js seo friendly dropdown menu and horizontal sub-menu Which can be used in the wordpress .

non-js seo friendly dropdown menu

First of all, let’s use ul,li to build the frame ,look the codes below :

 id="menus">
>
     > 
      href=''>ABOUT>
     >> href=''>Company Overview>> > href=''>Management>> > href=''>News & Press>> > href=''>Partners>>>
     >
     > 
      href=''>SERVICES>  
     >> href=''>Enterprise Infrastructure>> >  href=''>Business Intelligence > > > href=''>Application Development>> > href=''>SOA(Solution Oriented Architecture)>>>
     >
     > 
      href=''>PRODUCTS> 
     >> href=''>Data Anayzer>> > href=''>MRSS-Remote DBA Services>>>
     >
     > 
      href=''>CONTRACTS>
     >> href=''>Data Anayzer>> > href=''>MRSS-Remote DBA Services>>>
     >
     > 
      href=''>CLIENTS>
     >> href=''>Data Anayzer>> > href=''>MRSS-Remote DBA Services>>>
     >
     > 
      href=''>CAREERS>
     >> href=''>Data Anayzer>> > href=''>MRSS-Remote DBA Services>>>
     >
     > 
      href=''>CONTACT US>
     >> href=''>Data Anayzer>> > href=''>MRSS-Remote DBA Services>>>
     > 
     >
>

Css codes:

#menus
{
	height:37px;
	background:url(images/menu_bg.png) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:37px;
	height:37px;
	background:url(images/menu_bg.png) repeat-x left top;
	width:100px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:37px;
	 text-decoration:none;
	 font-size:12px;
 
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:37px;
	display:block;
 
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:34px;
	 overflow:hidden;
	 background:url(images/subbg.png) repeat-x left top;
}

Click here to see the live demo . DownLoad HERE

If you understand this demo well , you also can understand follow the demo horizontal sub-menu easily.they are same principium.But this is demo is more Complex and Flexible .click here to see the live demo .
It’s a elegant menu ,isn’t ? DownLoad HERE when u know those 2 demos well , you can create many type of your elegant menu.

How to code a w3c valid 2 columns xhtml layout–step 2

admin — Fri, 11 Dec 2009 15:39:39 +0000

In the first part,we aready done the 2 columns layout frame.
Let’s go on, add elements to each sections also style it and finish the html template.

First the header , usually the header include the blog name and description sometimes maybe have a login box or search box . ok , let’s add it .

    id="header"> 
       id="headtxt">
       id="blogname">  id="A1" href='http://www.brightyoursite.com'> Bright Your Site >> 
       id="blogdesc">Professional Css Xhtml business -- w3c valid css xhtml 2 columns layout >  
      >
       id="searchbox"> class="inputbox"  />   id="gobtn"  type="button" />> 
  >

Check the codes,you can see we add blog name ,blog description and a search box.the blog name is the most important,that’s why i use h1 tag (for SEO optimise) so dose blog description.Usually,the blog name , description should be the left and the search box right.ok,let’s see how it be styled in the css .

/*-- begin header --*/
#header
{
  height:100px;
}
 
#headtxt
{
	float:left;
}
#blogname
{
   padding:0px; 
   margin:20px 0px 0px 15px; 
}
#blogname a
{
	text-decoration:none;
	color:#d4242b;
	font-size:28px;
}
#blogdesc
{
	font-size:14px;
	color:#333;
	margin:15px 0px 0px 15px; 
}
#searchbox
{
	float:right; 
	padding:0px;
	vertical-align:middle;
	margin:30px  5px 0px 0px;
	height:30px;
	line-height:30px;
	border:solid 1px #900;
 
} 
.inputbox
{
	width:150px;
	border:0px;
	height:20px;
	padding:5px 0px;
	float:left;
	margin:0px 0px 0px 2px;
	font-size:13px;
	font-size:16px;
	color:#000;
 
}
#gobtn
{
    background:url(images/go.png)  no-repeat;
    border:0px;
     width:47px;
     height:30px;
     overflow:hidden;
}
/*-- end of header --*/

The most important part is the Main Content, in this section we will list all articles here .
it’s simple and easy to code .Let’s see the html codes:

  class="item_head">
     class="item_header_text">> href=''>title here>>>	
 >
  class="item_description">
   content here
   class="tags" >Tags:> tags here>>
   class="author">Gepost door >admin> in: >tags here> >
 >

the post title is the essence of the post , so we need h1 tag it ( you know why , check the header section ) . for the content we just need need add space , font-size , color … . Of course , we also can add post date , tags , author … in the list . the style codes :

/*-- begin main content -- */ 
#maincontent
{
   width:580px; 
   float:left; 
   margin-left:20px;
}
.item_head
{
	border-bottom:solid 1px #8d0b03;
	height:33px;
    margin-top:20px;
}
.item_header_text
{  
font-size:12px;
font-weight:bold;
line-height:36px; 
display:inline-block;
float:left;
background:url(images/tlbg.png) repeat-x; 
}
.item_header_text a
{
  padding:0px 10px;  
  display:inline-block;
  background:url(images/tacorner.png) no-repeat right top;
  font-size:14px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.item_header_text h1
{ 
  display:inline-block;
  background:url(images/tbefore.png) no-repeat  left top;
  padding:0px;
  margin:0px;
}
.item_description
{
	color:#333333;
	line-height:18px;
}
.item_description p
{
	margin:5px 0px 10px 0px;
	padding:0px;
}
.tags ,.author
{
	color:#696969;	 
	 line-height:16px; 
}
.author
{
   height:25px;
}
.tags span ,.author span
{
	color:#9a1209;	
}
.tags  a,.author span a
{
	 color:#9a1209;	
	 text-decoration:none;
}
/*-- end of main content --*/

The right content aways are Archives , Categories , Blogroll …. .We can do it just use ul li list .

>
    >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
   >Tags>
   >Ajax> >Cat> >Wordpress> >Template>
  >
  >

The css is also simple

/*-- begin right content --*/
#rightcontent
{
   width:240px;
   float:right; 
   margin-right:10px;
}
#rightcontent ul
{ 
	padding:0px;
	margin:0px;	
	color:#000;	 
	margin-top:10px;
}
 
#rightcontent ul h2
{ 
	 margin:0px;
	 padding:0px;
}
#rightcontent  li 
{
    height:auto;
	line-height:25px;
 
}
 
li
{
  list-style :none;   
}
a
{
    text-decoration:none;
}
#rightcontent  li ul li
{  
	background:url(images/arrow.png) no-repeat left 5px;   
	padding:0px 0px 0px 13px;
	list-style:none;
	line-height:18px;
}
#rightcontent  ul li img
{
	vertical-align:middle;
}
#rightcontent ul  li h2
{
	margin:0px 0px 5px 0px;
	padding:0px;
	font-size:14px;
	line-height:30px;
	background:url(images/dot.jpg)  repeat-x left bottom;
 
}
#rightcontent  ul li a
{
	 color:#9a1209;	
	 font-size:12px;
	 text-decoration:none;
	 line-height:20px;
	 font-weight:600;
	 font-weight:normal;
	 vertical-align:middle;
}
/*-- end of right content --*/

At last , add some links and copyright to the footer to finish it.

 id="footer">
     href='/'>Home> |   href='/'>Portfolio> |  href='/'>Services> |  href='/'>Projects> |  href='/'>Articles> |  href='/'>About> |  href='/'>Contact>
    > © 2009 www.brightyoursite.com All Rights Reserved.>
  >

/*-- begin footer --*/
#footer
{
   height:82px; 
   clear:both;
   text-align:center;
   background:url(images/footer_bg.png) repeat-x;
   line-height:35px;
   vertical-align:middle;
   font-weight:bold;
   color:#E9E9E9;  
   margin-top:20px;
}
#footer a
{ 
   color:#E9E9E9;   
   text-decoration:none; 
   display:inline-block;
    margin:0px 5px;
}
#footer h1
{ 
   font-size:12px;
   font-weight:lighter;
   padding:0px;
   margin:0px;
}
/*-- end of footer --*/

Up to now,we add most of the elements.let’s see the final result click here .

Now, you may notice there is important part missed.The Menu. This is also important to a site .there is tons of menus . So next lession we will introduce the ul li css seo fridenly menu . Click here to go directly:

The simple ul li css SEO friendly horizontal menu

And

ul li css none-js SEO friendly sub-menu