Je eigen social media buttons maken + plaatsen
Social media is ontzettend belangrijk voor je blog en je wilt natuurlijk dat je volgers jouw blog op alle mogelijke manieren kunnen volgen! Ook ik heb een rijtje met social media buttons op mijn site. Ik wissel regelmatig af, de buttons die ik nu heb, heb ik gewoon van Google afgehaald. Je typt op Google "social media buttons" in en je krijgt vanzelf een heleboel mogelijkheden als je bij afbeeldingen kijkt.
Meestal staan alle buttons dan bij elkaar, maar als je ze straks werkend wilt laten maken op je blog, is het belangrijk dat je ze één voor één uitsnijdt en opslaat. Dit doe ik altijd in Photoshop, maar je kunt hier ook gewoon Paint voor gebruiken.
Je slaat de afbeelding op en opent hem in Paint. Vervolgens gebruik je de "Bijsnijden-tool" om de knoppen één voor één uit te snijden. Je kunt hier ook al de grootte van de knop aanpassen bij "Formaat wijzigen" zodat je zeker weet dat hij op je pagina past. Deze sla je per stuk op.
Vervolgens ga je de buttons op je site plaatsen en werkend maken, zodat als je erop klikt je bij de juiste social media pagina uitkomt.
Je gaat naar het Dashbord van Blogger en kiest daar voor "Indeling". Je ziet daarna als het goed is de indeling van jouw blog. Je drukt op "Een gadget toevoegen" en vervolgens krijg je een hele lijst met gadgets. Je kiest daar voor de optie HTML/JavaScript. Als het goed is verschijnt het volgende scherm:
Daar plak je deze HTML-code in: <a href="URL Pagina"><img src="URL IMG" /></a>
Stel dat je vijf buttons wilt plaatsen, dan plaats je deze code ook vijf keer..
Waar nu "URL Pagina" staat, plak je de URL link van de pagina waar je wilt dat je naartoe gaat als je op de afbeelding klikt. Op de plaats waar nu "URL IMG" staat, plak je straks de link van het plaatje (de social media button).
Deze moet je eerst uploaden. Ik doe dat altijd via Tiny Pic. Je kiest het gewenste bestand en upload deze. Daarna verschijnen er vier links. Je hebt de onderste link, waar "Directe link voor lay-outs" staat. Deze link plak je op de plek waar "URL IMG" staat. Zo doe je dat bij alle plaatjes en dan sla je het op. Als het goed is verschijnen dan de social media buttons op je blog!
Deze moet je eerst uploaden. Ik doe dat altijd via Tiny Pic. Je kiest het gewenste bestand en upload deze. Daarna verschijnen er vier links. Je hebt de onderste link, waar "Directe link voor lay-outs" staat. Deze link plak je op de plek waar "URL IMG" staat. Zo doe je dat bij alle plaatjes en dan sla je het op. Als het goed is verschijnen dan de social media buttons op je blog!
Hetzelfde verhaal geldt voor je menuknoppen. Deze heb ik zelf ontworpen in Photoshop, maar dit kun je ook heel gemakkelijk in Paint doen. Je maakt weer een nieuwe HTML/JavaScript pagina aan, gebruikt dezelfde HTML-code als hierboven en voilà: je hebt je eigen menuknoppen!
Social media buttons/plaatjes centreren
Ik heb mijn social media buttons gecentreerd staan, net als mijn menuknoppen, zodat het een wat mooier geheel wordt. Dit is heel makkelijk om te doen. Je gaat naar de HTML van de social media buttons, die je weer vindt bij de Indeling op Blogger. Het enige wat je hoeft te doen is vóór alle codes <center> te plaatsen en ná alle codes </center>. Hierna sla je je HTML weer op en dan staan alle codes gecentreerd!
Zoekbalk op je blog
Ik kreeg ook de vraag hoe ik een zoekfunctie op mijn blog heb gemaakt. Dit heb ik niet zelf gedaan, deze optie biedt Blogger je al aan. Je gaat weer naar de Indeling van je blog en kies "Een gadget toevoegen". Vervolgens kun je kiezen voor de optie "Zoeken in deze blog". Deze sla je op en dan verschijnt er een zoekbalkje. Mijn tip is om deze op een opvallende plek te zetten, net als je social media buttons.
Datumknop centreren
In mijn vorige artikel vertelde ik jullie al hoe je je blogtitel kunt centeren. Daarna kreeg ik ook een paar vragen hoe je de datumknop kunt centeren.
Ga naar je Sjabloon in Blogger en klik op "Aanpassen". Kies daar voor de optie "Geavanceerd". Scroll helemaal naar beneden en klik op "CSS toevoegen". Plak daar de volgende code:
text-align:center;
}
Als je dit hebt gedaan, klik je op "Toepassen op blog". Als het goed is, is dan je datumknop gecentreerd!
Achtergrond plaatsen
Ik heb eigenlijk altijd een witte achtergrond gehad op mijn blog, maar sinds een tijdje heb ik een grijze. Deze heb ik gehaald van een hele leuke site waar je een heleboel toffe achtergronden kunt vinden.
Het zijn allemaal simpele achtergronden, maar ik vind ook dat je achtergrond niet te druk moet worden. De site heet "Subtlepatterns.com". Je vindt hier genoeg achtergronden! Als je een geschikte achtergrond hebt gevonden, klik je op downloaden. Er wordt dan een ZIP bestand gedownload die je kunt openen. Daar open je het mapje met de naam van jouw achtergrond en kun je het plaatje opslaan.
Deze kun je vervolgens weer heel makkelijk uploaden via Blogger. Je gaat naar Sjabloon en kies "Aanpassen". Daar staat tussen de opties "Achtergrond" waar je je eigen achtergrond kunt uploaden.
Deze kun je vervolgens weer heel makkelijk uploaden via Blogger. Je gaat naar Sjabloon en kies "Aanpassen". Daar staat tussen de opties "Achtergrond" waar je je eigen achtergrond kunt uploaden.
Ik hoop dat ik jullie weer een beetje op weg heb geholpen! Mocht je nog meer vragen hebben, stel ze dan vooral in de reacties!
Wat een handig artikel weer! Fijn dat je zn soort artikelen maakt!
BeantwoordenVerwijderenDankjewel voor de tips, ik ga vanmiddag dan maar eens puzzelen om social media buttons te maken nu ik eindelijk weet hoe het moet! Liefs.
BeantwoordenVerwijderenSuper tof dat je dit doet Nicole :) alhoewel ik eigenlijk alles al wel wist reageer ik toch want ik denk dat je een hele boel meiden enorm helpt met deze artikelen :) Liefs, Demi
BeantwoordenVerwijderenBedankt! Hier ben ik echt zoveel mee! Hoe heet dat 2de lettertype dat je in de eerste foto gebruikt hebt? Ik vind het heel mooi :)
BeantwoordenVerwijderenDankjewel voor je reactie! Fijn dat je er wat aan hebt! Het lettertype dat ik heb gebruikt heet KG Eyes Wide Open. Deze is gewoon gratis te downloaden via Dafont.com
VerwijderenDie social media buttons, je hebt het handig uitgelegd. Bij mij staan er wel een paar maar niet naar m'n zin (lees: ze snapte het niet haha); ik ga dus weer eens een poging wagen Thanks.
BeantwoordenVerwijderenSuper handige tips!
BeantwoordenVerwijderenZo handig dit artikel!:)
BeantwoordenVerwijderenWauw wat een ontzettend handig artikel! Hier ga ik ook even goed voor zitten, want het is onwijs handig. Dankjewel dat je deze tips deelt en zo fijn hebt uitgelegd! Ik klik nog even door naar deel 1 :)
BeantwoordenVerwijderenIk vind dit artikel en ook de vorige uit deze serie zo fijn! Ze helpen me echt ontzettend erg, ik hoop dat je er nog wat meer zult maken!
BeantwoordenVerwijderenheel handig dit soort tips!
BeantwoordenVerwijderenWat een handig artikel!
BeantwoordenVerwijderenWat een superhandig artikel, goede tips! Zelf heb ik html geleerd voor websites in het algemeen, dus soms is het nog even goed uitzoeken welke codes blogger gebruikt aangezien het niet altijd overeenkomt met wat ik gebruik..
BeantwoordenVerwijderenEn een ding: moet bij de code voor social media buttons enzo er niet nog <a voor? want nu open je de linkcode niet maar je sluit 'm wel af? :)
Oh bedankt voor de oplettendheid! Dat klopt inderdaad niet, was een typfoutje. Heb het meteen aangepast!
VerwijderenWat een super handig artikel! Dit ga ik zeker nog een keertje gebruiken!
BeantwoordenVerwijderenHeel handig! :)
BeantwoordenVerwijderenHele handige tips, Nicole. Heel erg bedankt! Liefs
BeantwoordenVerwijderenLeuk artikel Nicole!
BeantwoordenVerwijderenHele handige tips weer! :) Echt fijn dat je deze met ons deelt.
BeantwoordenVerwijderenWat een handig artikel! Leuk dat je zulke dingen uitlegt en deelt.
BeantwoordenVerwijderenSuper handige tips, ga er zeker gebruik van maken!
BeantwoordenVerwijderenHele handige tips!
BeantwoordenVerwijderenOh ik ben echt heel blij met jou! Ik zat toevallig ontzettend te tryharden deze week voor die buttons!
BeantwoordenVerwijderenSuper handige tips, heel erg bedankt Nicole :) Liefs
BeantwoordenVerwijderenWat een goede tips zeg! Dit artikel ga ik weer eens onthouden.
BeantwoordenVerwijderenLiefs, Mariette
Oh wat handig dit! Die vorige heb ik gemist maar ga ik ook maar eens even bekijken:)
BeantwoordenVerwijderenWauw superhandig! Ik ga het gelijk proberen :)
BeantwoordenVerwijderenWauw, zo lief dat je deze informatie met ons deelt! Ik heb hier echt ontzettend veel aan, ik ben toevallig net bezig met social media buttons en menuknoppen vervangen en stoorde me ook aan het feit dat mijn titel niet gecentreerd staat maar mijn tekst wel. Dankjewel!
BeantwoordenVerwijderenSuper handige tips!
BeantwoordenVerwijderenIk zie dat je Subtle Patterns hebt gevonden ;-) En wat betreft het 'halen' van buttons van Google: mocht je dat doen dan is het altijd netjes om de bron te vermelden! Wel zo fair tegenover de maker van de button :-)
BeantwoordenVerwijderenHele leuke tips! :)
BeantwoordenVerwijderenEcht heel handig deze tips, dankjewel! Ik heb het één en ander toegepast, ook uit je vorige blogpost, en ben nu zeer tevreden over de layout van mijn blog haha :)
BeantwoordenVerwijderenSuper leuk en handig! Ook heel leuk dat je de tijd hebt genomen om dit zo uitgebreid uit te leggen, ik en veel andere bloggers hebben daar veel aan. :)
BeantwoordenVerwijderenHandig! Ik wil ook al zo lang een achtergrond, maar bij mij worden de posts en de blokken aan de zijkant niet wit zoals bij jou.. Hoe heb jij dat precies gedaan?
BeantwoordenVerwijderenX
Aah, echt heel erg bedankt! Ik was al een tijdje aan het bedenken hoe ik zulke Social Media buttons op mijn blog kon zetten, en nu is het gelukt! Echt top, ik heb er superveel aan gehad.
BeantwoordenVerwijderen:D
Liefs, Suzanne.
Nice! veel van deze codes heb ik zelf ook gebruikt :) Je lay-out nu is echt super mooi trouwens!
BeantwoordenVerwijderenAls beginnende blogger is dit een handig artikel. In het begin komt alles een beetje op je af, vond ik in ieder geval;) Je bent handig met dit soort dingen. Liefs
BeantwoordenVerwijderenhandig artikel
BeantwoordenVerwijderenIk vind het achtergrondje van je blog ook echt perfect; mooi subtiel! Liefs
BeantwoordenVerwijderenOntzettend handing, ga er meteen mee aan de slag!! Thanks!
BeantwoordenVerwijderenLiefs,Emma
Lief dat je tips geeft aan anderen :)
BeantwoordenVerwijderenLeuke tips. Vind het altijd veel aangenamer om naar een mooi verzorgde layout te kijken als ik een blog lees. Dus keep on spreading the tips! ^^
BeantwoordenVerwijderenx
http://lovelifelovefashion.be
Wauw!!
BeantwoordenVerwijderenEnorm bedankt voor de buttonstips!
Fijn om te zien dat je ook echt wat met je 'mail post' doet!
Je hebt er een nieuwe fan bij hihi
Echt ontzettend handig, dankjewel!
BeantwoordenVerwijderenEcht ontzettend handig! Ik ga even een bladlezer bij dit artikel zetten, dan kan ik er op een rustig moment even mee aan de slag. (:
BeantwoordenVerwijderenWeer een super handig artikel! Weet je toevallig welke code je moet gebruiken om je 'Read More' knop aan de rechterkant te krijgen? Liefs!
BeantwoordenVerwijderenSupergoed artikel! Ik ga het zeker uitproberen, want ik ken echt niets van HTML :-D
BeantwoordenVerwijderenWat mij vooral stoort zijn de weergave van mijn foto's, die hebben altijd zo'n witte fotorand, maar ik wil gewoon mijn foto's zonder rand. Een tweede ding is dat ik al mijn foto's even breed wil weergeven (zowel rechtopstaande als liggende), maar dat weet ik dus ook niet te veranderen.
Weet jij hoe dit moet? Als je even tijd hebt om een kijkje te nemen op mijn blog en misschien suggesties of aanmerkingen hebt voor mij zou dat echt super zijn!
Groetjes! X Sara
http://windowonmywardrobe.blogspot.be/
Leuk artikel, heb er veel aan gehad! Alleen het centreren van de buttons werkt niet bij mij, ik krijg ze dan namelijk onder elkaar wat niet helemaal de bedoeling is haha.
BeantwoordenVerwijderenWeet je misschien hoe je een bezoeker gadget toevoegt?
BeantwoordenVerwijderenSuper handig alleen hoe maak jij je header ook transparant? Met welk programma maak je je header?
BeantwoordenVerwijderenEcht een top artikel ! heb er heel veel aan gehad (:
BeantwoordenVerwijderenIk heb al heel veel aan je Lay-out artikelen gehad! Alleen, als ik mijn zoekbalk toevoeg, dan krijg ik als je zoekt een heel lelijk vlak bovenaan mijn blog, hierin staan dat de zoekresultaten. Hoe kan ik dat veranderen?
BeantwoordenVerwijderencharliesblogposts.blogspot.nl
Heel erg handig dankjewel! Zou je een keer uit willen leggen hoe je de top menubar hebt ingesteld?
BeantwoordenVerwijderenFijne tips, dankje! Ik vroeg me af hoe je het doet hoe iets in de menubar uitklapt als je de muis er overheen doet. Dus als bij jou als je de muis op 'Categorieën'of 'Volg Coco Gold' zet dan klapt hij uit en komen er allemaal links onder. Ik vraag me al een paar maanden af hoe dat nu moet en heb ook meerdere dingen geprobeerd, maar ik weet bijvoorbeeld ook niet waar ik op moet zoeken haha. Hoop dat je me kunt helpen :) liefs
BeantwoordenVerwijderenHee Nicole,
BeantwoordenVerwijderenIk heb een vraagje. Hoe maak je van die witte blokken voor elke blog? Jij hebt gewoon een achtergrond ( creme ) en elke blog staat in een wit blok.
Hoe doe je dat?
Lfss
Goede tips! Ik heb nog een vraag: hoe krijg je de datum onder de post titel?
BeantwoordenVerwijderenxx
super bedankt voor deze tips! zocht al heel lang naar een uitleg over het centreren van je datum en berichtkop maar kon het nergens vinden. Dus heel erg bedankt, het is nu eindelijk gelukt!
BeantwoordenVerwijderenliefs Anouk
www.lovefashionmuse.blogspot.com
Wauw, ik ben hier te blij mee, weet je heel heel misschien ook hoe je je menu met home, over mij en blabla moet centeren. Ik hoop dat je nog meer artikels hier over maakt je bent mijn held namelijk nu!
BeantwoordenVerwijderenHoi! Wauw, wat ben ik blij met deze tips, bedankt! Het lukt mij alleen niet om de afbeeldingen van de social media buttons te uploaden op tinypic.. Heb jij misschien enig idee hoe dit komt? Ik heb alles al geprobeerd maar het lukt me niet..
BeantwoordenVerwijderenVoor de rest echt super tips, hier zocht ik al een tijdje naar! (:
Wat een handig en overzichtelijk artikel is dit, ik denk dat veel bloggers hier veel aan zullen hebben. Ikzelf heb geen blog, maar ik vind het wel erg leuk om te schrijven over social media en online marketing enzo, dus wie weet begin ik er ooit eens een!
BeantwoordenVerwijderenSuper handig!! Ik ben echt een leek in dit onderwerp. Hoe fix je een mooie titel? (Bovenaan waar de naam van je pagina staat?
BeantwoordenVerwijderenBedankt! Superhandige tips. Misschien is het een beetje een oud artikel, maar ik heb alsnog een vraagje. En ik hoop dat je hem beantwoorden kunt. Mijn vraag is, Hoe kan je je 'Geen opmerkingen' balk ding, achtig iets centreren? Ik heb nu alles mooi in het midden, maar die opmerkingen willen maar niet meer werken. Dit staat heel lelijk en daar wil ik iets aan doen. Ik zoek nu al twee dagen heel internet af, maar geen enkele code werkt. Kan je helpen?
BeantwoordenVerwijderenMocht je niet begrijpen wat ik precies bedoel met 'geen opmerkingen' als je op mijn site bent, valt het zeker op.
www.beautybynienke.blogspot.nl
Super goed artikel! Titel en datum staan nu mooi in het midden! Weet jij ook hoe ik mijn tabbladen in het midden kan krijgen? Heeft iemand tips?
BeantwoordenVerwijderenwww.easydailyfood.com
-Marijke-
Trouwens, ik vind jouw reactiebox er mooier uit zien qua kleuren dan de standaard layout. Idee voor nog een artikel? :)
VerwijderenSuper handig, thanks!
BeantwoordenVerwijderen