How I made my blog in blogger get a page rank?

This blog's rank 

How I manage to get PR3 for this blog.
Can a freely hosted blog or site such as CyberLiving be able to get a page rank? Look no further, this blog is an example that it can. Read on and you may also learn a thing or two.

While starting with this blog, I was faced with the question whether it will be worth it to pour my efforts creating and writing content on a free hosted site like blogger because I am not sure whether it will ever going to rank at all on SERPs.

My apprehension stemmed from the fact that some ad serving companies shy away from such sites as mine (free hosted site or blog) and I have read many articles that gives advise to get a domain and pay for a host server instead of a free one if ones intent is to be able to make some income out of it since it is very difficult (they say) to get a page rank with a free hosting site.

But as a starter with very limited knowledge with blogging, much so maintaining a site and getting ranked, and no funds to use to pay for a host server and acquire a domain name, I opted to use blogger.

Site a little over a year old before getting ranked
To date (12/29/2013), this site is  approximately 1 year and 2 months old. When this site was started, I used the dynamic view template as I liked its simplicity but as I progress, I found I am being limited as to what I can do with my blog. That is when I decided to change my theme to one that is freely available to use. This was around six months from its creation.

While I was also trying to write content, I am also searching for ways on how to get some page rank. Here I will try to outline what I did that I think gave me my page rank.

Do some link building through blog commenting and guest posting they say
Almost any site will tell you that to get some PR, you need to get some link juice from other site. This means you need to do some link building. The most common that is being recommended are: do some blog commenting and guest posting.

The problem I got from blog commenting is that most of the sites with PR do not just share their link juice which is very much understandable. Many of them are moderated and the chances that a comment gets through to such sites is very slim (well at least in my case it was). Guest posting also shares the same scenario as with blog commenting. To be able to guest post, one has to establish some sort of a relationship with your target site's owner. There are those that encourage you to guest post in their site by sending your article via mail but there is a big chance also that your article which you have spent some time writing it will get rejected. But my biggest apprehension with guest posting is that why should I let others benefit for my work where the page that it was posted may not even get a PR rendering it actually not getting any link juice thereby wasting my time and my work altogether. Or it may be the other way around, being that my work could actually be a very good piece which will eventually make a very high PR then I only gave it away and let someone else benefit more from it compared to me who was the one that actually made the article.

I decided, therefore, not to focus on it and just put all efforts in writing articles. More explanation on this later.

Claimed my blog in Technoratti
I have read from somewhere that one way to get back link is by submitting your site to listing pages like Technoratti. So I did claimed my site at Technoratti. The best thing with technoratti is that it automatically picks from your article and put it up in its list without you having to do anything giving you additional exposure for practically doing nothing.

Submit my site with Google and Yahoo/Bing
I know that my site exist, my friends know that my site exists since I do tell them but, Google does not know it. Not yet. Maybe, eventually it will discover it from its daily crawling of the world wide web. But why wait when you can introduce your site to Google. You do this by submitting it and by doing so Google will get to know that such a site exists. Then I used Google Webmaster Tools to address issues. In my case, I only had issue with my site map (missing) which I only submitted my RSS feed as my sitemap (note that with Blogger, there is no way to create a real site map).

Focused on creating content
I hate to say content is king in this post as it has been said so so so many times I could vommit (seriously). Why I despise people using such phrase is because, to me, many of them come out like false prophet proclaiming the end of the world that never came. Don't get me wrong, that is very true and I do believe that content more than anything else makes or brakes a site. It is just that many uses it but never actually make a good explanation or argument for it aside from mentioning the usual list of creating original content, good quality article, giving credit where credit is due and so on.

While it is true that your content is very important, I am not so sure about the original part. Why? That is because in this day and age where almost everything has already been written on the internet, I don't think there is this thing which we can still say as original per se. With that said, I believe that original content would mean writing things, which may already exist on the web, but put into the context of what is the subject of what you are writing or  write it on how it will relate to the overall niche of your site. For me that is what original content means otherwise, the original author (the very first to write that topic) would then also be king but as we all know, that is not the case.

Going back, I stated earlier on that instead of focusing on link building and guest posting I focused instead on writing articles. My reasoning behind such action is that when I write good enough article at least someone may notice it (by accidentally stumbling upon it or it may actually come up on SERPs) and if he/she likes it may repost it on his/her own site or on social media whereby allowing more people to view it who may also again share it. My hunch did prove correct because some of my posts did captured the interest of people and made links back to their sites thereby effectively giving me some quality back links.

Made some redesign to my pages
I already did like my theme but I feel the need to create static pages to my site so I could categorize my posts and make better about pages. On these pages I have also made my code to give it the look that it is today and make my classification to may posts.

Create internal links
From my readings, I also came across a theoretical article that with internal linking alone one could generate PR for a site if there is enough pages to link. Without getting into the details of the article, I then decided that I should link all my pages to pass in the link juice throughout my site.

Rich Snippets
Going through the SERPs, I have noticed some results are displayed better than others. Others have the photo of the author and the description is actually much more intelligible than others. I later learned this to be rich snippets and it is done through Authorship Markup. It is believed and others could attest that with authorship markup, the click through rate to a site increases. So I also included it into my site. Adding authorship markup to my blog now makes my site in SERP show up much more appealing as it now shows a face of a person (me) along with the result.

Adding Meta Tags
In order that I get better description to show in search results for my site's pages, I added meta tags. Together with authorship markup, it now gives my site a better chance of getting clicked when it shows up on search results.

Lastly.....

I continue to write more articles. All the things that I have outlined on this post has a dedicated post on how it was done. Feel free to navigate on this blog to look for them.


Back to CyberLiving home page

Other Posts
What are light boxes and how you can make one?
How to check a Hard Disk Drive's health?

Read More

What are light boxes and how can you make one?

Ever wondered what are those square floating boxes that appear in front of the contents of a page when it is loaded or when you click a link like a thumbnail of a photo or a small window inside the current window?  It is called a lightbox.

A lightbox is very handy when you want to show the content of a link but you do not want them leaving a page. One reason why you might not want your reader to leave a page is because many find it troublesome to go back to a page when they are taken somewhere else even if it is on a different tab or a new window.

Lightbox is also very useful if a page mostly contains links like in the case of a stock photo page where a user will be looking for many different pictures from the displayed list. Imagine how combersome it would be to be going back from tab to tab or window to window on every sample photo.

What makes a lightbox
Basically, a lightbox is only a div element that is positioned above everything else within a page. It is styled in a way that it would look like a new, smaller window inside the browsing window.

How to make one?
I want to create one and put it in my site, how can I do it? I hear you say. Below I will describe how it is done.

Like what was already said earlier, a lightbox is only a div element with the proper styling applied to it. So go ahead, define a div element and give it an id as you wish or you can simply call it lightbox like this:

<div id="lightbox"></div>

This of course will not show anything in your screen. Next, define some format to it using CSS like boder width, color, width and height of the box like this:

<style type="text/CSS">
#lightbox{
 border: 10px solid yellow;
 width: 400px;
 height: 250px;
}
</style>

#lightbox means these formats will be applied only to the element with an id of lightbox. All the formatting is enclosed with these { }. border: 10px solid yellow; means the border will have a width of 10 pixels, it is solid (not dashed, double or any other type) and it is color yellow. width: 400px; means the width of the window is 400 px and height: 250px; means the window will have a height of 250 px. It would then look like this:

Let us add a close button
If you have been observing the internet some uses a circle with an X in it to indicate the close button or a solid square box with also the X on it and some simply uses the word close. All are on the upper right hand corner. I am in the mood for the circle close button so let us do that.

First create a circle, on how to create one, refer to the guide on creating lines. Fill this circle with the same color as the adjacent element's background (later we will be adding a title bar with orange background so we will fill our close button with orange) but instead of an X, let us place the word close instead. It will look like this:

close

The code is this:
html part:

<div id="circlecontainer" style="width: 40px; height: 40px; position: absolute; top: 15px; left: 412px;"><div id="close_button"><div style="font-size: 9px; position: absolute; top: 14px; left: 11px;">close</div></div>

</div>


CSS Part:

#close_button{
 width: 20px;
 height: 20px;
 background-color: orange;
 border: 10px solid yellow;
 border-radius: 20px;
}

The div with id="circlecontainer" is to group both the circle as well as the word close so it is easier to handle it later in case a javascript is used to on it. The CSS part is mainly for the circle. There are also in-line CSS in the HTML part mostly for aligning the elements together.

Now put them together in a way that the circle is on top of the lightbox window. We will also make the corners of the lightbox rounded and add a title bar with an orange background color. The following lines will be added:

First position the circle to the upper right corner of the box by using position: absolute then top: xxpx and left xxpx placed in the CSS for the close_button. The xx are values that will line-up the close-button best to the box.

Next round the corners of the box by adding corner-radius: 15px. Then to add the title bar, add another div element within the div of the box. Give it a height of 30px and background color of orange. In here we will use again in-line CSS (remember to round the upper corners a bit to match the rounded corners of the box):

<div style="background-color: orange; height: 30px; border-radius: 5 5 0 0px;"><b>Title Here</b></div>
So it will look like this:

Title Here

close

Our lightbox is completed. My color selection may not be the best to use for a lightbox. Do some research by looking at what others are using the change it to that color that makes you happy. Also ad content to the box by placing them between the closing div (</div>) of the title bar and the closing div of the main box.

The last thing we need to do is to make the close button function as it should (close the window). To do this we will use javascript to hide the entire box using the display: none property. By using display : none, it is not actually being closed but only being hidden from view. First group it all by containing it in a single div element then refer to its id when in javascript to hide it. Below is the final code:

<script type="text/javascript">
function closeIt(){
document.getElementById("main_container").style.display = "none";
}
</script>

<style type="text/CSS">
#lightbox{
 position: absolute;
 top: 40px;
 border: 10px solid yellow;
 width: 400px;
 height: 250px;
 border-radius: 15px;
}

#close_button{
 width: 20px;
 height: 20px;
 background-color: orange;
 border: 10px solid yellow;
 border-radius: 20px;
}
</style>

<div id="main_container" style="display: block;">
<div id="lightbox">
 <div id="title_bar" style="background-color: orange; height: 30px; border-radius: 5 5 0 0px;"><b>Title Here</b></div>
</div>
<div id="circlecontainer" style="width: 40px; height: 40px; position: absolute; top: 15px; left: 412px;">
<div id="close_button"><div style="font-size: 9px; position: absolute; top: 14px; left: 11px; cursor: pointer;" onclick="closeIt()">close</div></div>
</div>
</div>

There you have it. Make your adjustment as necessary.

Back to CyberLiving home page

Other Posts

Read More

How to draw lines using CSS

Do you want some simple lines (vertical, horizontal,diagonal or slanting) but without using images?

It is quite simple really. By using CSS, you can create the above listed lines as well as circle.

Let us start with the simpler ones, that is horizontal and vertical lines. To do so, simply create a div element and define the border on one side and you already have a line then define its position so you can place it at the exact location you wish the line be displayed by using a combination of the top, left, bottom, right properties together with the position: absolute, position: relative or position: fixed.

Vertical line example:
<style>
#vertical
{
 height: 200px;
 border-left: 1px solid blue;
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="vertical"></div>

*You may also use border-right with the same values and it will have the exact same result. The bigger height it is the longer the vertical line.

Horizontal line example:
<style>
#horizontal
{
 width: 200px;
 border-top: 1px solid blue;
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="horizonal"></div>

*You may also use border-bottom.

For a diagonal line first create a vertical or horizontal line then add the rotate property.

Diagonal line example:
<style>
#diagonal
{
 width: 200px;
 border-top: 1px solid blue;
 -webkit-transform: rotate(36deg);
 -moz-transform: rotate(36deg);
 -o-transform: rotate(36deg);
 -ms-transform: rotate(36deg);
 transform: rotate(36deg);
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="diagonal"></div>
*A diagonal line is a horizontal or vertical line that is rotated at an angle.
**The -webkit-transform: rotate(xxdeg), -moz-transform: rotate(xxdeg), -o-transform: rotate(xxdeg), -ms-transform: rotate(xxdeg) and transform: rotate(xxdeg) all do the same thing. But each only works for a specific browser.
***Always supply the same angle to all, otherwise it will be displayed differently on different browsers.

For a circle, it is still a div element with rounded corners.
Circle Example:
<style>
#circle
{
 height: 200px;
 width: 200px;
 border-radius: 100px;
 border: 1px solid blue;
 position: absolute;
 top: 50px;
 left: 250px;
}
</style>

<div id="circle"></div>

*To create a circle, the div element has to be a square thus height and width must be equal.

**The value of the border-radius must be half that of the side (or half of the height or width value).

Now let us use a combination of these to draw a very big stickman.

<!DOCTYPE html>
<html>
<head>
<style>
#stick_head
{
height: 100px;
width: 100px;
border: 1px solid blue;
border-radius: 50px;
position: absolute;
top: 200;
left: 400px;
}

#body
{
height: 240px;
border-left: 1px solid blue;
position: absolute;
top: 120px;
left: 450px;
}

#left_arm
{
height: 130px;
border-right: 1px solid blue;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
position: absolute;
top: 140px;
left: 400px;
}

#right_arm
{
height: 130px;
border-right: 1px solid blue;
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-o-transform: rotate(130deg);
-ms-transform: rotate(130deg);
transform: rotate(130deg);
position: absolute;
top: 140px;
left: 500px;
}

#left_leg
{
width: 180px;
border-bottom: 1px solid blue;
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
-ms-transform: rotate(100deg);
transform: rotate(100deg);
position: absolute;
top: 448px;
left: 345px;
}

#right_leg
{
width: 180px;
border-bottom: 1px solid blue;
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
position: absolute;
top: 448px;
left: 376px;
}
</style>
</head>
<body>
<div id="stick_head"></div>
<div id="body"></div>
<div id="left_arm"></div>
<div id="right_arm"></div>
<div id="left_leg"></div>
<div id="right_leg"></div>
</body>
</html>

Of course this is not how you would use a line to style your page but just to give you an idea as to what extent you can do with it and what has just been demonstrated is the very basic. There are more that you can do with it specially when used together with javascript or similar language.
Back to CyberLiving home page

Other Posts
Back to home page

Read More

How to customize a Google Visualization Table to best fit your page

If you are using Google Visualization Table to show your data like when making Google Spreadsheet as a database, you may have learned that customizing it is not simply declaring an ID to the containing element.

The declaration google.visualization.table in itself contains its own CSS styles which defines what you see when the table gets drawn like background color, font size, font face and so on. There are readily available options that you can turn on or off like alternating background color per row but sometimes that is not enough as what is readily available may not be suited on how your page looks like.

How to override the default styles
For this to work the option allowHtml must be set to true. Also, there should not be any formatting on the source spreadsheet.

For the purpose of this post, let us go back to a previous article that illustrates how to use your google spreadsheet as a database. Let us make this table transparent so that it will match and adopt your page's background color.

• Define the CSS styles for the table elements - create a css class for the following: headerRow, tableRow, oddTableRow, .selectedTableRow, headerCell and tableCell. Set the the background color to transparent and since by default there is no border define one for it as well. Also, since all will be having the same styles, just lump them up in a single declaration within the <style> </style> tag. Here is an example:

Example: 
.hrowclass, .trowclass, .otrowclass, .strowclass, .hcellclass, .tcellclass
{
 background-color: transparent;
 border: 1px solid #c8c8c8;
}

• Use declared classes in the table.draw using the cssClassName property - locate the javascript function containing the actual code that displays the table. In this case it is table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0}); and add this 'cssClassNames': {'tableRow': 'trowclass', 'headerRow': 'hrowclass', 'oddTableRow': 'otrowclass', 'selectedTableRow': 'strowclass', 'headerCell': 'hcellclass', 'tableCell': 'tcellclass'}. The final result will be this:

table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0, 'cssClassNames': {'tableRow': 'trowclass', 'headerRow': 'hrowclass', 'oddTableRow': 'otrowclass', 'selectedTableRow': 'strowclass', 'headerCell': 'hcellclass', 'tableCell': 'tcellclass'}});

Now save your work and you will have a transparent table with a gray background. You can even change the color of the border or make it thicker, add more styles as you see fit. Try playing on it to give you what you wanted.

Back to CyberLiving home page

Other Posts
Back to home page

Read More