ander lettertype blogtitel

♥ de laatste keer dat ik een html tutorial plaatste is echt alweer veel te lang geleden (april). geen idee waarom ik er zo lang geen heb geplaatst, want ik vind het leuk om de tutorials te maken, jullie op die manier te helpen en daarbij heb ik er nog een aantal in het archief zitten voor jullie. vandaag een tutorial met hoe je je blogtitel een ander lettertype geeft (nee, niet een andere standaard lettertype)

01. als eerste ga ja naar google fonts en daar zoek je het lettertype uit dat je graag wilt gebruiken als lettertype voor je blogtitel.
02. als je er een gekozen hebt klik je op de quick-use button (zie bovenstaande afbeelding).
03. dan kom je op bovenstaande pagina waar je nog wat kleine aanpassingen doet aan je lettertype.
04. dan ga ja naar sjabloon > html bewerken. dan zoek (ctrl+f) je het volgende op; <head>
04. hieronder plak je de code die bij nummer 3 staat op de pagina van google fonts (zie bovenstaande en onderstaande foto). 
05. let op.! bij bovenstaande code moet je nog even één kleine aanpassing doen. op het einde van de code moet nog een / tussen. het einde van de code ziet er dan zo uit; type=’text/css’/>
06. dan zoek (ctrl+f) je op blogger het volgende op h3.post-title {
07. hieronder vervang je het woordje font voor de code die bij nummer 4 staat op google fonts (zie bovenstaande en onderstaande foto). onder de regel die je net hebt geplakt, plak je de volgende code font-size: 48px; het aantal pixels pas je aan naar wens, dit bepaalt de grootte van het lettertype.
08. ten slotte klik je op sjabloon opslaan en ben je klaar.
♥ heb jij wat gehad aan deze uitleg.?

tekst andere kleur geven bij selecteren

aan de hand van een tutorial laat ik jullie vandaag zien hoe je je tekst een andere kleur kunt geven als het geselecteerd wordt (probeer maar eens een stuk tekst te selecteren op mijn blog).

ga naar je blogger dashboard, klik in het linker menu op sjabloon en dan op aanpassen. dan krijg je een nieuw scherm met links bovenaan weer een menu, daar klik je op geavanceerd, dan komt er rechts van het menu een ander menu te staan, scroll hier helemaal naar beneden en ga naar css toevoegen. weer rechts van dit menu krijg je een wit vak, daar plak je de volgende code;

::-moz-selection {     background-color: #000000;     color: #fff; } ::selection {     background-color: #000000;     color: #fff; }

het volgende #000000 vervang je voor een kleur naar keuze, dit is de achtergrondkleur. #fff is de tekstkleur. let op, de kleurcodes moeten beiden twee keer ingevuld worden. aan de hand van dit schema kun je makkelijk en snel kleurcodes opzoeken.

vergeet niet om rechts bovenaan op toepassen op blog aan te klikken en dan ben je klaar.

♥ volg jouvence via bloglovin’

blogtitel centreren

mijn laatste html uitleg die online kwam dateert uit begin februari, inmiddels zitten we in eind april en al die tijd heb ik geen html tutorials meer gemaakt, terwijl ik dit juist erg leuk vindt om te maken. daarom vandaag een simpele html tutorial, waarin ik laat zien hoe je je blogtitel centreert.

dit is zoals het er nu uitziet, als het goed is staat de blogtitel helemaal links bovenaan het artikel gecentreerd.
 
ga naar blogger, klik links in het menu op sjabloon en dan op html bewerken. ga met je muis in de html staan en zoek (ctrl + f) de volgende code; ]]></b:skin>
 
als je bovenstaande code gevonden hebt, haal je deze weg en vervang je het voor de volgende code;
 
h3.post-title { text-align:center; }

]]></b:skin>

 
sla je sjabloon op en je titel is gecentreerd. als het goed is staat de blogtitel nu in het midden gecentreerd.
♥ hebben jullie wat aan deze uitleg gehad.?

social media buttons

vandaag leg ik jullie uit hoe je social media buttons/icons maakt die aanklikbaar zijn, omdat ik deze vraag toch vrij regelmatig via de mail krijg. social media is erg belangrijk voor je blog, je wilt natuurlijk dat anderen je op zoveel mogelijk manieren kunnen volgen.!

ten eerste moet je ervoor zorgen dat je social media buttons hebt, deze kun je bijvoorbeeld zoeken op google – afbeeldingen – ‘social media buttons’. je krijgt dan waarschijnlijk heel veel social media buttons in één afbeelding. sla de afbeelding op en open hem in paint of photoshop, zo kun je de buttons die jij gebruiken wilt uitknippen en in een nieuw bestand opslaan. zorg ervoor dat je elke social media button één voor één uitknipt en opslaat.

01. ga naar je dashboard en klik in het linkermenu op indeling.

02. klik dan op een gadget toevoegen.

03. dan verschijnt er een nieuw scherm, je moet dan even iets naar beneden scrollen en dan  html/javascript toevoegen.

04. dan verschijnt er weer een nieuw scherm; html/javascript configureren.

05. in het vakje inhoud plak je de volgende code;  <a href=”URL Pagina”><img src=”URL IMG” /></a>  deze code plak je voor elke social media button. dus heb je 3 buttons, dan plak je bovenstaande code 3 keer achter elkaar.

06. via tinypic kun je je social media buttons uploaden. klik op bladeren, zoek je bestand en klik op nu uploaden!

07. als tinypic klaar is met uploaden, krijg je vier linkjes. gebruik de directe link voor lay-outs.

nu gaan we de code iets aanpassen. op de plek waar nu staat url pagina komt de link waar de afbeelding naartoe moet gaan, bijvoorbeeld facebook, bloglovin of instagram. op de plek waar nu staat url img plak je de directe link die je net van tinypic gehaald hebt. let er op dat je de goede link, bij de juiste afbeelding plaatst.!

helemaal klaar.? klik dan op opslaan en rechts bovenin op indeling opslaan.

wil je je buttons in het midden centreren in plaats van links uitlijnen.? plaats dan voor de code die je al hebt dit; <center> en aan het einde van de code;  </center> dit. heb je de code er vijf keer staan, dan moet je dit dus ook bij elke code apart weer doen.

volg Jouvence via bloglovin.

meer lezen button

een ‘meer lezen’ button in plaats van een standaard tekst.? dat kan.! en ik ga ja vandaag daarbij helpen. de ‘meer lezen’ button, ook wel ‘read more’, ‘klik hier voor meer’, etc. je kunt er van maken wat je zelf wilt.!


het gaat om zoiets als op bovenstaande foto. zorg ervoor dat je zelf eerst een afbeelding zoekt of maakt via paint bijvoorbeeld. ik heb de mijne zelf gemaakt in hetzelfde lettertype als mijn header.

01. ga naar je dashboard en klik in het linker menu op sjabloon.
02. klik op html bewerken.
03. druk op ctrl + f, dan verschijnt er rechtsbovenin een zoekbalk. plak hierin onderstaande code en druk op enter.
 
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url + &quot;#more&quot;’ expr:title=’data:post.title’><data:post.jumpText/></a>
</div>
</b:if>
04. hij gaat naar de code toe waarnaar je hebt gevraagd. de eerste regel van de code is gecentreerd. dan ga je de code bewerken.
 
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url + &quot;#more&quot;’ expr:title=’data:post.title’><data:post.jumpText/></a>
</div>
</b:if>
 

het met lichtroze gecentreerde in de code vervang je voor;
<img
src=”hierdelinkvanjeafbeelding”/>b

05. ga naar een site waar je afbeeldingen kunt uploaden, bijvoorbeeld tinypic of imageshack. zelf heb ik tinypic gebruikt. klik op bladeren en zoek je meer lezen button die je in het begin hebt gemaakt. als je je afbeelding hebt gevonden klik je op openen en dan op nu uploaden!

06. dan duurt het een aantal seconden en dan krijg je het volgende te zien. kopiëer de directe link. dan plak je de directe link op de plaats van het met lichtroze gecentreerde tekst. 
<img src=”hierdelinkvanjeafbeelding”/>b

07. als je dat allemaal hebt gedaan klik je op sjabloon opslaan en dan heb je een ‘meer lezen’ button.

» alle tutorials zijn vanuit blogger gedaan, het kan dus zijn dat het op een andere site het niet werkt. hopelijk vonden jullie het een duidelijke uitleg. zijn er dingen die jullie graag uitgelegd willen zien.?  

blogpost breder/smaller maken

je kunt je blogpost en rechterzijbalk naar wens breder en/of smaller maken. en dat hoeft niet eens moeilijk te zijn.! in 4 stappen kun je de breedte al hebben aangepast. in deze post laat ik jullie zien wat je daarvoor moet doen.

01. ga naar je dashboard.

02. klik links in het menu op sjabloon en daarna op aanpassen.

03. dan kom je in de sjabloonontwerper van blogger. hierin klik je linksboven op breedte aanpassen.

04. dan verschijnt er in het midden bovenaan 2 balkjes. een balk voor je gehele blog en een balk voor je rechterzijbalk. in die balk staat een wit blokje, door hiermee te schuiven kun je de breedte van zowel je blogposts als je rechterzijbalk aanpassen. eronder kun je meteen zien hoe het op je blog eruit ziet. tevreden.? dan klik je rechts bovenaan op toepassen op blog en je bent klaar.!

♥ hopelijk vonden jullie dit een handige post.!

html | foto’s zonder randje

ik zat al een tijdje met het idee om uitleg posts te maken met dingen van blogger en bewerkingsprogramma’s onder het label; html. het leek me leuk en handig om mijn tips met jullie te delen met behulp van een duidelijke uitleg en afbeeldingen.

in deze eerste post een hele simpele html tutorial. door blogger krijgt elke foto standaard een kader eromheen, met behulp van deze simpele code haal je de standaard randjes/kaders rondom je afbeeldingen weg.


01. ga naar je dashboard en klik aan de linkerkant op sjabloon.

02. klik op aanpassen.
03. klik links op geavanceerd.
04. scroll helemaal naar beneden in het kleine menubalkje bovenaan en klik op css toevoegen.
05. je krijgt dan rechts van het menubalkje een vakje waar je css codes kunt invoeren.
06. plak de css code in het vakje (code onderaan deze post).
07. als de code erin staat druk je in het vakje op enter en dan rechts bovenin op toepassen op blog.
 
de css code
.post-body img, .post-body .tr-caption-container,
.Profile img, .Image img, .BlogList .item-thumbnail img { padding: none
!important; border: none !important; background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important; -webkit-box-shadow: 0px
0px 0px transparent !important; box-shadow: 0px 0px 0px transparent !important;
}
 
 
♥ dat is alles wat je moet doen om het randje/kader om je foto’s heen weg te krijgen. hopelijk vonden jullie het een handige en duidelijke uitleg. zouden jullie graag meer van dit soort posts willen zien.?