AgaWebs - Posts

Istanbul - Jan 2014

2014-04-28T21:40:00.004+03:00

Shots from Istanbul? Yeah, why not?! Shortly after my trip to Piatra Mare I went to Istanbul, Turkey. So without further delay, here are the pictures I grabbed during my latest incursion into ottoman territory.

Piatra Mare - Jan 2014

2014-04-26T23:11:00.000+03:00

Pictures taken on Mountain Piatra Mare during a two-day trip I took this year in the first weekend of January. Far as I recall, the hike from Dambul Morii (the start location) to the gorge called "Canionul 7 Scari" takes one or two hours, while the rest of the hike to Chalet "Piatra Mare" (1628m) ends in another three hours. So from start to finish, you should be able to get to the chalet in about 4 to 5 hours. To reach summit Piatra Mare (1844m) from the chalet and then get back you need one hour and a half including the time you'll spend absorbing the panorama. Finally, for the return journey, it'll take roughly four hours to get back to Dambul Morii if you choose the path near "Pestera de gheata" ("The Ice Cave") and "Sirul stancilor" ("The Cliff Line").

Sufletul lui Avram Iancu

2014-04-20T12:35:00.001+03:00

Vorba lui Nea Panainte care sta pe Plevnei, spusa azi in Cimitirul "Eternitatea" la Barlad:

Nici n-am inceput sa mor bine si ma intreaba cui las casa.

Citatul din titlu e injuratura aceluiasi Nea catre cei care-l intreaba.

Vatra Dornei, Sunatori

2013-11-21T21:43:00.000+02:00

Bucegi, Pestera, Babele, Caraiman

2013-10-21T12:47:00.001+03:00

Fagaras, Varful Moldoveanu

2013-09-08T01:14:00.000+03:00

Un traseu relativ accesibil spre Varful Moldoveanu (2544m) al muntilor Fagaras incepe din statiunea Sambata, putin mai la sud de comunele Sambata de Sus si Sambata de Jos, statiune cunoscuta pentru manastirea ctitorita in vremea lui Constantin Brancoveanu. La sfarsitul lui august si inceputul lui septembrie 2013 am parcurs acest traseu in 3 zile.

Ziua 1 - de la complexul Sambata pana la Cabana Valea Sambetei; traseu marcat cu triunghi rosu ce se parcurge in 2,5 ore. De le cabana se ajunge repede la chilia parintelui Arsenie Boca sapata in stanca, pe versantul estic de deasupra vaii.

Ziua 2 - de la Cabana Valea Sambetei la Refugiul Alpin Vistea, prin Fereastra Mare a Sambetei. Traseul pana in fereastra e marcat cu triunghi rosu. Pana aici se ajunge in 2,5 ore. Restul traseului de creasta se parcurge in aproximativ 3 ore si e marcat cu banda rosie. Apa se gaseste in Fereastra Mica a Sambetei, la 10 minute sud de noul refugiu din fereastra, si in valea de sub Moldoveanu, spre Taul Triungiular (Valea Rea).

Ziua 3 - tura fara rucsac pana pe Vistea si Moldoveanu si coborare spre orasul Victoria prin Valea Vistea. Pe Moldoveanu se ajunge in mai putin de o ora. Coborarea prin vale urmeaza traseul marcat cu triunghi rosu si dureaza aproximativ 3-4 ore pana la drumul forestier ce duce spre Victoria. E indicat ca aici sa va astepte o masina.

Tudor

Hover your cursor over the photos to view them and click to enlarge

Cezar

Hover your cursor over the photos to view them and click to enlarge

Andrei

Hover your cursor over the photos to view them and click to enlarge

Padis, Cetatile Ponorului, Cheile Galbenei, Groapa Ruginoasa

2013-08-24T15:01:00.000+03:00

It's been almost five years since my previous expedition to the Padis area from Bihor's Mountains (Apuseni). This August I returned there to revisit some of the attractions I saw last time (Pestera Focul Viu, Pietrele Galbenei, Lumea Pierduta) and to explore two of the most spectacular places you can see there: Cetatile Ponorului (Ponor Fortress / Cave) and Cheile Galbenei (Galbena Gorges).

Hover your cursor over the photos to view them and click to enlarge

Baile Herculane, Semenic, Orsova

2013-07-01T19:29:00.000+03:00

Hover your cursor over the photos to view them and click to enlarge

Haz

2011-10-22T23:28:00.003+03:00

Articolul meu de astazi porneste de la videoclipul de mai jos in care mi-au atras atentia cei doi hoti / spioni care intra in casa la Grasu sa-i puna microfoane:

... pe cel slab si pricajit l-am vazut la stand-up comedy in trupa Deco. Uite si un link cu poantele lui. Hotul mai gras e din reclama cu injectoare de la Efix. Si pentru ca mi-a adus aminte de Efix, uite si o noua reclama a lor:

Click me!

Concluzia e ca regasesc aceleasi fete in productii / manifestari de genu asta si ma bucur tare ca de fiecare data e din ce in ce mai placut sa-i vezi.

How to Enable JavaScript in a Web Browser

2011-02-17T02:35:00.010+02:00

Each web browser has its own settings for enabling/disabling JavaScript support. To find out how to switch JavaScript on or off in your browser, click the corresponding link from the list below and watch the video tutorial or follow the step-by-step written instructions...

Internet Explorer & Maxthon Web Browser
Mozilla Firefox Web Browser
Google Chrome Web Browser
Safari Web Browser
Opera Web Browser

Internet Explorer & Maxthon Web Browser

Follow these steps to enable JavaScript in browser:

Click the Tools button from the command bar of your Internet Explorer web browser and select Internet Options from the drop-down menu.
Select the Security tab from the window that appears.
Click the Internet icon from the list of zones.
Press the Custom level... button from the lower part of that window.
In the next window that appears, scroll down to the Scripting options group.
Under Active scripting, click the radio button next to the Enable option and click OK to close this window.
Finally, click OK or Apply in the Internet Options window.

Mozilla Firefox Web Browser

Follow these steps to enable JavaScript in browser:

Click the Tools button from the menu bar of your Firefox web browser and select Options... from the drop-down menu.
Select the Content tab from the window that appears.
Check the Enable JavaScript option and click OK to save the changes and close the Options window.

Google Chrome Web Browser

Follow these steps to enable JavaScript in browser:

Click the Wrench button from the top-right corner of your Google Chrome web browser and select Options.
Select the Under the Bonnet tab from the window that appears.
Press the Content settings... button and select JavaScript from the left pane of the window that appears.
Click the radio button next to the option that says Allow all sites to run JavaScript (recommended) and close the Content Settings window.
Finally, close the Google Chrome Options window as well – this will save the changes you made.

Safari Web Browser

Follow these steps to enable JavaScript in browser:

Click the Cogwheel button from the top-right corner of your Safari web browser and select Preferences....
Go to the Security tab from the window that appears.
Check the Enable JavaScript option and close the Security window.

Opera Web Browser

Follow these steps to enable JavaScript in browser:

Click the Menu button from the top-left corner of your Opera web browser.
In the drop-down menu that appears, point your mouse cursor to Settings... > Quick Preferences.
Make sure the Enable JavaScript option is checked.

Number Pi and Quadratic Equations

2011-02-09T11:01:00.005+02:00

I always believed mathematics is among the few sciences which can bring you closer to the truth about "Life, the Universe and Everything". The reason: it reveals marvelous "coincidences" hidden behind various natural phenomena and it brings out repetitive patterns implanted into our reality by a higher intelligence.

Number Pi or quadratic equations are only two of these "coincidences" or patterns. Here are two graphics showcasing a short story for each of them - click the images below to view them in full size and don't forget to share this content or leave a comment if you're as enthusiastic about this stuff as I am.

Source: Online Schooling

Source: http://www.onlineschooling.net

Fade In, Fade Out JavaScript Effects and a Bonus Buzz

2010-11-22T06:59:00.017+02:00

Looking for a way to apply the so called "HTML fade transition" or "HTML fade effect" to page elements on your site or blog? I'm talking about making HTML elements appear or disappear slowly. Well... there are solutions! The most popular ones involve using JavaScript libraries and methods/functions from jQuery or script.aculo.us. The single major disadvantage of these solutions is that your pages will have to load several tens (if not hundreds) of kilobytes worth of JavaScript libraries in order to implement the effects and in most cases, you won't be using all the functionality provided by those libraries.

I asked myself if there's any room for improvement especially for small scale, simple applications, or for those situations when only these JavaScript fade effects are needed. As a result, I came up with an easier to use and, most importantly, lighter alternative. My solution involves less than 3 kilobytes worth of function definitions and a very direct way of creating the cool HTML fade transition. As a bonus, I've added a function which makes an element shake briefly to attract visitors' attention - an effect which I call "buzz".

1. How do I start?
2. How do I use the functions?
3. Examples
4. Compatibility & Support

1. How do I start?

In order to use these visual effects on your blog or site, you first need to install a small script containing the function definitions. It is recommended to install the script in the <head> section of your pages in order to use the functions anywhere on your site. For a Blogger blog, there are two additional ways of installing the script:

In an HTML/JavaScript gadget placed at the beginning of the <body> section - this also allows you to use the effects on every page, but you have to make sure the respective gadget loads before you call any of the functions.
In the beginning of an article - this allows you to use the effects within that article only. However, the advantage you get by doing this is that the script won't affect the loading speed of the rest of your pages.

Because Blogger checks the formatting of your blog template every time you edit it, you'll need a special version of the script if you want to install it in the <head> section of your Blogger blog. On top of that, if you don't want to use all three effects, you can choose to install only the definitions for the fade functions, or only the definition for the buzz function.

To recapitulate, there are three available versions of the script:

fade functions only;
buzz function only;
fade + buzz.

Each of these versions has two variants:

One which can be installed in the template of your Blogger blog and...
Another one which can be installed in an article/gadget, or on any other type of site.

This makes a total of six choices, and to help you decide which one you should use, I've created the following JavaScript wizard:

Step 1

Where would you like to embed the code?
In the template of my Blogger blog.
In an article/gadget from my Blogger blog, or on any other site.

Step 2

Which functions would you like to use?
agawebs_fade_out() and agawebs_fade_in().
agawebs_buzz().
All three: agawebs_fade_out(), agawebs_fade_in() and agawebs_buzz().

Step 3

Get the code...

<!-- start agawebs fade + buzz functions -->

<script type="text/javascript">

var agw_timeouts = new Array();
function agw_fade(x, rv_opc) {
    document.getElementById(x).style.opacity = rv_opc / 100;
    document.getElementById(x).style.filter = &#34;alpha(opacity=&#34; + rv_opc + &#34;)&#34;;
}
function agawebs_fade_out(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    if (!step) step = 5;
    if (!pi) pi = 100;
    if (!pf) pf = 0;
    var agw_time = 0;
    var index = 0;
    for (i = pi; i &#62;= pf; i -= step) {
        agw_timeouts[obj_id][index] = setTimeout("agw_fade ('&#34; + obj_id + &#34;', &#34; + i + &#34;)&#34;, agw_time);
        agw_time += 20;
        index++;
    }
    if (flow == 1) setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.display = 'none'&#34;, (agw_time + 20));
}
function agawebs_fade_in(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    var agw_time = 0;
    if (flow == 1) {
        document.getElementById(obj_id).style.display = 'inline';
        agw_time += 20;
    }
    if (!step) step = 5;
    if (!pi) pi = 0;
    if (!pf) pf = 100;
    var index = 0;
    for (i = pi; i &#60;= pf; i += step) {
        agw_timeouts[obj_id][index] = setTimeout(&#34;agw_fade ('&#34; + obj_id + &#34;', &#34; + i + &#34;)&#34;, agw_time);
        agw_time += 20;
        index++;
    }
}
function agawebs_buzz(obj_id) {
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '5px 15px 15px 5px'&#34;, 20);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 40);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '15px 3px 5px 17px'&#34;, 60);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 80);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '7px 0 13px 20px'&#34;, 100);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 120);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '5px 10px 15px 10px'&#34;, 140);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 160);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '12px 12px 8px 8px'&#34;, 180);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 200);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '19px 0 1px 20px'&#34;, 220);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 240);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '5px 3px 15px 17px'&#34;, 260);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 280);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '17px 19px 3px 1px'&#34;, 300);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 320);
}

</script>

<!-- end agawebs fade + buzz functions -->

<!-- start agawebs fade functions -->

<script type="text/javascript">

var agw_timeouts = new Array();
function agw_fade(x, rv_opc) {
    document.getElementById(x).style.opacity = rv_opc / 100;
    document.getElementById(x).style.filter = &#34;alpha(opacity=&#34; + rv_opc + &#34;)&#34;;
}
function agawebs_fade_out(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    if (!step) step = 5;
    if (!pi) pi = 100;
    if (!pf) pf = 0;
    var agw_time = 0;
    var index = 0;
    for (i = pi; i &#62;= pf; i -= step) {
        agw_timeouts[obj_id][index] = setTimeout("agw_fade ('&#34; + obj_id + &#34;', &#34; + i + &#34;)&#34;, agw_time);
        agw_time += 20;
        index++;
    }
    if (flow == 1) setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.display = 'none'&#34;, (agw_time + 20));
}
function agawebs_fade_in(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    var agw_time = 0;
    if (flow == 1) {
        document.getElementById(obj_id).style.display = 'inline';
        agw_time += 20;
    }
    if (!step) step = 5;
    if (!pi) pi = 0;
    if (!pf) pf = 100;
    var index = 0;
    for (i = pi; i &#60;= pf; i += step) {
        agw_timeouts[obj_id][index] = setTimeout(&#34;agw_fade ('&#34; + obj_id + &#34;', &#34; + i + &#34;)&#34;, agw_time);
        agw_time += 20;
        index++;
    }
}

</script>

<!-- end agawebs fade functions -->

<!-- start agawebs buzz function -->

<script type="text/javascript">

function agawebs_buzz(obj_id) {
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '5px 15px 15px 5px'&#34;, 20);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 40);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '15px 3px 5px 17px'&#34;, 60);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 80);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '7px 0 13px 20px'&#34;, 100);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 120);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '5px 10px 15px 10px'&#34;, 140);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 160);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '12px 12px 8px 8px'&#34;, 180);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 200);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '19px 0 1px 20px'&#34;, 220);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 240);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '5px 3px 15px 17px'&#34;, 260);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 280);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '17px 19px 3px 1px'&#34;, 300);
    setTimeout(&#34;document.getElementById('&#34; + obj_id + &#34;').style.margin = '10px'&#34;, 320);
}

</script>

<!-- end agawebs buzz function -->

<!-- start agawebs fade + buzz functions -->

<script type="text/javascript">

var agw_timeouts = new Array();
function agw_fade(x, rv_opc) {
    document.getElementById(x).style.opacity = rv_opc / 100;
    document.getElementById(x).style.filter = "alpha(opacity=" + rv_opc + ")";
}
function agawebs_fade_out(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    if (!step) step = 5;
    if (!pi) pi = 100;
    if (!pf) pf = 0;
    var agw_time = 0;
    var index = 0;
    for (i = pi; i >= pf; i -= step) {
        agw_timeouts[obj_id][index] = setTimeout("agw_fade ('" + obj_id + "', " + i + ")", agw_time);
        agw_time += 20;
        index++;
    }
    if (flow == 1) setTimeout("document.getElementById('" + obj_id + "').style.display = 'none'", (agw_time + 20));
}
function agawebs_fade_in(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    var agw_time = 0;
    if (flow == 1) {
        document.getElementById(obj_id).style.display = 'inline';
        agw_time += 20;
    }
    if (!step) step = 5;
    if (!pi) pi = 0;
    if (!pf) pf = 100;
    var index = 0;
    for (i = pi; i <= pf; i += step) {
        agw_timeouts[obj_id][index] = setTimeout("agw_fade ('" + obj_id + "', " + i + ")", agw_time);
        agw_time += 20;
        index++;
    }
}
function agawebs_buzz(obj_id) {
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '5px 15px 15px 5px'", 20);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 40);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '15px 3px 5px 17px'", 60);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 80);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '7px 0 13px 20px'", 100);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 120);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '5px 10px 15px 10px'", 140);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 160);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '12px 12px 8px 8px'", 180);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 200);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '19px 0 1px 20px'", 220);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 240);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '5px 3px 15px 17px'", 260);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 280);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '17px 19px 3px 1px'", 300);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 320);
}

</script>

<!-- end agawebs fade + buzz functions -->

<!-- start agawebs fade functions -->

<script type="text/javascript">

var agw_timeouts = new Array();
function agw_fade(x, rv_opc) {
    document.getElementById(x).style.opacity = rv_opc / 100;
    document.getElementById(x).style.filter = "alpha(opacity=" + rv_opc + ")";
}
function agawebs_fade_out(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    if (!step) step = 5;
    if (!pi) pi = 100;
    if (!pf) pf = 0;
    var agw_time = 0;
    var index = 0;
    for (i = pi; i >= pf; i -= step) {
        agw_timeouts[obj_id][index] = setTimeout("agw_fade ('" + obj_id + "', " + i + ")", agw_time);
        agw_time += 20;
        index++;
    }
    if (flow == 1) setTimeout("document.getElementById('" + obj_id + "').style.display = 'none'", (agw_time + 20));
}
function agawebs_fade_in(obj_id, step, pi, pf, flow) {
    if (agw_timeouts[obj_id] == null) agw_timeouts[obj_id] = new Array();
    else for (i in agw_timeouts[obj_id]) clearTimeout(agw_timeouts[obj_id][i]);
    var agw_time = 0;
    if (flow == 1) {
        document.getElementById(obj_id).style.display = 'inline';
        agw_time += 20;
    }
    if (!step) step = 5;
    if (!pi) pi = 0;
    if (!pf) pf = 100;
    var index = 0;
    for (i = pi; i <= pf; i += step) {
        agw_timeouts[obj_id][index] = setTimeout("agw_fade ('" + obj_id + "', " + i + ")", agw_time);
        agw_time += 20;
        index++;
    }
}

</script>

<!-- end agawebs fade functions -->

<!-- start agawebs buzz function -->

<script type="text/javascript">

function agawebs_buzz(obj_id) {
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '5px 15px 15px 5px'", 20);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 40);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '15px 3px 5px 17px'", 60);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 80);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '7px 0 13px 20px'", 100);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 120);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '5px 10px 15px 10px'", 140);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 160);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '12px 12px 8px 8px'", 180);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 200);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '19px 0 1px 20px'", 220);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 240);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '5px 3px 15px 17px'", 260);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 280);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '17px 19px 3px 1px'", 300);
    setTimeout("document.getElementById('" + obj_id + "').style.margin = '10px'", 320);
}

</script>

<!-- end agawebs buzz function -->

To keep this article short, I'm only going to write instructions on how to install all three functions in the <head> section of your Blogger blog. So, assuming that's what you want to do, here are the steps you need to follow:

Choose the first answer (In the template of my Blogger blog.) for the first question above.
Choose the last answer (All three: agawebs_fade_out(), agawebs_fade_in() and agawebs_buzz().) for the second question.
Click the textarea that appears in order to select (highlight) the code and then right click the code and choose "Copy" from the context menu.
Go to the "Design" section of your Blogger blog, select the "Edit HTML" tab and download the full template to use it as backup in case anything goes wrong.
Locate the ending </head> tag in your template and paste the code you've copied immediately above it.
Finally, click the "SAVE TEMPLATE" button.

You are now ready to call these functions and start using the fade and buzz effects.

2. How do I use the functions?

Below is the syntax for each of these functions, and a short description for each parameter:

2.1. agawebs_fade_out (obj_id, step, pi, pf, flow)

Parameter	Description
obj_id	The id of the element which will fade out.
step	Optional. A numerical value, greater than 0 and less than 100, which determines by what percentage the opacity of the element changes on each iteration. A small value causes the element to fade out slowly, while a bigger value causes the element to fade out quicker. If omitted, the default value is 5.
pi	Optional. The initial opacity (initial phase) of the element. If omitted, the default value is 100.
pf	Optional. The final opacity (final phase) of the element. If omitted, the default value is 0.
flow	Optional. If this parameter is set to 1, the element is removed from the normal flow of the page after it fades out. Otherwise, the element is not removed.

2.2. agawebs_fade_in (obj_id, step, pi, pf, flow)

Parameter	Description
obj_id	The id of the element which will fade in.
step	Optional. A numerical value, greater than 0 and less than 100, which determines by what percentage the opacity of the element changes on each iteration. A small value causes the element to fade in slowly, while a bigger value causes the element to fade in quicker. If omitted, the default value is 5.
pi	Optional. The initial opacity (initial phase) of the element. If omitted, the default value is 0.
pf	Optional. The final opacity (final phase) of the element. If omitted, the default value is 100.
flow	Optional. If this parameter is set to 1, the function changes the "display" property of the element to "inline". Otherwise, the "display" property remains unchanged.

Note: In order to use this function, you need to declare the initial opacity of the element. Optionally, the initial "display" property of the element can be set to "none" and you can use the "flow" parameter to change the value of this property to "inline" before the element starts fading in.

2.3. agawebs_buzz (obj_id)

Parameter	Description
obj_id	The id of the element which will buzz.

Note: In order to use this function, the element has to have an initial 10 pixel margin.

Surely, the functions can be used within other JavaScript functions. However, a simple way of calling them is by using event attributes for the HTML elements on your pages. A comprehensive list of event handlers can be found on the w3schools site and below you'll find several examples for implementing these effects.

3.1. JavaScript fade image out on the click of a button

In this example, the agawebs_fade_out () function is triggered when the button is clicked. This causes an "HTML fade images out" visual effect and you can check it out by pressing the button below.

Source code

As you can see from the source code, this is the easiest way of using this function. All the optional parameters were left out and the only one I used was the id of the image.

It is important to note that the image id is encased in single quotes, while the function is encased in double quotes.

<input type="button" value="Click me!" onclick="agawebs_fade_out('adore1')" />
<img src="128/Adore.png" id="adore1" />

3.2. JavaScript fade image in on the click of a button

An opposite example to the one above. Press the button below to check out the "HTML fade images in" effect.

Source code

Again, the JavaScript fade image function is used in its simplest form and, as before, the id of the HTML fade in element is encased in single quotes.

The difference is that I declared an initial value of 0 for the image opacity in order for the "HTML fade images in" effect to work – as noted in section 2.2.

<style type="text/css">
#cool1 {
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<!-- this style definition goes in the <head> section of
the page -->
<input type="button" value="Click me!" onclick="agawebs_fade_in('cool1')" />
<img src="128/Cool.png" id="cool1" />

3.3. Image buzzes on the click of a button

Source code

The agawebs_buzz () function is very easy to use, but the HTML element has to have an initial 10 pixel margin – as noted in section 2.3. In this example, I used an inline style declaration to create the required margin.

<input type="button" value="Click me!" onclick="agawebs_buzz('cry1')" />
<img src="128/Cry.png" id="cry1" style="margin: 10px" />

3.4. agawebs_buzz() triggered by the "onmouseover" event

Unlike the previous examples, in this one I used the image itself to trigger the HTML buzz effect. Hover your mouse cursor over the emoticons below to make them shake.

Source code

This time, I used an "internal style sheet" to create the required 10 pixel margin for the images. Apart from that, I replaced the literal id of each image with the "this.id" variable and left out the single quotes.

<style type="text/css">
.10p_margin { margin: 10px; }
</style>
<!-- this style definition goes in the <head> section of
the page -->
<img src="64/Adore.png" id="adore2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Cool.png" id="cool2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Cry.png" id="cry2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Furious.png" id="furious2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Laugh.png" id="laugh2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Pudently.png" id="pudently2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Struggle.png" id="struggle2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Study.png" id="study2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
<img src="64/Sweet-angel.png" id="sweet2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />

3.5. Fade in, fade out JavaScript effects for the same image

A JavaScript fade effect is used both for the mouse over and for the mouse out event. Hover your mouse cursor over the emoticons below to trigger the "HTML fade images out and in" effects.

Source code

<img src="64/Adore.png" id="adore3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Cool.png" id="cool3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Cry.png" id="cry3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Furious.png" id="furious3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Laugh.png" id="laugh3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Pudently.png" id="pudently3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Struggle.png" id="struggle3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Study.png" id="study3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
<img src="64/Sweet-angel.png" id="sweet3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />

3.6. The other way around

Using the JavaScript fade functions in the opposite order could be useful in the case of a navigation menu like the one below. Each image could represent a link button.

Source code

The source code for this example is a bit more complicated, but I've taken this opportunity to demonstrate the use of the other parameters of the fade in, fade out JavaScript functions. I used an "internal style sheet" to set the initial opacity of the images to 30 and then used the same value as the "pi" and "pf" parameter for the agawebs_fade_in () and agawebs_fade_out () functions respectively.

<style type="text/css">
#navigation-disk-holder {
width: 510px;
height: 300px;
margin: 0 auto;
position: relative;
}
#navigation-disk-description {
width: 100px;
height: 39px;
text-align: center;
position: absolute;
top: 118px;
left: 200px;
font-size: 14px;
padding: 25px 0 0 0;
overflow: hidden;
}
#xy001, #xy002, #xy003, #xy004,
#xy005, #xy006, #xy007, #xy008 {
position: absolute;
opacity: 0.3;
filter: alpha(opacity=30);
}
#xy001 { top: 18px; left: 218px; }
#xy002 { top: 47px; left: 289px; }
#xy003 { top: 118px; left: 318px; }
#xy004 { top: 189px; left: 289px; }
#xy005 { top: 218px; left: 218px; }
#xy006 { top: 189px; left: 147px; }
#xy007 { top: 118px; left: 118px; }
#xy008 { top: 47px; left: 147px; }
</style>
<!-- this style definition goes in the <head> section of
the page -->
<div id="navigation-disk-holder">
<img id="xy001" src="64/Adore.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Home';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy002" src="64/Cool.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Contact Info';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy003" src="64/Cry.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Index by Date';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy004" src="64/Furious.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '50px'; document.getElementById('navigation-disk-description').style.padding = '14px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'Index by Category';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy005" src="64/Laugh.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Links';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy006" src="64/Pudently.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '50px'; document.getElementById('navigation-disk-description').style.padding = '14px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'Apuseni « AgaWebs';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy007" src="64/Struggle.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '50px'; document.getElementById('navigation-disk-description').style.padding = '14px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'Blogger « AgaWebs';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<img id="xy008" src="64/Study.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '64px'; document.getElementById('navigation-disk-description').style.padding = '0'; document.getElementById('navigation-disk-description').innerHTML = '<img src="64/Sweet-angel.png" />';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
<div id="navigation-disk-description">NAVIGATION</div>
</div>

3.7. Breaking the flow

This example is meant to demonstrate the use of the "flow" parameter for the fade in, fade out JavaScript functions. When you click the evil emoticon the angel enters the normal flow of the page pushing the other image to the left and then slowly fading in. When you click the angel emoticon, the evil one fades out and is then removed from the normal flow of the page, making the angel slide towards the center.

I'm not sure how useful this is, but the fade in, fade out effects from jQuery and script.aculo.us both have this feature, so I added it to my functions as well.

Source code

Notice that the "step" parameter for both functions has the value 2, making the images fade slower than the previous examples. I used an inline style declaration to set the initial opacity of the angel to 0 and its "display" property to "none".

<img src="128/Furious.png" id="furious1" onclick="agawebs_fade_in('sweet1', 2, 0, 100, 1)" />
<img src="128/Sweet-angel.png" id="sweet1" style="opacity: 0; filter: alpha(opacity=0); display: none" onclick="agawebs_fade_out('furious1', 2, 100, 0, 1)" />

3.8. Text fader for a rotating paragraph

The fade in, fade out JavaScript functions can be used to create a "text fader" for a paragraph which changes its content regularly. In this example, the first transition occurs after 10 seconds and then the paragraphs change back and forward every five seconds.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis, unde omnis iste...

At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus...

Source code

I used the setTimeout () and setInterval () methods to control timing. Notice that the fade in, fade out JavaScript effects have to be applied to the images as well - otherwise, this would only work in Firefox.

<div style="text-align: justify; height: 130px; position: relative">
<p id="rotating-para1" style="position: absolute; top: -10px">
<img src="128/Laugh.png" id="laugh1" style="float: left; margin: 0 20px 0 0" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis, unde omnis iste...
</p>
<p id="rotating-para2" style="position: absolute; opacity: 0; filter: alpha(opacity=0); top: -10px">
<img src="128/Pudently.png" id="pudently1" style="float: right; opacity: 0; filter: alpha(opacity=0); margin: 0 0 0 20px" />
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus...
</p>
<script type="text/javascript">
function ag_switch() {
setTimeout("agawebs_fade_out('rotating-para1', 5, 100, 0)", 0);
setTimeout("agawebs_fade_out('laugh1', 5, 100, 0)", 0);
setTimeout("agawebs_fade_in('rotating-para2', 5, 0, 100)", 500);
setTimeout("agawebs_fade_in('pudently1', 5, 0, 100)", 500);
setTimeout("agawebs_fade_out('rotating-para2', 5, 100, 0)", 5000);
setTimeout("agawebs_fade_out('pudently1', 5, 100, 0)", 5000);
setTimeout("agawebs_fade_in('rotating-para1', 5, 0, 100)", 5500);
setTimeout("agawebs_fade_in('laugh1', 5, 0, 100)", 5500);
}
setInterval("ag_switch()", 10000);
</script>
</div>

4. Compatibility & Support

These JavaScript functions work for virtually any HTML object. I've only encountered problems with fading embedded Flash objects, but that's quite normal. The functions have been tested in the following browsers:

Firefox v.3
IE v.7 and v.8
Google Chrome v.7
Opera v.10 and v.11
Safari v.5

For support and help with implementing these effects on your site or blog, don't hesitate to contact me by email or by writing a comment. Also, please post your feedback or any suggestions you may have.

Efix.ro

2010-11-06T11:22:00.001+02:00

efix.ro

Charlie Chaplin

2010-10-30T10:59:00.000+03:00

Many of us heard about this great actor, many are familiar with the tramp character he used to act and many more can recognize his image in an instant...

However, as time goes by, increasingly fewer people are actually watching his movies. Flashy special effects used in modern day cinematography are driving people's attention further and further away from classic films and Chaplin's masterpieces are gradually forgotten.

In a minor effort to prevent this from happening, I'd like to bring to your attention three of his movies which he released through the "United Artists" film studio in 1931, 1936 and 1940. Click the images below to read more about them.

For the atmosphere they create, for the dramatic stories they tell in a comical fashion and for the message of hope they convey, I promise they're worth seeing. Do get hold of them as soon as you can, have fun watching and tell me your opinion afterwards if you feel like it.

New Template and More AgaWebs

2010-10-26T11:18:00.002+03:00

It's been two years since I bought this domain (agawebs.com) and started using it for my blog. I know this because I've recently had to renew it and extend it for two more years. To mark this occasion I've created a new template and I hope you like it.

I'm not ready to completely let go of the old template yet, so I'm keeping the old header banner in this post...

If you find any bugs or mistakes in any of the articles caused by this new template, please post a comment to let me know. And if you've enjoyed this blog so far, I hope you'll enjoy the new look even more from now on...

P.S.: Solve the riddle above to unlock a hidden message (Hint: Apuseni is number one).

Retezat, Gentiana, Lake Bucura

2010-07-26T03:06:00.016+03:00

What do you call the feeling you have when you're on a mountain top? How do you describe it? How do you tell people what's inside your soul in those moments? I can't figure out how, so instead I'll just try to describe the last time I felt this way.

The week before leaving on a mountain trip is an adventure in itself. It's a period when you buy your supplies, you make your plans and you start getting an electrical feeling of excitement in your stomach. And then this week ends and the day finally comes when it's time to leave. For me such a day was in September, last year. I woke up at four in the morning and met my travel ally in the parking lot before the sun had gotten a chance to rise. In a matter of minutes we were on the highway and as the dawn was rising on the horizon we were on our way to the mountains.

It was noon when we reached our first destination at Carnic. Carnic is a quiet little settlement on the outskirts of Mountain Retezat. To reach it we had turned left on the 66th National Road and driven through "Ohaba de Sub Piatra", "Salasu de Jos" and "Salasu de Sus". We had a quick meal in the village and prepared ourselves for what lied ahead: the border of Retezat National Park was just one or two kilometers further away.

The hike from Carnic to cabin Gentiana lasted about three hours. For the first two we walked on an old forest road which travelled parallel to a small river. At one point we crossed the river and headed into deep woods on a trail marked with blue triangle signs meant to guide hikers. Cabin Gentiana was waiting at the other end of this alpine forest. As soon as we gained altitude, large trees gave way to smaller fir trees and we soon ran into this humble little refuge standing at the bottom of a valley called Pietrele. This was going to be our base camp.

When we arrived at Gentiana the only people there were old man Costea - the cabin keeper – and one of his helpers. They greeted us with tuica (Romanian strong spirits) and gave us advice on which places we should go to. After a good meal and another shot of tuica we gathered out litter in a bag and went to sleep. We were soon to find out that we were sharing the room with a nosy mouse who was interested in our bag of rubbish. Although the noise he was making made us weary at first, we realized his peaceful intentions and had a good nigh sleep from then on.

The next day started early in the morning. By nine o'clock we were already hiking through Pietrele Valley and heading towards higher altitudes. To the east, the valley was enclosed by a ridge called Pietrele and to the west there was a ridge called Stanisoara. After about an hour of walking southwards we finally reached the top of the valley. Hundreds of years ago, up here stood a huge glacier. It slowly slid down the mountain, grinding and smashing the rocks underneath it to form Pietrele Valley (eng: pietrele = the rocks). Today, Lake Pietrele is the only tell tail sign of that glacier's existence. Above it and directly to the south lies summit Bucura II (2378m) standing next to its taller twin Bucura I (2433m) – two peaceful giants imposing their presence on the surroundings.

Our trail took us up to the lake and then turned eastwards. We soon had to climb a steep slope overlooking the lake and the entire valley, to reach Curmatura Bucurei (2206m). This is a key location on the northern ridge of mountain Retezat and the hike from Gentiana to this point normally takes two and a half hours. It's a place where several trails meet and from which you get and amazing view of some of the most important lakes and mountain peaks in Retezat.

We decided to climb a bit higher, going east onto Custura Bucurei (2457m). From there we finally got a clear view of summit Retezat (2485m) proudly rising in the north-west, over Stanisoara ridge – probably the most spectacular summit of them all. Besides Retezat, there was Peleaga (2509m) to the east – the highest summit in mountain Retezat, Lake Bucura to the south, peaks Bucura I and Bucura II to the west, which we were now seeing from a different angle and to the north a bunch of smaller lakes called Pietricelele, hanging over the larger lake Pietrele.

After having seen all this, we headed east again, and although our initial plan was to reach Peleaga, we soon turned right and descended straight towards Lake Bucura and the mountain rescue shelter next to it. This was where we spent a couple of hours enjoying the scenery and having our lunch. Since this place is situated in the heart of mountain Retezat, the southern end of Lake Bucura is a popular camping site and a good place from which you can set off on various expeditions. Looking west we saw Poarta Bucurei (Bucura's Gate) high up on a ridge which separated Bucura Valley from Retezat National Reservation.

Going back to Gentiana we climbed onto Curmatura Bucurei from the south and descended towards Lake Pietrele, catching one more glance of summit Retezat. An old legend speaks about a terrible dragon which used to roam these places. The dragon met its end when a king chopped its head off after an epic battle, throwing the beheaded body onto these lands. The body turned into stone to form mountains and from a far, summit Retezat looks as if its tip was cut off, reminding people of the old dragon slaying king (eng: retezat = chopped / cut off). It was this summit that we wanted to reach the next day.

Having returned to Gentiana we were determined not to let our rodent acquaintance disturb our sleep again. So after a bone chilling river bath and an exquisite sausage and beans dinner we left our rubbish bag outside the cabin and went to bed. Next morning we found out that Rocky the fox had visited the cabin overnight and torn the bag, spreading litter all over the place. Gathering that litter provided a much needed morning exercise and really got our blood pumping, preparing us for the trip that lied ahead.

By eleven o'clock that day we had reached Lake Pietrele once again and turned westwards this time to climb ridge Stanisoara. Once on top of it, summit Retezat revealed itself closer than ever, in all its magnificence. Unlike the moonscape in Pietrele Valley, the vegetation was much richer in the valley that lied beneath the summit, proving once again that grass is always greener on the other side. One more stop by the Stanisoara Lake and then on we went towards Saua Retezat.

A half hour hike was all that was separating us from reaching the summit. The track went over gravel, rocks and boulders all piled on top of each other to discourage us from pushing on. But on we went once again and after an excruciating climb we were there. All we had set out to do was now accomplished and all of Retezat's secrets were revealing themselves beneath us. Stanisoara Valley with its lake and creeks, Lolaia ridge with an imposing summit, twin peaks Bucura I and Bucura II once again, Peleaga melting in a distant mist, Saua Retezat and Poarta Bucurei and finally the entire National Reservation area stretching towards the horizon. All these were displayed in front of us in a 360 degree showcase. This was the reward for all our efforts and that was the feeling I had the last time I was on a mountain top.

View Retezat, Gentiana, Lake Bucura in a larger map

Quality Web Design vs SEO Techniques

2010-07-11T21:17:00.011+03:00

The bits of this article which refer specifically to search engine optimization (SEO) techniques for Blogger blogs are highlighted with italics. You can look for those, you can read the entire article (recommended though unlikely), or you can click the links below to jump straight to...

Intro – MythBusting
1. Quality Content
2. Clear, Accessible Format
3. Link Building
4. SEO (General and Blogger SEO)
Conclusion

During the few years since I started this blog I've seen a lot of visitors clicking the SEO label in my sidebar and a lot of people asking for SEO tips for their Blogger blogs. I don't claim to be a professional SEO but I have gathered some experience while working on this blog and on other sites as well. Because of all this, I feel the duty to explain my opinion on search engine optimization and present a few SEO techniques one can apply for Blogger blogs.

There seems to be a myth surrounding this topic and many blog or site owners seem to believe that search engine optimization is some sort of black art which turns plain metal into gold and any kind of web content into an instant hit. Many of us have thought this way about SEO at one point or another, in a certain degree. In this article I intend to contradict this myth, prove that SEO is part of a bigger picture and that there are other things one needs to focus on first. I would like to show that when it comes to creating a good website, things should be done in a certain order instead of randomly. Finally, by referencing the sources where I get my information from, I will demonstrate that there are plenty of good, clear and trustworthy ways of learning about SEO and website development.

Therefore, the general subject I'm going to talk about is "making a good blog or website" and I've broken it down into four categories. These can be seen as steps one needs to follow in order to create a good website and I've ordered them based on their importance - this is not the chronological order in which you'd build a site.

1. Quality Content

It's common sense that good, unique and compelling content should be the starting point for all websites. Sometimes we get frustrated that our articles don't appear in search results despite all the SEO we've done and we blame search engines for not being fair or we try to apply even more "SEO tricks" (or is it just me that does that?). In such cases I say we should instead take a look at our content and see if there's any room for improvement. Maybe we need to expand certain topics that are related to the general subject of our blog or site, maybe we need to think more outside the box and present our stories or products in an original way and maybe there's more content we can add to answer the needs and questions of our visitors. If any of these are true for the content of your site or Blogger blog, they should be treated with priority.

When making a website, the most important goal should be to add value to a community. So whether you have a product or a service you'd like to advertise or you simply want to tell your story or opinion, think about how you can make these as useful and original as possible. It's often a good idea to do some research and see what other sites have to say on the same subject or, in case of a new article for an existing blog, check out the statistics gathered by your favorite visitors tracking tool and find out your community's needs from that data.

2. Clear, Accessible Format

Good content is next to nothing if it's difficult to reach or if it's packed with banners or ads which a visitor has to dodge in order to find the useful bits. A clear layout of your content and pleasant overall look of your site is very important. This shows that you've taken the time to create a website that looks nice, it shows you respect your visitors and thus it helps you gain their respect and trust in return. It's easy to see that a good website should have a good (folder) structure, clear navigation menus, index pages or HTML sitemaps, search boxes, perhaps a sidebar widget for recently visited pages etc. Ads should not take up a lot of space and even if you want to attract visitors' attention to them you should make sure they don't cause ad-blindness.

Format is also about making sure your content can be seen by a wide range of visitors. Think about the fact that some of your visitors may use various browsers (even outdated versions), with various settings. Some browsers may not support Java, Flash or JavaScript, others may be phone browsers that display HTML only and others may be set up for blind users or for people with other disabilities. Depending on the topic of your site or blog you'll probably want to address some of these issues and you should note that if you do your website will look more professional.

In order to solve most of the browser compatibility issues you should validate your pages using tools like the one offered by the World Wide Web Consortium (W3C) which is the main authority for developing WWW standards. You can also find guidelines on how to make your website accessible to people with disabilities on their site.

Another important aspect that needs to be mentioned in this section is the loading speed of your pages. There's a very useful section in Google Webmaster Tools which can help you with that. However, they also recommend installing the Page Speed add-on for Mozilla Firefox. It can be used to debug page loading issues and it is highly recommended you do so. This whole page speed area includes aspects regarding external resources like CSS or .js files and images loaded from different servers. So by taking care of the loading speed of your site you will also find the best ways to integrate such resources and maintain a balance between your HTML content and other technologies like JavaScript, AJAX or Flash.

For blogs hosted on BlogSpot most of the accessibility issues have either been taken care of for us or we don't have the means to change certain parameters that need improvement. For example, the label system and blog archive make it easy for visitors to find what they want, but there are many external resources (like CSS files) which increase the number of DNS lookups (decreasing loading speed). Non-the-less, there's improvement to be made for these blogs as well and the measures one can take vary from one blog to another – the best way to find out what you should do for your site is to use the tools I mentioned and see what they recommend.

So far, the format aspects I mentioned are all meant to help your human visitors and at this point the focus should be primarily on them. Later, you'll notice that some of these measures have an effect for search engine bots as well, but I'll talk more about that in the next sections of this article.

3. Link Building

This step of the site building process involves a bit of luck. However, if you've taken care of the first two steps properly and you're committed to keep up the good work, you're ready to make your own luck and succeed in this area as well.

As you can tell from the title of this section, what you need to do at this point is get yourself and your site noticed on the web. The aim is to convince other site owners to link to your blog or website. There are several approaches you can use to increase your chances of achieving that. I'm going to mention only four of them: advertising campaigns, link exchange, directory submissions and comments or contributions on blogs or forums.

The first two are quite straight forward and self-explanatory. Ad campaigns are especially useful for business sites and for those who are looking for quick results. Link exchange is risky and should be done with caution. Personally, I'm not a big fan of the third option and I've always felt we offer more to blog directories (for example) than they offer in return. As long as it's a popular directory however, like Technorati for example, I suppose one could find it useful to submit his/her blog there.

The fourth option is by far the best one and it's also the hardest. It implies getting involved in on-line communities that discuss issues related to your site's topic. I'm talking about forums and blogs that are already popular, existing groups on social media sites or even groups you can start yourself on such sites. Among the numerous examples, I'd like to mention Answers.com, Yahoo! Answers, FaceBook groups or LinkedIn. As long and you make good contributions on such sites, slowly but surely you will start building a reputation and people will start giving you those organic links. This approach is explained in an article from the official Google Webmaster Central Blog and you should have a look through it in order to see more suggestions.

There's a related topic here on how to share your site's content on these social media communities and it involves special Meta tags you can add in order to control the aspect of your content on these sites. If you've read my Meta Description articles and got the hang of the methods used there, you could try to adapt them for these FaceBook share Meta tags. I'm planning on making another automatic code generator to include such tags as well, but I'm still experimenting for now and trying out different things.

Again, the things I've presented in this section are things you do for your human visitors. You don't need to worry about whether or not certain on-line communities add a "rel=nofollow" attribute to your links or whether their content is crawlable. As long as these are popular communities and as long as people get to see your contributions, this effort is worthwhile.

4. SEO (General and Blogger SEO)

Now that your website has compelling content and clear format and search engines are crawling in from the organic links you earned, it's time to make sure the site is crawlable, search engine friendly and that search engines will index as much of your useful content as possible. Since this is the most technical part of my post, I've used a few important articles as reference: Google Webmaster Guidelines, Google's Search Engine Optimization Starter Guide, Official Google Webmaster Central Blog, Yahoo! Search Help Topics and articles from a Romanian SEO forum. I chose the latter source because one of the moderators there used to work for the same company as I did a few years ago and he got really good results for our website. Therefore, I had to adapt this last source of information in order to fit my view on search engine optimization, I adapted Google's info to make it work for other search engines as well and I scaled everything down to make these SEO techniques compatible with Blogger blogs.

Before we start I'd like to say a few words about the mind frame one needs to be in when doing SEO. Search engines are here to help bloggers and webmasters deliver their content to their audience. We, in turn, should try to help them crawl our sites and make our pages as search engine friendly as possible. Therefore, SEO is a way of working hand in hand with these engines in order to provide the best possible experience for our visitors.

The first thing one should understand before starting to optimize his/her Blogger blog or any other type of site is the structure of a search result. One such search result is made up of a title, a short snippet describing the content of the page it points to and the URL of that page. When words in the title, snippet or URL match the words in a search phrase, they become bolded to indicate how relevant the result is for that specific query. These bolded words are known as keywords and because search engine algorithms depend so much on them it's only natural for us to start our SEO efforts with...

4.1. Keyword Selection

Look for sites that present similar topics to yours and study them. They are your competition and you need to find out how popular they are (page rank is a good indicator) and what keywords they targeted. Sometimes these sites use a keywords Meta tag in their source code and you can look at that in order to find out which keywords you should avoid (in case the competition is too strong) and which to go for.

Use a keyword suggestion tool in order to see what people are searching for. A couple examples of such tools are: Google's AdWords suggestion tool and Wordtracker's tool. Apart from the fact that they suggest various combinations of search phrases, they also show how often people search for these terms. We'll use the term "short tail" for search phrases made up of few words and "long tail" for longer phrases. Short tail keywords are searched more often and they could bring more traffic to your site because they cover a larger logical area, but it is also harder to SEO your website for them as there are many other sites targeting them at the same time (some may be much more popular) and the competition is tougher.

After doing the research described above you end up with a list of keywords which you should sort by difficulty – short tail keywords and keywords that are searched more frequently should go at the top of your list, while long tails go at the bottom. This Seopedia.ro article then recommends that you arrange the keywords into three tiers:

Tier 1 – high difficulty
Tier 2 – medium difficulty
Tier 3 – long tail search phrases for which it is more likely that your site will appear at the top of the search engine result pages (SERPs)

Let's go on and see where you can use these keywords...

4.2. Domain Name

Unless you want to use a generic domain name (like I use for this blog) you can get a head start by selecting a domain that contains two or three of your Tier 1 keywords. Don't use too many though, because it will look silly and there's a change of getting penalized. Many webmasters may use the actual URL of your site to link to it and if they do, you'll get those Tier 1 keywords in the anchor text of that inbound link – as we'll see later, this is very beneficial for your blog or website.

Once you've chosen your domain name, you should decide whether you want it to appear with or without the "www" prefix. You need to take measures in order to make sure that both these versions point to the same site. Not doing so will cause page rank dilution. The measures you can take are:

configuring the .htaccess file on your server to redirect one version of the domain
choosing the appropriate settings from a domain manager interface offered by the company from which you bought the domain – in case you don't have access to the server on which your site or blog is hosted
choosing an option from Google's Webmaster Tools

For blogs hosted by Blogger, it's important to decide whether you want to stick with the subdomain they offer for free (example.blogspot.com) or publicize on your own custom domain. The latter option shows more authority and it's better from a SEO point of view. You can find a lot of resources on how to switch to a custom domain and a few extra tips in the article I wrote when I switched to agawebs.com. Note that when you do this switch your Blogger blog loses its page rank for a while even if you use 301 redirects and it takes some time before you regain it.

Lately, Google has been placing special emphasis on geo targeting. The name of the domain you choose has a high impact on how they determine where in the world is your target audience. For example, domains that end in .fr, or .ro are used to inform search engines that your audience is in France or Romania and they don't work so well if you also want to reach other countries. If you have a world-wide audience the best option is to choose a .com domain.

4.3. URL Structure

Search engines can generally find your keywords both in dynamic and static URLs. As far as dynamic URLs are concerned, it's recommended not to use session IDs or any other sort of randomly generated numbers in their structure and use as few name–value pairs as possible.

If possible, I think the best option is to avoid dynamic URLs altogether and stick with static, sharable URLs – i.e. if you send such a URL to friends via email, they will see the exact same content you saw. The structure of a static URL is closely connected to the folder structure of your site. Because of this, it is recommended you keep pages with a certain common topic in the same folder and name it using one of your Tier 1 or Tier 2 keywords. The names of the pages themselves should be assigned other Tier 1, Tier 2 or Tier 3 keywords.

For any given page or folder name, you should separate your keywords using hyphens ( - ) instead of underscore ( _ ) or any other symbol. Use only lowercase letters. URLs should not be very long and if possible, they should be easy to memorize by a human. In conclusion, a good URL looks like the example below:

http://www.t1kwd-t1kwd.com/t2kwd/t2kwd-t3kwd-t3kwd.htm - where t1kwd is a Tier 1 keyword and so on.

Don't worry if you're not getting this right now. There's an example is section 4.8 which will explain things more clearly.

For Blogger blogs, post pages have static URLs and they are formed automatically based on the title of your post. In order to use certain keywords in this URL and not use them in the title of your article you can do this: initially you publish your post using a title made up of the keywords you want and then you edit the post and change the title to something more natural – the post page will keep that initial permalink.

There are also certain dynamic URLs on a Blogger blog, like:

http://www.agawebs.com/search?updated-max=2009-02-12T22%3A13%3A00%2B02%3A00&max-results=5

"max-results=5" is a name–value pair like I mentioned above. Not only are these links hard to remember and don't make much sense to a human, but as we'll see later, the corresponding Blogger pages contain duplicate content and we'll have to take measures to keep them from being indexed.

4.4. Page Titles

Page titles are declared in the <head> section of any given page and they're encased in <title> tags. These page titles appear on SERPs (search engine result pages) on the first line of a search result entry (as I mentioned in the description of a search result made earlier). Because of this, they are important SEO elements and you should use keywords from your list when writing these titles.

However, page titles should also be descriptive and look natural to humans. As a way of telling whether a page title is good or not, think whether you yourself would click such a link if you saw it on a SERP.

Write unique and accurate titles for each page. For Blogger blogs it is indicated to use the hack for swapping article titles with the blog title. Furthermore, you can use variations from that hack in order fine tune titles even more.

4.5. Meta Description

Most often a page's Meta description is used by search engines to create the short snippet that is part of a search result. Thus, it also appears on SERPs and like the page title it is an important SEO element. On a site or blog, this description is declared within the <head> section of each page, in a Meta tag.

Meta descriptions contain more words than a page title and should be used to briefly summarize the content of the respective page. Use keywords from all three Tiers for these descriptions, make them unique for each page and use different words than the ones in the actual content of your page.

For Blogger blogs, the Meta description hack provides the best solution I know of. I've seen attempts to automatically create Meta descriptions using article titles or even entire paragraphs from the articles. You're better off without any Meta descriptions at all than to use such an approach.

4.6. Meta Keywords

This is a Meta tag that's similar to the one for Meta descriptions. The only difference is that its content holds raw keywords separated by commas. However, as a visitor recently pointed out, this Meta tag is not used by Google in web ranking. Furthermore, as I explained in section 4.1, it can be used by other webmasters to discover your site's weak spots and outrank yours in SERPs.

Personally, I still use this tag for some of the articles on this blog because engines like Yahoo! still take it into account. Again, the only way to create unique keyword tags for each of your Blogger pages is by using the Meta description hack.

4.7. Other Meta Tags

There's a large number of other Meta tags which can be used in the head section of your site or blog. Examples include:

special Meta tags for certain platforms' API
author
date
copyright
expires
refresh
revisit after

While some of them should be used only for very specific purposes, others are optional or irrelevant and others (like the last three on my list) are NOT recommended. For reference you can use articles like: Meta tags - Webmaster Tools Help or Meta Tags Explained.

There's one more important Meta tag I'm leaving out for now and I'm referring to the Meta Robots tag. This can be used to prevent duplicate content or pages that are not useful from being indexed and I'll talk more about it in section 4.11.1.

4.8. Keyword Placement & Density (underline, bold, italics and headings)

A regular site should be tailored based on the 3-Tier hierarchy described in section 4.1. You should use the homepage and a few other important pages to target Tier 1 search phrases, by placing these keywords in the respective URLs, page titles, Meta descriptions as well as inside the content.

Less important articles on your site should be used for targeting Tier 2 search phrases, also by placing keywords as described above. Try to create Tier 2 pages that are each optimized for a single Tier 2 search term – because these search phrases have a medium difficulty and medium number of searches, there's a good chance that you will attract most of your visitors with them. On top of that, you should link these less important pages from the more important ones and use Tier 2 keywords in the anchor text of the respective links. If possible, use the rest of your pages and articles to target Tier 3 keywords and link them from Tier 2 pages.

To make this more clear, I'll use a quick and very basic example: a dog health website. Here is the (very brief) list of keywords I picked for this topic (as described in section 4.1):

Keyword	Tier	Global Monthly Searches	Competition
dogs health	T1	74,000	High
dog kidney failure	T2	8,100	High
dog anemia		3,600	Medium-High
dogs diagnosis		2,900	Medium
dog anemia treatment	T3	170	Low
dog anemia symptoms		140	Low
dog anemia causes		73	Low

After deciding on these keywords, I'll choose the domain name for my website making sure I use Tier 1 keywords in it - I'll go for "dogshealth.com". The page name of my homepage is going to be "index.htm" and it's going to be placed in the root folder of my website. When my web server receives a HTTP request for the root folder, it will automatically send this "index.htm" page (this is done by default). Therefore, the URL of my homepage will be http://dogshealth.com/ and it will only contain those two Tier 1 keywords. The page title, Meta description and page content of this homepage will also be optimized for Tier 1 keywords.

Following the guidelines in section 4.3, I'll then create three folders within the root folder and name them using Tier 2 keywords: "dog-kidney-failure", "dog-anemia" and "diagnosis". In each of them there's going to be an "index.htm" page with title, Meta description and content that target the respective Tier 2 keywords. As for the root folder, these "index.htm" pages are going to be served automatically when a visitor requests to see the contents of the level 2 folders. I will also place links on my homepage, pointing to these Tier 2 pages. The anchor text of the links from the homepage will contain Tier 2 keywords that correspond to each page.

To target Tier 3 keywords as well, I'll create three new pages in the "dog-anemia" folder (for example). These pages will be named using Tier 3 keywords as described in section 4.3. I'll place links in the Tier 2 article from http://dogshealth.com/dog-anemia/ pointing to these three subpages and I'll use the respective Tier 3 keywords in the anchor text of those links.

In the end, the folder structure and URLs of my website will look as follows:

Page URL	Targets keywords from...
http://dogshealth.com/	Tier 1
http://dogshealth.com/dog-kidney-failure/	Tier 2
http://dogshealth.com/diagnosis/
http://dogshealth.com/dog-anemia/
http://dogshealth.com/dog-anemia/causes.htm	Tier 3
http://dogshealth.com/dog-anemia/symptoms.htm
http://dogshealth.com/dog-anemia/treatment.htm

For Blogger blogs, most post pages are equally important from a site architecture point of view. To a certain extent, you can make a differentiation between post pages on BlogSpot by controlling the flow of internal link juice, but the general idea of using a 3-tire keywords hierarchy needs to be applied differently. For a blog, you may find it necessary to use keywords from all three Tiers on a single post page and to do that you should use the following suggestions on how and where to place keywords on a page.

Make use of headings and heading tags (<hN> - where N is a number from 1 to 6), and emphasize your keywords using bold, underline and italic text. Search engines use heading tags to understand the structure of your articles and they consider that bolded, underlined or italic text contains important elements of the article. For example, you could use Tier 1 keywords in the main heading of your article (<h1>) and optimize the introduction text for the same keywords. You can then write two or three subsections for that same article, use <h2> headings for each subsection and optimize both the headings and the subsections for Tier 2 keywords.

Certain SEO professionals also take into account the keyword density they get when writing an article. Some say up to 10% of an article should be made up of keywords. You can check the keyword density of your articles using automated tools like: Textalyser or LinkVendor's density checker. My personal opinion is that keywords should be used naturally within a text and one should not worry if this density level isn't reached, especially as long as the article is well written and descriptive.

4.9. Links

Links have a central role in page ranking for many search engines and especially for Google. Google was founded (by Larry Page and Sergey Brin) on the idea that the relevance of a website is reflected by the relationships between sites, and these relationships are represented by links. This is why links have a special importance.

A link is made up of an anchor text encased in HTML anchor tags (<a>) and a "href" attribute that indicates which page the link points to. The most basic HTML code for a link looks like this:

<a href="http://www.agawebs.com">anchor text</a>

There are three other important attributes you can use in the opening <a> tag of a link:

title="short description": use this attribute to specify more information about the page it points to
rel="nofollow": use this attribute for pages to which you do not want to transfer page rank. Here are some other values for the "rel" attribute. In section 4.11 we'll also look at how this attribute can be used to avoid duplicate content
target="_blank": specifies that the linked page should be opened in a new window. Use it when you want to make sure visitors remain on your site. Other values for the "target" attribute can be found on this W3Schools page

Therefore, a more complex HTML code for a link that uses all these attributes would look like this:

<a href="http://www.agawebs.com" title="short description" rel="nofollow" target="_blank">anchor text</a>

4.9.1. Outbound Links

Link your pages to sites that are important and relevant to your topic. Use keywords within the anchor text and title attribute and make them short, descriptive and accurate. For example, a link that says "click here" has much less SEO value than one that says "article about Blogger Meta descriptions". The reason why you should do this when linking to other sites is because you will want to receive such high quality links yourself and thus, you should do the same for others. Secondly, search engines will consider that words in the anchor text of your links are important focal points of your article.

In case part of your site's content is generated by visitors' contributions and comments, you should automatically add the rel="nofollow" attribute to any links they may post. This discourages spammers and ensures you don't transfer page rank to any sites you cannot vouch for. For blogs hosted on BlogSpot, this is done automatically by the Blogger platform. Although it's not recommended, you can change this behavior for your blog by editing the HTML template.

4.9.2. Internal Links

These are links on your own site which point to other pages of the same site. As I was saying in section 4.8, they can be used to control the internal flow of link juice on a site. For example, if the homepage of your website has a high page rank and you link one of your Tier 2 articles from the homepage, this increases the importance of the Tier 2 article page. Use Tier 2 keywords in the anchor text of the link and in its title attribute.

You can also use links to create bookmarks within the same page. Let's say you have an article that's made up of three sections. You can bookmark the titles of each section and link those bookmarks at the beginning of the article so that a visitor can go straight to what interests him/her the most.

The code for bookmarking the titles would look like this:

<h2><a name="section_1">Section 1 Title</a></h2>
<h2><a name="section_2">Section 2 Title</a></h2>
<h2><a name="section_3">Section 3 Title</a></h2>

and the links to these bookmarks would be:

<a href="#section_1">Go to Section 1</a>
<a href="#section_2">Go to Section 2</a>
<a href="#section_3">Go to Section 3</a>

To link one of these sections from a different page, you would use something like:

<a href="http://www.example.com/article.htm#section_3">Go to Section 3 of the Article</a>

As long as you use relevant keywords within the anchor text and "name" attribute of these links, they will be used by search engines to determine the structure of your article and the most relevant bits.

4.9.3. Inbound Links

You get these when some other site links to yours. The more important that site is the more page rank yours will receive from that link. The inbound links you get by submitting your site to various directories don't have much SEO value and if Google detects that you're participating in dubious link exchange schemes, your site may get penalized. The best ways to maximize your chances of getting inbound links are those presented in section 3.

In case you notice that other sites have linked to yours, but the anchor text they used is incorrect or the links are broken, Google encourages you to contact the webmasters to whom those sites belong and ask for the links to be repaired. This way, you get some quality inbound links and the Google bot doesn't waste time trying to crawl broken links.

4.10. Images

Google has an image search module from which you can get a lot of traffic simply by making good use of images. Use good quality, high resolution images and make sure you offer as much information about them as possible. You can do that by:

assigning relevant and descriptive filenames to your pictures
writing a short description in an images "alt" attribute: as long as it's brief, this description might be used by Google's image search module on SERPs
specifying images' width and height within your CSS style sheet or within the "img" tag itself: in case the image cannot be loaded, this ensures your page is displayed correctly and the flow of your page elements remains the same
placing images within contexts that are relevant to the respective pictures: the paragraphs (<p>), headings (<hN>) and captions that surround an image are all taken into consideration by Google's image search algorithms, so make sure you use keywords for these elements

A good example of how to embed an image on your site is the one presented in Google's "image guidelines" help page:

<img src="puppy.jpg" alt="Dalmatian puppy playing fetch" />

If you need to use images as link buttons (i.e. encase an image in <a> tags), the "alt" attribute is a must. However, you should keep the description within it short and avoid keyword stuffing.

For Blogger blogs, most of the images you post are actually hosted on Picasa. You can locate the corresponding photo album on Picasa and login to add captions to your images, specify where they were taken, edit the rights for reusing those photos and decide whether the albums should be private, unlisted or public. Also, the links that point to your photos contain a parameter which determines their size:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgws5FgmOttM1AsuyuPUN2Z7VP-RNh2COKWvELAfwlptTQ2x-cDy-bD08i2zQPVF67S45tM_9LrbCCuxXEcCPLApJ9lSgFbrp0IyUiq5DkkqeyqRGu1C8ztdOJgJPF6jpfB0qhcsUd9q7IN/s144/01-mogosoaia-palace.JPG

You can change the value of this parameter from s144 (in this example) to s400, s800, s1600 etc. in order to get different size versions of your photos. Use this to control how they appear on your blog.

4.11. Duplicate Content

We've established in the first section of this article that your website has to have unique and original content. Assuming you've taken good care of that, you should know that there are ways in which the content of your site (unique as it may be) could appear in several places at the same time.

Your content could appear on other sites which don't belong to you if you've syndicated your articles or if your articles are copied without your consent. This is called content scraping and in such cases Google tries to identify and index only the original versions of those articles. For the syndication scenario you should ask your syndication partners to include links to the original versions of your articles, but other than that, there's not much else you can do to avoid this sort of duplicate content. You generally need to leave it up to Google to decide which is the original version of the site and which ranks higher and they assure us that their search algorithms can determine this quite accurately.

The sort of duplicate content you need to deal with yourself appears when multiple URLs on your site point to the same page or to pages that are very similar.

For blogs hosted on BlogSpot you get duplicate content on archive pages, label pages or for URLs that point to comments. Moreover, links to bookmarks on the same page (like those presented in section 4.9.2) create different versions for an URL and they all point to the same article. This is not a major cause for concern because Google doesn't penalize this kind of duplicate content. However, you do want search engines to discover and index the useful bits of your site and not waste time crawling the same content over and over. To guide search engine bots towards sections that are relevant, you can use several tools designed specifically for solving this issue...

4.11.1. Robots Meta Tags and Rel Nofollow

Rel="nofollow" is a link attribute which I've presented in section 4.9. On a Blogger blog, I recommend you use it for links that point to your label and archive pages. It can also be used similarly for regular websites in links which point to pages with duplicate content.

You can also use the "nofollow" directive in a Robots Meta tag. This informs search engines not to follow any of the links on the respective page. This is not recommended for Blogger and instead you should use this Robots Meta tag with the "noindex" value.

In short, what you need to do for Blogger archive or label pages is:

use the rel="nofollow" attribute for links that point to them and...
use the following Meta tag in the header of these pages:

<meta name="robots" content="noindex" />

For example, I would place this tag for my SEO label page by adding the following code in the head section of my template:

<b:if cond='data:blog.url == "http://www.agawebs.com/search/label/SEO"'>
<meta name="robots" content="noindex" />
</b:if>

There's more fine-tuning to be done for this hack and I promise to address this in a future article.

I've noticed that people use the Robots Meta tag on their blog with the content="follow" attribute. This actually has no effect because search engines follow the links on those pages regardless of whether this tag is present or not.

The final thing I should add about these directives is that search engines interpret them a bit differently. Here is what each major search engine does with them.

4.11.2. Robots.txt

This is a text file which you need to place in the root directory of your site. It does a similar job like the Robots Meta tag and rel=nofollow attribute by telling search engines what not to follow or index. I'm not going to talk about it too much here for two reasons:

it's harder to use than the options described in section 4.11.1
Blogger automatically generates a Robots.txt file for each blog (e.g. http://www.agawebs.com/robots.txt), but you don't have access to it and it cannot be edited

The restrictions imposed by the Robots.txt file on Blogger refer to archive pages and label pages. However, for my blog I still see links to these pages on SERPs and that is why I think it's necessary to take extra measures (like those presented in sections 4.11.1 and 4.11.3) in order to ensure they're excluded from search results.

The standards for this Robot Exclusion Protocol used in Robots.txt files have been created by consensus and there's no single authority which decides what the protocols should be. However, you can find more information on how to use this tool on Wikipedia and Robotstxt.org.

4.11.3. Rel Canonical

Although telling robots what not to follow or index is a great way of avoiding duplicate content, there are situations when this is not enough. I'll use a Blogger example to explain why.

The following links both point to the same article:

http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html
http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html?showComment=1273667910919#c3073950090101837411

The first one is the actual post page for that article and the second one points to a comment. Most sites which link to my article will probably use the first version of the link, but others may use the second one to indicate a comment they found specifically useful. Moreover, you could have a "Latest Comments" widget in your blogs sidebar (like I do) and all the links in it will look like the second one. For such situations it is recommended to declare a "canonical" version of the URL.

The canonical URL is the simplest version of a URL or the URL you want to show for a certain page. In my example, the canonical version is the first URL. To declare this canonical version I would use the following code in the head section of my Blogger template:

<b:if cond='data:blog.url == "http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html"'>
<link href='http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html' rel='canonical'/>
</b:if>

If you've already used my automatic code generator to create Meta descriptions for your pages, you will only need to add the <link href='...' rel='canonical'/> tag within the corresponding "if" statement.

As reference, please use this Google help article on canonicalization.

This pretty much ends my "Duplicate Content" presentation. The aspects I presented are the most relevant for blogs hosted on BlogSpot. The discussion could go on for other types of websites and if you are interested in more details I recommend the following articles:

4.12. XML Sitemaps

An XML Sitemap is a file you place on your web server to inform search engines about the pages and structure of your site. It's basically a list of pages (and some other details) written in an eXtensible Markup Language (XML) following a certain protocol and syntax.

Because Sitemaps indicate which pages are valuable and crawlable, they represent a good way of fighting duplicate content, but I chose to present them in a different section because they can serve more general purposes.

The easiest way to generate a XML Sitemap for your website is by using an automatic tool. However, you still need to be able to understand the protocol in order to double check it and you need to validate the Sitemap before uploading it to your site. Google has extended the Sitemap protocol allowing webmasters to include more data about specific types of content. For Blogger blogs, the platform automatically generates a RSS feed (e.g. domain.com/feeds/posts/default) which can be used as a Sitemap – as a matter of fact, this is the only way you can submit a Sitemap for your blog since you don't have access to the server that's hosting it.

Once you get hold of a valid Sitemap you need to inform search engines about it. You can do this by specifying its location in your Robots.txt file (done by default for Blogger blogs) and by submitting its URL via search engines' webmaster tools.

4.13. Search Engine Submission

Most search engines offer an interface for webmasters to submit their sites and Sitemaps and control the relationship between these sites and search engine crawlers:

Use these services to keep track of how search engines index your site. There are plenty of resources which explain how these webmaster tools should be used. Because of that, I'm only going to present a couple of sections in Google's Webmaster Tools which can be specifically used to identify duplicate content issues for Blogger blogs:

look in the Diagnostics section > Crawl errors > Restricted by Robots.txt and make sure this list contains as many URLs to your archive and label pages
check the Crawl stats page (from the same section) and see if the number of pages they crawl per day is close to the number of posts on your blog plus one (the homepage) – if this number is much higher it means they're going through your duplicate content

Conclusion

I know this huge list of recommendations might look intimidating. We haven't discussed any advanced techniques (and there's plenty more to talk about there), but you should keep in mind that all of this should be done gradually in time – don't start with everything at once and take your time to do it properly. To paint a clearer picture I would use three metaphors for these web development stages:

The Pyramid – all four stages are levels of a pyramid with "Content" as its base and "SEO" as its tip. You need all four to build something long-lasting and beautiful.
The Ring – good content must be presented in a quality format and this whole package needs to be brought to visitors' attention by link building and SEO. The circle is closed by the fact that unique content is at the same time one of the most important SEO elements, as search engines strive to offer original and valuable results to their users.
The Chain – as for The Ring, the four web development stages are connected to each other to support your products, services and ideas. A chain is as strong as its weakest link and that is why all four elements must be done properly.

I'll end this article here wishing you all good luck. There's a quote I saw somewhere (can't remember exactly where) which I hope will inspire you in your efforts to create the perfect website: "It takes years of hard work to become an overnight success".

Brancoveanu's Palace - Mogosoaia

2010-06-30T14:02:00.007+03:00

Most of the buildings in this complex from Mogosoaia were built between 1681 and 1705 by Constantin Brancoveanu, Prince of Wallachia. Below are a few images I've taken there showing the palace itself along with the watch tower and kitchen, as well as buildings erected by members of the Bibescu family: the guest house and family tomb.

Hover your cursor over the photos to view them and click to enlarge

Oameni buni cu suflet bun...

2010-01-30T18:30:00.007+02:00

Pe 29 ianuarie 2010 seara am gasit un catel ce pare a fi corcitura de Schnauzer cu Caniche. Are blana de culoare gri sobolan, cu reflexii albe, 15 kilograme, tale medie spre mica. La gat are o zgarda rosie. L-am gasit in zona Constantin Brancoveanu - Oraselul Copiilor, intr-o scara de bloc.

Este destul de speriat si trist si ii e dor de stapanii lui. Din pacate eu nu il pot tine. Daca stiti pe cineva care isi cauta animalutul, sau doreste sa adopte un catel, contactati-ma (comment sau mail) sau dati click pe anuntul de mai jos.

Gasit catel corcitura Schnauzer... www.adoptiicaini.ro

Hot'n'cold - Ukrainian Style

2009-05-05T20:49:00.011+03:00

As soon as I saw it, I just had to "steal" this from Ovidiu's blog. Feast your years on this brilliant remake of Katy Perry's "Hot'n'Cold"...

Ciucas > Muntele Rosu > Japp

2009-03-21T00:28:00.006+02:00

Dupa o noua iesire in Ciucas si o alta sedere la Cabana Muntele Rosu, a iesit genericul de mai jos. Sper sa nu se supere nimeni...

Cateva precizari care merita retinute:

daca plecati spre fosta Cabana Ciucas si nu e poteca prin zapada, va ia aproximativ o ora jumate pana la Fantana lui Ioan;
meniul de la Muntele Rosu are traduceri in engleza sub fiecare fel, si ies in evidenta urmatorii termeni: suc de fructe - juice of fruits; cafea mica - little coffee (aproape ca ti se face mila de saracuta cafea);
in camere nu e foarte cald asa ca merita sa luati saci de dormit la voi (pentru orice eventualitate);
fata care ne-a fost gazda e prietenoasa si foarte de treaba, si la fel e si proprietarul, care s-a oferit sa ne ia cu masina din Cheia (noi am ales totusi sa urcam noaptea prin padure).

Una peste alta, totul e bine cand se termina cu bine. Mergeti la Muntele Rosu daca aveti ocazia si vizitati Muntii Ciucas.

Custom Meta and Title Tags for Blogger

2009-02-12T22:13:00.026+02:00

A while ago I received a comment from CJ in which he was asking for a widget or gadget to automatically implement the "Meta Description Hack" for Blogger. I didn't notice the comment back then (awfully sorry for that), but recently, as I was looking over those comments I decided to take up that challenge. Below is a small javascript application you can use to generate custom meta descriptions, keywords and title tags for Blogspot blogs, as well as a video tutorial on how to use it.

Step 1

For how many pages would you like to create custom meta tags?

Step 2

Is your homepage among these pages?
yes, the first description and keyword tags should be for my blog's homepage
no, all meta tags are for other pages on my blog (usually post pages)

Step 3

Should the code include the hack for swapping page titles with article titles?
yes
no, I've already added that piece of code

Step 4

How should the title appear for a post page?
<post title> (Eg: Custom Meta Description)
<post title - blog title> (Eg: Custom Meta Description - AgaWebs)

Apuseni > Muntii Bihorului > Zona Padis

2009-01-18T03:16:00.012+02:00

Thanks to my younger sister I finally found a proper soundtrack for the images I filmed last year in September. Hope you enjoy the Padis experience:

The Padis area (Zona Padis) is located in Bihor's Mountains (Muntii Bihorului) and those, in turn, are part of the Romanian Apuseni Mountains (Muntii Apuseni). Here are some of the main attractions in this region, ordered as they appear in my video:

Pestera Focul Viu: there's a large opening in the roof of this cavern. In summer, on a sunny day, light shines through the opening and onto the glacier inside, creating an illusion of burning fire.

Pietrele Galbenei: large cliff face overlooking a vast valley.

Lumea Pierduta: "The Lost World" - several avens (vertical caves) are grouped in this area, the most spectacular one being Avenul Gemanata.

Cetatile Radesei & Cheile Somesului Cald: a network of tunnels and vertical shafts (avens) dug through the mountain by water.

Cetatile Ponorului: a formation similar to "Cetatile Radesei", but on a much larger scale. The portal seen in the video is its main entrance and it's 73m tall - about as high as a 20 story building.

Pestera Ghetarului de la Scarisoara: the cave which houses the largest glacier in Romania.

Merry Christmas!

2008-12-28T01:16:00.007+02:00

Stumble Upon Horror Photos

2008-11-20T00:22:00.008+02:00

Nothing original here. But thanks to Saleel I rediscovered what pleasant accidents social media sites can cause.

Horror film enthusiasts, hover your cursor over the gallery below to see the photos I ~~stumbled upon on FindAccidentally~~ accidentally found on StumbleUpon.

Note that these pictures are for sale and they're not created in Photoshop, but with real people wearing makeup and costumes - or so says the author.

Photo Gallery powered by Stu Nicholls' design idea

Now, to get to my point... if you are (or would like to become) a StumbleUpon user, don't forget to use the bookmark button below each post and rate this blog :)

Page 1
URL:
Keywords:
Description:

Page 2
URL:
Keywords:
Description:

Page 3
URL:
Keywords:
Description:

Page 4
URL:
Keywords:
Description:

Page 5
URL:
Keywords:
Description:

AgaWebs - Posts

Istanbul - Jan 2014

Piatra Mare - Jan 2014

Sufletul lui Avram Iancu

Vatra Dornei, Sunatori

Bucegi, Pestera, Babele, Caraiman

Fagaras, Varful Moldoveanu

Tudor

Cezar

Andrei

Padis, Cetatile Ponorului, Cheile Galbenei, Groapa Ruginoasa

Baile Herculane, Semenic, Orsova

Haz

How to Enable JavaScript in a Web Browser

Number Pi and Quadratic Equations

Fade In, Fade Out JavaScript Effects and a Bonus Buzz

Step 1

Step 2

Step 3

Source code

Source code

Source code

Source code

Source code

Source code

Source code

Source code

Efix.ro

Charlie Chaplin

New Template and More AgaWebs

Retezat, Gentiana, Lake Bucura

Quality Web Design vs SEO Techniques

Brancoveanu's Palace - Mogosoaia

Oameni buni cu suflet bun...

Hot'n'cold - Ukrainian Style

Ciucas > Muntele Rosu > Japp

Custom Meta and Title Tags for Blogger

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Apuseni > Muntii Bihorului > Zona Padis

Merry Christmas!

Stumble Upon Horror Photos