Webdesign…

|

…af Ulla Thorup Nielsen…

Archive for the ‘Blogs’ Category

Indlæg på Blogger – med mail..

fredag, september 9th, 2011

Desværre forsvandt muligheden for at udgive indlæg fra Word – da Blogger ændrede sine skabeloner.

Men der er stadig mulighed for at udgive via mail.

Formateringen bliver bare ikke særlig god – og der skal efterfølgende redigeres i indlægget.

Billeder uploades fint med mail – men vises kun som tumbernail i indlægget – og skal derfor sættes ind igen – ved en efterfølgende redigering.

Tekst skrevet som blogindlæg i Word indsat i mailen – giver den bedste tekstudgivelse på Blogger. Linie- og afsnit bevares, når formateringen fjernes.

Ikke så smart, som med direkte Word udgivelse som på WordPress. Men dog en mulighed.

Jeg har i indstillingen på Blogger valgt, at indlæg udgivet fra mail gemmes som kladde – så de først udgives, når de er redigeret.

Smileys for WordPress – tegn…

lørdag, juli 9th, 2011

Der findes 22 smileys for WordPress – se dem herunder. Symbolerne for smileyen er skrevet mellem ”  “…

Har du problemer med at få det til at virke, så læs mere HER

Glade smileys

“:)” 🙂  “:lol:” 😆  “:-D” 😀

“:P” 😛  “;)” 😉

Farverige

“8)” 8)  “:mrgreen:” :mrgreen:  “:oops:” 😳

Vrede

“:evil:” 👿  “:twisted:” 😈   “:x” 😡

Andre udtryk

“:(” 🙁  “:cry:” 😥  “:o” 😮

“8O” 😯  “:roll:”. 🙄

“:|”  😐  “:?” 😕

Tegn

“:!:” ❗  “:?:”.  ❓

“:idea:” 💡  “:arrow:” ➡

Læs også om

Facebook smileys

Smileys og glade SMS tegn…

Blogger søgefunktionen viser resultaterne på mørk baggrund…

søndag, april 17th, 2011

Jeg har lige pludselig fået problemer med visningen af søgeresultater på mine Blogger blogs.

De bliver vist i et felt over indlæggene – med samme baggrundsfarve som sidebjælkerne. Det betyder, at det er ulæseligt. Men det er noget, der er sket indenfor de sidste dage. Så enten er det noget af det, jeg har lavet i mine redigeringer, der har påvirket layoutet – eller, også har Blogger været ved at ændre på deres designskabeloner? I sidste tilfælde, så retter fejlen sig selv på et tidspunkt – for så vil der være mange, der bliver irriteret over det.

Er det noget, jeg har lavet? Ja så er det straks værre – for så må jeg  jo selv rode videre med det.

Men lige nu ser jeg tiden an…

Flere plugins til spambeskyttelse

søndag, april 10th, 2011

Har fundet nogle flere plugins.

SI CAPTCHA Anti-Spam : Se eksempel her. Farvede bogstaver på farvet baggrund.

NuCaptcha: Se eksempel her. Bevægelige røde bostaver.

Spambeskyttelse med matematik…

lørdag, april 9th, 2011

Fandt et andet lille plugin – med enkle matematikopgaver – som jeg synes bedre om…

Fordelen er, at man selv kan skrive sin følgetekst til feltet – så det kommer til at stå på letforståeligt dansk.

Spam beskyttelse…

fredag, april 8th, 2011

Har fundet et interessant lille plugin til Word Press – ReCAPTCHA – så der kommer en spambeskyttende kode på kommentarer til indlæg – i form af et felt hvor der skal indtastes en kode.

ReCAPTCHA er en gratis Google service.

Funktionen kan også bruges til formmails på hjemmesiden. Det arbejder jeg lidt på at få til af fungere. Det er nemt nok at få generet feltet – udfordringen ligger i at få aktiveret kodebeskyttelsen. Det skal jeg rode lidt med.

WordPress og Google Analytics

tirsdag, januar 11th, 2011

Følg instruktionen på denne video

Blog-layout: eftertanke.dk – skabelon Fusion

torsdag, december 30th, 2010

Jeg har en blog på eftertanke.dk – som bruger WordPress.

På Fusion skabelonen er det muligt at lave en del ændringer i stilarket.

I det følgende kan du se kodestykker til ændring af layoutet på Fusion skabelonen.

Koderne sættes ind i boksen under Fusion Tema indstillinger.

Find flere farver her: | Find farvernes #værdi |

______________________________________________________

Side-top

Bannerbillede

#page-wrap1{ background: transparent url(http://billedearkiv.dk/billedenavn.JPG) repeat-x left top; }

#page-wrap2{ background: transparent url(images/header-center.jpg) no-repeat center top;

height: 200px; min-height: 500px; width: 100%; display:block;}

(NB: Billedet skal beskæres, så det er 200px I højden)

Blogtitel: Tekst farve og størrelse

#header h1 a{ color: #bbff00; text-decoration: none; font-size: 50px;}

#header h1 a:hover{ background: none; color: #bfbfbf;}

Blogbeskrivelse: Tekst farve og størrelse

#topnav{ color: #bfbfbf; padding-top: 20px; font-size: 130%;}

____________________________________________________

Spaltebredde og marginer

#page.with-sidebar #main-wrap #mid-wrap { right:0%; /* width of the 2nd column, 0 because it doesnt exist */ }

#page.with-sidebar #main-wrap #side-wrap { right:55%; /* width of the main column */ }

#page.with-sidebar #main-wrap #mid { width:55%; /* width of main column */

left:55%; /* same */}

#page.with-sidebar #main-wrap #sidebar { width:34%; /* width of the sidebar */

left:55%;}

#mid-wrap, #side-wrap { float:left; margin-left: 30px; width:100%; position:relative;}

#sidebar-wrap1{ background: #transparent url(images/side-start.png) no-repeat left top;

padding-left: 28px; ; margin-left: 30px; margin-top: 10px; height: 100%;}

______________________________________________

Indlægsspalten

Indlægstitel: Tekst størrelse

h2{ font-family: “Palatino Linotype”, Georgia, “Tahoma”, “Century Schoolbook L”, Arial, Helvetica;

font-size: 375%; font-weight: normal; margin: .6em 0 .3em;}

Indlægstitel: Linkfarve

.story h2 a:hover, .post h2 a:hover, .story h3 a:hover, .post h3 a:hover{ background: none; color: #663366;}

Indlægstekst: Tekst størrelse

p{ line-height: 140%; margin: .4em 0 1em; font-size: 105%}

form p{ margin: 0;}

Billederamme

.post .postbody img, .attachment img, .navigation .aligncennter img, .navigation .alignleft img, .navigation .alignright img { padding: 10px; margin: 4px 10px; border: 1px solid #663366; border-radius: 4px; -moz-border-radius: 4px; background-color: #efefef}

.post img.alignleft, .attachment img.alignleft{ margin-left: 0; }

.post img.alignright, .attachment img.alignright{ margin-right: 0; }

.post img.aligncenter, .attachment img.aligncenter{ margin: 0 auto; text-align: center; }

Linkfarve

a{ color: #663366; text-decoration: underline;}

a:hover{ color: #fff; background: #663366; text-decoration: none;}

____________________________________________

Sidebar

Overskrifter: Tekst størrelse og farve

#sidebar .widget h2,

#sidebar2 .widget h2{ background: transparent url(images/div-h2.gif) repeat-x left bottom; color: #444444; padding-bottom: 2px; font-size: 125%; margin-bottom: .4em;}

Linkfarve

#sidebar li.linkcat a, #sidebar2 li.linkcat a,

.widget.widget_links ul li a, .widget.widget_meta ul li a, .widget.widget_categories ul li a, .widget.widget_archive ul li a, .widget.widget_pages ul li a, .widget.widget_recent_entries ul li a{ color: #444444; text-decoration: none; margin-left: 10px; display: inline-block;}

Linkfarve: Aktiveret link

#sidebar li.linkcat a:hover, #sidebar2 li.linkcat a:hover,.widget.widget_links ul li a:hover, .widget.widget_meta ul li a:hover, .widget.widget_categories ul li a:hover, .widget.widget_archive ul li a:hover, .widget.widget_pages ul li a:hover, .widget.widget_recent_entries ul li a:hover{ color:#A4126E; background: none; text-decoration: underline;}

_____________________________________

Sidenavigation: Ældre og nyere indlæg (sidefod og top) – farve og størrelse på linktekst

.navigation{ font-size: 110%; color: #444444; margin: 0; padding: 0;}

.navigation a{ text-decoration: none; color: #000000;}

.navigation a:hover{ background: none; color:#A4126E;}

______________________________________________

Kommentarformularen: Farve på linktekst og linkbaggrunde

a.comments, .story p.postcontrols a.comments, .post p.postcontrols a.comments{ background:transparent url(images/post-icons.png) no-repeat 2px bottom; padding-left: 19px; color:#A4126E;}

a.comments:hover, .story p.postcontrols a.comments:hover, .post p.postcontrols a.comments:hover{ background: #A4126E; color: #fff;}

a.no.comments, .post p.postcontrols a.no.comments{ color: #A4126E;}

a.no.comments:hover, .post p.postcontrols a.no.comments:hover{ background: #A4126E; color: #fff;}

li.comment .details.admincomment .head{ background: #663366 url(images/postinfo-bg-admin.gif) repeat-x left bottom; color: #fff;}

#mid ul.menu a.active, #mid ul.menu a.current{ background-position:0% 0px; color:#a4126e;}

#mid ul.menu a.active span, #mid ul.menu a.current span { background-position:100% 0px; color:#a4126e;}

Bloglayout: Smartlog.dk

torsdag, november 11th, 2010

Grundskabelon: Kubrick

Indsæt dit eget bannerbillede

Gå ind i menuen: Flere muligheder

Vælg: Rediger kilden til den skabelon

Vælg: Ny skabelon baseret på nuværende

Giv skabelonen et navn

Find følgende sted i koderne:

#header { background: url(“<{$blog->getTemplateVariable(“kubrick_top”)}>”) no-repeat bottom center; }

Indsæt url adressen på det billede du ønsker at sætte ind:

#header { background: url(http://web.dk/billede.JPG) no-repeat bottom center; }

Billedet skal have størrelsen: 720px x 190px

Indsæt billeder i menuen

Gå ind i menuen: Flere muligheder

Vælg: Moduler

Tilføj modulet: HTML

Indsæt følgende kode med url adressen på det billede du ønsker at sætte ind:

img style=”border: #663366 1px solid” width=”180″ height=”180″ src=”http://web.dk/billede.JPG” /

(skal omgives af tagsene <> – men jeg kan ikke sætte dem ind – uden at aktivere koden? – lidt bøvlet)

Se flere muligheder

Ændringer i CSS på Blogger skabeloner

fredag, november 5th, 2010

Det er muligt at ændre på noget på Bloggers skabeloner, ved at sætte nye html koder ind i en dertil indrettet kodeboks i skabelondesigneren.

Jeg har indtil videre prøvet følgende:

Nyt baggrundsbillede

.body-fauxcolumn-outer { background: url(http:// webstedsnavn-for-uploaded-billede.JPG) repeat fixed center top; }

Forklaring:

Repeat: Billedet bliver gentaget vandret og lodret. Skal billedet ikke gentages skrives i stedet no-repeat.

Fixed: Billedet ruller ikke med siden. Skrives ikke hvis billedet skal rulle med siden.

Center: Billedet bliver centret på siden.

Top: Billedets top er i toppen af skærmbillede.

Centrer titel og blogbeskrivelse

.Header { text-align: centre; }

Skift farve og lav fed tekst på blogbeskrivelse

.Header p { color:#bbff00; font-weight:bold; }

Kommentar

Hvis koderne ikke aktiveres i første omgang, når du sætter dem ind – så prøve at lave et ekstra linieskift under nederste kodelinie. Designeren kan åbenbart ikke registrere tekst, der er kopieret ind – uden at der også sker noget manuelt i kodefeltet.

Læs mere om redigering af CSS på Blogger

Eksempel på kodernes anvendelse på en af mine blogs