Valikot kuntoon blogissa

06-12-2011, jossain päin Suomea.... 

Nyt on itsenäisyyttä jälleen juhlittu ja ei kun asiaan. Kuten aikaleimasta näkyy tätä kirjoitusta on koostettu jo pidemmän aikaa ahkerasti ja olen yrittänyt koota tähän mahdollisimman kattavan otoksen erilaisia keinoja rakentaa valikko blogissa. Kirjoitin tämän blogin alkutaipaleella artikkelin joka käsittelee blogin valikoiden perusteita ja sitä miten saat nopeasti ja helposti tehtyä blogiisi  valikon. Kannattaakin käydä ensin tutustumassa siihen ja sitten hyökätä tämän hieman pidemmälle viedyn artikkelin pariin.

Yhtä paljon kun on blogeja maailmassa löytyy myös erilaisia blogin navigointeja. Navigoinnilla tarkoitetaan yleensä joko sivuston yläosassa tai sivupalkissa sijaitsevaa listausta blogin sisäisistä linkeistä, jonka avulla sivustolla vieraileva pääsee helposti tutustumaan koko sisältöön ja löytää etsimänsä mahdollisimman nopeasti. Juuri siksi kannattaa sivuston navigointiin ja sitä kautta valikkoihin panostaa erityisen paljon, sillä mitä lukijaystävällisempi sivustosi on sitä suuremmalla todennäköisyydellä vierailija palaa sivustollesi uudelleen. 

Monelle kuitenkin navigointi on itsestäänselvyys jolloin esille nousevat ennenkaikkea esteettiset seikat, eli se miltä valikko itseasiassa näyttää ja miten se on toteutettu. Erityisesti blogin ulkoasu on monelle bloggaajalle usein sisältöään tärkeämpi ja siksi valikon tulisi myös näyttää mahdollisimman hyvältä, eikä ainoastaan "olla toimiva". Tämä kirjoitus tarjoaa myös vinkkejä siihen miten voit muokata itsellesi juuri sellaisen valikon kun haluat, eikä sinun tarvitse tyytyä esimerkiksi bloggerin omaan pelkistettyyn "sivut" navigointiin. Vaikka se onkin täysin toimiva ratkaisu. 

Valikoista yleensä:

Normaalisti blogin navigointi toteutetaan blogin ylä-osassa horisontaalisesti, kuten tässä blogissa, tai valikko on blogin sivupalkissa. Vaikka blogit tarjoavat monia muitakin keinoja löytää haluamansa artikkelit kuten kirjoitusten "arkisto" tms. perinteinen valikko-navigointi pitää yhä pintansa. Ehkä juuri siitä syystä että se on erittäin toimiva. 

Valikkojen toiminta on yksinkertainen. Valikko sisältää vain normaalin linkin, mutta linkki viittaa johonkin blogin sisäiseen sivuun, kuten vaikkapa etusivu. Usein valikkoa kuitenkin "kaunistellaan" käyttämällä erilaisia kuvia valikon taustalla tai valikoon on koodin puolella lisätty efektiä, esimerkiksi silloin kun hiiren kursori on valikon jonkin osan päällä. 

Valikon kuten kaiken muunkin blogin visuaalisen puolen muotoilu tapahtuu käyttämällä CSS määrittelyjä. CSS:n avulla voidaan nykyisin rakentaa uskomattoman tyylikkäitä navigointi ratkaisuja ja ulkopuolisen scriptin käyttö ei ole enää pakollista. Edelleen on kuitenkin hyvin yleistä että valikko rakennetaan kolmesta eri osasta: HTML-osa (määrittää missä valikko sijaitsee) CSS-osa (määrittää miltä valikko näyttää) ja J.Query-osa (määrittelee valikon toiminnan). 

Valikko bloginsa näköiseksi

Vaikka sisältö onkin tärkeintä blogin antia, tulisi sen myös näyttää mahdollisimman hyvältä. Valikot eivät ole poikkeus vaan blogin navigoinnin tulisi sulautua muun blogin ulkoasuun saumattomasti.

Blogin valikko tuleekin rakentaa siten että sen ulkoasua on helppo muokata, tässä kohtaa CSS astuu mukaan kuvioihin ja rakentamalla CSS-koodi oikein voidaan taata että valikon ulkoasu miellyttää varmasti silmää ja se että valikon ulkoasua on helppo muuttaa.

CSS- osassa voidaan määrittää valikossa käytettävät fontit, erilaiset värit sekä varjostukset, valikon "solujen" muoto ja koko jne.

Nyt kun olen saanut päkistyä valikoista ja niiden koostumuksesta tarpeeksi on kai aika siirtyä itseasiassa siihen kiinnostavaan osaan eli valikoihin itseensä esittelyssä on 4 erityyppistä navigointi ratkaisua jotka jokainen on toteutettu käyttämällä HTML:ää  ja CSS:ää ja edustavat jokainen hieman erityyppisiä valikko ratkaisuja.

1. Vaaka navigointi

Vaakatasoon sijoitettu navigointi on yleisin vaihtoehto, mutta moni ei ota täyttä mahdollisuutta irti tästä navigoinnista.

Tälläisen navigoinnin aikaansaaminen bloggerissa ei vaadi mitään tietämystä HTML:stä tai CSS:stä sillä voit luoda tämäntapaisen navigoinnin vaivatta käyttämällä bloggerin omaa "Sivut" ominaisuutta. Ennen bloggerin uudistusta tällaisen navigoinnin käyttäminen johti siihen että saatoit linkittää ainoastaan bloggerin omia "sivuja". Erikseen luotuja sivuja joille blogger määritteli oman url osoitteen. Päivityksen jälkeen voi bloggerin "omaan valikkoon" voi lisätä myös ns. ulkoisia url osoitteita, eli linkittää esimerkiksi kirjoitusten eri tunnisteisiin jne.

Näin lisäät perus- navigoinnin:

Kirjaudu bloggeriin ja mene "Sivut" välilehdelle, sieltä valitset uusi sivu. Voit joko luoda uuden "staattisen" sivun kuten vaikkapa info sivun kirjoittajasta tai kirjoittaa tietoja omasta blogistasi. Tämän vaihtoehdon lisäksi voit myös linkitää ulkoiseen URL-osoitteeseen. Eli minne tahansa internetissä. Voit myös linkittää tämän avulla tiettyihin blogisi kirjoituksiin tai blogisi tunnisteisiin.


Tunnisteen url osoitteen selvität seuraavasti:

Tunnisteiden (labels) url-osoitteet saat helpoiten klikkaamalla blogissasi tunnitetta jonka osoitteen haluat tietää ja sen jälkeen kopioit vain selaimen osoite kentässä olevan osoitteen. (Tunnisteiden osoitteet ovat muotoa: http://www.omablogisi.com/search/label/TunnisteesiNimi). 

Lisättyäsi haluamasi linkit blogisi valikkoon on aika hieman muokata sen ulkoasua:

Tämä onnistuu helpoiten käyttämällä bloggerin omaa "Mallin suunnittelu työkalua" joka löytyy Malli sivulta kun valitset kohdan "Mukauta". 

Suunnittelu työkalussa siirry kohtaan lisäasetukset ja etsi sieltä kohta "välilehtien teksti" / "välilehtien tausta", joiden avulla voit muuttaa valikon linkkien fonttia ja taustaväriä. 

2. Sivupalkki navigointi

Aivan kuten normaali horisontaali valikko, toimii yhtä usein sivupalkkiin asetettu navigointi loistavasti. Perus sivupalkki-navigoinnin asettaminen on aivan samanlainen prosessi kuin edellä ollut vaakaatasoon asetettu navigointi. Voit siis lisätä linkit samaan tapaan. Kun haluat että navigointi sijoittuu sivupalkkiin valitset sen vain "Sivut" välilehdeltä löytyvistä asetuksista.

Nyt kun on käyty läpi perus valikkojen rakentaminen blogger blogissa on kait syytä siirtyä hieman erikoisempien ratkaisujen pariin. Kuten jo kerroin blogin valikko on tärkeä osa blogin käytettävyyttä ja jokainen bloggaaja haluaa blogistaan mahdollisimman helppokäyttöisen.

Tätä käytettävyyttä voi yrittää parantaa myös hieman erilaisilla ratkaisuilla:

3. Drop down valikko

("Vie hiiren kursori tämän päälle" sivulla: http://blogihaltuunshowcase.blogspot.com/ )

CSS-osa

.drop-menu {
position:absolute;z-index:100;
display: block;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 10px 10px;
font-size: 22px;
height: 25px;
max-height: 25px;
width: 400px;
background: #fff;
cursor: pointer;
border: 1px solid #f6f0e4;
} .plus {
display: inline-block;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
} .drop-menu:hover {
border: 1px solid #fff;
} .drop-menu:hover .sub-menu {
display: inline-block;
}
.drop-menu:hover .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.sub-menu {
display: none;
width: 400px;
background: #fff;
padding: 10px 10px;
margin-left: -11px;
margin-top: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
list-style-type: none;
display: block;
border-bottom: 1px dotted #eaeaea;
font-size: 19px;
height: 22px;
padding: 8px 0;
}
.sub-menu li img {
margin-right: .5em;
}
.sub-menu li:hover {
border-bottom: 1px dotted #bababa;
}

HTML-osa

<div class="drop-menu">
<span class="plus">+</span> Vie hiiren kursori tämän valikon päälle <br />
<ul class="sub-menu">
<li>
<a href="">
<img alt="rss" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPoHcKqUrqkGniXJ7-H5SLKzV9Ue3y3G8OJPxPk7eZl15x93zGn8Si1q_trr6rqBHribshEly4yeQrOe7xt-l0z6q3fjiwweeCYpm4XyuW5w4y6LX2x0sEypF_30QCYUrwvGF91W90EDi/s1600/rss.png" /> Tilaa RSS-syöte </a>
</li>
<li>
<a href="">
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPoHcKqUrqkGniXJ7-H5SLKzV9Ue3y3G8OJPxPk7eZl15x93zGn8Si1q_trr6rqBHribshEly4yeQrOe7xt-l0z6q3fjiwweeCYpm4XyuW5w4y6LX2x0sEypF_30QCYUrwvGF91W90EDi/s1600/rss.png" /> Tilaa kirjoitukset sähköpostiin </a>
</li>
<li>
<a href="">
<img alt="twitter" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcuyabycNX_xTRgYCFwbQfYyud9qrRlEzh-NwjWKEfT3bMDCm7xwrDcrwOPjUw5zkAuQFoCBkudMynAvN3j3RD9ecjH5ylfE980sYC0Mkrj58Uw2hG-4geSQZnt3nu94ctA73TGlhgmXYR/s1600/twitter.png" /> Seuraa Twitterissä
</a>
</li>
</ul>
</div>

4. Laajennettava valikko

Tämä valikkoratkaisu on hieman erilainen ja toimii parhaiten blogeissa jotka pyrkivät minimalismiin.
(Valikkomalli1 sivulla: http://blogihaltuunshowcase.blogspot.com/)

J.Query-osa: Lisää blogisi lähdekoodiin heti header tagin jälkeen kaksi j.query:n latauksen määrittävää osaa tähän tapaan:

<head>

<script src='https://sites.google.com/site/lolztube2011/jscript/jquery-1.4.2.min.js' type='text/javascript'/>

<scriptsrc='https://sites.google.com/site/lolztube2011/jscript/menu.js' type='text/javascript'/>

CSS-osa

ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
background: #000;
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
} ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
text-decoration: underline;
background: #c00;
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
} .code {
border: 1px solid #ccc;
list-style-type: decimal-leading-zero;
padding: 5px;
margin: 0;
}
.code code {
display: block;
padding: 3px;
margin-bottom: 0;
}
.code li { background: #ddd;
border: 1px solid #ccc;
margin: 0 0 2px 2.2em;
}
.indent1 {
padding-left: 1em;
}
.indent2 {
padding-left: 2em;
}
.indent3 {
padding-left: 3em;
} .indent4 {
padding-left: 4em;
}
.indent5 {
padding-left: 5em;
}
.indent6 {
padding-left: 6em;
}
.indent7 {
padding-left: 7em;
}
.indent8 {
padding-left: 8em;
}
.indent9 {
padding-left: 9em;
}
.indent10 {
padding-left: 10em;
}

HTML-osa:

<ul class="menu noaccordion">
<li>
<a href="#">Blogityökalut </a>
<ul class="acitem">
<li><a href="">PivotX</a></li>
<li><a href="">WordPress</a></li>
<li><a href="">Textpattern</a></li>
<li><a href="">Typo</a></li>
</ul>
</li>
<li>
<a href="#">Ohjelmointi kielet</a>
<ul class="acitem">
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li><a href="http://www.blogihaltuun.net">BlogiHaltuun.net</a></li>
<li>
<a href="#">Lisää kaikkea</a>
<ul class="acitem">
<li><a href="">Bookalicious</a></li>
<li><a href="">Apple</a></li>
<li><a href="">Nikon</a></li>
<li><a href="">XBOX360</a></li>
<li><a href="">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Hakukoneet </a>
<ul class="acitem">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>

5. Megavalikko (Bonus)

Kun mikään ei riitä valikosta voi tehdä suuren. Voit käydä katsastamassa tämän valikon täältä: http://blogihaltuunshowcase.blogspot.com/

(valikko on sivun ylä-osassa)

Megavalikko on vaaka-valikko joka on kasvatettu mahdollisimman suureksi, ja siinä pyritään valikkoon sisällyttämään mahdollisimman paljon informaatiota.

Megavalikko CSS:

body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;

/* Pyoristetyt kulmat */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Taustavarit */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Reunukset */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Taustavarit ja variliut */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Pyoristetyt reunat */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
} #menu li .drop {
padding-right:21px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjycmDbMkcTTWVGVG4AuVyx7HRwT3-UA7eT-hU_qbYEEEp-Wn9rd5CGh7KcNW01kB_JI3Pr8PULiBn4PiVSNipCHYfDWuGnu4Yhkz-YiUXRAfCpXehYd7NqNWUYYwppLrm1b22c9U27S2tp/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipBNQ9rMb3Xw_gbaVsYdTsvnY2IEQhC9yc1t-G_s8uqBKwsLdGNZLoxVJvx468VmqIpEDXNlItpC4MIK2wwXEHwwAB_7dMOvzqAc_r21JYdS5wYMg3ea5X4m4CMAszod9TLFndDdlfQo9j/s1600/drop.gif") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;z-index:100;
left:-999em; /* Piilottaa valikon */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;

/* Gradient tausta */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Pyoristetyt reunat */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Pyoristetyt reunat */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}

#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}

.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow { /* Parempi tyyli vaalealle taustalle */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
} .img_left { /* Kuva vasempaan reunaan */
width:auto;
float:left;
margin:5px 15px 5px 5px;
} #menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Pyoristetyt reunat */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Varjostus */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Pyoristetty reuna */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

Megavalikko HTML:

(Huom tätä HTML osaa ei voi lisätä bloggerissa HTML/javascript gadgettiin vaan se on asetettava suoraan blogin lähdekoodiin.) Hyvä paikka tälle jättivalikolle löytyy esimerkiksi kohdasta: <b:includable id='main'> lisäät vain html koodin välittömästi tämän jälkeen. MegaValikko sijoittuu silloin aivan blogin yläosaan, kuten esimerkissä.

<ul id='menu'>
<li><a class='drop' href='#'>Etusivu</a><!-- Alku koti -->
<div class='dropdown_2columns'><!-- Alku 2 -->
<div class='col_2'>
<h2>Tervetuloa !</h2>
</div>
<div class='col_2'>
<p>Hei ja tervetuloa, tämän tarkoitus on esitellä Mega-valikon toimintaa ja sitä millaisia mahdollisuuksia valikoissa oikeastaan on.</p>
<p>Valikon voi rakentaa tärkeimmäksi osaksi koko blogia, jos käyttää siihen hieman aikaa.</p>
</div>
<div class='col_2'>
<h2>Tämä valikko toimii useissa selaimissa:</h2>
</div>
<div class='col_1'>
<img alt='' height='48' src='img/browsers.png' width='125'/>
</div>
<div class='col_1'>
<p>Tämän valikon toimivuus on testattu useissa selaimissa.</p>
</div>
</div><!-- Loppu 2 -->
</li><!-- Loppu Koti-->
<li><a class='drop' href='#'>5 kappaletta</a><!-- Alku 5 -->
<div class='dropdown_5columns'><!-- Alku 5 -->
<div class='col_5'>
<h2>Tämä osa sisältää yhteensä 5 kappaletta leveän tilan kaikenlaiselle tekstille!</h2>
</div>
<div class='col_1'>
<p class='black_box'>Tällä tummalla laatikolla on helppo korostaa tekstiä, joka on tärkeä. Voit vaikka laittaa tietoa blogistasi tähän. </p>
</div>
<div class='col_1'>
<p>Kirjoitustila ei ihan heti lopu tästä valikosta vaan voit lisätä vaikka tietoja itsestäsi, blogistasi tai vaikka viimeisimmistä artikkeleista.</p>
</div>
<div class='col_1'>
<p class='italic'>Voit käyttää mitä tahansa tekstin muotoilua, kuten kursiivia tai lihavointia, sillä valikko on koostettu normaalilla HTML-koodilla. </p>
</div>
<div class='col_1'>
<p>Tässä vielä hieman lisää täyte tekstiä. Oletko muuten tiennyt että BlogiHaltuun.net on myös Google+:ssa?</p>
</div>
<div class='col_1'>
<p class='strong'>Kannattaa käydä tutustumassa Google+ sivuihin sillä sinne ilmestyy materiaalia, jota ei muualla julkaista..</p>
</div>
<div class='col_5'>
<h2>Voit myös käyttää valikossa erilaisia kuvia lisänä.</h2> </div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://ssl.gstatic.com/images/icons/gplus-64.png' width='70'/>
<p>BlogiHaltuun.net Google+ sivuilla esitellään kiinnostavia blogeja. Voit vierailla G+ profiilissa.<a href='https://plus.google.com/105961333715860193693?prsrc=3'>täällä</a></p><br/><br/>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fGnwjfq1y6yHlKg4yaMNRJEntDXxRm5zkEFNRwAxtQlfLTENgYxEqhqeUhPK-RLyOl52MuvjOygk-lwW7XPf56xLqbNN5ZaQO91HmC_cLJaCjAQn4Yn3LNoMtOQmgTEnPMGy2sKwEM2U/s1600/facebook_button.jpg' width='70'/>
<p>Google+:n lisäksi BlogiHaltuun.net löytyy tietenkin Facebookista. Kannattaa myös käydä katsastamassa facebook sivut ja klikata sitä tykkäys nappia. Facebookin kautta voit myös helposti kysyä bloggaamisesta!<a href='http://www.facebook.com/pages/BlogiHaltuunnet/210174815673570'>Täältä...</a></p>
</div>
<div class='col_2'>
<p class='black_box'>Tiesitkö muuten että BlogiHaltuun.net sisältää jo yli 100 artikkelia bloggaamisesta ja lisää on luvassa!</p>
</div>
</div><!-- Loppu 5 -->
</li><!-- Loppu 5 -->
<li><a class='drop' href='#'>4 kappaletta</a><!-- Alku 4 -->
<div class='dropdown_4columns'><!-- Alku 4 -->
<div class='col_4'>
<h2>Kiinnostavia artikkeleita:</h2>
</div>
<div class='col_1'>
<h3>Blogger vinkit</h3>
<ul>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Aloittelijalle</h3>
<ul>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
</ul>

</div>
<div class='col_1'>
<h3>Hieman lisää</h3>
<ul>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
<li><a href='#'>BlogiHaltuun.net</a></li>
</ul>
</div>
<div class='col_1'>
<h3>Ja vielä lisää</h3>
<ul>
<li><a href='#'>Tämän</a></li>
<li><a href='#'>avulla</a></li>
<li><a href='#'>vain</a></li>
<li><a href='#'>esitellään</a></li>
<li><a href='#'>ominaisuuksia</a></li>
</ul>
</div>
</div><!-- Loppu 4 -->
</li><!-- Loppu 4 -->
<li class='menu_right'><a class='drop' href='#'>1 Kappale</a>
<div class='dropdown_1column align_right'>
<div class='col_1'>
<ul class='simple'>
<li><a href='#'>Valikkoon</a></li>
<li><a href='#'>voi</a></li>
<li><a href='#'>rakentaa</a></li>
<li><a href='#'>millaisen</a></li>
<li><a href='#'>listauksen</a></li>
<li><a href='#'>kirjoittamistaan</a></li>
<li><a href='#'>artikkeleista</a></li> <li><a href='#'>haluaa.</a></li>
<li><a href='#'>Lista</a></li>
<li><a href='#'>voi</a></li>
<li><a href='#'>olla</a></li>
<li><a href='#'>miten</a></li>
<li><a href='#'>pitkä</a></li>
<li><a href='#'>tahansa</a></li>
<li><a href='#'/></li>
</ul>
</div>
</div>
</li>
<li class='menu_right'><a class='drop' href='#'>3 kappaletta</a><!-- Alku 3 -->
<div class='dropdown_3columns align_right'><!-- Alku 3 -->
<div class='col_3'>
<h2>Erilaisia listauksia voi myös laittaa laatikoihin</h2>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Linkit</a></li>
<li><a href='#'>Mahdollisesti</a></li>
<li><a href='#'>Huomiota</a></li>
<li><a href='#'>Erillisiin</a></li>
<li><a href='#'>Takaamiseksi</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Joihin</a></li>
<li><a href='#'>Kiinnitettävän</a></li>
<li><a href='#'>Voidaan</a></li>
<li><a href='#'>Laatikoihin</a></li>
<li><a href='#'>Tähän</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='#'>Halutaan</a></li>
<li><a href='#'>Enemmän</a></li>
<li><a href='#'>Asettaa</a></li>
<li><a href='#'>Huomion</a></li>
<li><a href='#'>Tapaan...</a></li>
</ul>
</div>
<div class='col_3'>
<h2>Voit myös yhdistellä kuvia valikkoon lisää</h2> </div>
<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://ssl.gstatic.com/images/icons/gplus-64.png' width='70'/> <p>Google plussan puolelle on suunnitteilla myös kilpailu. Eli kannattaa ottaa Google+ ja BlogiHaltuun. <a href='https://plus.google.com/105961333715860193693?prsrc=3'>Täällä...</a></p> <br/><br/>
<img alt='' class='img_left imgshadow' height='70' src='http://tweepi.com/blog/wp-content/uploads/2011/04/t12.jpg' width='70'/>
<p>Blogihaltuun.net on myös twitterissä, jonka avulla on helppo pysyä kärryillä siitä mitä BlogiHaltuun.net:ssä tapahtuu juuri nyt. <a href='http://twitter.com/#!/BlogiHaltuun'>Twitteriin...</a></p>
</div>
</div><!-- Loppu 3 -->
</li><!-- Loppu 3 -->
</ul>

Tämä valikko on tarkoitettu esimerkiksi siitä millainen voi valikko olla kun sen kaikki ominaisuudet otetaan käyttöön. Harvempi perus bloggaaja tarvitsee tämänkaltaista valikko "hirviötä" mutta toisinaan tälläinen "Mega valikko" on paikallaan tuomaan huomattavaa lisäarvoa sivustolle. 

Varsinkin tietystä aiheesta kuten muoti, elektroniikka jne bloggaavan kannattaakin miettiä aivan varteenotettavana vaihtoehtona tälläistä megavalikkoa. Jos kiinnostusta löytyy iskeä omaan blogiinsa tälläinen valikko siitä saattaa olla arvaamaton apu blogin suosion kasvattamisessa sillä tällaisen valikon avulla on todella helppo tuoda esille omia kirjoituksiaan.

Loppusanat

Valikoissa on mistä valita. Kannattaakin miettiä tarkkaan millaisen navigaatioratkaisun haluaa omaan blogiinsa luoda. Valikon onnistunut rakenne ja käytettävyys voivat ratkaista sen menestyykö blogisi kilpailussa lukijoista. Valikkoa ei varsinkaan kannata karttaa esteettisistä syistä sillä muokkaamalla CSS-koodia voit helposti tehdä aivan oman näköisesi valikko ratkaisun.

Jos sinulla on kysyttävää valikoista tai bloggaamisesta yleensä kannattaa ottaa yhteyttä kommenttina tai kysy bloggaamisesta lomakkeen kautta.