Med Google Blogger är det väldigt lätt att anpassa utseendet även för fullständiga nybörjare. Orsaken är det trevliga grafiska gränssnittet. Samtidigt är detta en aning begränsat så fort man vill göra något lite annorlunda. En sak man troligen vill ändra på annat sätt är hur bloggens huvud ser ut. Med det grafiska gränssnittet går det att ställa in:
- Bloggens namn.
- En kort beskrivning.
- En bakgrundsbild.
Andra saker man emellertid ofta vill ha i bloggens huvud är:
- Reklam t.ex. en Google Adsense länkenhet.
- Sökfunktion. De flesta besökare börjar titta efter sökfunktion längst upp till höger.
- Länkar till huvudsidor.
- Flera bilder som tillsammans bildar en design för bloggerns huvud.
Allt det här går utmärkt att göra med Google Blogger om man går in och skriver om koden direkt. Jag prövade mig fram en del för Pryltrend.com huvudsakligen därför att jag vill ha en Google Adsense länkenhet högt upp. Den har jag inte fört in där än men i experimentet flyttade jag upp min sökfunktion från höger marginalen till blogghuvudet.
Header i Google Blogger
Den aktuella strukturen vi ska ändra om kallas i Blogger för header.
Det aktuella avsnittet innesluts i:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
I de flesta templates är det ganska ordentligt med kod som stoppats in där för att styra väldigt lite. Ett bra första steg efter att ha tagit backup kändes därför som att börja rensa ut allt som åtminstone just nu saknar värde så att det skulle bli lite mer överskådligt.
Att behålla includable
Jag valde emellertid att låta själva de includable som markerade kodavsnitten vara kvar. En anledning till det (om jag inte feltolkade saker och ting) är att det grafiska gränssnittet i Blogger förväntar sig att dessa ska finnas. Om jag manipulerar en funktion jag har i min header därifrån men har tagit bort en sådan struktur kommer Blogger sätta dit default-kod.
Genom att ha dessa kvar men tomma kringgår jag problemet och kan fortsätta använda gränssnittet. Det är mycket möjligt att det här problemet går att lösa bättre men eftersom jag ev. tänker generalisera denna template verkade det vettigt att behålla de här så att jag inte avviker för mycket från den vanliga strukturen. I exemplet lät jag description vara kvar så men tog bort de övriga för att korta ner det här.
Nedan tog jag bara med lite av koden för själva sökfunktionen eftersom det inte tillför något att ha med den. Poängen är själva principen att tomma befintliga includable och införa en ny som accepterar all typ av html. I den nya designar du utseendet precis som du själv vill. Där lät jag emellertid just bloggens namn skrivas ut på samma sätt som normalt just för att inte riskera att förvirra det grafiska gränssnittet och avvika onödigt från Googles normala syntax (så att det ev. går sönder i kommande uppdateringar):
<h1 class='title'><b:include name='title'/></h1>
Nedan har vi allt sammans:
-
Komplettering: Det är möjligt (men inte säkert) att det sätt jag kommenterade på inte är korrekt med Blogger. Jag lade till kommentarerna i efterhand. Får du ett fel pröva därför att ta bort dessa. Eller skriv en kommentar här så gör jag en ny med korrekta kommentarer.
<!--
***************************
HEADER
***************************
-->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Pryltrend.com (rubrik)' type='Header'>
<!--
Använder inte description men behåller strukturen tom.
-->
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<!--
Lägger till en ny includable där jag kan stoppa in precis vad som helst
Det gör att jag nu genom att lägga till html här fritt kan styra utseendet på header.
-->
<b:includable id='main'>
<!--
Det finns ju några nya html-taggar som ska vara bra för styra sådant här men jag gör som jag är van och använder table.
Bloggens namn kommer överst till vänster och sökfunktionen överst till höger.
En ny tr under dessa eller en helt ny tabell kan användas för att lägga en Adsense länkenhet under dessa.
-->
<table align='center' width='100%'>
<tr>
<td align='left'>
<h1 class='title'><b:include name='title'/></h1>
</td>
<td align='right'>
<div>
<form action='http://www.google.com/cse' id='cse-search-box'>
</form>
</div>
<script src='http://www.google.com/coop/cse/brand?form=cse-search-box&lang=sv' type='text/javascript'/>
</td>
</tr>
</table>
</b:includable>
</b:widget>
</b:section>
Mer om att anpassa utseendet på Blogger
Tidigare bloggat om det här:
Blogger.com: SEO & Meta-taggar
Att anpassa kommentering för Google Blogger I
Ändra H-taggar för bloggnamn, datum, rubrik m.m. på Blogger
Gör en favicon.ico på Blogger.com
För Blogger.com: Optimera laddningstiden (unikt tips) för din blogg
Foto:
Kommentera