[ AgaWebs.Com ]

tag:blogger.com,1999:blog-2113308636434658541Wed, 30 May 2012 12:38:32 +0000metravelRetezatSEOfunnyPiatra Craiuluiphotographytips and tweaksSteauaCiucashistoryPiatra MaremathematicswebdesignJavaScriptfootballBloggermountainsApuseni[ AgaWebs.Com ]"Dear, dear! How queer everything is to-day! And yesterday things went on just as usual. I wonder if I've been changed in the night? But if I'm not the same, the next question is, Who in the world am I? Ah, that's the great puzzle! I'll try if I know all the things I used to know. Let me see: four times five is twelve, and four times six is thirteen, and four times seven is--oh dear! I shall never get to twenty at that rate!" - Lewis Carrollhttp://www.agawebs.com/noreply@blogger.com (Andrei)Blogger29125tag:blogger.com,1999:blog-2113308636434658541.post-5067591275799072266Sat, 22 Oct 2011 20:28:00 +00002011-10-23T20:50:46.992+03:00funnyHaz<script type="text/javascript"> function bau(){ document.getElementById('efix-holder').style.display='inline'; } </script> <p style="text-align:justify; margin: 15px 0 0 0;"> 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: </p> <p style="text-align:center"> <object width="526" height="297"><param name="movie" value="http://www.youtube.com/v/DQHrmK-gOFw?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/DQHrmK-gOFw?version=3&hl=en_US" type="application/x-shockwave-flash" width="526" height="297" allowscriptaccess="always" allowfullscreen="true"></embed></object> </p> <div class="fb-like" data-href="http://www.agawebs.com/2011/10/haz.html" data-send="false" data-width="450" data-show-faces="true"></div> <p style="text-align:justify; margin: 15px 0 0 0;"> ... pe cel slab si pricajit l-am vazut la stand-up comedy in trupa Deco. Uite si un <a href="http://www.youtube.com/watch?v=8HtsVR-CNYA" target="_blank">link cu poantele lui</a>. Hotul mai gras e din <a href="http://www.agawebs.com/2010/11/efixro.html">reclama cu injectoare de la Efix</a>. Si pentru ca mi-a adus aminte de Efix, uite si o noua reclama a lor: </p> <p style="text-align:center"> <a onclick=bau() style="cursor:pointer">Click me!</a> </p> <div id="efix-holder" style="display:none"> <p style="text-align:center"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="510" height="340" id="player" align="middle"><param name="allowScriptAccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="movie" value="http://www.efix.ro/assets/swf/pe_ulita.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000" /> <embed src="http://www.efix.ro/assets/swf/pe_ulita.swf" quality="high" bgcolor="#000000" width="510" height="340" name="player" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></object> </p> </div> <p style="text-align:justify; margin: 15px 0 0 0;"> 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. </p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-5067591275799072266?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2011/10/haz.htmlnoreply@blogger.com (Andrei)1tag:blogger.com,1999:blog-2113308636434658541.post-6224425439993656335Thu, 17 Feb 2011 00:35:00 +00002011-02-18T00:37:24.360+02:00JavaScripttips and tweaksHow to Enable JavaScript in a Web Browser<p style="text-align:justify; margin: 15px 0 0 0;">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...</p> <ul> <li><a href="#Enable-JS-IE-Maxthon">Internet Explorer & Maxthon Web Browser</a></li> <li><a href="#Enable-JS-FF">Mozilla Firefox Web Browser</a></li> <li><a href="#Enable-JS-Chrome">Google Chrome Web Browser</a></li> <li><a href="#Enable-JS-Safari">Safari Web Browser</a></li> <li><a href="#Enable-JS-Opera">Opera Web Browser</a></li> </ul> <h3 class="in-post-title"><a name="Enable-JS-IE-Maxthon">Internet Explorer & Maxthon Web Browser</a></h3> <p style="text-align:center"> <object width="526" height="324"><param name="movie" value="http://www.youtube.com/v/yN5VJerLCaQ?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/yN5VJerLCaQ?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="526" height="324"></embed></object> </p> <p style="text-align:justify; margin: 15px 0 0 0;">Follow these steps to enable JavaScript in browser:</p> <ol> <li>Click the <b>Tools</b> button from the command bar of your Internet Explorer web browser and select <b>Internet Options</b> from the drop-down menu.</li> <li>Select the <b>Security</b> tab from the window that appears.</li> <li>Click the <b>Internet</b> icon from the list of zones.</li> <li>Press the <b>Custom level...</b> button from the lower part of that window.</li> <li>In the next window that appears, scroll down to the <b>Scripting</b> options group.</li> <li>Under <b>Active scripting</b>, click the radio button next to the <b>Enable</b> option and click <b>OK</b> to close this window.</li> <li>Finally, click <b>OK</b> or <b>Apply</b> in the <b>Internet Options</b> window.</li> </ol> <h3 class="in-post-title"><a name="Enable-JS-FF">Mozilla Firefox Web Browser</a></h3> <p style="text-align:center"> <object width="526" height="324"><param name="movie" value="http://www.youtube.com/v/yl9i6e5EaJ4?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/yl9i6e5EaJ4?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="526" height="324"></embed></object> </p> <p style="text-align:justify; margin: 15px 0 0 0;">Follow these steps to enable JavaScript in browser:</p> <ol> <li>Click the <b>Tools</b> button from the menu bar of your Firefox web browser and select <b>Options...</b> from the drop-down menu.</li> <li>Select the <b>Content</b> tab from the window that appears.</li> <li>Check the <b>Enable JavaScript</b> option and click <b>OK</b> to save the changes and close the <b>Options</b> window.</li> </ol> <h3 class="in-post-title"><a name="Enable-JS-Chrome">Google Chrome Web Browser</a></h3> <p style="text-align:center"> <object width="526" height="324"><param name="movie" value="http://www.youtube.com/v/zMgBlW9TEco?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zMgBlW9TEco?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="526" height="324"></embed></object> </p> <p style="text-align:justify; margin: 15px 0 0 0;">Follow these steps to enable JavaScript in browser:</p> <ol> <li>Click the <b>Wrench</b> button from the top-right corner of your Google Chrome web browser and select <b>Options</b>.</li> <li>Select the <b>Under the Bonnet</b> tab from the window that appears.</li> <li>Press the <b>Content settings...</b> button and select <b>JavaScript</b> from the left pane of the window that appears.</li> <li>Click the radio button next to the option that says <b>Allow all sites to run JavaScript (recommended)</b> and close the <b>Content Settings</b> window.</li> <li>Finally, close the <b>Google Chrome Options</b> window as well – this will save the changes you made.</li> </ol> <h3 class="in-post-title"><a name="Enable-JS-Safari">Safari Web Browser</a></h3> <p style="text-align:center"> <object width="526" height="324"><param name="movie" value="http://www.youtube.com/v/FDSJwpiBf_M?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/FDSJwpiBf_M?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="526" height="324"></embed></object> </p> <p style="text-align:justify; margin: 15px 0 0 0;">Follow these steps to enable JavaScript in browser:</p> <ol> <li>Click the <b>Cogwheel</b> button from the top-right corner of your Safari web browser and select <b>Preferences...</b>.</li> <li>Go to the <b>Security</b> tab from the window that appears.</li> <li>Check the <b>Enable JavaScript</b> option and close the <b>Security</b> window.</li> </ol> <h3 class="in-post-title"><a name="Enable-JS-Opera">Opera Web Browser</a></h3> <p style="text-align:center"> <object width="526" height="324"><param name="movie" value="http://www.youtube.com/v/ScjAe7JeZH0?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ScjAe7JeZH0?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="526" height="324"></embed></object> </p> <p style="text-align:justify; margin: 15px 0 0 0;">Follow these steps to enable JavaScript in browser:</p> <ol> <li>Click the <b>Menu</b> button from the top-left corner of your Opera web browser.</li> <li>In the drop-down menu that appears, point your mouse cursor to <b>Settings...</b> > <b>Quick Preferences</b>.</li> <li>Make sure the <b>Enable JavaScript</b> option is checked.</li> </ol><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-6224425439993656335?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2011/02/how-to-enable-javascript-in-browser.htmlnoreply@blogger.com (Andrei)12tag:blogger.com,1999:blog-2113308636434658541.post-2752005151359381863Wed, 09 Feb 2011 09:01:00 +00002011-02-11T15:02:34.763+02:00mathematicsNumber Pi and Quadratic Equations<p style="text-align:justify; margin: 15px 0 0 0;"> I always believed mathematics is among the few sciences which can bring you closer to the truth about "<a href="http://en.wikipedia.org/wiki/Life,_the_Universe_and_Everything" title="Hitchhiker's Guide to the Galaxy" target="_blank">Life, the Universe and Everything</a>". 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. </p> <p style="text-align:justify; margin: 15px 0 0 0;"> 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. </p> <a href="http://www.onlineschooling.net/visualizing-pi"> <img src="http://onlineschooling.net/organization_files/362/visualizingpi-blue.png" style="border: none; width: 530px; -moz-box-shadow: none; padding: 0px" alt="Online Schooling - Facts about number Pi"/></a> <p>Source: <a href="http://www.onlineschooling.net">Online Schooling</a></p> <a href="http://www.onlineschooling.net/quadratic-equation" style="cursor:pointer"> <img src="http://onlineschooling.net/organization_files/362/quadraticequation.png" style="border: none; width: 530px; -moz-box-shadow: none; padding: 0px" alt="Online Schooling - Quadratic Equation" /></a> <p>Source: <a href="http://www.onlineschooling.net/">http://www.onlineschooling.net</a></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-2752005151359381863?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2011/02/number-pi-and-quadratic-equations.htmlnoreply@blogger.com (Andrei)2tag:blogger.com,1999:blog-2113308636434658541.post-5433883393177227935Mon, 22 Nov 2010 04:59:00 +00002011-07-21T20:40:32.779+03:00JavaScripttips and tweakswebdesignFade In, Fade Out JavaScript Effects and a Bonus Buzz<p style="text-align:justify; margin: 15px 0 0 0;"> 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. </p> <p style="text-align:justify; margin: 15px 0"> 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". </p> <ul> <li><a href="#fadebuzz1">1. How do I start?</a></li> <li><a href="#fadebuzz2">2. How do I use the functions?</a> <ul> <li><a href="#fadebuzz21">2.1. agawebs_fade_out (obj_id, step, pi, pf, flow)</a></li> <li><a href="#fadebuzz22">2.2. agawebs_fade_in (obj_id, step, pi, pf, flow)</a></li> <li><a href="#fadebuzz23">2.3. agawebs_buzz (obj_id)</a></li> </ul> </li> <li><a href="#fadebuzzeg">3. Examples</a> <ul> <li><a href="#fadebuzz31">3.1. JavaScript fade image out on the click of a button</a></li> <li><a href="#fadebuzz32">3.2. JavaScript fade image in on the click of a button</a></li> <li><a href="#fadebuzz33">3.3. Image buzzes on the click of a button</a></li> <li><a href="#fadebuzz34">3.4. <i>agawebs_buzz()</i> triggered by the "onmouseover" event</a></li> <li><a href="#fadebuzz35">3.5. Fade in, fade out JavaScript effects for the same image</a></li> <li><a href="#fadebuzz36">3.6. The other way around</a></li> <li><a href="#fadebuzz37">3.7. Breaking the flow</a></li> <li><a href="#fadebuzz38">3.8. Text fader for a rotating paragraph</a></li> </ul> </li> <li><a href="#fadebuzz4">4. Compatibility & Support</a></li> </ul> <h3 class="in-post-title"><a name="fadebuzz1">1. How do I start?</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;"> 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: </p> <ol> <li style="text-align:justify">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 <b>before</b> you call any of the functions.</li> <li style="text-align:justify">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.</li> </ol> <p style="text-align:justify; margin: 15px 0 0 0;"> 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 <b>fade</b> functions, or only the definition for the <b>buzz</b> function. </p> <p style="text-align:justify; margin: 15px 0 0 0;"> To recapitulate, there are three available versions of the script: </p> <ol> <li style="text-align:justify"><b>fade</b> functions only;</li> <li style="text-align:justify"><b>buzz</b> function only;</li> <li style="text-align:justify"><b>fade + buzz</b>.</li> </ol> <p style="text-align:justify; margin: 15px 0 0 0;"> Each of these versions has two variants: </p> <ol> <li style="text-align:justify">One which can be installed in the template of your Blogger blog and...</li> <li style="text-align:justify">Another one which can be installed in an article/gadget, or on any other type of site.</li> </ol> <p style="text-align:justify; margin: 15px 0 0 0;"> This makes a total of six choices, and to help you decide which one you should use, I've created the following JavaScript wizard: </p> <script type="text/javascript">  </script> <div id="fadebuzzq1" class="on"> <h3>Step 1</h3> Where would you like to embed the code?<br /> <input type="radio" name="where-to-embed" onclick="code_select_1(this.id)" id="fadebuzzradio1" />In the template of my Blogger blog.<br /> <input type="radio" name="where-to-embed" onclick="code_select_1(this.id)" id="fadebuzzradio2" />In an article/gadget from my Blogger blog, or on any other site. </div> <div id="fadebuzzq2" class="off"> <h3>Step 2</h3> Which functions would you like to use?<br /> <input type="radio" name="which-functions" onclick="code_select_2(this.id)" disabled="disabled" id="fadebuzzradio3" />agawebs_fade_out() and agawebs_fade_in().<br /> <input type="radio" name="which-functions" onclick="code_select_2(this.id)" disabled="disabled" id="fadebuzzradio4" />agawebs_buzz().<br /> <input type="radio" name="which-functions" onclick="code_select_2(this.id)" disabled="disabled" id="fadebuzzradio5" />All three: agawebs_fade_out(), agawebs_fade_in() and agawebs_buzz(). </div> <div id="fadebuzzq3" class="off"> <h3>Step 3</h3> Get the code...<br /><br /> <textarea rows="7" cols="200" id="fade-buzz-blogger-code" readonly="readonly" wrap="off" onclick="document.getElementById(this.id).select()">  <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>  </textarea> <textarea rows="7" cols="200" id="fade-blogger-code" readonly="readonly" wrap="off" onclick="document.getElementById(this.id).select()">  <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>  </textarea> <textarea rows="7" cols="200" id="buzz-blogger-code" readonly="readonly" wrap="off" onclick="document.getElementById(this.id).select()">  <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>  </textarea> <textarea rows="7" cols="200" id="fade-buzz-regular-code" readonly="readonly" wrap="off" onclick="document.getElementById(this.id).select()">  <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>  </textarea> <textarea rows="7" cols="200" id="fade-regular-code" readonly="readonly" wrap="off" onclick="document.getElementById(this.id).select()">  <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>  </textarea> <textarea rows="7" cols="200" id="buzz-regular-code" readonly="readonly" wrap="off" onclick="document.getElementById(this.id).select()">  <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>  </textarea> </div> <input type="button" value="Reset" onclick="code_reset()"/> <p style="text-align:justify; margin: 15px 0 0 0;"> 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: </p> <ol> <li style="text-align:justify">Choose the first answer (<i>In the template of my Blogger blog.</i>) for the first question above.</li> <li style="text-align:justify">Choose the last answer (<i>All three: agawebs_fade_out(), agawebs_fade_in() and agawebs_buzz().</i>) for the second question.</li> <li style="text-align:justify">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.</li> <li style="text-align:justify">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.</li> <li style="text-align:justify">Locate the ending </head> tag in your template and paste the code you've copied immediately above it.</li> <li style="text-align:justify">Finally, click the "SAVE TEMPLATE" button.</li> </ol> <p style="text-align:justify; margin: 15px 0 0 0;"> You are now ready to call these functions and start using the fade and buzz effects. </p> <h3 class="in-post-title"><a name="fadebuzz2">2. How do I use the functions?</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;"> Below is the syntax for each of these functions, and a short description for each parameter: </p> <h4 class="in-post-title"><a name="fadebuzz21">2.1. agawebs_fade_out (obj_id, step, pi, pf, flow)</a></h4> <table class="qwd-seo-table"> <thead> <tr><th>Parameter</th><th>Description</th></tr> </thead> <tbody> <tr><td>obj_id</td><td>The id of the element which will fade out.</td></tr> <tr><td>step</td><td><i>Optional</i>. 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.</td></tr> <tr><td>pi</td><td><i>Optional</i>. The initial opacity (initial phase) of the element. If omitted, the default value is 100.</td></tr> <tr><td>pf</td><td><i>Optional</i>. The final opacity (final phase) of the element. If omitted, the default value is 0.</td></tr> <tr><td>flow</td><td><i>Optional</i>. 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.</td></tr> </tbody> </table> <h4 class="in-post-title"><a name="fadebuzz22">2.2. agawebs_fade_in (obj_id, step, pi, pf, flow)</a></h4> <table class="qwd-seo-table"> <thead> <tr><th>Parameter</th><th>Description</th></tr> </thead> <tbody> <tr><td>obj_id</td><td>The id of the element which will fade in.</td></tr> <tr><td>step</td><td><i>Optional</i>. 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.</td></tr> <tr><td>pi</td><td><i>Optional</i>. The initial opacity (initial phase) of the element. If omitted, the default value is 0.</td></tr> <tr><td>pf</td><td><i>Optional</i>. The final opacity (final phase) of the element. If omitted, the default value is 100.</td></tr> <tr><td>flow</td><td><i>Optional</i>. If this parameter is set to 1, the function changes the "display" property of the element to "inline". Otherwise, the "display" property remains unchanged.</td></tr> </tbody> </table> <p style="text-align:justify; margin: 15px 0 0 0;"> <b>Note</b>: 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. </p> <h4 class="in-post-title"><a name="fadebuzz23">2.3. agawebs_buzz (obj_id)</a></h4> <table class="qwd-seo-table"> <thead> <tr><th>Parameter</th><th>Description</th></tr> </thead> <tbody> <tr><td>obj_id</td><td>The id of the element which will buzz.</td></tr> </tbody> </table> <p style="text-align:justify; margin: 15px 0 0 0;"> <b>Note</b>: In order to use this function, the element has to have an initial 10 pixel margin. </p> <p style="text-align:justify; margin: 15px 0 0 0;"> Surely, the functions can be used within other JavaScript functions. However, a simple way of calling them is by using <b>event</b> attributes for the HTML elements on your pages. A comprehensive list of event handlers can be found on <a href="http://www.w3schools.com/jsref/dom_obj_event.asp" target="_blank" title="JavaScript/HTML DOM Event Handlers">the w3schools site</a> and below you'll find <a name="fadebuzzeg">several examples for implementing these effects</a>. </p> <h3 class="in-post-title"><a name="fadebuzz31">3.1. JavaScript fade image out on the click of a button</a></h3> <p style="text-align:justify; margin: 15px 0"> In this example, the <i>agawebs_fade_out ()</i> 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. </p> <div style="text-align:center"> <input type="button" value="Click me!" onclick="agawebs_fade_out('adore1')" /> <img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnev8LnOI/AAAAAAAAA0M/GLfBVvzV9q4/s128/Adore.png" id="adore1" alt="emoticon in love" style="width: 128px; height: 128px; border: none" /> </div> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0 0 0;"> 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. </p> <p style="text-align:justify; margin: 15px 0"> It is important to note that the image id is encased in <i>single quotes</i>, while the function is encased in <i>double quotes</i>. </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">input</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="button"</span> <span class="ag-code-red">value</span><span class="ag-code-blue">="Click me!"</span> <span class="ag-code-red">onclick</span><span class="ag-code-blue">="agawebs_fade_out('adore1')" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Adore.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="adore1" /></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz32">3.2. JavaScript fade image in on the click of a button</a></h3> <p style="text-align:justify; margin: 15px 0"> An opposite example to the one above. Press the button below to check out the "HTML fade images in" effect. </p> <div style="text-align:center"> <input type="button" value="Click me!" onclick="agawebs_fade_in('cool1')" /> <img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnlKrFviI/AAAAAAAAA0Q/WkgpgidrYv8/s128/Cool.png" id="cool1" alt="cool emoticon" style="opacity: 0; filter: alpha(opacity=0); width: 128px; height: 128px; border: none" /> </div> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0 0 0;"> 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 <i>single quotes</i>. </p> <p style="text-align:justify; margin: 15px 0"> 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 <a href="#fadebuzz22">section 2.2</a>. </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">style</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="text/css"></span></li> <li class="indent1"><span class="ag-code-cd">#cool1</span> {</li> <li class="indent2"><span class="ag-code-red">opacity</span>: <span class="ag-code-blue">0</span>;</li> <li class="indent2"><span class="ag-code-red">filter</span>: <span class="ag-code-blue">alpha(opacity=0)</span>;</li> <li class="indent1">}</li> <li><span class="ag-code-blue"></</span><span class="ag-code-cd">style</span><span class="ag-code-blue">></span></li> <li><span class="ag-code-green"></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">input</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="button"</span> <span class="ag-code-red">value</span><span class="ag-code-blue">="Click me!"</span> <span class="ag-code-red">onclick</span><span class="ag-code-blue">="agawebs_fade_in('cool1')" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Cool.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="cool1" /></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz33">3.3. Image buzzes on the click of a button</a></h3> <div style="text-align:center"> <input type="button" value="Click me!" onclick="agawebs_buzz('cry1')" /> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnlD77ETI/AAAAAAAAA0U/0ssIWp_zSyU/s128/Cry.png" id="cry1" alt="crying emoticon" style="margin: 10px; width: 128px; height: 128px; border: none" /> </div> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0"> The <i>agawebs_buzz ()</i> function is very easy to use, but the HTML element has to have an initial 10 pixel margin – as noted in <a href="#fadebuzz23">section 2.3</a>. In this example, I used an inline style declaration to create the required margin. </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">input</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="button"</span> <span class="ag-code-red">value</span><span class="ag-code-blue">="Click me!"</span> <span class="ag-code-red">onclick</span><span class="ag-code-blue">="agawebs_buzz('cry1')" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Cry.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="cry1"</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">margin</span>: <span class="ag-code-blue">10px" /></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz34">3.4. <i>agawebs_buzz()</i> triggered by the "onmouseover" event</a></h3> <p style="text-align:justify; margin: 15px 0"> 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. </p> <div style="text-align:center"> <img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnWMzxsnI/AAAAAAAAAzo/LWC0zFkQq-U/s64/Adore.png" id="adore2" alt="small emoticon in love" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnWXhJa_I/AAAAAAAAAzs/wvJs_6HJwaE/s64/Cool.png" id="cool2" alt="small cool emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnWUBSfpI/AAAAAAAAAzw/V623v2tj8RY/s64/Cry.png" id="cry2" alt="small crying emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /><br /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnWnI84NI/AAAAAAAAAz0/OO4sT9uJ3W0/s64/Furious.png" id="furious2" alt="small evil emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnWrBhgLI/AAAAAAAAAz4/XpB5l63lG3A/s64/Laugh.png" id="laugh2" alt="small laughing emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnd3GnaII/AAAAAAAAAz8/mrjbk8DKYVE/s64/Pudently.png" id="pudently2" alt="small blushing emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /><br /> <img src="http://lh4.ggpht.com/_piurA6KjafM/TOPneKIYcmI/AAAAAAAAA0A/P2UmRccdl5E/s64/Struggle.png" id="struggle2" alt="small army emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> <img src="http://lh4.ggpht.com/_piurA6KjafM/TOPneFQM0AI/AAAAAAAAA0E/ypCq3GP2Zx0/s64/Study.png" id="study2" alt="small geek emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> <img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnefqQk9I/AAAAAAAAA0I/LheGG40mbiU/s64/Sweet-angel.png" id="sweet2" alt="small angel emoticon" style="margin: 10px; width: 64px; height: 64px; border: none" onmouseover="agawebs_buzz(this.id)" /> </div> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0"> 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 <i>single quotes</i>. </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">style</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="text/css"></span></li> <li class="indent1"><span class="ag-code-cd">.10p_margin</span> { <span class="ag-code-red">margin</span>: <span class="ag-code-blue">10px</span>; }</li> <li><span class="ag-code-blue"></</span><span class="ag-code-cd">style</span><span class="ag-code-blue">></span></li> <li><span class="ag-code-green"></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Adore.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="adore2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Cool.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="cool2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Cry.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="cry2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Furious.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="furious2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Laugh.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="laugh2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Pudently.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="pudently2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Struggle.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="struggle2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Study.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="study2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Sweet-angel.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="sweet2"</span> <span class="ag-code-red">class</span><span class="ag-code-blue">="10p_margin"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_buzz(this.id)" /></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz35">3.5. Fade in, fade out JavaScript effects for the same image</a></h3> <p style="text-align:justify; margin: 15px 0"> 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. </p> <div style="text-align:center"> <img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnWMzxsnI/AAAAAAAAAzo/LWC0zFkQq-U/s64/Adore.png" id="adore3" alt="small emoticon in love" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnWXhJa_I/AAAAAAAAAzs/wvJs_6HJwaE/s64/Cool.png" id="cool3" alt="small cool emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnWUBSfpI/AAAAAAAAAzw/V623v2tj8RY/s64/Cry.png" id="cry3" alt="small crying emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /><br /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnWnI84NI/AAAAAAAAAz0/OO4sT9uJ3W0/s64/Furious.png" id="furious3" alt="small evil emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnWrBhgLI/AAAAAAAAAz4/XpB5l63lG3A/s64/Laugh.png" id="laugh3" alt="small laughing emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnd3GnaII/AAAAAAAAAz8/mrjbk8DKYVE/s64/Pudently.png" id="pudently3" alt="small blushing emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /><br /> <img src="http://lh4.ggpht.com/_piurA6KjafM/TOPneKIYcmI/AAAAAAAAA0A/P2UmRccdl5E/s64/Struggle.png" id="struggle3" alt="small army emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> <img src="http://lh4.ggpht.com/_piurA6KjafM/TOPneFQM0AI/AAAAAAAAA0E/ypCq3GP2Zx0/s64/Study.png" id="study3" alt="small geek emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> <img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnefqQk9I/AAAAAAAAA0I/LheGG40mbiU/s64/Sweet-angel.png" id="sweet3" alt="small angel emoticon" style="width: 64px; height: 64px; border: none" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" /> </div> <h4 class="in-post-title">Source code</h4> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Adore.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="adore3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Cool.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="cool3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Cry.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="cry3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Furious.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="furious3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Laugh.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="laugh3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Pudently.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="pudently3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Struggle.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="struggle3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Study.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="study3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Sweet-angel.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="sweet3"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_out(this.id)"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_in(this.id)" /></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz36">3.6. The other way around</a></h3> <p style="text-align:justify; margin: 15px 0"> 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. </p> <div id="navigation-disk-holder"> <img id="xy001" src="http://lh5.ggpht.com/_piurA6KjafM/TOPnWMzxsnI/AAAAAAAAAzo/LWC0zFkQq-U/s64/Adore.png" alt="small emoticon in love" 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="http://lh6.ggpht.com/_piurA6KjafM/TOPnWXhJa_I/AAAAAAAAAzs/wvJs_6HJwaE/s64/Cool.png" alt="small cool emoticon" 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="http://lh3.ggpht.com/_piurA6KjafM/TOPnWUBSfpI/AAAAAAAAAzw/V623v2tj8RY/s64/Cry.png" alt="small crying emoticon" 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="http://lh6.ggpht.com/_piurA6KjafM/TOPnWnI84NI/AAAAAAAAAz0/OO4sT9uJ3W0/s64/Furious.png" alt="small evil emoticon" 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="http://lh3.ggpht.com/_piurA6KjafM/TOPnWrBhgLI/AAAAAAAAAz4/XpB5l63lG3A/s64/Laugh.png" alt="small laughing emoticon" 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="http://lh6.ggpht.com/_piurA6KjafM/TOPnd3GnaII/AAAAAAAAAz8/mrjbk8DKYVE/s64/Pudently.png" alt="small blushing emoticon" 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="http://lh4.ggpht.com/_piurA6KjafM/TOPneKIYcmI/AAAAAAAAA0A/P2UmRccdl5E/s64/Struggle.png" alt="small army emoticon" 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="http://lh4.ggpht.com/_piurA6KjafM/TOPneFQM0AI/AAAAAAAAA0E/ypCq3GP2Zx0/s64/Study.png" alt="small geek emoticon" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '70px'; document.getElementById('navigation-disk-description').style.padding = '0'; document.getElementById('navigation-disk-description').innerHTML = '<img src="http://lh5.ggpht.com/_piurA6KjafM/TOPnefqQk9I/AAAAAAAAA0I/LheGG40mbiU/s64/Sweet-angel.png" style=\'border: none\' />';" 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> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0"> 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 <i>agawebs_fade_in ()</i> and <i>agawebs_fade_out ()</i> functions respectively. </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">style</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="text/css"></span></li> <li class="indent1"><span class="ag-code-cd">#navigation-disk-holder</span> {</li> <li class="indent2"><span class="ag-code-red">width</span>: <span class="ag-code-blue">510px</span>;</li> <li class="indent2"><span class="ag-code-red">height</span>: <span class="ag-code-blue">300px</span>;</li> <li class="indent2"><span class="ag-code-red">margin</span>: <span class="ag-code-blue">0 auto</span>;</li> <li class="indent2"><span class="ag-code-red">position</span>: <span class="ag-code-blue">relative</span>;</li> <li class="indent1">}</li> <li class="indent1"><span class="ag-code-cd">#navigation-disk-description</span> {</li> <li class="indent2"><span class="ag-code-red">width</span>: <span class="ag-code-blue">100px</span>;</li> <li class="indent2"><span class="ag-code-red">height</span>: <span class="ag-code-blue">39px</span>;</li> <li class="indent2"><span class="ag-code-red">text-align</span>: <span class="ag-code-blue">center</span>;</li> <li class="indent2"><span class="ag-code-red">position</span>: <span class="ag-code-blue">absolute</span>;</li> <li class="indent2"><span class="ag-code-red">top</span>: <span class="ag-code-blue">118px</span>;</li> <li class="indent2"><span class="ag-code-red">left</span>: <span class="ag-code-blue">200px</span>;</li> <li class="indent2"><span class="ag-code-red">font-size</span>: <span class="ag-code-blue">14px</span>;</li> <li class="indent2"><span class="ag-code-red">padding</span>: <span class="ag-code-blue">25px 0 0 0</span>;</li> <li class="indent2"><span class="ag-code-red">overflow</span>: <span class="ag-code-blue">hidden</span>;</li> <li class="indent1">}</li> <li class="indent1"><span class="ag-code-cd">#xy001</span>, <span class="ag-code-cd">#xy002</span>, <span class="ag-code-cd">#xy003</span>, <span class="ag-code-cd">#xy004</span>,</li> <li class="indent1"><span class="ag-code-cd">#xy005</span>, <span class="ag-code-cd">#xy006</span>, <span class="ag-code-cd">#xy007</span>, <span class="ag-code-cd">#xy008</span> {</li> <li class="indent2"><span class="ag-code-red">position</span>: <span class="ag-code-blue">absolute</span>;</li> <li class="indent2"><span class="ag-code-red">opacity</span>: <span class="ag-code-blue">0.3</span>;</li> <li class="indent2"><span class="ag-code-red">filter</span>: <span class="ag-code-blue">alpha(opacity=30)</span>;</li> <li class="indent1">}</li> <li class="indent1"><span class="ag-code-cd">#xy001</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">18px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">218px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy002</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">47px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">289px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy003</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">118px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">318px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy004</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">189px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">289px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy005</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">218px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">218px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy006</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">189px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">147px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy007</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">118px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">118px</span>; }</li> <li class="indent1"><span class="ag-code-cd">#xy008</span> { <span class="ag-code-red">top</span>: <span class="ag-code-blue">47px</span>; <span class="ag-code-red">left</span>: <span class="ag-code-blue">147px</span>; }</li> <li><span class="ag-code-blue"></</span><span class="ag-code-cd">style</span><span class="ag-code-blue">></span></li> <li><span class="ag-code-green"></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">div</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="navigation-disk-holder"></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy001"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Adore.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Home';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy002"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Cool.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Contact Info';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy003"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Cry.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Index by Date';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy004"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Furious.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="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';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="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';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy005"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Laugh.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Links';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy006"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Pudently.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="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';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="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';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy007"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Struggle.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="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';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="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';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="xy008"</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="64/Study.png"</span> <span class="ag-code-red">onmouseover</span><span class="ag-code-blue">="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" />';"</span> <span class="ag-code-red">onmouseout</span><span class="ag-code-blue">="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';" /></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">div</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="navigation-disk-description"></span>NAVIGATION<span class="ag-code-blue"></</span><span class="ag-code-cd">div</span><span class="ag-code-blue">></span></li> <li><span class="ag-code-blue"></</span><span class="ag-code-cd">div</span><span class="ag-code-blue">></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz37">3.7. Breaking the flow</a></h3> <p style="text-align:justify; margin: 15px 0 0 0"> 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. </p> <p style="text-align:justify; margin: 15px 0"> 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. </p> <div style="text-align:center"> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnlYQWqoI/AAAAAAAAA0Y/aRaOZnvgP40/s128/Furious.png" id="furious1" alt="evil emoticon" onclick="agawebs_fade_in('sweet1', 2, 0, 100, 1)" style="width: 128px; height: 128px; border: none" /> <img src="http://lh6.ggpht.com/_piurA6KjafM/TOPnqQh9qzI/AAAAAAAAA0s/w8Sqn92pftg/s128/Sweet-angel.png" id="sweet1" alt="angel emoticon" style="opacity: 0; filter: alpha(opacity=0); display: none; width: 128px; height: 128px; border: none" onclick="agawebs_fade_out('furious1', 2, 100, 0, 1)" /> </div> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0"> 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". </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Furious.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="furious1"</span> <span class="ag-code-red">onclick</span><span class="ag-code-blue">="agawebs_fade_in('sweet1', 2, 0, 100, 1)" /></span></li> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Sweet-angel.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="sweet1"</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">opacity</span>: <span class="ag-code-blue">0</span>; <span class="ag-code-red">filter</span>: <span class="ag-code-blue">alpha(opacity=0)</span>; <span class="ag-code-red">display</span>: <span class="ag-code-blue">none"</span> <span class="ag-code-red">onclick</span><span class="ag-code-blue">="agawebs_fade_out('furious1', 2, 100, 0, 1)" /></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz38">3.8. Text fader for a rotating paragraph</a></h3> <p style="text-align:justify; margin: 15px 0"> 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. </p> <div style="text-align: justify; height: 170px; position: relative; margin: 30px 0 0 0"> <p id="rotating-para1" style="position: absolute; top: -10px;"> <img src="http://lh3.ggpht.com/_piurA6KjafM/TOPnlkShukI/AAAAAAAAA0c/AMQx09Usw-A/s128/Laugh.png" alt="laughing emoticon" id="laugh1" style="float: left; margin: 0 20px 0 0; width: 128px; height: 128px; border: none" /> 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="http://lh3.ggpht.com/_piurA6KjafM/TOPnln_503I/AAAAAAAAA0g/29pPUkttB5M/s128/Pudently.png" alt="blushing emoticon" id="pudently1" style="float: right; margin: 0 0 0 20px; opacity: 0; filter: alpha(opacity=0); width: 128px; height: 128px; border: none" /> 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> <h4 class="in-post-title">Source code</h4> <p style="text-align:justify; margin: 15px 0"> I used the <i>setTimeout ()</i> and <i>setInterval ()</i> 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. </p> <ol class="ag-code-list"> <li><span class="ag-code-blue"><</span><span class="ag-code-cd">div</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">text-align</span>: <span class="ag-code-blue">justify</span>; <span class="ag-code-red">height</span>: <span class="ag-code-blue">130px</span>; <span class="ag-code-red">position</span>: <span class="ag-code-blue">relative"></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">p</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="rotating-para1"</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">position</span>: <span class="ag-code-blue">absolute</span>; <span class="ag-code-red">top</span>: <span class="ag-code-blue">-10px"></span></li> <li class="indent2"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Laugh.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="laugh1"</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">float</span>: <span class="ag-code-blue">left</span>; <span class="ag-code-red">margin</span>: <span class="ag-code-blue">0 20px 0 0" /></span></li> <li class="indent2">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...</li> <li class="indent1"><span class="ag-code-blue"></</span><span class="ag-code-cd">p</span><span class="ag-code-blue">></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">p</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="rotating-para2"</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">position</span>: <span class="ag-code-blue">absolute</span>; <span class="ag-code-red">opacity</span>: <span class="ag-code-blue">0</span>; <span class="ag-code-red">filter</span>: <span class="ag-code-blue">alpha(opacity=0)</span>; <span class="ag-code-red">top</span>: <span class="ag-code-blue">-10px"></span></li> <li class="indent2"><span class="ag-code-blue"><</span><span class="ag-code-cd">img</span> <span class="ag-code-red">src</span><span class="ag-code-blue">="128/Pudently.png"</span> <span class="ag-code-red">id</span><span class="ag-code-blue">="pudently1"</span> <span class="ag-code-red">style</span><span class="ag-code-blue">="</span><span class="ag-code-red">float</span>: <span class="ag-code-blue">right</span>; <span class="ag-code-red">opacity</span>: <span class="ag-code-blue">0</span>; <span class="ag-code-red">filter</span>: <span class="ag-code-blue">alpha(opacity=0)</span>; <span class="ag-code-red">margin</span>: <span class="ag-code-blue">0 0 0 20px" /></span></li> <li class="indent2">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...</li> <li class="indent1"><span class="ag-code-blue"></</span><span class="ag-code-cd">p</span><span class="ag-code-blue">></span></li> <li class="indent1"><span class="ag-code-blue"><</span><span class="ag-code-cd">script</span> <span class="ag-code-red">type</span><span class="ag-code-blue">="text/javascript"></span></li> <li class="indent2"><span class="ag-code-blue">function</span> ag_switch() {</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_out('rotating-para1', 5, 100, 0)"</span>, 0);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_out('laugh1', 5, 100, 0)"</span>, 0);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_in('rotating-para2', 5, 0, 100)"</span>, 500);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_in('pudently1', 5, 0, 100)"</span>, 500);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_out('rotating-para2', 5, 100, 0)"</span>, 5000);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_out('pudently1', 5, 100, 0)"</span>, 5000);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_in('rotating-para1', 5, 0, 100)"</span>, 5500);</li> <li class="indent3">setTimeout(<span class="ag-code-cd">"agawebs_fade_in('laugh1', 5, 0, 100)"</span>, 5500);</li> <li class="indent2">}</li> <li class="indent2">setInterval(<span class="ag-code-cd">"ag_switch()"</span>, 10000);</li> <li class="indent1"><span class="ag-code-blue"></</span><span class="ag-code-cd">script</span><span class="ag-code-blue">></span></li> <li><span class="ag-code-blue"></</span><span class="ag-code-cd">div</span><span class="ag-code-blue">></span></li> </ol> <h3 class="in-post-title"><a name="fadebuzz4">4. Compatibility & Support</a></h3> <p style="text-align:justify; margin: 15px 0 0 0"> 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: </p> <ul> <li>Firefox v.3</li> <li>IE v.7 and v.8</li> <li>Google Chrome v.7</li> <li>Opera v.10 and v.11</li> <li>Safari v.5</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0"> 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. </p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-5433883393177227935?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/11/fade-in-fade-out-javascript-effects-and.htmlnoreply@blogger.com (Andrei)11tag:blogger.com,1999:blog-2113308636434658541.post-4539492082611837415Sat, 06 Nov 2010 09:22:00 +00002010-11-06T11:24:26.157+02:00funnyEfix.ro<p style="text-align:center; margin: 15px 0 0 0;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="510" height="340" id="player" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://www.efix.ro/flash/embed/embeded1/player.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed src="http://www.efix.ro/flash/embed/embeded1/player.swf" quality="high" bgcolor="#000000" width="510" height="340" name="player" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></object></p> <p style="text-align:center; margin: 15px 0 0 0;"><a href="http://www.efix.ro/" target="_blank" title="efix's website">efix.ro</a></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-4539492082611837415?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/11/efixro.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-751071248085235134Sat, 30 Oct 2010 07:59:00 +00002010-10-30T10:59:11.544+03:00funnyhistoryCharlie Chaplin<p style="text-align:justify; margin: 15px 0 0 0;">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...</p> <p style="text-align:center; margin: 15px 0 0 0;"><img src="http://lh6.ggpht.com/_piurA6KjafM/TMu_QAzuuiI/AAAAAAAAAyM/bglqPQzn_AY/s800/Chaplin.jpg" alt="Charlie Chaplin - the tramp" style="width: 300px; height: 424px;" /></p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:center; margin: 15px 0 0 0;"><a href="http://en.wikipedia.org/wiki/City_Lights" target="_blank"><img src="http://lh3.ggpht.com/_piurA6KjafM/TMvNndh2V9I/AAAAAAAAAyw/utjtWd26NI8/s230/City-Lights.jpg" alt="Charlie Chaplin - City Lights" style="width: 150px; height: 230px; margin: 0 5px 0 0;" /></a> <a href="http://en.wikipedia.org/wiki/Modern_Times_%28film%29" target="_blank"><img src="http://lh5.ggpht.com/_piurA6KjafM/TMvNniprSZI/AAAAAAAAAy0/aXM21zL5mP0/s230/Modern-Times.jpg" alt="Charlie Chaplin - Modern Times" style="width: 150px; height: 230px; margin: 0 5px 0 0;" /></a> <a href="http://en.wikipedia.org/wiki/The_Great_Dictator" target="_blank"><img src="http://lh6.ggpht.com/_piurA6KjafM/TMvNnsJE57I/AAAAAAAAAy4/O7H_qu5Mxeg/s230/The-Great-Dictator.jpg" alt="Charlie Chaplin - The Great Dictator" style="width: 150px; height: 230px; margin: 0;" /></a></p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-751071248085235134?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/10/charlie-chaplin.htmlnoreply@blogger.com (Andrei)1tag:blogger.com,1999:blog-2113308636434658541.post-1233606872945184744Tue, 26 Oct 2010 08:18:00 +00002010-10-26T13:16:24.240+03:00BloggerwebdesignNew Template and More AgaWebs<p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">I'm not ready to completely let go of the old template yet, so I'm keeping the old header banner in this post...</p> <p style="text-align:center; margin: 15px 0 0 0;"><img src="http://lh3.ggpht.com/_piurA6KjafM/SWkm0ze6MpI/AAAAAAAAAlc/zSyq0LkP-nE/s510/bg.JPG" alt="trees - header image" style="width:510px; height: 83px;" /></p> <p style="text-align:justify; margin: 15px 0 0 0;">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> <p style="text-align:justify; margin: 15px 0 0 0;">P.S.: Solve the riddle above to unlock a hidden message (Hint: Apuseni is number one).</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-1233606872945184744?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/10/new-template-and-more-agawebs.htmlnoreply@blogger.com (Andrei)1tag:blogger.com,1999:blog-2113308636434658541.post-2143981842217723259Mon, 26 Jul 2010 00:06:00 +00002011-10-23T14:47:39.321+03:00mountainstravelmeRetezatRetezat, Gentiana, Lake Bucura<p style="text-align:justify; margin: 15px 0 20px 0;">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.</p> <p style="text-align:center"> <object width="520" height="317"><param name="movie" value="http://www.youtube.com/v/FAE9TKzeD4k?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/FAE9TKzeD4k?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="317"></embed></object> <div class="fb-like" data-href="http://www.agawebs.com/2010/07/retezat-gentiana-lake-bucura.html" data-send="false" data-width="450" data-show-faces="true"></div></p> <p style="text-align:justify; margin: 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <i>tuica</i> (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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 20px 0;">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.</p> <p style="text-align:center;"><iframe width="520" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=p&msa=0&msid=103099454711377348725.00048bffebeb45cc855c7&ll=45.386636,22.869759&spn=0.084393,0.178528&z=12&output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&t=p&msa=0&msid=103099454711377348725.00048bffebeb45cc855c7&ll=45.386636,22.869759&spn=0.084393,0.178528&z=12&source=embed" style="color:#0000FF;text-align:left">Retezat, Gentiana, Lake Bucura</a> in a larger map</small></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-2143981842217723259?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/07/retezat-gentiana-lake-bucura.htmlnoreply@blogger.com (Andrei)2tag:blogger.com,1999:blog-2113308636434658541.post-8758288144628955421Sun, 11 Jul 2010 18:17:00 +00002010-10-26T23:17:23.425+03:00Bloggertips and tweaksSEOwebdesignQuality Web Design vs SEO Techniques<p style="text-align:justify; margin: 15px 0 0 0;">The bits of this article which refer specifically to search engine optimization (SEO) techniques for Blogger blogs are highlighted with <i>italics</i>. 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...</p> <ul> <li><a href="#bseo-intro-myth">Intro – MythBusting</a></li> <li><a href="#bseo-qual-cont">1. Quality Content</a></li> <li><a href="#bseo-clear-form">2. Clear, Accessible Format</a></li> <li><a href="#bseo-link-build">3. Link Building</a></li> <li><a href="#bseo-seo">4. SEO (General and Blogger SEO)</a> <ul> <li><a href="#bseo-kwd-sel">4.1. Keyword Selection</a></li> <li><a href="#bseo-dom-name">4.2. Domain Name</a></li> <li><a href="#bseo-url-struct">4.3. URL Structure</a></li> <li><a href="#bseo-page-titl">4.4. Page Titles</a></li> <li><a href="#bseo-meta-desc">4.5. Meta Description</a></li> <li><a href="#bseo-meta-kwd">4.6. Meta Keywords</a></li> <li><a href="#bseo-meta-tags">4.7. Other Meta Tags</a></li> <li><a href="#bseo-kwd-place">4.8. Keyword Placement & Density (underline, bold, italics and headings)</a></li> <li><a href="#bseo-links">4.9. Links</a> <ul> <li><a href="#bseo-out-link">4.9.1. Outbound Links</a></li> <li><a href="#bseo-int-link">4.9.2. Internal Links</a></li> <li><a href="#bseo-inb-link">4.9.3. Inbound Links</a></li> </ul></li> <li><a href="#bseo-imgs">4.10. Images</a></li> <li><a href="#bseo-dupl-cont">4.11. Duplicate Content</a> <ul> <li><a href="#bseo-robot-nflw">4.11.1. Robots Meta Tags and Rel Nofollow</a></li> <li><a href="#bseo-robot-txt">4.11.2. Robots.txt</a></li> <li><a href="#bseo-rel-cano">4.11.3. Rel Canonical</a></li> </ul></li> <li><a href="#bseo-xml-site">4.12. XML Sitemaps</a></li> <li><a href="#bseo-se-subm">4.13. Search Engine Submission</a></li> </ul></li> <li><a href="#bseo-conc-end">Conclusion</a></li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;"><a name="bseo-intro-myth">During the few years since I started this blog</a> 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <h3 class="in-post-title"><a name="bseo-qual-cont">1. Quality Content</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <h3 class="in-post-title"><a name="bseo-clear-form">2. Clear, Accessible Format</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">In order to solve most of the browser compatibility issues you should validate your pages using tools like <a href="http://validator.w3.org/" title="W3C Markup Validator" target="_blank">the one offered by the World Wide Web Consortium (W3C)</a> 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 <a href="http://www.w3.org/" title="World Wide Web Consortium" target="_blank">their site</a>.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="https://www.google.com/webmasters/tools/home?hl=en" target="_blank">Google Webmaster Tools</a> which can help you with that. However, they also recommend installing the <a href="http://code.google.com/speed/page-speed/" target="_blank">Page Speed add-on</a> 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <h3 class="in-post-title"><a name="bseo-link-build">3. Link Building</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="http://technorati.com/" title="blog directory" target="_blank">Technorati</a> for example, I suppose one could find it useful to submit his/her blog there.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="http://www.answers.com/" target="_blank">Answers.com</a>, <a href="http://answers.yahoo.com/" target="_blank">Yahoo! Answers</a>, <a href="http://www.facebook.com/" target="_blank">FaceBook</a> groups or <a href="http://www.linkedin.com/" target="_blank">LinkedIn</a>. 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 <a href="http://googlewebmastercentral.blogspot.com/2010/06/quality-links-to-your-site.html" title="quality links to your site" target="_blank">an article from the official Google Webmaster Central Blog</a> and you should have a look through it in order to see more suggestions.</p> <p style="text-align:justify; margin: 15px 0 0 0;">There's a related topic here on how to share your site's content on these social media communities and it involves <a href="http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags" title="FaceBook Developer Wiki - FB Share Meta Tags" target="_blank">special Meta tags</a> you can add in order to control the aspect of your content on these sites. If you've read my <a href="http://www.agawebs.com/2008/03/meta-description-for-each-blogger-page.html" title="AgaWebs">Meta Description articles</a> 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 <a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html" title="AgaWebs">automatic code generator</a> to include such tags as well, but I'm still experimenting for now and trying out different things.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <h3 class="in-post-title"><a name="bseo-seo">4. SEO (General and Blogger SEO)</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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: <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=35769" target="_blank">Google Webmaster Guidelines</a>, <a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf" title="pdf file" target="_blank">Google's Search Engine Optimization Starter Guide</a>, <a href="http://googlewebmastercentral.blogspot.com/" target="_blank">Official Google Webmaster Central Blog</a>, <a href="http://help.yahoo.com/l/us/yahoo/search/" target="_blank">Yahoo! Search Help Topics</a> and <a href="http://forum.seopedia.ro/" title="Seopedia.ro" target="_blank">articles from a Romanian SEO forum</a>. 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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...</p> <h3 class="in-post-title"><a name="bseo-kwd-sel">4.1. Keyword Selection</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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 (<a href="http://www.prchecker.info/" title="Google Page Rank Checker" target="_blank" rel="nofollow">page rank</a> 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">Use a keyword suggestion tool in order to see what people are searching for. A couple examples of such tools are: <a href="https://adwords.google.com/o/Targeting/Explorer?__u=1000000000&__c=1000000000&ideaRequestType=KEYWORD_IDEAS#search.none" target="_blank">Google's AdWords suggestion tool</a> and <a href="http://freekeywords.wordtracker.com/?seed=Base%20Keyword&suggest=Hit+Me&adult_filter=remove_dubious" target="_blank" rel="nofollow">Wordtracker's tool</a>. 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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. <a href="http://forum.seopedia.ro/discutii-generale-privind-optimizarea-si-motoarele-de-cautare/6415-ghid-plan-search-engine-optimization-complet.html" title="Complete SEO Guide" target="_blank">This Seopedia.ro article</a> then recommends that you arrange the keywords into three tiers:</p> <ul> <li>Tier 1 – high difficulty</li> <li>Tier 2 – medium difficulty</li> <li>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)</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">Let's go on and see where you can use these keywords...</p> <h3 class="in-post-title"><a name="bseo-dom-name">4.2. Domain Name</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul> <li>configuring the .htaccess file on your server to redirect one version of the domain</li> <li>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</li> <li>choosing an option from Google's Webmaster Tools</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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 <a href="http://www.google.com/support/blogger/bin/topic.py?hl=en&topic=12451" title="Blogger Help Article" target="_blank">switch to a custom domain</a> and a few extra tips in <a href="http://www.agawebs.com/2008/11/new-custom-domain.html" title="AgaWebs">the article I wrote when I switched to agawebs.com</a>. 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.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">Lately, Google has been placing special emphasis on <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=62399" title="Google Geotargeting Help Article" target="_blank">geo targeting</a>. 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.</p> <h3 class="in-post-title"><a name="bseo-url-struct">4.3. URL Structure</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul><li>http://www.t1kwd-t1kwd.com/t2kwd/t2kwd-t3kwd-t3kwd.htm - where t1kwd is a Tier 1 keyword and so on.</li></ul> <p style="text-align:justify; margin: 15px 0 0 0;">Don't worry if you're not getting this right now. There's an example is <a href="#bseo-kwd-place">section 4.8</a> which will explain things more clearly.</p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>There are also certain dynamic URLs on a Blogger blog, like:</i></p> <ul><li>http://www.agawebs.com/search?updated-max=2009-02-12T22%3A13%3A00%2B02%3A00&max-results=5</li></ul> <p style="text-align:justify; margin: 15px 0 0 0;"><i>"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 <a href="#bseo-dupl-cont">as we'll see later</a>, the corresponding Blogger pages contain duplicate content and we'll have to take measures to keep them from being indexed.</i></p> <h3 class="in-post-title"><a name="bseo-page-titl">4.4. Page Titles</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="#bseo-seo">description of a search result</a> made earlier). Because of this, they are important SEO elements and you should use keywords from your list when writing these titles.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">Write unique and accurate titles for each page. <i>For Blogger blogs it is indicated to use the <a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html" title="AgaWebs">hack for swapping article titles with the blog title</a>. Furthermore, you can use variations from that hack in order fine tune titles even more.</i></p> <h3 class="in-post-title"><a name="bseo-meta-desc">4.5. Meta Description</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>For Blogger blogs, the <a href="http://www.agawebs.com/2008/03/meta-description-for-each-blogger-page.html" title="AgaWebs">Meta description hack</a> 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.</i></p> <h3 class="in-post-title"><a name="bseo-meta-kwd">4.6. Meta Keywords</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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 href="http://www.agawebs.com/2008/03/meta-description-for-each-blogger-page.html?showComment=1277681297930#c4168833711683975455" title="Anonymous comment on Agawebs">a visitor recently pointed out</a>, this Meta tag is <a href="http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html" title="Matt Cutts on Meta Keywords and Google" target="_blank">not used by Google in web ranking</a>. Furthermore, as I explained in <a href="#bseo-kwd-sel">section 4.1</a>, it can be used by other webmasters to discover your site's weak spots and outrank yours in SERPs.</p> <p style="text-align:justify; margin: 15px 0 0 0;">Personally, I still use this tag for some of the articles on this blog because <a href="http://help.yahoo.com/l/us/yahoo/search/indexing/ranking-02.html" title="Yahoo! Help Article" target="_blank">engines like Yahoo! still take it into account</a>. <i>Again, the only way to create unique keyword tags for each of your Blogger pages is by using the <a href="http://www.agawebs.com/2008/03/meta-description-for-each-blogger-page.html" title="AgaWebs">Meta description hack</a>.</i></p> <h3 class="in-post-title"><a name="bseo-meta-tags">4.7. Other Meta Tags</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">There's a large number of other Meta tags which can be used in the head section of your site or blog. Examples include:</p> <ul> <li>special Meta tags for certain platforms' API</li> <li>author</li> <li>date</li> <li>copyright</li> <li>expires</li> <li>refresh</li> <li>revisit after</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">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: <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=79812" target="_blank">Meta tags - Webmaster Tools Help</a> or <a href="http://www.webmarketingnow.com/tips/meta-tags-uncovered.html" target="_blank">Meta Tags Explained</a>.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="#bseo-robot-nflw">section 4.11.1</a>.</p> <h3 class="in-post-title"><a name="bseo-kwd-place">4.8. Keyword Placement & Density (underline, bold, italics and headings)</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">A regular site should be tailored based on the 3-Tier hierarchy described in <a href="#bseo-kwd-sel">section 4.1</a>. 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="#bseo-kwd-sel">section 4.1</a>):</p> <table class="qwd-seo-table"> <thead> <tr><th>Keyword</th><th>Tier</th><th>Global Monthly Searches</th><th>Competition</th></tr> </thead> <tbody> <tr><td>dogs health</td><td>T1</td><td>74,000</td><td>High</td></tr> <tr><td>dog kidney failure</td><td rowspan="3">T2</td><td>8,100</td><td>High</td></tr> <tr><td>dog anemia</td><td>3,600</td><td>Medium-High</td></tr> <tr><td>dogs diagnosis</td><td>2,900</td><td>Medium</td></tr> <tr><td>dog anemia treatment</td><td rowspan="3">T3</td><td>170</td><td>Low</td></tr> <tr><td>dog anemia symptoms</td><td>140</td><td>Low</td></tr> <tr><td>dog anemia causes</td><td>73</td><td>Low</td></tr> </tbody> </table> <p style="text-align:justify; margin: 15px 0 0 0;">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 <u>http://dogshealth.com/</u> 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">Following the guidelines in <a href="#bseo-url-struct">section 4.3</a>, 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="#bseo-url-struct">section 4.3</a>. I'll place links in the Tier 2 article from <u>http://dogshealth.com/dog-anemia/</u> pointing to these three subpages and I'll use the respective Tier 3 keywords in the anchor text of those links.</p> <p style="text-align:justify; margin: 15px 0 0 0;">In the end, the folder structure and URLs of my website will look as follows:</p> <table class="qwd-seo-table"> <thead> <tr><th>Page URL</th><th style="width: 150px;">Targets keywords from...</th></tr> </thead> <tbody> <tr><td>http://dogshealth.com/</td><td>Tier 1</td></tr> <tr><td><span>http://dogshealth.com/</span>dog-kidney-failure/</td><td rowspan="3">Tier 2</td></tr> <tr><td><span>http://dogshealth.com/</span>diagnosis/</td></tr> <tr><td><span>http://dogshealth.com/</span>dog-anemia/</td></tr> <tr><td><span>http://dogshealth.com/dog-anemia/</span>causes.htm</td><td rowspan="3">Tier 3</td></tr> <tr><td><span>http://dogshealth.com/dog-anemia/</span>symptoms.htm</td></tr> <tr><td><span>http://dogshealth.com/dog-anemia/</span>treatment.htm</td></tr> </tbody> </table> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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: <a href="http://textalyser.net/index.php?lang=en#analysis" title="online text analysis tool" rel="nofollow" target="_blank">Textalyser</a> or <a href="http://www.linkvendor.com/seo-tools/keyword-density.html" rel="nofollow" target="_blank">LinkVendor's density checker</a>. 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.</p> <h3 class="in-post-title"><a name="bseo-links">4.9. Links</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul><li><a href="http://www.agawebs.com">anchor text</a></li></ul> <p style="text-align:justify; margin: 15px 0 0 0;">There are three other important attributes you can use in the opening <a> tag of a link:</p> <ul> <li>title="short description": use this attribute to specify more information about the page it points to</li> <li>rel="nofollow": use this attribute for pages to which you do not want to transfer page rank. Here are some other <a href="http://www.w3schools.com/tags/att_a_rel.asp" title="HTML Tutorial - rel attribute" target="_blank">values for the "rel" attribute</a>. In <a href="#bseo-dupl-cont">section 4.11</a> we'll also look at how this attribute can be used to avoid duplicate content</li> <li>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 <a href="http://www.w3schools.com/tags/att_a_target.asp" target="_blank">this W3Schools page</a></li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">Therefore, a more complex HTML code for a link that uses all these attributes would look like this:</p> <ul><li><a href="http://www.agawebs.com" title="short description" rel="nofollow" target="_blank">anchor text</a></li></ul> <h4 class="in-post-title"><a name="bseo-out-link">4.9.1. Outbound Links</a></h4> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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. <i>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.</i></p> <h4 class="in-post-title"><a name="bseo-int-link">4.9.2. Internal Links</a></h4> <p style="text-align:justify; margin: 15px 0 0 0;">These are links on your own site which point to other pages of the same site. As I was saying in <a href="#bseo-kwd-place">section 4.8</a>, 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">The code for bookmarking the titles would look like this:</p> <ul> <li><h2><a name="section_1">Section 1 Title</a></h2></li> <li><h2><a name="section_2">Section 2 Title</a></h2></li> <li><h2><a name="section_3">Section 3 Title</a></h2></li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">and the links to these bookmarks would be:</p> <ul> <li><a href="#section_1">Go to Section 1</a></li> <li><a href="#section_2">Go to Section 2</a></li> <li><a href="#section_3">Go to Section 3</a></li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">To link one of these sections from a different page, you would use something like:</p> <ul><li><a href="http://www.example.com/article.htm#section_3">Go to Section 3 of the Article</a></li></ul> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <h4 class="in-post-title"><a name="bseo-inb-link">4.9.3. Inbound Links</a></h4> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="#bseo-link-build">section 3</a>.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <h3 class="in-post-title"><a name="bseo-imgs">4.10. Images</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul> <li>assigning relevant and descriptive filenames to your pictures</li> <li>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</li> <li>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</li> <li>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</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">A good example of how to embed an image on your site is the one presented in <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=114016" target="_blank">Google's "image guidelines" help page</a>:</p> <ul><li><img src="puppy.jpg" alt="Dalmatian puppy playing fetch" /></li></ul> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>For Blogger blogs, most of the images you post are actually hosted on <a href="http://picasaweb.google.com/home" target="_blank">Picasa</a>. 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:</i></p> <ul><li>http://lh3.ggpht.com/_piurA6KjafM/TCsm4Ff3DJI/AAAAAAAAAlU/FvmTel-ZBWM/<span style="color:#f00">s144</span>/01-mogosoaia-palace.JPG</li></ul> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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.</i></p> <h3 class="in-post-title"><a name="bseo-dupl-cont">4.11. Duplicate Content</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">We've established in the <a href="#bseo-qual-cont">first section of this article</a> 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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="http://googlewebmastercentral.blogspot.com/2008/06/duplicate-content-due-to-scrapers.html" title="Google Webmaster Central blog - duplicate due to scrapers" target="_blank">they assure us</a> that their search algorithms can determine this quite accurately.</p> <p style="text-align:justify; margin: 15px 0 0 0;">The <a href="http://googlewebmastercentral.blogspot.com/2007/09/google-duplicate-content-caused-by-url.html" title="Google Webmaster Central blog - duplicate due to URLs" target="_blank">sort of duplicate content you need to deal with yourself</a> appears when multiple URLs on your site point to the same page or to pages that are very similar.</p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>For blogs hosted on BlogSpot you get duplicate content on archive pages, label pages or for URLs that point to comments</i>. Moreover, links to bookmarks on the same page (like those presented in <a href="#bseo-int-link">section 4.9.2</a>) create different versions for an URL and they all point to the same article. This is not a major cause for concern because <a href="http://googlewebmastercentral.blogspot.com/2008/09/demystifying-duplicate-content-penalty.html" target="_blank">Google doesn't penalize this kind of duplicate content</a>. 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...</p> <h4 class="in-post-title"><a name="bseo-robot-nflw">4.11.1. Robots Meta Tags and Rel Nofollow</a></h4> <p style="text-align:justify; margin: 15px 0 0 0;">Rel="nofollow" is a link attribute which I've presented in <a href="#bseo-links">section 4.9</a>. <i>On a Blogger blog, I recommend you use it for links that point to your label and archive pages.</i> It can also be used similarly for regular websites in links which point to pages with duplicate content.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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. <i>This is not recommended for Blogger and instead you should use this Robots Meta tag with the "noindex" value.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>In short, what you need to do for Blogger archive or label pages is:</i></p> <ul> <li><i>use the rel="nofollow" attribute for links that point to them and...</i></li> <li><i>use the following Meta tag in the header of these pages:</i><br /><br /> <meta name="robots" content="noindex" /></li> </ul> <p style="text-align:justify; margin: 15px 0 15px 0;"><i>For example, I would place this tag for my SEO label page by adding the following code in the head section of my template:</i></p> <b:if cond='data:blog.url == &quot;http://www.agawebs.com/search/label/SEO&quot;'><br />   <meta name="robots" content="noindex" /><br /> </b:if> <p style="text-align:justify; margin: 15px 0 0 0;"><i>There's more fine-tuning to be done for this hack and I promise to address this in a future article.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">The final thing I should add about these directives is that search engines interpret them a bit differently. Here is what <a href="http://en.wikipedia.org/wiki/Nofollow#Interpretation_by_the_individual_search_engines" title="rel nofollow Wikipedia article" target="_blank">each major search engine does with them</a>.</p> <h4 class="in-post-title"><a name="bseo-robot-txt">4.11.2. Robots.txt</a></h4> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul> <li>it's harder to use than the options described in section 4.11.1</li> <li><i>Blogger automatically generates a Robots.txt file for each blog (e.g. <a href="http://www.agawebs.com/robots.txt" rel="nofollow">http://www.agawebs.com/robots.txt</a>), but you don't have access to it and it cannot be edited</i></li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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 <a href="#bseo-robot-nflw">sections 4.11.1</a> and <a href="#bseo-rel-cano">4.11.3</a>) in order to ensure they're excluded from search results.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">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 <a href="http://en.wikipedia.org/wiki/Robots_exclusion_standard" target="_blank">Wikipedia</a> and <a href="http://www.robotstxt.org/" target="_blank">Robotstxt.org</a>.</p> <h4 class="in-post-title"><a name="bseo-rel-cano">4.11.3. Rel Canonical</a></h4> <p style="text-align:justify; margin: 15px 0 0 0;">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>I'll use a Blogger example to explain why.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;"><i>The following links both point to the same article:</i></p> <ul> <li>http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html</li> <li>http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html?showComment=1273667910919#c3073950090101837411</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;"><i>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.</i></p> <p style="text-align:justify; margin: 15px 0 15px 0;">The <a href="http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html" title="Google Webmaster Central blog - canonical" target="_blank">canonical URL</a> is the simplest version of a URL or the URL you want to show for a certain page. <i>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:</i></p> <b:if cond='data:blog.url == &quot;http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html&quot;'><br />   <link href='http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html' rel='canonical'/><br /> </b:if> <p style="text-align:justify; margin: 15px 0 0 0;"><i>If you've already used <a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html" title="AgaWebs">my automatic code generator</a> to create Meta descriptions for your pages, you will only need to add the <link href='...' rel='canonical'/> tag within the corresponding "if" statement.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">As reference, please use this <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=139066" target="_blank">Google help article on canonicalization</a>.</p> <p style="text-align:justify; margin: 40px 0 0 0;">This pretty much ends my "Duplicate Content" presentation. <i>The aspects I presented are the most relevant for blogs hosted on BlogSpot.</i> The discussion could go on for other types of websites and if you are interested in more details I recommend the following articles:</p> <ul> <li><a href="http://www.google.com/support/webmasters/bin/answer.py?answer=66359" target="_blank">Webmaster Tools Help - Duplicate content</a></li> <li><a href="http://googlewebmastercentral.blogspot.com/2006/12/deftly-dealing-with-duplicate-content.html" target="_blank">Deftly dealing with duplicate content</a></li> <li><a href="http://googlewebmastercentral.blogspot.com/2009/09/duplicate-content-and-multiple-site.html" target="_blank">Duplicate content and multiple site issues</a></li> </ul> <h3 class="in-post-title"><a name="bseo-xml-site">4.12. XML Sitemaps</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">An <a href="http://www.sitemaps.org/" target="_blank">XML Sitemap</a> 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 <a href="http://www.sitemaps.org/protocol.php" target="_blank">protocol and syntax</a>.</p> <p style="text-align:justify; margin: 15px 0 0 0;">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.</p> <p style="text-align:justify; margin: 15px 0 0 0;">The easiest way to generate a XML Sitemap for your website is by using an <a href="http://www.xml-sitemaps.com/" title="XML Sitemap Generator" target="_blank">automatic tool</a>. However, you still need to be able to understand the protocol in order to double check it and you need to <a href="http://www.sitemaps.org/protocol.php#validating" target="_blank">validate the Sitemap</a> before uploading it to your site. Google has <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184" target="_blank">extended the Sitemap protocol</a> allowing webmasters to include more data about specific types of content. <i>For Blogger blogs, the platform automatically generates a RSS feed (e.g. <a href="http://www.agawebs.com/feeds/posts/default" rel="nofollow">domain.com/feeds/posts/default</a>) 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.</i></p> <p style="text-align:justify; margin: 15px 0 0 0;">Once you get hold of a valid Sitemap you need to inform search engines about it. You can do this by <a href="http://www.sitemaps.org/protocol.php#submit_robots" target="_blank">specifying its location in your Robots.txt file</a> (<i>done by default for Blogger blogs</i>) and by submitting its URL via search engines' webmaster tools.</p> <h3 class="in-post-title"><a name="bseo-se-subm">4.13. Search Engine Submission</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul> <li><a href="https://www.google.com/webmasters/tools/home?hl=en" target="_blank">Google Webmaster Tools</a></li> <li><a href="http://siteexplorer.search.yahoo.com/" target="_blank">Yahoo! Site Explorer</a></li> <li><a href="http://www.bing.com/webmaster" target="_blank">Bing Webmaster Center</a></li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">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. <i>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:</i></p> <ul> <li><i>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</i></li> <li><i>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</i></li> </ul> <h3 class="in-post-title"><a name="bseo-conc-end">Conclusion</a></h3> <p style="text-align:justify; margin: 15px 0 0 0;">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:</p> <ul> <li>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.</li> <li>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.</li> <li>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.</li> </ul> <p style="text-align:justify; margin: 15px 0 0 0;">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".</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-8758288144628955421?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/07/blogspot-seo-blogger-blog.htmlnoreply@blogger.com (Andrei)72tag:blogger.com,1999:blog-2113308636434658541.post-7727123675689572114Wed, 30 Jun 2010 11:02:00 +00002010-10-26T23:20:37.753+03:00photographytravelhistoryBrancoveanu's Palace - Mogosoaia<p align="justify">Most of the buildings in this complex from Mogosoaia were built between 1681 and 1705 by <a href="http://en.wikipedia.org/wiki/Constantin_Br%C3%A2ncoveanu" target="_blank" rel="nofollow" title="Brancoveanu - Wikipedia article">Constantin Brancoveanu</a>, 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 <a href="http://en.wikipedia.org/wiki/Mogo%C5%9Foaia_Palace" target="_blank" rel="nofollow" title="Mogosoaia Palace - Wikipedia article">Bibescu family</a>: the guest house and family tomb.</p> <div class="suhp-gallery"> <a href="http://lh3.ggpht.com/_piurA6KjafM/TCsm4Ff3DJI/AAAAAAAAAkM/Pf-rp2l_3Tc/s800/01-mogosoaia-palace.JPG" rel="nofollow"><img src="http://lh3.ggpht.com/_piurA6KjafM/TCsm4Ff3DJI/AAAAAAAAAk8/okDgLkwwVE4/s400/01-mogosoaia-palace.JPG" alt="Brancoveanu's palace in Mogosoaia - back" /></a> <a href="http://lh4.ggpht.com/_piurA6KjafM/TCsm45zdSqI/AAAAAAAAAkQ/k-KIyApD9UI/s800/02-mogosoaia-palace.JPG" rel="nofollow"><img src="http://lh4.ggpht.com/_piurA6KjafM/TCsm45zdSqI/AAAAAAAAAk8/SqovxDFSHmg/s400/02-mogosoaia-palace.JPG" alt="Brancoveanu's palace in Mogosoaia - front" /></a> <a href="http://lh5.ggpht.com/_piurA6KjafM/TCsm5jPvLmI/AAAAAAAAAkU/pAa2VmgRvcI/s800/03-mogosoaia-tomb.JPG" rel="nofollow"><img src="http://lh5.ggpht.com/_piurA6KjafM/TCsm5jPvLmI/AAAAAAAAAk8/8jfWwUcAhEM/s400/03-mogosoaia-tomb.JPG" alt="Family tomb (vault)" /></a> <a href="http://lh4.ggpht.com/_piurA6KjafM/TCsm61ppV6I/AAAAAAAAAkY/Dsiqt-t-Ne0/s800/04-mogosoaia-guest-house.JPG" rel="nofollow"><img src="http://lh4.ggpht.com/_piurA6KjafM/TCsm61ppV6I/AAAAAAAAAk8/nzod5oYsJP8/s400/04-mogosoaia-guest-house.JPG" alt="The guest house - built by Nicolae Bibescu" /></a> <a href="http://lh6.ggpht.com/_piurA6KjafM/TCsm7vl8QvI/AAAAAAAAAkc/6sf0ePidWs4/s800/05-mogosoaia-kitchen-and-watch-tower.jpg" rel="nofollow"><img src="http://lh6.ggpht.com/_piurA6KjafM/TCsm7vl8QvI/AAAAAAAAAk8/YAY4Figzy3Y/s400/05-mogosoaia-kitchen-and-watch-tower.jpg" alt="The watch tower and kitchen (cuhnia)" /></a> <div>Hover your cursor over the photos to view them and click to enlarge</div> </div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-7727123675689572114?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/06/brancoveanus-palace-mogosoaia.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-5857273941173593038Sat, 30 Jan 2010 16:30:00 +00002010-10-26T23:23:01.218+03:00Oameni buni cu suflet bun...<p align="justify">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.</p> <p align="justify">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.</p><br/> <center><div style="border: 1px solid #DFDFDF; width: 124px; padding: 4px; margin-bottom: 10px; margin-right: 10px;"><center><a href="http://www.adoptiicaini.ro/gasit-catel-corcitura-schnauzer/" title="Gasit catel corcitura Schnauzer"><img src="http://www.adoptiicaini.ro/imagini-caini/pth/caine-16874P1290038.jpg" alt="Gasit catel corcitura Schnauzer" /></a> <a style="font-size: 14px; color: #2583ad; text-decoration: underline; " href="http://www.adoptiicaini.ro/gasit-catel-corcitura-schnauzer/">Gasit catel corcitura Schnauzer...</a> <a style="font-size: 12px; color: #FE982A; text-decoration: none; " href="http://www.adoptiicaini.ro/">www.adoptiicaini.ro</a></center></div></center><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-5857273941173593038?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2010/01/oameni-buni-cu-suflet-bun.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-8068582550156810454Tue, 05 May 2009 17:49:00 +00002010-10-26T23:24:33.423+03:00funnyHot'n'cold - Ukrainian Style<p align="justify">As soon as I saw it, I just had to "steal" this from <a href="http://littlecioby.wordpress.com/">Ovidiu's blog</a>. Feast your years on this brilliant remake of Katy Perry's <b>"Hot'n'Cold"</b>...</p> <p align="center"><object width="520" height="415"><param name="movie" value="http://www.youtube.com/v/1upZz3a-7iM?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1upZz3a-7iM?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="415"></embed></object></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-8068582550156810454?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2009/05/hotncold-ukrainian-style.htmlnoreply@blogger.com (Andrei)7tag:blogger.com,1999:blog-2113308636434658541.post-4749171175791099601Fri, 20 Mar 2009 22:28:00 +00002010-10-26T23:26:31.071+03:00photographymountainstravelmefunnyCiucasCiucas > Muntele Rosu > Japp<p align="justify">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...</p> <p align="center"><object width="520" height="317"><param name="movie" value="http://www.youtube.com/v/_XmOdoeDdHc?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/_XmOdoeDdHc?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="317"></embed></object></p> <br /> Cateva precizari care merita retinute: <ul> <li>daca plecati spre fosta Cabana Ciucas si nu e poteca prin zapada, va ia aproximativ o ora jumate pana la Fantana lui Ioan;</li> <li>meniul de la Muntele Rosu are traduceri in engleza sub fiecare fel, si ies in evidenta urmatorii termeni: <b>suc de fructe</b> - <i>juice of fruits</i>; <b>cafea mica</b> - <i>little coffee</i> (aproape ca ti se face mila de saracuta cafea);</li> <li>in camere nu e foarte cald asa ca merita sa luati saci de dormit la voi (pentru orice eventualitate);</li> <li>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).</li> </ul> <p align="justify">Una peste alta, totul e bine cand se termina cu bine. Mergeti la Muntele Rosu daca aveti ocazia si vizitati Muntii Ciucas.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-4749171175791099601?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2009/03/ciucas-muntele-rosu-japp.htmlnoreply@blogger.com (Andrei)13tag:blogger.com,1999:blog-2113308636434658541.post-8476717397254961657Thu, 12 Feb 2009 20:13:00 +00002011-01-21T21:25:30.267+02:00Bloggertips and tweaksSEOCustom Meta and Title Tags for Blogger<script type="text/javascript"> "; document.getElementById("textarea6").value=titleswap + code; } //--> </script> <p align="justify">A while ago I received <a href="http://www.agawebs.com/2008/04/meta-description-more-detailed.html?showComment=1222423740000#c8412484654433546742" rel="nofollow">a comment from CJ</a> in which he was asking for a widget or gadget to automatically implement the <b>"Meta Description Hack"</b> 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.</p> <p align="center"><object width="520" height="317"><param name="movie" value="http://www.youtube.com/v/5Vj4Z9cRu-c?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/5Vj4Z9cRu-c?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="317"></embed></object></p> <script type="text/javascript">  </script> <div class="show" id="div0"> <div id="enable-question-1" class="on"> <h3>Step 1</h3> For how many pages would you like to create custom meta tags?<br /> <select onchange="step_one(this.id)" id="select1"> <option disabled="disabled" selected="selected" id="option1">select a value</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div id="enable-question-2" class="off"> <h3>Step 2</h3> Is your homepage among these pages?<br /> <input type="radio" name="which-page" disabled="disabled" onclick="step_two()" id="input11" /> yes, the first description and keyword tags should be for my blog's homepage<br /> <input type="radio" name="which-page" disabled="disabled" onclick="step_three()" id="input12" /> no, all meta tags are for other pages on my blog (usually post pages) </div> <div id="enable-question-3" class="off"> <h3>Step 3</h3> Should the code include the hack for swapping page titles with article titles?<br /> <input type="radio" name="title-swap" disabled="disabled" onclick="step_four()" id="input13" /> yes<br /> <input type="radio" name="title-swap" disabled="disabled" onclick="step_five()" id="input14" /> no, I've already added that piece of code </div> <div id="enable-question-4" class="off"> <h3 class="off">Step 4</h3> How should the title appear for a post page?<br /> <input type="radio" name="title-form" disabled="disabled" onclick="step_six()" id="input15" /> <post title> <em>(Eg: Custom Meta Description)</em><br /> <input type="radio" name="title-form" disabled="disabled" onclick="step_six()" id="input16" /> <post title - blog title> <em>(Eg: Custom Meta Description - AgaWebs)</em> </div> <div id="enable-question-5" class="off hide"> <h3>Step 5</h3> Fill in the following form with your keywords (separated by commas) and descriptions, and click out of the last field you write in to enable the <b>Get the code ></b> button:<br /><br /> </div> <div class="hide" id="div1"> <table class="off" id="tab1"> <tr> <td colspan="2"><b>Page 1</b></td> </tr> <tr> <td>URL:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input21" onblur="validate_url(this.id)" /><br /> <span id="url-warning-1" class="hide"></span></td> </tr> <tr> <td>Keywords:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input22" onblur="enable_code()" /></td> </tr> <tr> <td>Description:</td> <td><textarea rows="3" cols="45" disabled="disabled" onclick="document.getElementById(this.id).select()" id="textarea1" onblur="enable_code()"></textarea></td> </tr> </table> </div> <div class="hide" id="div2"> <table class="off" id="tab2"> <tr> <td colspan="2"><b>Page 2</b></td> </tr> <tr> <td>URL:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input23" onblur="validate_url(this.id)" /><br /> <span id="url-warning-3" class="hide"></span></td> </tr> <tr> <td>Keywords:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input24" onblur="enable_code()" /></td> </tr> <tr> <td>Description:</td> <td><textarea rows="3" cols="45" disabled="disabled" onclick="document.getElementById(this.id).select()" id="textarea2" onblur="enable_code()"></textarea></td> </tr> </table> </div> <div class="hide" id="div3"> <table class="off" id="tab3"> <tr> <td colspan="2"><b>Page 3</b></td> </tr> <tr> <td>URL:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input25" onblur="validate_url(this.id)" /><br /> <span id="url-warning-5" class="hide"></span></td> </tr> <tr> <td>Keywords:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input26" onblur="enable_code()" /></td> </tr> <tr> <td>Description:</td> <td><textarea rows="3" cols="45" disabled="disabled" onclick="document.getElementById(this.id).select()" id="textarea3" onblur="enable_code()"></textarea></td> </tr> </table> </div> <div class="hide" id="div4"> <table class="off" id="tab4"> <tr> <td colspan="2"><b>Page 4</b></td> </tr> <tr> <td>URL:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input27" onblur="validate_url(this.id)" /><br /> <span id="url-warning-7" class="hide"></span></td> </tr> <tr> <td>Keywords:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input28" onblur="enable_code()" /></td> </tr> <tr> <td>Description:</td> <td><textarea rows="3" cols="45" disabled="disabled" onclick="document.getElementById(this.id).select()" id="textarea4" onblur="enable_code()"></textarea></td> </tr> </table> </div> <div class="hide" id="div5"> <table class="off" id="tab5"> <tr> <td colspan="2"><b>Page 5</b></td> </tr> <tr> <td>URL:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input29" onblur="validate_url(this.id)" /><br /> <span id="url-warning-9" class="hide"></span></td> </tr> <tr> <td>Keywords:</td> <td><input type="text" size="58" disabled="disabled" onclick="document.getElementById(this.id).select()" id="input210" onblur="enable_code()" /></td> </tr> <tr> <td>Description:</td> <td><textarea rows="3" cols="45" disabled="disabled" onclick="document.getElementById(this.id).select()" id="textarea5" onblur="enable_code()"></textarea></td> </tr> </table> </div> <br /> <input type="button" value="Reset" onclick="reloadPage()" id="input31" /> <input type="button" value="Get the code >" disabled="disabled" onclick="generate_code()" id="input32" /> </div> <div class="hide" id="div6"> <h3>Step 6</h3> Copy the code below and paste it into your Blogger template as shown in the video above:<br /><br /> <textarea rows="15" cols="58" id="textarea6" onclick="document.getElementById(this.id).select()" readonly="readonly" ></textarea><br /><br /> <input type="button" value="Reset" onclick="reloadPage()" id="input33" /> </div><br /><br /><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-8476717397254961657?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.htmlnoreply@blogger.com (Andrei)225tag:blogger.com,1999:blog-2113308636434658541.post-6106925329713751426Sun, 18 Jan 2009 01:16:00 +00002010-10-26T23:38:24.962+03:00mountainstravelmeApuseniApuseni > Muntii Bihorului > Zona Padis<p align="justify">Thanks to my younger sister I finally found a proper soundtrack for the images I filmed last year in September. Hope you enjoy the <i>Padis experience</i>:</p> <p align="center"><object width="520" height="345"><param name="movie" value="http://www.youtube.com/v/pdp39y7de3w?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/pdp39y7de3w?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="345"></embed></object></p> <p align="justify">The <i>Padis area (Zona Padis)</i> is located in <i>Bihor's Mountains (Muntii Bihorului)</i> and those, in turn, are part of the <i>Romanian Apuseni Mountains (Muntii Apuseni)</i>. Here are some of the main attractions in this region, ordered as they appear in my video:</p> <p align="justify"><b>Pestera Focul Viu</b>: 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.</p> <p align="justify"><b>Pietrele Galbenei</b>: large cliff face overlooking a vast valley.</p> <p align="justify"><b>Lumea Pierduta</b>: "The Lost World" - several avens (vertical caves) are grouped in this area, the most spectacular one being Avenul Gemanata.</p> <p align="justify"><b>Cetatile Radesei & Cheile Somesului Cald</b>: a network of tunnels and vertical shafts (avens) dug through the mountain by water.</p> <p align="justify"><b>Cetatile Ponorului</b>: 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.</p> <p align="justify"><b>Pestera Ghetarului de la Scarisoara</b>: the cave which houses the largest glacier in Romania.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-6106925329713751426?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2009/01/apuseni-muntii-bihorului-zona-padis.htmlnoreply@blogger.com (Andrei)2tag:blogger.com,1999:blog-2113308636434658541.post-7269907937331622334Sat, 27 Dec 2008 23:16:00 +00002010-10-26T23:39:52.992+03:00photographymefunnyMerry Christmas!<img style="display:block; margin:20px auto 10px; text-align:center; width: 510px; height: 340px;" src="http://lh6.ggpht.com/_piurA6KjafM/SVa4QlCxj-I/AAAAAAAAAlc/nq5pX1KJOZM/s510/DSC05113.JPG" border="0" alt="Ghost by the Christmas tree" /><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-7269907937331622334?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/12/merry-christmas.htmlnoreply@blogger.com (Andrei)2tag:blogger.com,1999:blog-2113308636434658541.post-7602587238457574688Wed, 19 Nov 2008 22:22:00 +00002010-10-26T23:40:34.575+03:00photographyBloggerwebdesignStumble Upon Horror Photos<p align="justify">Nothing original here. But thanks to <a href="http://play-cargames.blogspot.com/" title="Download Car Racing Games" rel="nofollow">Saleel</a> I rediscovered what pleasant accidents social media sites can cause.</p> <p align="justify">Horror film enthusiasts, hover your cursor over the gallery below to see the photos I <del>stumbled upon on FindAccidentally</del> accidentally found on StumbleUpon.</p> <p align="justify">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 <a href="http://joshuahoffine.com/" rel="nofollow" title="Joshua Hoffine">author</a>.</p> <div class="suhp-gallery"> <a href="http://joshuahoffine.wordpress.com/" rel="nofollow"><img src="http://2.bp.blogspot.com/_piurA6KjafM/SSSR2ybkORI/AAAAAAAAAfA/VspAwL38bPE/s400/isolation.jpg" alt="mad man eating his own flesh" id="BLOGGER_PHOTO_ID_5270497834366679314" /></a> <a href="http://joshuahoffine.wordpress.com/" rel="nofollow"><img src="http://2.bp.blogspot.com/_piurA6KjafM/SSSR2yt4K4I/AAAAAAAAAe4/y2tjh91euj4/s400/gas-mask.jpg" alt="child wearing a gas mask" id="BLOGGER_PHOTO_ID_5270497834443484034" /></a> <a href="http://joshuahoffine.wordpress.com/" rel="nofollow"><img src="http://3.bp.blogspot.com/_piurA6KjafM/SSSR21nFA1I/AAAAAAAAAew/nl8iJ9O7pUU/s400/chain-saw.jpg" alt="horror surgery" id="BLOGGER_PHOTO_ID_5270497835220271954" /></a> <a href="http://joshuahoffine.wordpress.com/" rel="nofollow"><img src="http://1.bp.blogspot.com/_piurA6KjafM/SSSR2sv4ppI/AAAAAAAAAeo/UtZwyyhTSsA/s400/butcher.jpg" alt="butchery scene" id="BLOGGER_PHOTO_ID_5270497832841291410" /></a> <a href="http://joshuahoffine.wordpress.com/" rel="nofollow"><img src="http://2.bp.blogspot.com/_piurA6KjafM/SSSR2mM9wpI/AAAAAAAAAeg/xBPfqP_XXvw/s400/battle.jpg" alt="supernatural fight scene" id="BLOGGER_PHOTO_ID_5270497831084212882" /></a> <div>Photo Gallery powered by <a href="http://www.cssplay.co.uk/" title="Experiments with Cascading Style Sheets" rel="nofollow">Stu Nicholls'</a> design idea</div> </div> <p align="justify">Now, to get to my point... if you are (or would like to become) a <a href="http://www.stumbleupon.com/" title="Discover your web" rel="nofollow">StumbleUpon user</a>, don't forget to use the bookmark button below each post and rate this blog :)</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-7602587238457574688?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/11/stumble-upon-horror-photos.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-6575160863876147103Mon, 17 Nov 2008 15:49:00 +00002010-10-26T23:41:19.400+03:00Bloggertips and tweaksNew Custom Domain<p align="justify">So... I've changed the domain name for my blog. The new address is <a href="http://www.agawebs.com/">http://www.agawebs.com/</a> and the new name is <b>AgaWebs</b>. Sounds cool, doesn't it?</p> <p align="justify">For those of you who plan on performing a similar stunt, note that it's not as straight forward as you might think. I, for one, had a bit of trouble with this migration and though I should share the things I've learnt...</p> <p align="justify">Let's say you're in the same situation as I was: you own a <i>Blogger (or Blogspot) blog</i>, you buy a custom domain from <i>GoDaddy</i> and want to point it to your blog. First thing you'll do is read <a href="http://googlewebmastercentral.blogspot.com/2008/04/best-practices-when-moving-your-site.html" title="Best practices when moving your site" rel="nofollow">Google's guidelines for moving a site</a>. You'll then read Blogger's help articles on <a href="http://help.blogger.com/bin/answer.py?answer=55373&topic=12492" title="How do I use a custom domain name on my blog?" rel="nofollow">using a custom domain for your blog</a> and <a href="http://help.blogger.com/bin/answer.py?answer=58317#godaddy" title="How do I create a CNAME record for my custom domain?" rel="nofollow">creating a CNAME record for the domain</a>. After following the instructions in these tutorials, you'll be tempted to think it's all over and wait for DNS servers to update their records. I've done so myself and noticed that after 72 hours, the domain still wasn't pointing to my blog. Here are the full instructions I received from GoDaddy Support in order to fix this:</p> <blockquote>Dear Andrei,<br /><br /><br /> Thank you for contacting Online Support.<br /><br /> I understand you have a question about pointing your domain name properly to your blog. I have included instructions to do so:<br /><br /> 1. Modify the 'www' CNAME to show that it 'points to' ghs.google.com. (you have already done so.)<br /><br /> 2. Set the 'A' record to the forwarding IP address (64.202.189.170)<br /><br /> 3. Set up domain forwarding to the following URL: http://www.agawebs.com<br /><br /> To modify the A-Record for the your domain:<br /><br /> 1. Select Domain Manager from the My Products menu.<br /> 2. Click on the domain which you wish to change the A-Record for.<br /> 3. Click Total DNS Control and MX Records.<br /> 4. Under the A (Host) section, click the pencil icon to the right of the @ record.<br /> 5. Enter the new IP address.<br /> 6. Click OK<br /><br /> NOTE: Changes to the settings of a domain can take up to 48 hours to become effective because of the number of networks involved, and because these networks are controlled by several different agencies. This delay applies to all domains with any Registrar. Please allow for this delay when planning web sites or configuring a domain to work with your services.<br /><br /> To setup or modify domain forwarding:<br /><br /> 1. From My Products, click Domain Manager.<br /> 2. Check the box next to the domain(s) you wish to modify.<br /> 3. Click the Forward Domains button above your list of domains.<br /> 4. Select the Enabled option.<br /> 5. Enter the full URL that you would like your domain to forward to. (For example: http://www.anotherdomain.com)<br /> 6. Select the redirect type you would like for the domain forwarding.<br /> 7. Click OK.<br /><br /> Note: Changes to the settings of a domain can take an average of 48 hours due to the number of networks involved. These networks are controlled by many different entities and are updated independently.<br /><br /> Please let us know if we can assist you in any other way.<br /><br /><br /> Sincerely,<br /><br /> Dean P.<br /> Online Support Technician</blockquote> <p align="justify">As you can see, Blogger's tutorial is missing at least one crucial step: <b>setting the 'A' record to the forwarding IP address</b>. I'm not sure if the IP is the same for all domains, so do contact the very helpful GoDaddy Support staff before performing these steps. Note that domain forwading (the 3rd step mentioned in Dean's email) is used in order to make both <i>yourdomain.com</i> and <i>www.yourdomain.com</i> point to the same site. This can be performed from Blogger's admin panel as well - it's the "Redirect yourdomain.com to www.yourdomain.com" option under Settings > Publishing. However, using this option can cause further problems, so I recommend you stick only to the instructions above.</p> <p align="justify">That's the full story of my new domain. I still have to change some of the links on this blog and make them point to the new addresses. By the way, if you come across any broken links or other bugs, please notify me in a comment. My Outbrain star ratings have also been reset, so please start rating again, bookmark the articles you like and subscribe to the new feeds.</p> <p align="justify">Thank you for visiting my blog :)</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-6575160863876147103?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/11/new-custom-domain.htmlnoreply@blogger.com (Andrei)6tag:blogger.com,1999:blog-2113308636434658541.post-4376804445396990737Tue, 21 Oct 2008 13:33:00 +00002010-10-26T23:43:36.023+03:00tips and tweakswebdesignSliding Doors for MY a:hover Craft<p align="justify">Lately, I've been experimenting with different cascading style sheet designs for websites. One of the problems I've come across is how to create custom link buttons or tabs and add my own images on their background. Bear in mind that such links have to have a variable width depending on the length of the link anchor or on the different browser settings a visitor might have previously applied. This is all fine when the backgound picture is simply a small .gif which generates a texture. But what do you do when you want to use an image such as this?...</p> <p align="center"><img src="http://lh4.ggpht.com/_piurA6KjafM/TDuRlTffX1I/AAAAAAAAAnU/8Qu9oNZDhpc/s400/button-bg-gradient.gif" alt="button skin" width="400px" height="30px" /></p> <p align="justify">Note that both the left and right edges of the picture are relevant for my button. The picture is 400px wide and if the anchor text exceedes that width, the backgound is repeated spoiling the design. On the other hand, if the anchor text is shorter, the right edge isn't showing. As a pre-requisite, we're not allowed to fix this using HTML tables, but only CSS. The proper solution is a technique called "sliding doors" and I found it on <a href="http://www.alistapart.com/articles/slidingdoors">Douglas Bowman's webdesign blog</a>. Basically, you use two overlapping pictures and calculate their width so that the resulting button can contain both short and long strings. I'm not going to insist too much on this technique, but just to illustrate it clearly, I've drawn a diagram based on Bowman's explanation:</p> <p align="center"><img src="http://lh3.ggpht.com/_piurA6KjafM/TDuSJtNFMOI/AAAAAAAAAn4/5cfXMS0HlcI/s400/sliding-doors-diagram.jpg" alt="explanation of sliding doors technique" width="400px" height="300px" /></p> <p align="justify">Another common CSS technique is to use the a:link, a:hover etc. pseudo-classes to create different effects when visitors hold their mouse over a link button. A good tutorial for doing this is Stu Nicholls' article on "<a href="http://www.cssplay.co.uk/menus/hovercraft.html" targer="_blank" rel="nofollow">:hover crafts</a>". Here's my own basic example:</p> <a href="#" title="example link button" class="example-link">Button 1</a> <a href="#" title="example link button" class="example-link">Button 2</a> <a href="#" title="example link button" class="example-link">Button 3</a><br /><br /> <p align="justify">However, when you want to apply this a:hover technique to a button that has to have an image background during the "hover" state, you run into a problem. I haven't found any articles which explain how this should be done, so after a few trials, I came up with the following procedure:</p> <ol> <li><div id="stage-1">I'm going to use a navigation bar to demonstrate the technique. It's good practice to place the navbar links in an unordered list, so start I'll by writing the HTML code necessary for this button list: <div class="quote-paragraph"> <ul><br />    <li><a href="#"><span>Button 1</span></a></li><br />    <li><a href="#"><span>Link</span></a></li><br />    <li><a href="#"><span>Button 2</span></a></li><br /> </ul> </div> I haven't declared any style properties yet, so at this point, the list looks like this:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /> Each list item obviously contains a "<a>" tag for the link anchors. In addition to that, the link text is contained within "<span>" tags which I'm going to use as my top layers for the sliding doors - you'll understand this later.<br /><br /> </div></li> <li><div id="stage-2">Keeping the same HTML code, I'm now going to start editing CSS properties for the list: first, remove bullets and adjust margin + padding: <div class="quote-paragraph"> ul{<br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    }<br /><br /> li{<br />    margin: 0;<br />    padding: 0;<br />    } </div> Result:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /><br /> </div></li> <li><div id="stage-3">I want this to be a horizontal navbar, so next I'm going to display the list items inline (changes are highlighted in <b>bold</b>): <div class="quote-paragraph"> ul{<br />    <b>float: left;</b><br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    }<br /><br /> li{<br />    <b>float: left;</b><br />    margin: 0;<br />    padding: 0;<br />    } </div> Result:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /><br /> </div></li> <li><div id="stage-4">I'm now going to set a fixed height for the navbar, plus a red background in order to point out its shape: <div class="quote-paragraph"> ul{<br />    float: left;<br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    <b>background-color: Red;</b><br />    <b>height: 30px;</b><br />    <b>overflow: hidden;</b><br />    }<br /><br /> li{<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />    } </div> Result:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /><br /> </div></li> <li><div id="stage-5">By now, there's a need to adjust the padding of these buttons. So I start off by adding some padding on the left side of the anchor: <div class="quote-paragraph"> ul{<br />    float: left;<br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    background-color: Red;<br />    height: 30px;<br />    overflow: hidden;<br />    }<br /><br /> li{<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />    }<br /><br /> <b>li a{<br />    display: block; /*display the achor as a block*/<br />    margin: 0;<br />    padding: 0 0 0 10px;<br />    }</b> </div> Result:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /><br /> </div></li> <li><div id="stage-6">The remaining padding can be adjusted by editing the properties of the "<span>" tag. I'm also going to set a green backgound for it in order to display its shape clearly: <div class="quote-paragraph"> ul{<br />    float: left;<br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    background-color: Red;<br />    height: 30px;<br />    overflow: hidden;<br />    }<br /><br /> li{<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />    }<br /><br /> li a{<br />    display: block; /*display the achor as a block*/<br />    margin: 0;<br />    padding: 0 0 0 10px;<br />    }<br /><br /> <b>li a span{<br />    display: block;<br />    margin: 0;<br />    padding: 4px 10px 10px 0;<br />    background-color: Green;<br />    }</b> </div> Result:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /><br /> </div></li> <li><div id="stage-7">Setting the "a:hover" behavior - this is the part where I can actually apply the "skin" for my buttons. Since the "<span>" entity is the top-most layer, I'll use it to dislay the main part of the button and its right edge. The "<a>" tag will be used to render the left edge only: <div class="quote-paragraph"> ul{<br />    float: left;<br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    background-color: Red;<br />    height: 30px;<br />    overflow: hidden;<br />    }<br /><br /> li{<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />    }<br /><br /> li a{<br />    <b>float: left; /*this ensures the entire button is clickable*/</b><br />    display: block; /*display the achor as a block*/<br />    margin: 0;<br />    padding: 0 0 0 10px;<br />    }<br /><br /> li a span{<br />    display: block;<br />    margin: 0;<br />    padding: <b>7px</b> 10px 10px 0;<br />    background-color: Green;<br />    }<br /><br /> <b>li a:hover{<br />    background: url(button-bg-gradient.gif) left top;<br />    }<br /><br /> li a:hover span{<br />    background: url(button-bg-gradient.gif) right top;<br />    }</b> </div> Result (hover your mouse over it to see the changes):<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul><br /><br /> </div></li> <li><div id="stage-8">OK, we're nearly there. All the navbar needs now is a proper background and some finishing text-formatting touches: <div class="quote-paragraph"> ul{<br />    float: left;<br />    list-style-type: none;<br />    margin: 0;<br />    padding: 0;<br />    <b>background: url(bg-gradient.gif);</b><br />    height: 30px;<br />    overflow: hidden;<br />    }<br /><br /> li{<br />    float: left;<br />    margin: 0;<br />    padding: 0;<br />    }<br /><br /> li a{<br />    float: left; /*this ensures the entire button is clickable*/<br />    display: block; /*display the achor as a block*/<br />    margin: 0;<br />    padding: 0 0 0 10px;<br />    <b>cursor: pointer;<br />    text-decoration: none;<br />    color: White;<br />    font-family: Tahoma;<br />    font-weight: bold;<br />    text-transform: uppercase;<br />    font-size: small;</b><br />    }<br /><br /> li a span{<br />    display: block;<br />    margin: 0;<br />    padding: 7px 10px 10px 0;<br />    <b>cursor: pointer;</b><br />    }<br /><br /> li a:hover{<br />    background: <b>url(button-bg+gradient.gif)</b> left top;<br />    }<br /><br /> li a:hover span{<br />    background: <b>url(button-bg+gradient.gif)</b> right top;<br />    } </div> Result:<br /><br /> <ul> <li><a href="#"><span>Button 1</span></a></li> <li><a href="#"><span>Link</span></a></li> <li><a href="#"><span>Button 2</span></a></li> </ul> </div></li> </ol> <br style="clear:both" /><br style="clear:both" /><br style="clear:both" /> <p align="justify">That's about all there is to it. You can use this technique to also create skins for the inactive state of your buttons.</p> <p align="justify">Note that the text above is already formatted, so you may encounter problems if you copy that code into the source code of your website. Instead, I recommend you copy the final code from the text boxes below:</p> HTML:<br /> <textarea cols="58" rows="5" readonly="readonly"> <ul>    <li><a href="#"><span>Button 1</span></a></li>    <li><a href="#"><span>Link</span></a></li>    <li><a href="#"><span>Button 2</span></a></li> </ul> </textarea><br /> CSS:<br /> <textarea cols="58" rows="20" readonly="readonly"> ul{    float: left;    list-style-type: none;    margin: 0;    padding: 0;    background: url(bg-gradient.gif);    height: 30px;    overflow: hidden;    } li{    float: left;    margin: 0;    padding: 0;    } li a{    float: left; /*this ensures the entire button is clickable*/    display: block; /*display the achor as a block*/    margin: 0;    padding: 0 0 0 10px;    cursor: pointer;    text-decoration: none;    color: White;    font-family: Tahoma;    font-weight: bold;    text-transform: uppercase;    font-size: small; } li a span{    display: block;    margin: 0;    padding: 7px 10px 10px 0;    cursor: pointer;    } li a:hover{    background: url(button-bg+gradient.gif) left top;    } li a:hover span{    background: url(button-bg+gradient.gif) right top;    } </textarea><br /><br /> <p align="justify">There are plenty of examples of such navbars on Stu Nicholls' site (see above). Furthermore, one can deduce the technique by simply looking at the source code of a site that uses it. However, I felt a clear explanation was needed and I hope I've accomplished that with my article. Please share any better tutorials you may find and let me know how this works out for your site.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-4376804445396990737?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/10/sliding-doors-for-my-ahover-craft.htmlnoreply@blogger.com (Andrei)1tag:blogger.com,1999:blog-2113308636434658541.post-1853639347911422984Fri, 25 Apr 2008 04:10:00 +00002010-10-26T23:46:57.480+03:00Piatra CraiuluiphotographymountainstravelmePiatra Craiului<div align="center"><table border="0"><tbody><tr><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlw1ROqhI/AAAAAAAAAWQ/GRIVkG9-AKE/s800/piatra_craiului_01.JPG" rel="nofollow"><img alt="Cheile Zarnestiului si Piatra Craiului" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlw1ROqhI/AAAAAAAAAWQ/GRIVkG9-AKE/s144/piatra_craiului_01.JPG" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlzlROqiI/AAAAAAAAAWY/56ThBRGUdSY/s800/piatra_craiului_02.JPG" rel="nofollow"><img alt="Cheile Zarnestiului" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlzlROqiI/AAAAAAAAAWY/56ThBRGUdSY/s144/piatra_craiului_02.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAl1VROqjI/AAAAAAAAAWg/-09zoPHJriw/s800/piatra_craiului_03.JPG" rel="nofollow"><img alt="Piatra Craiului - Ref. Grind" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAl1VROqjI/AAAAAAAAAWg/-09zoPHJriw/s144/piatra_craiului_03.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAl2lROqkI/AAAAAAAAAWo/mQCLYgxlsac/s800/piatra_craiului_04.JPG" rel="nofollow"><img alt="La Om" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAl2lROqkI/AAAAAAAAAWo/mQCLYgxlsac/s144/piatra_craiului_04.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAl5VROqlI/AAAAAAAAAWw/DDdYjyt0QvM/s800/piatra_craiului_05.JPG" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAl5VROqlI/AAAAAAAAAWw/DDdYjyt0QvM/s144/piatra_craiului_05.JPG" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAl7FROqmI/AAAAAAAAAW4/x7cnYVWFymA/s800/piatra_craiului_06.JPG" rel="nofollow"><img alt="" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAl7FROqmI/AAAAAAAAAW4/x7cnYVWFymA/s144/piatra_craiului_06.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAl9VROqnI/AAAAAAAAAXA/kZJ3Z8QBvFc/s800/piatra_craiului_07.JPG" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAl9VROqnI/AAAAAAAAAXA/kZJ3Z8QBvFc/s144/piatra_craiului_07.JPG" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAmAFROqoI/AAAAAAAAAXM/aZ4Juf_fCbg/s800/piatra_craiului_08.JPG" rel="nofollow"><img alt="Bran" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAmAFROqoI/AAAAAAAAAXM/aZ4Juf_fCbg/s144/piatra_craiului_08.JPG" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAmBlROqpI/AAAAAAAAAXU/X0mkMplL1no/s800/piatra_craiului_09.JPG" rel="nofollow"><img alt="Creastra Pietrei Craiului" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAmBlROqpI/AAAAAAAAAXU/X0mkMplL1no/s144/piatra_craiului_09.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAmD1ROqqI/AAAAAAAAAXc/9j8456nJ3Lc/s800/piatra_craiului_10.JPG" rel="nofollow"><img alt="La Curmatura" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAmD1ROqqI/AAAAAAAAAXc/9j8456nJ3Lc/s144/piatra_craiului_10.JPG" /></a></td><tr><td colspan="3" align="right"> </td></tr><tr><td colspan="3" align="right"><ecoXtrem></td></tr><tr><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlLVROqDI/AAAAAAAAASc/huY4tCbeaDY/s800/piatra_craiului_11.JPG" rel="nofollow"><img alt="Prin padure" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlLVROqDI/AAAAAAAAASc/huY4tCbeaDY/s144/piatra_craiului_11.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlN1ROqEI/AAAAAAAAASk/tm5AxX6Gy-E/s800/piatra_craiului_12.JPG" rel="nofollow"><img alt="" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlN1ROqEI/AAAAAAAAASk/tm5AxX6Gy-E/s144/piatra_craiului_12.JPG" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlPlROqFI/AAAAAAAAASs/dZNiUbzWQgQ/s800/piatra_craiului_13.JPG" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlPlROqFI/AAAAAAAAASs/dZNiUbzWQgQ/s144/piatra_craiului_13.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlUlROqKI/AAAAAAAAATU/-SAj4xt4qpQ/s800/piatra_craiului_14.jpg" rel="nofollow"><img alt="Locomotiva" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlUlROqKI/AAAAAAAAATU/-SAj4xt4qpQ/s144/piatra_craiului_14.jpg" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlT1ROqJI/AAAAAAAAATM/cJNglNDhph8/s800/piatra_craiului_15.jpg" rel="nofollow"><img alt="" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlT1ROqJI/AAAAAAAAATM/cJNglNDhph8/s144/piatra_craiului_15.jpg" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlclROqRI/AAAAAAAAAUM/t0fWwBdhius/s800/piatra_craiului_16.jpg" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlclROqRI/AAAAAAAAAUM/t0fWwBdhius/s144/piatra_craiului_16.jpg" /></a></td></tr><tr><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlXFROqNI/AAAAAAAAATs/w8bwrxh6ZYU/s800/piatra_craiului_17.jpg" rel="nofollow"><img alt="" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlXFROqNI/AAAAAAAAATs/w8bwrxh6ZYU/s144/piatra_craiului_17.jpg" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlYlROqOI/AAAAAAAAAT0/4cJOvpvEJbc/s800/piatra_craiului_18.jpg" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlYlROqOI/AAAAAAAAAT0/4cJOvpvEJbc/s144/piatra_craiului_18.jpg" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlaVROqPI/AAAAAAAAAT8/TwjJGIa1GQE/s800/piatra_craiului_19.jpg" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlaVROqPI/AAAAAAAAAT8/TwjJGIa1GQE/s144/piatra_craiului_19.jpg" /></a></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlblROqQI/AAAAAAAAAUE/TE_MiWpUswE/s800/piatra_craiului_20.jpg" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlblROqQI/AAAAAAAAAUE/TE_MiWpUswE/s144/piatra_craiului_20.jpg" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAldlROqSI/AAAAAAAAAUU/NV1nEo-BTew/s800/piatra_craiului_21.jpg" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAldlROqSI/AAAAAAAAAUU/NV1nEo-BTew/s144/piatra_craiului_21.jpg" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlflROqUI/AAAAAAAAAUk/ef8miJzZEmE/s800/piatra_craiului_22.jpg" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlflROqUI/AAAAAAAAAUk/ef8miJzZEmE/s144/piatra_craiului_22.jpg" /></a></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlglROqVI/AAAAAAAAAUs/OoT2YgKR464/s800/piatra_craiului_23.jpg" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlglROqVI/AAAAAAAAAUs/OoT2YgKR464/s144/piatra_craiului_23.jpg" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlhVROqWI/AAAAAAAAAU0/jxrwBcJHcVQ/s800/piatra_craiului_24.jpg" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlhVROqWI/AAAAAAAAAU0/jxrwBcJHcVQ/s144/piatra_craiului_24.jpg" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAliVROqXI/AAAAAAAAAU8/_tdONU7lQA8/s800/piatra_craiului_25.jpg" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAliVROqXI/AAAAAAAAAU8/_tdONU7lQA8/s144/piatra_craiului_25.jpg" /></a></td></tr><tr><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAljFROqYI/AAAAAAAAAVI/J7uX5RJEfHQ/s800/piatra_craiului_26.jpg" rel="nofollow"><img alt="" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAljFROqYI/AAAAAAAAAVI/J7uX5RJEfHQ/s144/piatra_craiului_26.jpg" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAle1ROqTI/AAAAAAAAAUc/aVyZi0Kw1sw/s800/piatra_craiului_27.jpg" rel="nofollow"><img alt="Horn" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAle1ROqTI/AAAAAAAAAUc/aVyZi0Kw1sw/s144/piatra_craiului_27.jpg" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlRlROqGI/AAAAAAAAAS0/ZUZeuFv5LRw/s800/piatra_craiului_28.JPG" rel="nofollow"><img alt="" src="http://lh5.ggpht.com/andrei.agavriloaiei/SBAlRlROqGI/AAAAAAAAAS0/ZUZeuFv5LRw/s144/piatra_craiului_28.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlSVROqHI/AAAAAAAAAS8/jQYEYx-GPA8/s800/piatra_craiului_29.JPG" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlSVROqHI/AAAAAAAAAS8/jQYEYx-GPA8/s144/piatra_craiului_29.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlS1ROqII/AAAAAAAAATE/YEkyDlpXLJA/s800/piatra_craiului_30.JPG" rel="nofollow"><img alt="" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlS1ROqII/AAAAAAAAATE/YEkyDlpXLJA/s144/piatra_craiului_30.JPG" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlVFROqLI/AAAAAAAAATc/vZ879lxs5Ic/s800/piatra_craiului_31.JPG" rel="nofollow"><img alt="" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlVFROqLI/AAAAAAAAATc/vZ879lxs5Ic/s144/piatra_craiului_31.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlWFROqMI/AAAAAAAAATk/qUV2MsBrgkU/s800/piatra_craiului_32.JPG" rel="nofollow"><img alt="Cabana Curmatura noaptea" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlWFROqMI/AAAAAAAAATk/qUV2MsBrgkU/s144/piatra_craiului_32.JPG" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlkFROqZI/AAAAAAAAAVQ/U_7qzkcgFBw/s800/piatra_craiului_33.jpg" rel="nofollow"><img alt="Padurea in ceata" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAlkFROqZI/AAAAAAAAAVQ/U_7qzkcgFBw/s144/piatra_craiului_33.jpg" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SBAllFROqaI/AAAAAAAAAVY/6szHhmqPFAI/s800/piatra_craiului_34.JPG" rel="nofollow"><img alt="" src="http://lh3.ggpht.com/andrei.agavriloaiei/SBAllFROqaI/AAAAAAAAAVY/6szHhmqPFAI/s144/piatra_craiului_34.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAll1ROqbI/AAAAAAAAAVg/Ar6DfJ1fbMg/s800/piatra_craiului_35.JPG" rel="nofollow"><img alt="" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAll1ROqbI/AAAAAAAAAVg/Ar6DfJ1fbMg/s144/piatra_craiului_35.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlnVROqcI/AAAAAAAAAVo/lNA6chTJD_8/s800/piatra_craiului_36.JPG" rel="nofollow"><img alt="" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlnVROqcI/AAAAAAAAAVo/lNA6chTJD_8/s144/piatra_craiului_36.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlo1ROqdI/AAAAAAAAAVw/wnnEoqcbVNI/s800/piatra_craiului_37.JPG" rel="nofollow"><img alt="" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlo1ROqdI/AAAAAAAAAVw/wnnEoqcbVNI/s144/piatra_craiului_37.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlq1ROqeI/AAAAAAAAAV4/IJgJ-e9jtrU/s800/piatra_craiului_38.JPG" rel="nofollow"><img alt="" src="http://lh6.ggpht.com/andrei.agavriloaiei/SBAlq1ROqeI/AAAAAAAAAV4/IJgJ-e9jtrU/s144/piatra_craiului_38.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAltVROqfI/AAAAAAAAAWA/Buv6GsQIUIo/s800/piatra_craiului_39.JPG" rel="nofollow"><img alt="Caine alb" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAltVROqfI/AAAAAAAAAWA/Buv6GsQIUIo/s144/piatra_craiului_39.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlvVROqgI/AAAAAAAAAWI/eQm7PumXFF8/s800/piatra_craiului_40.JPG" rel="nofollow"><img alt="Rapel" src="http://lh4.ggpht.com/andrei.agavriloaiei/SBAlvVROqgI/AAAAAAAAAWI/eQm7PumXFF8/s144/piatra_craiului_40.JPG" /></a></td></tr><tr><td colspan="3" align="right"></ecoXtrem></td></tr></tbody></table></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-1853639347911422984?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/04/piatra-craiului.htmlnoreply@blogger.com (Andrei)6tag:blogger.com,1999:blog-2113308636434658541.post-7118360635890043552Thu, 17 Apr 2008 11:44:00 +00002010-10-26T23:47:48.090+03:00Piatra MarephotographymountainstravelmeImages from Piatra Mare<div align="center"><table border="0"><tbody><tr><td colspan="3" align="center"><h4>November 2005</h4></td></tr><tr><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SAdKe7sBDwI/AAAAAAAAAOo/03Vxx0D5Pd8/s800/nov_05_piatra_mare_01.JPG" rel="nofollow"><img alt="cascada 7 scari - 7 stairs waterfall" src="http://lh4.ggpht.com/andrei.agavriloaiei/SAdKe7sBDwI/AAAAAAAAAOo/03Vxx0D5Pd8/s144/nov_05_piatra_mare_01.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SAdKgbsBDxI/AAAAAAAAAOw/RZNOHzo8GRc/s800/nov_05_piatra_mare_02.JPG" rel="nofollow"><img alt="canionul 7 scari - 7 stairs canyon: looking upwards" src="http://lh6.ggpht.com/andrei.agavriloaiei/SAdKgbsBDxI/AAAAAAAAAOw/RZNOHzo8GRc/s144/nov_05_piatra_mare_02.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SAdKh7sBDyI/AAAAAAAAAO4/A54aRB_Jnhc/s800/nov_05_piatra_mare_03.JPG" rel="nofollow"><img alt="canionul 7 scari - 7 stairs canyon: looking downwards" src="http://lh4.ggpht.com/andrei.agavriloaiei/SAdKh7sBDyI/AAAAAAAAAO4/A54aRB_Jnhc/s144/nov_05_piatra_mare_03.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKjLsBDzI/AAAAAAAAAPA/2GNyd-1siDA/s800/nov_05_piatra_mare_04.JPG" rel="nofollow"><img alt="forest track in Piatra Mare: in winter" src="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKjLsBDzI/AAAAAAAAAPA/2GNyd-1siDA/s144/nov_05_piatra_mare_04.JPG" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKkLsBD0I/AAAAAAAAAPI/Lql8YfK8FFk/s800/nov_05_piatra_mare_05.JPG" rel="nofollow"><img alt="people at the Piatra Mare cabin: in winter" src="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKkLsBD0I/AAAAAAAAAPI/Lql8YfK8FFk/s144/nov_05_piatra_mare_05.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SAdKk7sBD1I/AAAAAAAAAPQ/9On_-KdBmyU/s800/nov_05_piatra_mare_06.JPG" rel="nofollow"><img alt="my tent covered in snow near the Piatra Mare cabin" src="http://lh4.ggpht.com/andrei.agavriloaiei/SAdKk7sBD1I/AAAAAAAAAPQ/9On_-KdBmyU/s144/nov_05_piatra_mare_06.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SAdKmrsBD2I/AAAAAAAAAPY/zVzTYxlkQlI/s800/nov_05_piatra_mare_07.JPG" rel="nofollow"><img alt="view from Piatra Mare: in winter" src="http://lh3.ggpht.com/andrei.agavriloaiei/SAdKmrsBD2I/AAAAAAAAAPY/zVzTYxlkQlI/s144/nov_05_piatra_mare_07.JPG" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKoLsBD3I/AAAAAAAAAPg/8h-TMsZnuiA/s800/nov_05_piatra_mare_08.JPG" rel="nofollow"><img alt="forest in Piatra Mare: in winter" src="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKoLsBD3I/AAAAAAAAAPg/8h-TMsZnuiA/s144/nov_05_piatra_mare_08.JPG" /></a></td></tr></tbody></table></div> <div align="center"><table border="0"><tbody><tr><td colspan="3" align="center"><h4>May 2006</h4></td></tr><tr><td colspan="3" align="right"><by Tavi></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKqLsBD4I/AAAAAAAAAPo/1BJwU6l_-D8/s800/may_06_piatra_mare_01.JPG" rel="nofollow"><img alt="people preparing for a barbecue in Piatra Mare" src="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKqLsBD4I/AAAAAAAAAPo/1BJwU6l_-D8/s144/may_06_piatra_mare_01.JPG" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SAdKrrsBD5I/AAAAAAAAAPw/NMRRat7VLJQ/s800/may_06_piatra_mare_02.JPG" rel="nofollow"><img alt="view from Piatra Mare: river and forest in summer" src="http://lh3.ggpht.com/andrei.agavriloaiei/SAdKrrsBD5I/AAAAAAAAAPw/NMRRat7VLJQ/s144/may_06_piatra_mare_02.JPG" /></a></td><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SAdKsrsBD6I/AAAAAAAAAP4/snUcXIg6D_E/s800/may_06_piatra_mare_03.JPG" rel="nofollow"><img alt="clowds in the sky above Piatra Mare" src="http://lh3.ggpht.com/andrei.agavriloaiei/SAdKsrsBD6I/AAAAAAAAAP4/snUcXIg6D_E/s144/may_06_piatra_mare_03.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKuLsBD7I/AAAAAAAAAQA/oxhtkxk6sfQ/s800/may_06_piatra_mare_04.JPG" rel="nofollow"><img alt="view from Piatra Mare: river, forest and mountain in summer" src="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKuLsBD7I/AAAAAAAAAQA/oxhtkxk6sfQ/s144/may_06_piatra_mare_04.JPG" /></a></td><td align="center"><a href="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKxLsBD9I/AAAAAAAAAQQ/gu_UxoAuDfI/s800/may_06_piatra_mare_06.JPG" rel="nofollow"><img alt="view from Piatra Mare: river, forest and mountain in summer" src="http://lh5.ggpht.com/andrei.agavriloaiei/SAdKxLsBD9I/AAAAAAAAAQQ/gu_UxoAuDfI/s144/may_06_piatra_mare_06.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SAdKybsBD-I/AAAAAAAAAQY/0eHvarpknWQ/s800/may_06_piatra_mare_07.JPG" rel="nofollow"><img alt="view from Piatra Mare: forest and mountain in summer" src="http://lh6.ggpht.com/andrei.agavriloaiei/SAdKybsBD-I/AAAAAAAAAQY/0eHvarpknWQ/s144/may_06_piatra_mare_07.JPG" /></a></td></tr><tr><td colspan="3" align="right"></by Tavi></td></tr></tbody></table></div> <div align="center"><table border="0"><tbody><tr><td colspan="3" align="center"><h4>February 2008</h4></td></tr><tr><td colspan="3" align="right"><by Specian></td></tr><tr><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SAdK0rsBD_I/AAAAAAAAAQg/liSg4TWdNE4/s800/fer_08_piatra_mare_01.JPG" rel="nofollow"><img alt="icy rock face in Piatra Mare: in winter" src="http://lh3.ggpht.com/andrei.agavriloaiei/SAdK0rsBD_I/AAAAAAAAAQg/liSg4TWdNE4/s144/fer_08_piatra_mare_01.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SAdK27sBEAI/AAAAAAAAAQo/GI3MyyODN-s/s800/fer_08_piatra_mare_02.JPG" rel="nofollow"><img alt="people climbing the stairs from the 7 stairs canyon" src="http://lh4.ggpht.com/andrei.agavriloaiei/SAdK27sBEAI/AAAAAAAAAQo/GI3MyyODN-s/s144/fer_08_piatra_mare_02.JPG" /></a></td></tr><tr><td colspan="3" align="right"></by Specian></td></tr><tr><td colspan="3" align="right"> </td></tr><tr><td colspan="3" align="right"><by Cristi></td></tr><tr><td align="center"><a href="http://lh3.ggpht.com/andrei.agavriloaiei/SAdK3rsBEBI/AAAAAAAAAQw/1uyRZeq5vqw/s800/fer_08_piatra_mare_03.JPG" rel="nofollow"><img alt="people climbing an ice block in Piatra Mare" src="http://lh3.ggpht.com/andrei.agavriloaiei/SAdK3rsBEBI/AAAAAAAAAQw/1uyRZeq5vqw/s144/fer_08_piatra_mare_03.JPG" /></a></td><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SAdK47sBEDI/AAAAAAAAARE/Ej_bcNrX4gg/s800/fer_08_piatra_mare_05.JPG" rel="nofollow"><img alt="near the 7 stairs canyon" src="http://lh4.ggpht.com/andrei.agavriloaiei/SAdK47sBEDI/AAAAAAAAARE/Ej_bcNrX4gg/s144/fer_08_piatra_mare_05.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SAdK5bsBEEI/AAAAAAAAARM/KUd0vkRCE6A/s800/fer_08_piatra_mare_06.JPG" rel="nofollow"><img alt="fresh water spring" src="http://lh6.ggpht.com/andrei.agavriloaiei/SAdK5bsBEEI/AAAAAAAAARM/KUd0vkRCE6A/s144/fer_08_piatra_mare_06.JPG" /></a></td></tr><tr><td align="center"><a href="http://lh4.ggpht.com/andrei.agavriloaiei/SAdK57sBEFI/AAAAAAAAARU/0Ex1CXSM0NY/s800/fer_08_piatra_mare_07.JPG" rel="nofollow"><img alt="returning from 7 stairs: in winter" src="http://lh4.ggpht.com/andrei.agavriloaiei/SAdK57sBEFI/AAAAAAAAARU/0Ex1CXSM0NY/s144/fer_08_piatra_mare_07.JPG" /></a></td><td align="center"><a href="http://lh6.ggpht.com/andrei.agavriloaiei/SAdK4bsBECI/AAAAAAAAAQ8/-ocerxLY66Q/s800/fer_08_piatra_mare_04.JPG" rel="nofollow"><img alt="preparing to climb an ice block in Piatra Mare" src="http://lh6.ggpht.com/andrei.agavriloaiei/SAdK4bsBECI/AAAAAAAAAQ8/-ocerxLY66Q/s144/fer_08_piatra_mare_04.JPG" /></a></td></tr><tr><td colspan="3" align="right"></by Cristi></td></tr></tbody></table></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-7118360635890043552?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/04/piatra-mare.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-3062479446458336351Tue, 15 Apr 2008 20:37:00 +00002010-10-26T23:48:56.805+03:00footballmeMy Point of View<p align="center"><object width="520" height="415"><param name="movie" value="http://www.youtube.com/v/bOTd7lUsw5o?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bOTd7lUsw5o?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="520" height="415"></embed></object></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-3062479446458336351?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/04/my-point-of-view.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-6181467314347121380Sat, 12 Apr 2008 00:39:00 +00002010-10-26T23:53:59.256+03:00Bloggertips and tweaksSEOMeta Description - More Detailed Explanation<p align="center"><b>Check out the code generator and video<br />tutorial for this hack in my new article:<br /><a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html">Custom Meta and Title Tags for Blogger</a></b></p> <p align="justify">Since more details are needed about how to add meta descriptions and keywords for each blogger page, I've written a new article on this topic. This is a continuation of the <a href="http://andreiaga.blogspot.com/2008/03/meta-description-for-each-blogger-page.html" target="_blank">Meta Description for Each Blogger Page</a> article and it's not meant to replace it. Please make sure you read the initial post carefully and follow all the instructions in it to avoid messing up your Blogger template.</p> <h3>blog structure</h3> <p align="justify">I won't discuss all the elements in a blog, but the ones we're interested in are <b>the main page</b> and <a href="http://help.blogger.com/bin/answer.py?answer=42048&topic=12458" target="_blank"><b>the post pages</b></a>. Unless you're publishing your blog on a custom domain, the link to <b>the main page</b> looks similar to this one:</p> http://_something.blogspot.com/<br /><br /> <p align="justify"><b>Post pages</b> contain the individual articles/posts in your blog and they have permanent links (Blogger calles them <b>"permalinks"</b>) which look like this:</p> http://_something.blogspot.com/2004/03/name.html<br /><br /> <p align="justify">Our aim is to add meta descriptions and keywords for these sort of pages, so we should keep in mind the types of links mentioned above. Remember that what you identify as a <b>post/article</b> or as <b>the homepage</b> is identified by a web browser using the respective link.</p> <h3>code explained</h3> <p align="justify">The code you need to use in order to add meta descriptions and keywords is this one:</p> <blockquote><b:if cond='data:blog.url == "http://_something.blogspot.com/2004/03/name.html"'>   <meta content='DESCRIPTION' name='description'/>   <meta content='KEYWORDS' name='keywords'/> </b:if></blockquote> <p align="justify">Let's look at each line and see what they mean:</p> <ul><li><p align="justify">The first line expresses a condition: <i><b:if cond='data:blog.url == "http://_something.blogspot.com/2004/03/name.html"'></i> This basically says: "<b>if the link (blog.url) that a user is viewing matches (==) a certain link (http://_something.blogspot.com/2004/03/name.html), do...</b>".</p></li> <li><p align="justify">The second and third lines are the description and keywords themselves, placed in <b>meta</b> tags. An approximate translation for these two lines would be: "<b>associate this description and these keywords with the current web page</b>".</p></li> <li><p align="justify">The fourth and last line ( </b:if> ) ends the conditional statement.</p></li></ul> <p align="justify">If you connect this code explanation with the conclusion we've reached in the first section, you end up with a phrase that says:</p> <blockquote><p align="justify"><b>If the page that a user is viewing is the main page or a certain post or article, associate these respective keywords and description to it.</b></p></blockquote> <p align="justify">That is exactly what we want to do and it is especially important since we can have a webcrawler (like the Googlebot) instead of a user. Unfortunately however, due to the fact that you can only declare a single "constant" link (<i>http://_something.blogspot.com/2004/03/name.html</i>) in this code batch, you have to repeat the sequence for your main page and for all your other post pages.</p> <h3>where to place it</h3> <p align="justify">Here's a screenshot that should explain where to place this code in your template:</p> <p align="center"><img src="http://lh3.ggpht.com/andrei.agavriloaiei/SACU2BlScBI/AAAAAAAAALU/hw3Ltu4T2-8/s510/template.jpg" style="width: 510px; height: 334px;" alt="blogger template"/></p> <p align="justify">You can place the keywords and description immediately above or below the <i><title>...</title></i> line - you choose. If your template looks different than mine, just look for the <i><title>...</title></i> line and make room for the code above or beneath it.</p> <h3>example</h3> <p align="justify">As a conclusion, we'll look at what you have to in a specific example. Let's say the link to your blog's <b>main or home page</b> is:</p> http://_something.blogspot.com/<br /><br /> <p align="justify">We'll also consider that this blog only contains two articles published in February and March, 2008 and that their titles are "My First Post" and "Future Plans". The permanent links (permalinks) to these two post pages will be:</p> http://_something.blogspot.com/2008/02/my-first-post.html<br /> http://_something.blogspot.com/2008/03/future-plans.html<br /><br /> <p align="justify">The code you need to add to your template for the main/homepage and the other two post pages is:</p> <blockquote><b:if cond='data:blog.url == "<b>http://_something.blogspot.com/</b>"'><br />   <meta content='<b>A blog about things I like</b>' name='description'/><br />   <meta content='<i>my_name</i>,<b>blog,hobby</b>' name='keywords'/><br /> </b:if><br /><br /> <b:if cond='data:blog.url == "<b>http://_something.blogspot.com/2008/02/my-first-post.html</b>"'><br />   <meta content='<b>Why I've started this blog</b>' name='description'/><br />   <meta content='<b>motivation,blog,first</b>' name='keywords'/><br /> </b:if><br /><br /> <b:if cond='data:blog.url == "<b>http://_something.blogspot.com/2008/03/future-plans.html</b>"'><br />   <meta content='<b>What my plans are</b>' name='description'/><br />   <meta content='<b>future,plans,travel,vacation,Easter</b>' name='keywords'/><br /> </b:if></blockquote> <p align="justify">If you write a third article called "Easter Holiday" and post it in May, its permalink will be:</p> http://_something.blogspot.com/2008/05/easter-holiday.html<br /><br /> <p align="justify">... and the updated code from your template will look like this:</p> <blockquote><b:if cond='data:blog.url == "http://_something.blogspot.com/"'><br />   <meta content='A blog about things I like' name='description'/><br />   <meta content='<i>my_name</i>,blog,hobby' name='keywords'/><br /> </b:if><br /><br /> <b:if cond='data:blog.url == "http://_something.blogspot.com/2008/02/my-first-post.html"'><br />   <meta content='Why I've started this blog' name='description'/><br />   <meta content='motivation,blog,first' name='keywords'/><br /> </b:if><br /><br /> <b:if cond='data:blog.url == "http://_something.blogspot.com/2008/03/future-plans.html"'><br />   <meta content='What my plans are' name='description'/><br />   <meta content='future,plans,travel,vacation,Easter' name='keywords'/><br /> </b:if><br /><br /> <b><b:if cond='data:blog.url == "http://_something.blogspot.com/2008/05/easter-holiday.html"'><br />   <meta content='What I did this Easter' name='description'/><br />   <meta content='travel,vacation,Easter,eggs,bunny' name='keywords'/><br /> </b:if></b></blockquote> <p>If a user or webcrawler requests the <i>http://_something.blogspot.com/2008/03/future-plans.html</i> link (your second post page), the first, second and fourth conditions are not matched and the page they see will have only the meta description and keywords you specifically chose for it.</p> <p align="justify">I hope this clarifies the steps you need to follow. Please post your comments and feedback about this explanation.</p> <p align="justify">Related articles: <ul> <li><a href="http://www.agawebs.com/2008/03/meta-description-for-each-blogger-page.html">Meta Description for Each Blogger Page</a></li> <li><a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html">Custom Meta and Title Tags for Blogger</a></li> </ul> </p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-6181467314347121380?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/04/meta-description-more-detailed.htmlnoreply@blogger.com (Andrei)55tag:blogger.com,1999:blog-2113308636434658541.post-4677619831817221869Thu, 03 Apr 2008 20:01:00 +00002010-10-26T23:55:42.910+03:00mefunnyAnaliză Mondenă<p align="justify"> Pentru că tot e marele summit în Bucureşti, am venit puţin pe-acasă să mai respir nişte aer (nu că în Bucureşti n-ar fi aer, da' aşa se zice). Înafară de reîntâlnirea cu ai mei şi cu <strong>my dog Shumy</strong> (vezi poza din dreapta), de notat ar fi <strong>comentariile lu' Bunica</strong>:</p> <img alt="my dog - Shumy" src="http://lh4.google.com/andrei.agavriloaiei/R_VKhBTGa4I/AAAAAAAAAGg/P8fb4sIt-XA/s288/Shumy5.JPG.jpg" align="right" style="margin: 30px 0 10px 30px; width: 288px; height: 272px"/></p> <dl> <dt>Despre paticiparea preşedintelui rus la summit:</dt><dd><i>Mă-tin-câ Putin ş-a ţâni hirea. O sâ vez-câ nu mai vini în-nie-sarâ.</i></dd> <dt>Despre Busu si Neti Sandu de la PRO TV:</dt><dd><i>Apăi ăsta-i hal de-a-sâmbrăca la aiştia? Ăla parc-adunâ di prin gunoai şî as-laltî zâci câ-i strânsâ di pi stradâ.</i></dd> </dl> <p align="justify">Mda... N-aş fi putut formula mai bine nici într-o sută de ani. Bunica are un talent anume la vorbe şi probabil voi fi forţat să mai editez şi să mai adaug la paragraful de mai sus până plec de acasă.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-4677619831817221869?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/04/analiz-monden.htmlnoreply@blogger.com (Andrei)0tag:blogger.com,1999:blog-2113308636434658541.post-7345928212176757293Sat, 29 Mar 2008 08:54:00 +00002010-10-26T23:56:36.515+03:00Bloggertips and tweaksSEOMeta Description for Each Blogger Page<p align="center"><b>Check out the code generator and video<br />tutorial for this hack in my new article:<br /><a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html">Custom Meta and Title Tags for Blogger</a></b></p> <p align="justify">Meta descriptions for your web pages can improve the chances of your site being found and clicked on. For those of you who tried adding such descriptions or keywords to your Blogger pages, you might have noticed there's no easy way of doing that.</p> <p align="justify">This article describes the workaround I found for this problem and is a follow-up to the discussions posted here:</p><ul><li><a href="http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with-meta-description.html" rel="nofollow" target="_blank">Google Webmaster Central Blog</a></li><li><a href="http://www.jackbook.com/blogger-hack-blogspot-hack-blogger-templates-customizing/adding-meta-tags-on-blogger-and-what-is-it-good-for" rel="nofollow" target="_blank">JackBook Dot Com</a></li></ul><p align="justify">About the solutions mentioned in the articles above:</p><ol><li><p align="justify">If you add a "constant" meta tag to your Blogger template (as described in the first article), all your pages will have the same description and keywords. This defeats the purpose of this optimization effort and you'll have to go with the solution from the second link. However...</p></li> <li><p align="justify">The JackBook Dot Com code seems to be a bit outdated and using it might cause one of the following problems:</p><ul><li><p align="justify">404 error when trying to view any of your web pages, or...</p></li><li><p align="justify">The blog is displayed correctly, but the description and keywords are not seen by any meta analyzers.</p></li></ul></li></ol><p align="justify">Here are the changes you have to apply to your template in order for the descriptions to work correctly:</p><ol><li><p align="justify">Open the <b>Layout</b> panel of your blog and go to <b>Edit HTML</b>.</li><li><p align="justify">Click the <b>Download Full Template</b> link and save a backup copy of your current template so you can undo the following changes in case anything goes wrong.</p></li><li>Locate the following lines of code:</p><blockquote><i><head> <b:include data="blog" name="all-head-content" /> <title><data:blog.pageTitle /></title></i></blockquote></li><li><p align="justify">Add the following code immediately after the <i><b:include data="blog" name="all-head-content" /></i> line:</p><textarea rows="5" cols="53" readonly><b:if cond='data:blog.url == "http://johndoe.blogspot.com/"'> <meta content='DESCRIPTION' name='description'/> <meta content='KEYWORDS' name='keywords'/> </b:if></textarea> </li> <li><p align="justify">Replace the <span style="color:#ff0000;">http://johndoe.blogspot.com/</span> line with the URL of your homepage.</p></li><li><p align="justify">Replace the word <span style="color:#ff0000;">DESCRIPTION</span> with a description for your homepage.</p></li><li><p align="justify">Replace the word <span style="color:#ff0000;">KEYWORDS</span> with a list of keywords separated by commas and relevant for your homepage.</p></li><li><p align="justify">Now, for each individual page from your blog you'll need to follow steps 4-7 again, but adding corresponding URL's, descriptions and keywords. For example, if your first article is about your pet, what you'll need to do next is...</p></li><li><p align="justify">Add this code again immediately after the <i><b:include data="blog" name="all-head-content" /></i> line:</p><textarea rows="5" cols="53" readonly><b:if cond='data:blog.url == "http://johndoe.blogspot.com/"'> <meta content='DESCRIPTION' name='description'/> <meta content='KEYWORDS' name='keywords'/> </b:if></textarea> </li> <li><p align="justify">Replace the <span style="color:#ff0000;">http://johndoe.blogspot.com/</span> line with <span style="color:#ff0000;">http://johndoe.blogspot.com/2008/03/my_pet this_is_an_example.html</span>.</p></li><li><p align="justify">Replace the word <span style="color:#ff0000;">DESCRIPTION</span> with <span style="color:#ff0000;">a description of my pet</span>.</p></li><li><p align="justify">Replace the word <span style="color:#ff0000;">KEYWORDS</span> with <span style="color:#ff0000;">pet,dog,dog_name</span>.</p></li><li><p align="justify">After adding code for all of your pages, save the template and check if it's doing what it's supposed to.</p></li></ol><b>NOTE</b>: <ul><li><p align="justify">Each time you write a new article, you'll have to edit your template and add code for that new page as well.</p></li><li><p align="justify">There are several other minor tips you need to be aware of in order to get best results, so please read the articles below as well:</p><ul> <li><a href="http://bloggertricks.com/2007/12/adding-meta-tags-to-bloggerblogspot.html" rel="nofollow" target="_blank">http://bloggertricks.com/2007/12/adding-meta-tags-to-bloggerblogspot.html</a></li><li><a href="http://www.ourblogtemplates.com/2008/01/how-to-add-meta-tags-into-your-blog.html" rel="nofollow" target="_blank">http://www.ourblogtemplates.com/2008/01/how-to-add-meta-tags-into-your-blog.html</a></li></ul></li> <li><p align="justify">To reach this solution, I've used tips from <a href="http://help.blogger.com/bin/answer.py?answer=46995&query=condition&topic=&type=f" rel="nofollow" target="_blank">Blogger's Help pages</a> in order to modify the code from JackBook Dot Com.</p></li></ul><p align="justify">That's all there is to it. Please post your feedback and comments in case the code needs more tweaking.</p> <p align="justify">Related articles: <ul> <li><a href="http://andreiaga.blogspot.com/2008/04/meta-description-more-detailed.html">Meta Description - More Detailed Explanation</a></li> <li><a href="http://www.agawebs.com/2009/02/custom-meta-and-title-tags-for-blogger.html">Custom Meta and Title Tags for Blogger</a></li> </ul> </p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/2113308636434658541-7345928212176757293?l=www.agawebs.com' alt='' /></div>http://www.agawebs.com/2008/03/meta-description-for-each-blogger-page.htmlnoreply@blogger.com (Andrei)228