How to check a Hard Disk Drive's health?

You start up your computer then suddenly you hear strange noises coming that seems to come from one of your hard drive. Naturally you start to worry. What if your hard drive is starting to fail? There is a way to check all  your hard disk's health using only what Windows offers.

Yes, like any other device, a hard drive also has its own "life expectancy". Same thing with other parts of your computer, actually more so for it because a hard drive consist of a moving (rotating) part.

So how would you determine if your hard drive is already dying? One indication that your hard drive is dying is when you start to see delayed right fail errors. Although a healthy hard drive may also encounter this error, it is more common on a drive that is starting to deteriorate.

But if you wish to see all your drive's health there are many third party software that you can install which will do such a specific task, that is to monitor your hard disk's status. Be aware though that installing such third party software will contribute to your overall load and may even slow it down a bit or a lot depending on your hardware.

But that is not what this is about, this is about using what you already have. This is Windows' Disk Management tool. Here is how:

1. Go to control panel and click on Administrative Tools.
2. On the Administrative Tools window, click on Computer Management.
3. Under Computer Management, you will see several items listed on the left of the window. Look for Storage and expand it to reveal another set of list. Locate Disk Management and click it. Wait for several seconds while it propagates all hard drives connected to your computer. When it finally shows all the drives, it will also show each drives' status. In the example image below of my drive, all are healthy.

List of hard drives with their health status shown under Disk Management of the Computer Management window

Lastly, it a good practice to always make a back-up of the content of your hard drive. Do not wait until you see signs of failure before you start backing up your data since by that time some of your data may already get corrupted beyond recovery.

Back to CyberLiving home page

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

Read More

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

Speed up internet browsing by skipping server side DNS lookup and blocking unwanted ads

Use Hosts file to speed up browsing

The title says it all. Page load speed can be increased if only host name resolution can be done within your computer and you don't have to wait for all the ads in a site to load.

In a previous post, I mentioned that you can increase browsing speed (page load speed) by using other DNS servers like Google Public DNS and OpenDNS instead of using your ISP's DNS service. This is because your ISP may be over saturated that it is having difficulty coping up with all the requests.

But using Google Public DNS or OpenDNS  is still in the internet and so you still need to go through it to resolve a host name.

But there is a way to resolve host names within your local machine. In the old days, host name resolution is done by using the Hosts file (this file has no extension). This file resides in:

C:\Windows\system32\drivers\etc\

The Hosts file is a simple text file that contains IP address with its corresponding host name. It maps a host name to its corresponding IP address. We can read and edit its content by using a text editor like Notepad.

How to add a host name and its corresponding IP address in the Hosts file?
If you open your Hosts file now in Notepad, you will only see one entry for localhost, 127.0.0.1     localhost also called the loopback address.

The format for adding to the list is the IP address first, then a space and finally the host name. It does not matter if you have one, two or as many spaces between IP address and host name as the succeeding spaces will be ignored but for readability everyone use the tab.

If for example then we wanted to add www.google.com using the IP address 74.125.128.191 (one of many Google's IP address). It would look like this: 74.125.128.191     www.google.com and if I decided to add one for this blog: 74.125.128.132     cyberliving.blogspot.com. The content would then look like this:

# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

127.0.0.1       localhost
74.125.128.99 www.google.com
74.125.128.191 www.blogger.com

Save this file. Please note that notepad automatically adds extension to saved files so do not use Save as... just use Save to preserve the property of the file.

Once the file is saved, the effect of it is immediate. There is no need to restart or disconnect/connect to the internet. While using Chrome version 28, it is not necessary to restart the browser as well but some browsers may require restarting.

Guides to Host file editing
Here are some rules that must be strictly followed in order that you will not wreck havoc with your networking.

It is recommended that you back-up your Hosts file before you edit it. Just create a back-up folder within the C:\Windows\system32\drivers\etc\ folder then copy the Hosts file and paste it inside the created back-up folder.

1. Each entry should be kept on individual line. One IP address and host name per line. If a host name has more than one IP address, then add it in another line with again its host name.
2. IP address is placed in front of the host name separated by at least one space.
3. Do not associate host name with any programs. Watch out when opening the Hosts file as you might accidentally associate this with a program like Notepad. Never click the "Always use the selected program to open this kind of file" radio button to avoid this.
4. When saving, just click on Save and not Save as... to avoid placing an extension to the file. Notepad and other programs automatically ads the default extension when Saved as... is used.

To block a site or ad from loading
In order to do this, give the host name where the ads are coming from or the site you wish to block with the localhost IP address (127.0.0.1)

Benefits of using the Hosts file
By using your machine to look-up sites, it will be much faster for it to resolve their host names and consequently land to the page faster.

Blocking ad sites from loading will also make the page you are trying to visit load up faster. The downside though is that you will see some content of the site not loading or with an error message.

Blocking some malicious sites containing malware or trojans (or phishing sites) will protect you from accidentally landing on them thus preventing you from downloading said malware and/or trojans. You will also be prevented from entering phishing sites thus your username and password is protected.

Back to CyberLiving home page

Other Posts

Read More

Use custom CSS fonts to enrich your page

How to add stylish and curvy fonts to your blog post/page using CSS?

You may have observed while visiting other sites that they have very nice looking fonts specially with their qoutes. But however you hard you try to find what font they used, you can not duplicate it. How was that possible? It is by using custom CSS fonts.

Today many are already offering such fonts like fonts.com and face-fonts. But most of these needed that you upload them to your server and access it from there. There is one alternative though that does not require uploading to your server. It is Google Web Fonts or simply Google Fonts.

To give a sample of the fonts, here is a famous line from Confucius:

“Chose a job you love, and you will never have to work a day in your life.
-Confucius

The custom font used above is cursive Bilbo from Google Web Fonts. The texts affected by the custom font are the quote

Here is how it is done:
Using custom fonts with CSS. Here is the code for the above quote:

<blockquote style="font-family: 'Bilbo', cursive http://fonts.googleapis.com/css?family=Bilbo stylesheet text/css; font-size: 18px; font-style: italic; line-height: 1.45; margin: 0.25em 0; padding: 0.25em 40px; position: relative; width: 500px;">
<span style="color: lightgrey; font-size: 130px; left: -30px; position: absolute; top: -50px;">“</span><span style="font-family: Georgia, serif;">Chose a job you love, and you will never have to work a day in your life.</span><br />
<span style="color: lightgrey; font-family: 'Bilbo', cursive http://fonts.googleapis.com/css?family=Bilbo stylesheet text/css; font-size: 15px;">-Confucius</span></blockquote>

Google Fonts' instructions in using their fonts is to include a code into your website. For blogger users, you will have to include it into your template. By doing so, the said font will be available anytime you want to use it. The downside to it is that, the more fonts you add into your template, the slower it is for your site to load. And since you are forced not to add as much custom fonts as you want, you don't have that much flexibility in using all these custom fonts.

Fortunately there is another way of coding it that will only require to add a code into your browser. What I will describe below  does not require you to add anything in your template. But this will still add into the loading time for the page/blog post you will apply it with but not on your whole site.

• Follow the basic format for the code as shown below. Just include the code as inline CSS to the element you wish to place it. In the case that there is already an existing inline CSS in the said element, just copy the texts inside the double quotes and insert it inside the CSS.

style="font-family: 'Bilbo', cursive http://fonts.googleapis.com/css?family=Bilbo stylesheet text/css;"

Note the different colors of the texts. The red ones represent the URL for the font and the blue ones represent the name of the font.

• Get the font URL for the custom font.
1. Go to http://www.google.com/fonts/ and browse through the list then choose the font that you wish.
2. When you have chosen, click on the quick use button at the lower right for each font.
3. You will be redirected to another set of selections. If the font you selected had more than one style, you will need to choose for the style that you want. Choose only one. Actually it is possible to choose all but that is if you will be placing your code on your template.
4. You will also need to choose a character set in case there are more than one. Again just choose one for the same reason as above.
5. Finally, you will see some code similar to this:

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic-ext' rel='stylesheet' type='text/css'>

Copy all the text inside the single quote after href= and then in the basic format mentioned above replace the red texts with this. In the example above, replace http://fonts.googleapis.com/css?family=Bilbo with http://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic-ext.

• Get the font name for your chosen font
1. Just below the link code is another code that looks like this:

font-family: 'Roboto Slab', serif;rel='stylesheet' type='text/css'>

Copy the font-family until the first semi-colon (semicolon not included) and go back to your inline CSS to replace the existing font-family similar to the way you did with the URL. In the example above, replace font-family: 'Bilbo', cursive with font-family: 'Roboto Slab', serif.

That is it, you now have custom fonts inside your content and you can use different font type for different page and still not affecting the loading time of your site.

It is up to you know how big yo want it. What color and the positioning of the texts to make it even look better.

Read More

How to check your DNS server speed

Manually check your DNS performance or speed or compare your ISP DNS speed to other DNS server

I have looked around on ways on how to compare my ISP's DNS speed with that of Google Public DNS but the results I get are sketchy at best.

To check for a DNS speed one has to look not only on the ping test but the rate at which a DNS server resolves host names. Here is an excerpt from Google:

"In addition to the ping time, you also need to consider the average time to resolve a name. For example, if your ISP has a ping time of 20 ms, but a mean name resolution time of 500 ms, the overall average response time is 520 ms. If Google Public DNS has a ping time of 300 ms, but resolves many names in 1 ms, the overall average response time is 301 ms."

The formula therefore that I will be using here is:

DNS Speed = connection latency + host name resolution time

For connection latency this will be the result from Pinging. As for the host name resolution time, I could not find one anywhere. Well, at least not something that you still need to download.

I did found out that one way to check for a DNS response is by using the nslookup which has the command line nslookup www.example .com typed in the command prompt. The time it takes to give back result will be the host name resolution time.

The trick will be on how to get this elapsed time. You can try stop watch and time it starting the moment you press enter and stopping once result is displayed. This however is prone to error and result will be very inaccurate considering that the elapsed time is a fraction of a second.

The solution is to time stamp it by using the prompt $t. This command will change the C:\> prompt into time like this  1:30:50.62. Now you can just subtract the before and after time that the nslookup command was executed. Note though that this again will include the time you typed the command.

To remove the typing time for the command, use a batch file and this is what you have to run from DOS shell.

To create a batch file

• Open a text editor like Notepad.
• Write your code into Notepad. In my case I only wrote three lines:
• prompt $t
• nslookup www.example.com
• prompt
• The first line is to change the C prompt into time format, then the command nslookup and lastly, the third line is to change back the command prompt to C:/>
• The result will be as follows

• Save it as batch file by adding the .bat afer your file name and under Save as type, select All files
• To launch this in DOS, just type the name of the file from the same directory you saved the batch file.
• For this result, the host name resolution time is 9.25 seconds or 9250 millisecond (1:46:08.84 - 1:45:59.59)

Back to CyberLiving home page

Other Posts

Read More

How to change your Smart Bro DNS server to Google Public DNS or OpenDNS

Smart Telecom's MF180 USB modem is bundled with an interface which has a limited options on it Settings page. Not even a away to edit its network configuration settings through the User Interface (UI).

So how to change the DNS setting?
By editing the NetConfig file.

In windows explorer, go to C:/Program Files/SMART BRO. In the SMART BRO folder look for the NetConfig file. This is what you must edit.

note: Before you do anything with the file, you must create a back-up just in case you mess up while editing, you have a back-up file to copy from. Just create a folder and name it Back-up, copy NetConfig file and paste it in the Back-up folder.

Right click NetConfig then Open With ... choose Notepad. In Notepad, you will see the following:

Original SMART BRO Configuration

Change it to

[SmartBro]
Name=SmartBro
UserName=none
UserPass=none
DialNum=*99#
IsAutoGetAPN=0
APN=SMARTBRO
IsAutoGetDNS=1
MainDNSaddr=0.0.0.0
AltDNSAddr=0.0.0.0
IsAutoGetPDP=1
pdpAddr=0.0.0.0
pdpType=IP
AuthType=PAP
IsDfault=1
DeniEditDelete=1
askUserAndPass=0
SaveuserAndPass=0
IsFactoryDefault=1
IsMmsConfig=0

[SmartBro]
Name=SmartBro
UserName=none
UserPass=none
DialNum=*99#
IsAutoGetAPN=0
APN=SMARTBRO
IsAutoGetDNS=0
MainDNSaddr=8.8.8.8
AltDNSAddr=8.8.4.4
IsAutoGetPDP=0
pdpAddr=0.0.0.0
pdpType=IP
AuthType=PAP
IsDfault=1
DeniEditDelete=1
askUserAndPass=0
SaveuserAndPass=0
IsFactoryDefault=1
IsMmsConfig=0

In the original configuration, IsAutoGerDNS is 1 while I changed it to zero (0) to mean false. This change cause the UI not to automatically get the DNS instead configure it to use the set MainDNSaddr and AltDNSAddr which is 8.8.8.8 and 8.8.4.4 respectively (Google's public DNS- can be interchanged). Without setting IsAutoGetDNS to 0, the UI will automatically get the ISP assigned DNS for you even if you set the MainDNSAddr and AltDNSAddr to your desired DNS.

Save the file and relaunch your Smart Bro UI to connect to the internet.

For OpenDNS, use the following: MainDNSAddr=208.67.222.222; AltDNSAddr=208.67.220.220

Other public DNS are:
Comodo Secure DNS: Main=8.26.56.26; Alt=8.20.247.20
Norton ConnectSafe: Main=198.153.192.40, Alt=198.153.194.40
DNSResolvers.com: Main=205.210.42.205, Alt=64.68.200.200

Back to CyberLiving home page

Other Posts
Smart Bro internet speed is very slow. How to make it faster?
Meta tag generator

Read More

Add your profile photo in search results

Google Authorship Markup: How to add your photo into SERPs

So you wanted to add your profile photo into the results page of major search sites like Google, Yahoo and Bing.

The short answer is by using Authorship Markup and it is called rich snippet. And in Google it is done without having to write a single code.

Why bother with Authorship Markup
Aside from the obvious that it is quite cool, it also standouts out among the other results. And if it stands out you get more attention, thus you get more advantage against the competition. It also gives the impression that that search result is more credible since Google has given you authorship on that particular subject or with the article.

Many believes that with the authorship, click through rates have increased for their site. I mean, just look at this result:

Here is what it looked without the Authorship Markup

An here is with Authorship Markup

And so how did they do it?

Here is how

• You need to have a Google+ account - If you don't have one yet or even if you don't intend on using it just create one since it will be used to link your site/content and your bio/profile. If you are on Blogger, I suggest that you take time to write your Tagline and Introduction.
• Link your profile to Google+
1. Go to your site and click your about or profile page, the one that contains your personal profile.
2. Copy the URL of that (profile) page from the address bar.
3. Go back to your Google+ profile and click on About.
4. Scroll down until you see the links box.
5. Click Edit and under Contributor to click Add custom link and on Label put something like +Your Name Blog. On URL put the copied profile address. Make sure that Current contributor is selected on the drop down menu.
6. If you don't see your site listed under Contributor to add it as well by following step 5.
• Note to Blogger users - To connect your blogs to Google+, go to your dashboard and click on Google+ then on the right side will be the Get Started button. From there, just follow the instructions or you can still manually do them by following step 5.
• Link Google+ profile to your site's content
1. Add the 'rel=author' on the link of your author box (the <a href="http://example.com/profile.html/" of written by Blog Author at the bottom of the page)
2. If you have a profile page, ad the 'rel=me' on the link.
3. For Blogger users (or even if you are not) you can link your Google+ profile directly by adding '?rel=author' at the end of the URL link like https://plus.google.com/14790572345602544?rel=author.
• Test and see the result using Google's Structured Data Testing Tool. Just type in your site URL and click on the PREVIEW button.

Back to CyberLiving home page

Other Posts
Meta tag generator
Put the Loading... text with animated dots

Read More

Put the Loading... text with animated dots

There are times where you navigate to a page and you see the "Loading..." text with moving three or so dots like this

Loading

and you wonder how they did it.

Here is how
Copy and paste the following code to where you wish for it to appear inside you page

<span id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

You may replace the value 300 (in red text) to a value you wish. 300 means 300 millisecond or 0.3 second interval between each appearance of the dot so naturally the higher value you put in, the longer it will take for each dot to appear and vice versa.

You may also wish to add some format to the text like making the font size 40px and color gray. You can put an inline CSS at the span tag like this:

<span style="color:gray;font-size:40px;" id="wait">Loading</span>
<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 12 )
        wait.innerHTML = "Loading";
    else
        wait.innerHTML += " .";
    }, 300);
</script>

And the result will be like this:

Loading

Back to CyberLiving home page

Other Posts
Add your profile photo in search results
Using Google Spreadsheet as a query-able table using Javascript

Read More

Using Google Spreadsheet as a query-able table using Javascript

Add more functionality (like sort, search string, limit result per page and page navigation) to your query using Javascript that a query in the data source URL would be tedious do.

In a previous post (Using Google Spreadsheet as a database for your site) it was shown that a Google Spreadsheet could function as a database and that it was possible to make queries as opposed to just publishing the entire content into one very long table (in a case where the table contains lots of data).

But in my desire to give more functionality (like searching a certain text, limiting to 10 result per page and a navigation button for the next or previous 10 results) to the page, I thought it would be much simpler to do the query in Javascript rather than to do it in the data source URL. Fortunately I found one in Google code playground.

Here is how
By using the setquery method to put your query string within the Javascript code. Here is what it would basically look like:

var query = new google.visualization.Query(DATA_SOURCE_URL);
query.setQuery('select A,B,C group by A order by B desc');
query.send(handleQueryResponse);

With the query in Javascript it turned my display result page from this:

into this:

The Javascript code for this is found just below. Feel free to use it. Just copy and paste the code into your page replacing the source spreadsheet and the query string as best fits your requirement.

<style>
.post h3 {display:none !important;}
</style>


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 
    <title>
      Google Visualization API Sample
    </title>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">

    var isFirstTime = true;
    var data;
    var queryInput;
    var credits = '<br /><p style="font-size: 8px;">Courtesy of <a href="http://cyberliving.blogspot.com">http://cyberliving.blogspot.com</a></p>';
     
    var query = new google.visualization.Query(
        'https://spreadsheets.google.com/tq?key=YOUR_SPREADSHEET_ID_HERE');
 
    function sendAndDraw() {
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
 
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      data = response.getDataTable();
      var table = new google.visualization.Table(document.getElementById('querytable'));
      table.draw(data, {'allowHtml': true, 'alternatingRowStyle': true, 'page': 'enable', 'pageSize': 10, 'sort': 'enable', 'sortAscending': false, 'sortColumn': 0});
      if (isFirstTime) {
      init();
      }
    }
 
    function setQuery(queryString) {
      // Query language examples configured with the UI
      query.setQuery(queryString);
      sendAndDraw();
      queryInput.value = queryString;
    }
 
 

    google.setOnLoadCallback(sendAndDraw);

    function init() {
      isFirstTime = false;
      queryInput = document.getElementById('display-query');
    }

    function setQueryFromUser() {
      var queryInput1 = "Select * where C contains " + "'" + queryInput.value + "'" + " or D contains " + "'" + queryInput.value + "'" + " or E contains " + "'" + queryInput.value + "'" + " or F contains " + "'" + queryInput.value + "'" + " or G contains " + "'" + queryInput.value + "'"
      setQuery(queryInput1);
    }
 
    </script>
  </head>
<body style="border: 0 none; font-family: Arial;">
<div style="background-color: buttonface; border: 1px solid gray; margin-bottom: 10px; padding: 5px;">
<span> Refine your search</span>
<form action="">
<table style="font-size: 12px;">
<tr>
    <td>Select Category</td>
    <td><select id="query-1" onchange="setQuery(this.value)">
      <option value="">None</option>
      <option value="where B = 'Real Estate'">Real Estate</option>
      <option value="where B = 'Automobile/Vehicle'">Automobile/Vehicle</option>
      <option value="where B = 'Computers/Electronics'">Computers/Consumer Electronics</option>
      <option value="where B = 'Job Opportunity'">Job Opportunity</option>
      <option value="where B = 'Others'">Others</option>
    </select></td>
    <td>Search iSari-Sari Store</td>
    <td><input id="display-query" type="text" />
      <input onclick="setQueryFromUser()" type="button" value="Search" />
    </td>
</tr>
</table>
</form>
</div>
<br />
<div id="querytable">Loading...</div>
  <script>document.write(credits);</script>
</body></html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

The following things you need to do after pasting the code in your page:

1. Replace the YOUR_SPREADSHEET_ID_HERE with the correct ID.
2. There are also other red texts in the handleQueryResponse function. Edit it as you wish or you may remove an option:
• 'allowHtml': true this is to allow some formatting from the table to be carried out in the query output.
• 'alternatingRowStyle': true when set to true alternating rows will get different tone (gray for odd rows and white for evenrows).
• 'page': 'enable' when set to enable, paging is turned on meaning you can set the maximum result to be displayed per page by using the pageSize option.
• 'pageSize': 10 the number is the maximum limit of displayed result per page. A navigation button (previous and next buttons) is placed at the buttom of the result table.
• 'sort': 'enable' seems self-explanatory. When enabled, you can sort any column.
• 'sortAscending': false when set to true, data is sorted in ascending manner. When false, data are sorted in descending manner.
• 'sortColumn': 0 Tells the query language which column to sort automatically before publishing the result on the page. 0 is for column A, 1 for B and so on.
3. The blue and purple texts makes up the "Refine your search" user interface. The blue texts is for the drop down menu while the purple makes the search input field.

Back to CyberLiving home page

Other Posts
Put the Loading... text with animated dots
Make your static page look cleaner by removing the page title

Read More

Make your static page look cleaner by removing the page title

How to remove the page title on your blog pages?

There are times when you wanted to remove the page title on your blog's static pages just to make it cleaner and appear more professional.

I mean look at the sample screen capture of a form page below:

An Ad submit page with the page title.

Examine the photo above and you will see the redundancy. Submit your Ad is the page title (encircled in red). You will see, however just above is the navigation bar showing the current page selection (pointed by the red arrow) which says exactly the same as the page title.

Removing Submit your Ad on the navigation bar is not advisable since it is used to navigate to the form. The one appearing on the actual page, however, is not necessary so it should be removed.

Here is how
The solution is quite simple, by placing a 3 line code at the top of your page's code.

• Edit your page in HTML
1. In your dashboard, click pages.
2. Select the page and click on edit.
3. On the edit/compose window, click on HTML so you can edit the html code of the page.
• Copy and Paste the following code at the top of your page's code

<style>
.post h3 {display:none !important;}
</style>

• Publish the page
1. Click on the Upate button.
2. Check the page you just edited and it should no longer be showing the page title on the page.

Done!

Back to CyberLiving home page

Other Posts
Using Google Spreadsheet as a query-able table using Javascript
Using Google Spreadsheet as a database for your site

Read More