newbie code appraisal greatly appreciated

newbie code appraisal greatly appreciated


I've been getting into jQuery for my new site, and gotta say I love
it, but ...
... hmmn...
I could probably compress my code, and wondered if any kind souls
could tip me off with a pointer or three.
Much, much, very much obliged.
Olly
the_guv
guvnr.com
The site is http://guvnr.com
My jQ is (hopefully fairly self-explanatory) ... (html follows) ...
jQuery.noConflict();
// *** POPUPS/SERVICE PANELS *** (this largest section of code
controls my tab panels for the sections titled Web, Content, PC, Blog,
Me and Content...)
var popupOneStatus = 0;
var popupTwoStatus = 0;
var popupThreeStatus = 0;
var popupFourStatus = 0;
var popupFiveStatus = 0;
var popupSixStatus = 0;
//LOAD POPUP
function loadPopupOne(){
if(popupOneStatus==0){
jQuery("#menu").hide();
jQuery("#popBox,#popBox1,#popBoxStrap1,#popBoxContent1").fadeIn
("500");
jQuery("#menuTop li a").fadeIn("500");
popupOneStatus = 1;
}}
function loadPopupTwo(){
if(popupTwoStatus==0){
jQuery("#menu").hide();
jQuery("#popBox,#popBox2,#popBoxStrap2,#popBoxContent2").fadeIn
("500");
jQuery("#menuTop li a").fadeIn("500");
popupTwoStatus = 1;
}}
function loadPopupThree(){
if(popupThreeStatus==0){
jQuery("#menu").hide();
jQuery("#popBox,#popBox3,#popBoxStrap3,#popBoxContent3").fadeIn
("500");
jQuery("#menuTop li a").fadeIn("500");
popupThreeStatus = 1;
}}
function loadPopupFour(){
if(popupFourStatus==0){
jQuery("#menu").hide();
jQuery("#popBox,#popBox4,#popBoxStrap4,#popBoxContent4").fadeIn
("500");
jQuery("#menuTop li a").fadeIn("500");
popupFourStatus = 1;
}}
function loadPopupFive(){
if(popupFiveStatus==0){
jQuery("#menu").hide();
jQuery("#popBox,#popBox5,#popBoxStrap5,#popBoxContent5").fadeIn
("500");
jQuery("#menuTop li a").fadeIn("500");
popupFiveStatus = 1;
}}
function loadPopupSix(){
if(popupSixStatus==0){
jQuery("#menu").hide();
jQuery("#popBox,#popBox6,#popBoxStrap6,#popBoxContent6").fadeIn
("500");
jQuery("#menuTop li a").fadeIn("500");
popupSixStatus = 1;
}}
//DISABLE POPUP
function disablePopupOne(){
if(popupOneStatus==1){
jQuery("#popBox,#popBox1,#popBoxStrap1,#popBoxContent1").hide();
jQuery("#menu").fadeIn("500");
popupOneStatus = 0;
}}
function disablePopupTwo(){
if(popupTwoStatus==1){
jQuery("#popBox,#popBox2,#popBoxStrap2,#popBoxContent2").hide();
jQuery("#menu").fadeIn("500");
popupTwoStatus = 0;
}}
function disablePopupThree(){
if(popupThreeStatus==1){
jQuery("#popBox,#popBox3,#popBoxStrap3,#popBoxContent3").hide();
jQuery("#menu").fadeIn("500");
popupThreeStatus = 0;
}}
function disablePopupFour(){
if(popupFourStatus==1){
jQuery("#popBox,#popBox4,#popBoxStrap4,#popBoxContent4").hide();
jQuery("#menu").fadeIn("500");
popupFourStatus = 0;
}}
function disablePopupFive(){
if(popupFiveStatus==1){
jQuery("#popBox,#popBox5,#popBoxStrap5,#popBoxContent5").hide();
jQuery("#menu").fadeIn("500");
popupFiveStatus = 0;
}}
function disablePopupSix(){
if(popupSixStatus==1){
jQuery("#popBox,#popBox6,#popBoxStrap6,#popBoxContent6").hide();
jQuery("#menu").fadeIn("500");
popupSixStatus = 0;
}}
// HERE WE GO!
jQuery(document).ready(function(){
//hide service panels and navbar for now
jQuery
("#popBox,#popBox1,#popBox2,#popBox3,#popBox4,#popBox5,#popBox6,#menuTop
li a").hide();
jQuery(".one").click(function(){
//load popup and disable others that may be open
disablePopupTwo();
disablePopupThree();
disablePopupFour();
disablePopupFive();
disablePopupSix();
loadPopupOne();
});
jQuery(".two").click(function(){
disablePopupOne();
disablePopupThree();
disablePopupFour();
disablePopupFive();
disablePopupSix();
loadPopupTwo();
});
jQuery(".three").click(function(){
disablePopupOne();
disablePopupTwo();
disablePopupFour();
disablePopupFive();
disablePopupSix();
loadPopupThree();
});
jQuery(".four").click(function(){
disablePopupOne();
disablePopupThree();
disablePopupTwo();
disablePopupFive();
disablePopupSix();
loadPopupFour();
});
jQuery(".five").click(function(){
disablePopupOne();
disablePopupThree();
disablePopupFour();
disablePopupTwo();
disablePopupSix();
loadPopupFive();
});
jQuery(".six,#gotoContactPanel").click(function(){
disablePopupOne();
disablePopupThree();
disablePopupFour();
disablePopupFive();
disablePopupTwo();
loadPopupSix();
});
//CLOSE POPUP using close button
jQuery(".popClose").click(function(){
jQuery("#popBox,#menuTop li a").hide();
jQuery("#menuLit li.one").removeClass("enable"); //does not work
jQuery("#menu").fadeIn("500");
});
// *** END POPUPS/SERVICE PANELS ***
// *** TAGS PANEL *** (this is for the Tag Cloud/Category popup
box)
jQuery(".tagButton").click(function(){
jQuery("#tagsPanel").fadeIn("500");
jQuery("this").toggleClass("active");
jQuery('#popBoxContent4,.popClose,.tagButton').fadeOut("slow");
return false;
});
jQuery(".tagsClose").click(function(){
jQuery('#popBoxContent4,.popClose').fadeIn("500");
jQuery("this").toggleClass("active");
jQuery("#tagsPanel").fadeOut("slow");
return false;
});
// *** ACCORDIAN *** (and the accordian I have used for the tab
panels boxes Web, Content, PC, Blog and Me)
// hide all ULs inside LI.drawer except the first one
jQuery('#popBoxContent4 li.drawer div:not(:first)').slideUp();
// apply the open class
jQuery('#popBoxContent4 li.drawer div:first').addClass('open');
jQuery('#popBoxContent4 h2.drawer-handle').click(function () {
// hide the currently visible drawer contents
jQuery('#popBoxContent4 li.drawer div:visible').slideUp();
// remove the open class from the currently open drawer
jQuery('#popBoxContent4 h2.open').removeClass('open');
// show the associated drawer content to 'this' (this is the current
H2 element)
// since the drawer content is the next element after the clicked H2,
we find
// it and show it using this:
jQuery(this).next().slideDown();
// set a class indicating on the H2 that the drawer is open
jQuery(this).addClass('open');
});
});
// Use Prototype with $(...), etc.
jQuery('someid').hide();
... and the html ...
<div id="navbar">
<!-- nav starts -->
<ul id="menuTop">
<li class="one"><a href="web">web</a></li>
<li class="two alt"><a href="content">content</a></li>
<li class="three"><a href="pc">pc</a></li>
<li class="four alt"><a href="blog">blog</a></li>
<li class="five"><a href="me">olly</a></li>
<li class="six alt"><a href="contact">contact</a></li>
</ul>
</div>
<div id="content">
<ul id="menu">
<li class="one"><a href="web"></a></li>
<li class="two alt"><a href="content"></a></li>
<li class="three"><a href="pc"></a></li>
<li class="four alt"><a href="blog"></a></li>
<li class="five"><a href="me"></a></li>
<li class="six alt"><a href="contact"></a></li>
</ul>
<!-- nav ends and service panels start -->
<div id="popBox">
<div id="popBox1"><a class="popClose"></a>
<div id="popBoxStrap1"> </div>
<div id="popBoxContent1">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Websites and blogs,
standards and service</h2>
<div class="extract">

Want an eye-catching, user-friendly, future-
proofed, fully functional and SEO-driven website or blog?


Without paying a fortune?


That's what I do...


</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Planning</h2>
<div class="extract">

The most important <span
class="strikethrough">bit</span> lot.


<ul>
<li>creating a wish list</li>
<li>researching online audience</li>
<li>researching competitor sites</li>
<li>determining levels of importance</li>
<li>setting out a site plan</li>
<li>designing mockups</li>
<li>domain name research and setup</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Eye-catching</h2>
<div class="extract">

Without letting the frame get in the way of the
picture.


<ul>
<li>simple yet effective</li>
<li>emphasising corporate identity</li>
<li>making content stand out</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">User-friendly</h2>
<div class="extract">

Easy to browse, easy to update.


<ul>
<li>clear navigation</li>
<li>fast-loading pages</li>
<li>working across all modern browsers</li>
<li>...and handheld devices, as required</li>
<li>easily updated with new content</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Future-proofed</h2>
<div class="extract">

Many new websites use archaic code. Not good
enough.


<ul>
<li>coded to latest web standards</li>
<li>with future specifications to mind</li>
<li>benefitting online marketing (SEO)</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Fully-functional</h2>
<div class="extract">

As appropriate, not for the sake of it.


<ul>
<li>database-driven</li>
<li class="noBullet">
<ul>
<li>syncronising with other business tools</
li>
<li>automating tasks</li>
<li>intelligent forms</li>
</ul>
</li>
<li>content</li>
<li class="noBullet">
<ul>
<li>management systems</li>
<li>chat, forums and blogs</li>
<li>feeds</li>
<li>syndication</li>
<li>multimedia</li>
<li>image galleries</li>
</ul>
</li>
<li>revenue functions</li>
<li class="noBullet">
<ul>
<li>shopping carts</li>
<li>merchant accounts</li>
<li>Google Adsense</li>
<li>...and similar affiliate setup</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">SEO-driven</h2>
<div class="extract">

SEO is marketing, the online way.


Targetting your online market, the goal is to
have your business as widely available as possible.


<ul>
<li>websites written with SEO in mind, always</li>
<li>complete advice on strategy</li>
<li class="noBullet">
<ul>
<li>search engine ranking</li>
<li>keyword and competition analysis</li>
<li>site-to-site linking do's and don'ts</li>
<li>social media marketing (MySpace et al)</
li>
</ul>
</li>
<li>ongoing SEO campaigns</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Website management and
upgrades</h2>
<div class="extract">

Some sites need ongoing maintenance and new
features.


<ul>
<li>content updates, of all media types</li>
<li>ad revenue administration</li>
<li>website upgrades</li>
<li>seamless website-to-blog and forum
integration</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Written by hand</h2>
<div class="extract">

Sites coded to the lightest possible weight,
using the following languages.


<ul>
<li>XHTML</li>
<li>PHP</li>
<li>CSS</li>
<li>MySQL</li>
<li>javascript</li>
<li>jQuery (javascript library)</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Hosting</h2>
<div class="extract">

Setup with your host or mine.


Having thoroughly researched the ever-changing,
hyper-competitive ISP market in 2008, I recommend mine, <a
href="http://www.lunarpages.com/id/ollyc0">Lunarpages</a>.


<a href="/web/hosting/" title="Lunarpages
vs ...">I have set out a detailed crit of the market in this blog
post</a>. If you aren't receiving the benefits listed below, and at a
competitive rate, read that.



<div class="floatRight"><a href="http://
www.lunarpages.com/id/ollyc0" onMouseOver="window.status='http://
www.lunarpages.com';return true" onMouseOut="window.status='';return
true" target="_blank"> <img src="http://www.lunarpages.com/banners/
images/winter/120x240.gif" alt="Lunarpages.com - full spec here" /></
a></div>
<ul>
<li>for $4.95 a month</li>
<li class="noBullet">
<ul>
<li>1 FREE domain name</li>
<li>UNLIMITED storage
<div class="new"></div>
</li>
<li>UNLIMITED Data Transfer
<div class="new"></div>
</li>
<li>$775 Bonus Programs
<div class="new"></div>
</li>
<li>24/7 Award Winning Support</li>
<li>UNLIMITED Databases/Email/FTP</li>
<li>Blog, Forum &amp; Photo Gallery</li>
<li>Fantastico (Over 35 Scripts)</li>
<li>JSP/ASP Available</li>
<li>Spam Protection- IMAP Support</li>
<li>Microsoft&reg; Frontpage&reg; Compatible</
li>
<li>Dreamweaver Compatible</li>
<li>UNLIMITED Add-on Domains
<div class="new"></div>
</li>
<li>Ruby on Rails, PostgreSQL</li>
<li>MySQL 4+, PHP 4+</li>
<li>MySQL 5 &amp; PHP 5.2+ Available </li>
<li>Free Web Design Templates</li>
<li>Webmail (Horde &amp; Squirrel)</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Without paying a
fortune?</h2>
<div class="extract">

We must establish, how long is this particular
string?


<ol>
<li>Tell me your approximate budget</li>
<li>We discuss your requirements in detail</li>
<li>I break down how long that will take, and why</
li>
<li>We negotiate a precise budget</li>
<li>I stick to your budget, deliver the product,
and train your webmaster as required.</li>
</ol>
</div>
</li>
</ul>
</div>
</div>
<div id="popBox2"><a class="popClose"></a>
<div id="popBoxStrap2"> </div>
<div id="popBoxContent2">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Content produced,
integrated, managed</h2>
<div class="extract">

Need content? Maybe web video, tutorials,
podcasting set up, copy writing or a regular feed?


Or perhaps you want to syndicate my blog for your
PC magazine? Hey, let's talk!


Here's what I do...


</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Web content</h2>
<div class="extract">

As a broadcaster, I used to write copy and
produce radio and TV. Online, I embed and produce.


<ul>
<li>Audio and video production</li>
<li class="noBullet">
<ul>
<li>producing</li>
<li>presenting/voice-overs</li>
<li>video tutorials</li>
<li>editing</li>
<li>encoding</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Copy writing</h2>
<div class="extract">

So you read and like my blog? Give me a credit,
the content is yours to use. For free. That's the copy, the video
tutorials, the images, the lot. Why? &nbsp;Marketing. You're a
magazine, offline? Same applies.



I write on the following subjects. Rarely
seriously, but I may be persuaded...


<ul>
<li><b>Web</b> <b class="asterisk">*</b>&nbsp;
From how-to's for inexperienced surfers to technical know-hows about
computer mumbo-jumbo. Plus, plenty of screaming about Internet
Explorer 6.</li>
<li><b>Content</b> <b class="asterisk">*</b>&nbsp;
Making it, marketing it, the best of it.</li>
<li><b>PC</b> <b class="asterisk">*</b>&nbsp;
Optimising your machine, tips, tricks and lots of tweaks.</li>
<li><b>Politics.</b> &nbsp;Hey, don't get me
started. OK, there's a satirical blog coming online in 2009, so if
you're interested let me know and I'll send a link.</li>
<li><b>Showbiz</b> <b class="asterisk">**</b>
&nbsp;Er, politics is showbiz, no?</li>
<li><b>Home improvement</b> <b
class="asterisk">**</b> &nbsp;Call me diverse. <a href="http://
ollythebuilder.com" title="Olly's building site" target="_blank">I
renovate property for fun.</a> Scratch that, it used to be fun.</li>
</ul>
<br/>

<b class="asterisk">*</b> Featured on this site's
blog, which also has video tutorials.


<b class="asterisk">**</b> For the BBC, Bloomberg
TV, MTV and a bunch of radio stations in the US and UK.


<b class="asterisk">***</b> Featured on the ICI
Dulux website, for instance.


</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Content management
systems</h2>
<div class="extract">

Systems implemented, seamlessly, to create,
deliver and manage your website media.


<ul>
<li>blogs</li>
<li>feeds</li>
<li>forums</li>
<li>wikis</li>
<li>chat</li>
<li>multimedia</li>
<li class="noBullet">
<ul>
<li>podcast setup</li>
<li>Youtube/Vimeo/Viddler video</li>
<li class="noBullet">
<ul>
<li>admin and encoding</li>
</ul>
</li>
</ul>
</li>
<li>content updates</li>
<li>ad revenue administration</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="popBox3"><a class="popClose"></a>
<div id="popBoxStrap3"> </div>
<div id="popBoxContent3">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">PC maintenance,
networks &amp; smart homes</h2>
<div class="extract">

Fed up with a sluggish machine but don't want a
new one? Want to go wireless? Fancy a <em>smart home</em>?


Geographical disclaimer! I live between London
and Valencia, so if you don't, go local. Nonetheless, contact me with
a query and I'll advise you as best I can.


Here's the deal...


</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">PC care</h2>
<div class="extract">

From re-installations, faster than the original
PC, to the ultimate bespoke-built dream machines.


<ul>
<li>bespoke built to any spec</li>
<li>upgrades and re-installations</li>
<li class="noBullet">
<ul>
<li>Windows XP/Vista</li>
<li>Linux Ubuntu</li>
<li>dual-boot systems</li>
</ul>
</li>
<li>virus protection</li>
<li>spam control</li>
<li>software advice/best of opensource</li>
<li>tweaks galore, tailored to requirement</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Networks</h2>
<div class="extract">

Small networks, 2 to 20 computers, linked up, for
home or office


<ul>
<li>home</li>
<li>small office</li>
<li>wireless</li>
<li>ethernet</li>
<li class="noBullet">
<ul>
<li>cables run, hidden, walls/skirting re-
decorated</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open">Smart homes</h2>
<div class="extract">

With no trace of a cable, access media from any
networked machine, in any room, or keep an eye, online from anywhere.</
p>

For example, control your home's:-


<ul>
<li>security</li>
<li>lighting</li>
<li>home theatre</li>
<li>phone systems</li>
<li>thermostat</li>
<li>whatever else, even the garden sprinkler</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="popBox4"> <a class="popClose"></a> <a
class="tagButton"></a>
<div id="popBoxStrap4"></div>
<div id="popBoxContent4">
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open"> Video How-to: Add a
Favicon </h2>
<div class="extract">
<p class="date"> Friday, December 5th, 2008



























<img src="http://guvnr.com/wp-content/uploads/
2008/20081205_favicon/fav.gif"
class="thumbClass"
alt="Video How-to: Add a Favicon"
/>




If I had a Big Mac for every favicon tutorial out
there, I&#8217;d be dead. But hey, I needed a favicon, and I figured
a video illustrating the process may come in handy for some folks, so
here goes.



What is a favicon, and what&#8217;s it for? I
explain that here and in the [...]







<div class="meta"> <a class="more" href="http://
guvnr.com/web/favicon/" title="Read Video How-to: Add a Favicon">More</
a>
<div class="meta"> Tags: <a href="http://guvnr.com/
tag/blogging/" rel="tag">blogging</a>, <a href="http://guvnr.com/tag/
content/" rel="tag">content</a>, <a href="http://guvnr.com/tag/html/"
rel="tag">html</a>, <a href="http://guvnr.com/tag/tutorial/"
rel="tag">tutorial</a>, <a href="http://guvnr.com/tag/video/"
rel="tag">video</a>, <a href="http://guvnr.com/tag/web-design/"
rel="tag">web design</a>, <a href="http://guvnr.com/tag/wordpress/"
rel="tag">wordpress</a><br />
Categories: <a href="http://guvnr.com/category/
web/" title="View all posts in web" rel="category tag">web</a> </div>
</div>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open"> Windows
&#8220;Authenticode&#8221; Nag Screen </h2>
<div class="extract">
<p class="date"> Thursday, November 20th, 2008


<img src="http://guvnr.com/wp-content/uploads/
2008/20081120_authenticode/nagScreen.gif"
class="thumbClass"
alt="Windows &#8220;Authenticode&#8221; Nag Screen"
/>




Seen this nag screen? Or rather, this scare
screen, from Microsoft? Let me answer that! If you install software
from a vendor that hasn&#8217;t been &#8220;approved&#8221; by
Microsoft, you have. &#8220;Approved&#8221;, one could argue, is
another word for &#8220;conned.&#8221; And you and I, the software
users, are left confused. Don&#8217;t [...]









<div class="meta"> <a class="more" href="http://
guvnr.com/pc/windows-authenticode/" title="Read Windows
&#8220;Authenticode&#8221; Nag Screen">More</a>
<div class="meta"> Tags: <a href="http://guvnr.com/
tag/pc-care/" rel="tag">pc care</a>, <a href="http://guvnr.com/tag/
windows/" rel="tag">windows</a><br />
Categories: <a href="http://guvnr.com/category/
pc/" title="View all posts in pc" rel="category tag">pc</a> </div>
</div>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open"> Now Reselling
Lunarpages Hosting, but why? </h2>
<div class="extract">
<p class="date"> Wednesday, November 19th, 2008


<img src="http://www.lunarpages.com/banners/
images/winter/125x125.gif"
class="thumbClass"
alt="Now Reselling Lunarpages Hosting, but why?"
/>




So you need an ISP, a server to host your website
or blog? Else you&#8217;re paying too much at the moment, with no
thrills or poor service. But where do you start to research your new
host? Here at Guvnr, I&#8217;ve done the research for you, and
me.<br />
Cheaper - and infinitely better<br />
Fact [...]










<div class="meta"> <a class="more" href="http://
guvnr.com/web/hosting/" title="Read Now Reselling Lunarpages Hosting,
but why?">More</a>
<div class="meta"> Tags: <a href="http://guvnr.com/
tag/hosting/" rel="tag">hosting</a>, <a href="http://guvnr.com/tag/
isp/" rel="tag">ISP</a><br />
Categories: <a href="http://guvnr.com/category/
web/" title="View all posts in web" rel="category tag">web</a> </div>
</div>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open"> Video How-to:
Subscribe to Content Feeds </h2>
<div class="extract">
<p class="date"> Friday, November 14th, 2008


<img src="http://guvnr.com/wp-content/uploads/
2008/20081114_howtoFeed/rssIcons2.jpg"
class="thumbClass"
alt="Video How-to: Subscribe to Content Feeds"
/>




The best thing about the web is its role as an
information resource. Need some help? - the web is where. But all that
info gets daunting, and that&#8217;s where subscribing to RSS feeds
comes in. This article, complete with illustrative video - my first
guvUtorial - will get you started with feeds to improve [...]








<div class="meta"> <a class="more" href="http://
guvnr.com/content/subscribe-to-feeds/" title="Read Video How-to:
Subscribe to Content Feeds">More</a>
<div class="meta"> Tags: <a href="http://guvnr.com/
tag/feeds/" rel="tag">feeds</a>, <a href="http://guvnr.com/tag/rss/"
rel="tag">rss</a>, <a href="http://guvnr.com/tag/video/"
rel="tag">video</a><br />
Categories: <a href="http://guvnr.com/category/
content/" title="View all posts in content" rel="category
tag">content</a> </div>
</div>
</div>
</li>
<li class="drawer">
<h2 class="drawer-handle open"> Web Design Spain &