Kuinka lisätä valikko bloggerissa ?

Vaikka blogit perustuvatkin siihen että niiden sisältöä luetaan tuoreeltaan on silti syytä miettiä hieman sivustolla navigointia. Bloggerin perus teemoissa ei ole juurikaan panostettu blogin sisäiseen navigointiin vaan oletus arvona ovat pelkästään Blogiarkisto (Blog Archive), Tunnisteet (Labels) ja Sivut (Pages). Nämä  ovat hyödyllisiä ja käyttäjät ovat tottuneet niiden käyttämiseen, mutta ne eivät tarjoa kovin miellyttävää käyttökokemusta.

Blogisi koon kasvaessa erilaisten Tunnisteiden määrä voi kasvaa suureksi, ja perinteinen Tunniste valikko saattaa kasvaa aivan liian suureksi. Silloin on syytä lisätä oma menu palkki niille sivuille ja tunnisteille, joita itse pidät blogisi tärkeimpänä sisältönä.

Bloggeriin on jo jonkin aikaa voinut lisätä navigointipalkin erillisille sivuille (Pages), mutta et ole voinut näyttää samassa yhteydessä linkkejä blogikirjoituksiesi Tunnisteisiin. Tämän ongelman takia useimmat bloggaajat ovatkin luoneet oman menu-palkin blogiinsa. 

Valikko voi olla monen näköinen

Miten sellainen sitten onnistuu? 

Ensin pitää hieman tutustua blogin rakenteeseen. Käytän tässä esimerkkinä bloggerin vakio mallia:  "Yksinkertainen " /  " Simple  ".  Yksinkertaistettuna blogi koostuu kahdesta perus osasta CSS -osa ja HTML -osa. HTML -osa määrittelee sen missä mikin osanen konkreettisesti blogissasi sijaitsee ja CSS -osa määrittelee sen miltä mikin osa näyttää.

Valikon luomiseen tarvitaan sekä oikeaan kohtaan lisätty koodinpätkä HTML- osassa että CSS- määrittely kertomaan selaimelle miltä  valikon tulisi näyttää. Otetaan käsittelyyn ensin tämä CSS-osanen. 

CSS

CSS eli Cascading Style Sheets määrittelee siis tyylin. Tyylimäärittelyjä voi olla suuri määrä ja niitä voi hioa melkeinpä loputtomiin. Valikkoa mietittäessä voidaan päättää millaisia määrittelyjä halutaan antaa fontille koon ja tyypin suhteen. Sekä halutaanko käyttää erilaista fonttia / väriä / kokoa silloin kun hiiren kursori on valikon osan kohdalla. Halutaanko käyttää jonkinlaista taustakuvaa valikon tekstin takana jne.  Eli erilaisia muotoilu vaihtoehtoja löytyy todella paljon.

Tässä  esimerkki valikon CSS- määrityksistä:

#valikonkehys1{height:30px; background:url() repeat; display:block; padding:0px 0 0px 0px; font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif; font-weight:normal;
text-transform:uppercase; overflow:hidden; }
#valikko1{margin: 0px; padding: 0px 10px; width:100%; background:url() repeat; height:30px; border-bottom:1px solid #dddddd; }
#valikko1 ul {float: left; list-style: none; margin: 0px; padding: 0px; }
#valikko1 li {float: left; list-style: none; margin: 0px; padding: 0px; }
#valikko1 li a, #valikko1 li a:link, #valikko1 li a:visited {color: #444; display: block; margin: 0px; padding: 9px 15px 9px 15px; text-decoration: none; }
#valikko1 li a:hover, #valikko1 li a:active {background:#333A3F; color: #fff; margin: 0px; padding: 9px 15px 9px 15px; text-decoration: none; }
#valikko1 li li a, #valikko1 li li a:link, #valikko1 li li a:visited {background:#202020; width: 150px; color: #bbb; font-size: 10px; font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal; float: none; margin: 0px; padding: 9px 10px 9px 10px; border-bottom: 1px solid #282828; }
#valikko1 li li a:hover, #valikko1 li li a:active {background: #121212 ; color: #fff; padding: 9px 10px 9px 10px; }
#valikko1 li ul {z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; }
#valikko1 li li { }
#valikko1 li ul a {width: 140px;}
#valikko1 li ul a:hover, #valikko1 li ul a:active { }
#valikko1 li ul ul {margin: -31px 0 0 170px; }
#valikko1 li:hover ul ul, #valikko1 li:hover ul ul ul,
#valikko1 li.sfhover ul ul, #valikko1 li.sfhover ul ul ul {left: -999em;}
#valikko1 li:hover ul, #valikko1 li li:hover ul, #valikko1 li li li:hover ul, #valikko1 li.sfhover ul, #valikko1 li li.sfhover ul, #valikko1 li li li.sfhover ul {left: auto; }
#valikko1 li:hover, #valikko1 li.sfhover {position: static;}

Tämä CSS-koodi tulee kopioida ja liittää sinun oman sivustosi CSS -osaan. Koodi sisältää monenlaisa määrittelyjä ja kokeilemalla muokata erilaisia arvoja ja antamalla uusia määrittelyjä muutat sitä miltä valikko näyttää. Kannattaa käyttää hieman aikaa ja tehdä valikosta mahdollisimman paljon sivuston muuhun ulkoasuun sopiva.

HTML - Osa

HTML osassa määritellään siis se missä kohtaa sivua valikko näytetään. Blogger:in ominaisuuksiin kuuluu mahdollisuus lisätä HTML/JavaScript Gadget tiettyyn kohtaan sivua ja "Yksinkertainen" / "Simple" mallissa on mahdollisuus lisätä sellainen valikolle sopivaan kohtaan. 

Lisää Gadget tähän...

Voit siis lisätä suoraan sivuston otsikko osan alle HTML/JavaScript Gadgetin johon liität seuraavanlaisen HTML-koodin:

<div id="valikonkehys1">
<div id="valikko1">
<ul>
<li><a href="#Osoite jonka haluat">Etusivu</a></li>
<li><a href="#Osoite jonka haluat" title="#">HTML</a></li>
<li><a href="#Osoite jonka haluat" title="#">CSS</a></li>
<li><a href="#Osoite jonka haluat" title="#">Java Script</a></li>
<li><a href="#Osoite jonka haluat" title="#">Blogit</a></li>
<li><a href="#Osoite jonka haluat" title="#">Muoti</a></li>
<li><a href="#Osoite jonka haluat" title="#">Valokuvat</a></li>
<li><a href="#Osoite jonka haluat" title="#">Uutiset</a></li>
<li><a href="#Osoite jonka haluat" title="#">Yhteystiedot</a></li>
</ul>
</div>
</div>
<div class="clear"/></div>

Tämän jälkeen valikon pitäisi näyttää hieman tältä:

Valikko blogissa

Valikko on oikealla paikallaan ja sinun tehtäväksesi jää vain muokata html- koodi näyttämään oman sivustosi eri tunnisteiden url-osoitteita (http:// jne... )  ja sivuja (pages).  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).

Loppusanat

Kunnolla suunniteltu navigointi on tärkeää. Sen ansiosta blogisi käyttökokemus on miellyttävä ja lukijasi löytävät helposti sen mistä haluavat lukea. Vaikka blogisi olisikin vasta alkutekijöissään kannattaa käytettävyyteen panostaa, sillä mitä parempi on käytettävyys sitä suuremmalla todennäköisyydellä lukija palaa uudestaan sivustollesi.

Voit valita juuri ne tunnisteet jotka itse haluat että lukijasi helpoiten löytää. Kaikki linkit jotka valikkoosi asetat saavat erityistä huomiota ja sen avulla voit antaa uutta elämää myös hieman vanhemmille kirjoituksillesi.

 Blogin muokkaminen ei aina ole ihan yksinkertainen juttu, mutta toivottavasti nämä ohjeet auttavat sinua.  Jos sinulla on ongelmia valikoiden muokkaamisen tai asettelun kanssa tai haluaisit kysyä jotain HTML tai CSS koodista jätä kysymyksesi kommenttina! Vastaan kaikkiin kysymyksiin mielelläni.