Vil du have nyt look og features på din blog?

Jeg blev forleden spurgt, hvordan jeg havde lavet min sidebar – da den indeholder features, der ikke ligger som standard i opsætning af bloggen. Måske andre også har den udfordring, så derfor deler jeg lige mine erfaringer (selvom vi er ganske nye i dette game).

Der ligger nogle gode pre-installerede widgets til din sidebar, som fx “Nye indlæg”, “Popular post widget”, “Søg” “Follow Blog Widget” etc., som du kan bruge i din sidebar. Men nogle gange, vil man gerne selv kunne designe, hvordan tingene vises i sin sidebar. Fx ville jeg gerne selv kunne vælge, hvilke indlæg der skulle promoveres som “De Mest Populære Indlæg” og så var jeg ikke helt fan af udseendet, som “Popular post widget” gav mig.

Derfor har jeg stort set kun brugt den widget, der hedder “Visual Editor” til alt i min sidebar. Som I kan se af det første billede, har jeg stort set kun widgets med “Visual Editor” og “Tekst”.

Nedenstående vil jeg step by step vise, hvordan jeg har lavet de forskellige ting i sidebaren via Visuel Editor og simpel HTML-kodning (gå ikke i panik, det er ret enkelt):

1.

I min første widget bruger jeg ikke html, men har blot indsat et logo øverst via “Tilføj medier” efterfulgt af almindelig tekst:

2.

Min anden widget er en Tekst-widget, der i tekstfeltet blot indeholder <hr />. Det definerer nyt emne og indsætter en linje (jf mit valg af design). Ingen overskrift i Titelfeltet:

3.

Min tredje widget er igen en Visual Editor, hvor jeg begynder at lege lidt med HTML. Her her jeg selv valgt nogle indlæg, som jeg gerne vil promovere lidt mere – og lægge dem synlige i sidebaren. Det er ikke nødvendigvis de mest populære, men det kunne det være. Det vælger du selv. Når du er inde på en Visual Editor widget (som i step 1, der ligner opsætningen, når du laver indlæg), så kan du vælge at se din editor som HTML eller Visual:

Beskrivelse af koden, hvor jeg har kodet 4 indlæg – hvor læseren kan klikke på enten billede eller tekst og komme ind på det specifikke indlæg:

href=”http://creativehome…. (dette er hvor der skal linkes hen til, når læseren klikker)
<img style=”float: right;” (at billede skal højrestilles)
src=”http://creativehome…. (dette er hvor mit billede ligger – brug evt Tilføj medier, så får du linket indsat)
alt=”DIY Barbord…(er blot en tekst der vises, hvis billedet af en eller anden grund ikke kan vises)
width=”50″ height=”50″ (størrelsen på billedet)
<strong> “Ikea Hack</strong> (Overskriften, der er fed)
<br /> (linjeskift)
Lav plante/barbord (tekst under overskrift)

Her er selve koden, som du kan kopiere direkte ind i din egen Visuel Editor under HTML. Så skal du bare ændre linket, hvor dit eget billede ligger og selve teksten:
<p><a href=”http://creativehome.bloggersdelight.dk/2018/03/18/diy-fra-skrivebord-til-plantekassebarbord/”><img style=”float: right” src=”https://cdn.bloggersdelight.dk/wp-content/blogs.dir/207161/files/2018/03/Plantekasse-Creative-Home125.png” alt=”DIY Barbord” width=”50″ height=”50″ /><strong>#Ikea Hack</strong> <br />Lav plante/barbord</a></p>

Jeg har sat min sidebar til 192 pixels bred. Du kan vælge mellem 107, 192 og 277 pixels under “Opsæt din blog”, “Design sidebar” og “Bredde på sidebar”

4.

Er du forpustet? Well, den næste widget og html-kodning er ret simpel. Her har jeg bare indsat et billede “Klik her, følg vores blog” – der indeholder et link, så folk følger vores blog. Det kunne være et hvilket som helst andet billede, der linker til din facebookside, et indlæg, dr.dk eller noget helt fjerde. Jeg ved godt, at der ligger en pre-installeret widget, der hedder “Follow Blog Widget” – jeg ville bare have et andet look.

I koden starter jeg med at definere mit link (i dette tilfælde mit follow-link). Efterfulgt af stien, hvor mit billede er (brug evt “Tilføj medier”. Da min sidebar er 192 pixels bred, har jeg sat bredden på billedet til 192.

Du kan kopiere koden her og sætte ind i din egen Visual Editor HMTL og så bare ændre link og stien på billedet:
<p><a href=”https://bloggersdelight.dk/follow/207161″> <img class=”aligncenter size-full wp-image-574″ src=”https://cdn.bloggersdelight.dk/wp-content/blogs.dir/207161/files/2018/03/Følg-vores-blog3-1.png” alt=”Følg vores blog” width=”192″ height=”40″ /></a></p>

 

Nu vil jeg ikke gennemgå flere af mine Visual Editor Widget kodninger, for måske du allerede er løbet skrigende bort? I første omgang kan det være lidt uoverskueligt, men ved at prøve sig frem – så kan man skabe lige præcis det look, som man ønsker i sin sidebar.

Jeg håber, at du er blevet inspireret til at lave noget vildt i din sidebar? Du er velkommen til spørge løs, hvis ovenstående guide overhovedet ikke giver mening 🙂

/Charlotte

Følg blog eller besøg os på Facebook eller Instagram