HTML • 2

maandag, november 30, 2015 |
"HTML en CSS, watte?" Zo dacht ik erover toen ik deze blog begon. Maar nu zes maanden later kan ik zeggen dat ik het een beetje doorheb hoe de computertaal in elkaar zit. Ik beantwoord hieronder een aantal vragen van jullie! O wee als er nu nog eens iemand zegt dat het moeilijk/onmogelijk is om iets moois te maken van je Blogger lay-out. Die krijgt een pak rammel van mij.


Dit kan allemaal een beetje overweldigend klinken/eruit zien. (Aangezien ik niet steeds lappen tekst wil schrijven waar je CSS is etc.) Vandaar dat ik over een paar dagen een aparte HTML/CSS pagina zal maken waar ik de echte basis dingen zal uitleggen.
Download altijd even je template! (→Sjabloon→Back-up/herstellen→De volledige sjabloon downloaden)


Hoe pas je de grootte aan van de afbeeldingen van je populaire berichten?
Ga naar de HTML template van je blog.
Klik er één keer in en druk ctrl+f typ in dat zoekbalkje </head>
Boven </head> plak je onderstaande code.

<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {
  // verander onderstaande getal 100 in een getalletje naar keuze, dit wordt dan het getal van de breedte en de hoogte van de afbeelding
  var dimension = 100;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});

//]]></script>




Hoe zorg je ervoor dat er een scrollbalkje komt in je blogarchief?
Onderstaande code plaats je in je CSS (→Sjabloon→aanpassen→Geavanceerd→CSS toevoegen)
#Blogarchive1 .widget-content{ height:200px; /*Het getal 200 kan je aanpassen naar een ander getal, dat zorgt voor de hoogte van je blogarchief*/
width:auto;
overflow:auto;  }



Hoe krijg je je blogarchief op een aparte pagina?
Je maakt een nieuwe pagina aan. Daar zie je links een knopje HTML staan, daar klik je op en daarin plaats je onderstaande code. (Credits klik klik)


<script type="text/javascript">

function LoadTheArchive(TotalFeed)
{
    var PostTitles = new Array();
    var PostURLs = new Array();
    var PostYears = new Array();
    var PostMonths = new Array();
    var PostDays = new Array();
    if("entry" in TotalFeed.feed)
    {
 var PostEntries=TotalFeed.feed.entry.length;
 for(var PostNum=0; PostNum<PostEntries ; PostNum++)
 {
     var ThisPost = TotalFeed.feed.entry[PostNum];
     PostTitles.push(ThisPost.title.$t);
     PostYears.push(ThisPost.published.$t.substring(0,4));
     PostMonths.push(ThisPost.published.$t.substring(5,7));
     PostDays.push(ThisPost.published.$t.substring(8,10));
     var ThisPostURL;
     for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
     {
  if(ThisPost.link[LinkNum].rel == "alternate")
  {
      ThisPostURL = ThisPost.link[LinkNum].href;
      break
  }
     }
     PostURLs.push(ThisPostURL);
 }
    }
    DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}

function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
    var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
    var NumberOfEntries=PostTitles.length;

    var currentMonth = "";
    var currentYear = "";

    for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
    {
 NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]

 if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
  currentMonth = NameOfMonth;
  currentYear = PostYears[EntryNum];

  document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
 }

  document.write('<a href ="'+PostURLs[EntryNum]+'"><div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+":&nbsp;&nbsp;</div> "+PostTitles[EntryNum]+"</a><br />");
    }
}
</script>

<script src="http://annebrittures.blogspot.be/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=LoadTheArchive" />
</script>

<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
     color:#000;
     font-weight:bold;
     font-size: 15px;
     font-family: Playfair display, sans-serif;
     margin: 0;
}

.dayStyle {
     color:#000;
     font-weight:bold;
     font-family: Playfair Display, sans-serif;
     display: inline-block;
}

</style>


Hoe verander je lettertypes in Blogger?
Deze is best simpel! Je zoekt naar de CSS code van hetgene dat je wilt veranderen. Bv. je wilt het lettertype aanpassen van je titel. De CSS code daarvan is: h3.post-title{
De standaard code om je lettertype aan te passen is deze font-family: LETTERTYPE; }
Als je beide bij elkaar plakt krijg je dit
h3.post-title {
font-family: LETTERTYPE;
}
Die code plak je dan in je CSS en tada!



Hoe krijg je de commentbox bovenaan?
Je gaat naar je HTML template (→Sjabloon→HTML bewerken) klikt er één keer in
Typ dan ctrl+f, in dat zoekbalkje plak je dit nonewcomments. Klik twee keer op enter. Daar zie je dan deze code staan.

<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>

Die code verwijder je en vervang je door deze code

<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>


Is er toch nog iets onduidelijk? Laat maar weten! Of zit je nog met een vraag, vraag het! Ik bijt niet.

Liefs,
Britt 

20 opmerkingen :

  1. Ik wilde al heel lang mijn commentbox verplaatsen, is kijken of dit lukt! Bedankt voor de tips! x

    BeantwoordenVerwijderen
  2. Super handig weer dit artikeltje echt erg fijn! Ik heb alleen echt een hele stomme vraag waar staat dat zoekbalkje kan hem echt werkelijk waar nergens vinden.

    liefs, Roos

    BeantwoordenVerwijderen
  3. Geweldig dat er een tweedje artikeltje gekomen is, ik hou van de manier waarop je dingen uitlegt en nog eens bedankt voor al dat werk aan mijn blogje!!

    BeantwoordenVerwijderen
  4. Oh Britt! Dankjewel, je hebt me weer wat verder geholpen!

    BeantwoordenVerwijderen
  5. Ik vind het zo tof dat je deze artikelen maakt om anderen te helpen :) Vind het bijna jammer dat ik geen Blogger meer gebruik om hiermee te experimenteren. Dat experimenteren met Wordpress is namelijk nog wat onwennig. Je hebt wel 100% gelijk dat je veel met Blogger kunt, je hebt iets heel moois gemaakt van je lay-out! <3

    BeantwoordenVerwijderen
  6. Oh, wat een handig artikel. Bedankt voor het delen!

    xoxo
    www.its-dash.com

    BeantwoordenVerwijderen
  7. YEAH DIT IS ZO HANDIG!! Thanks for sharing!!!! Ik heb aan de ene kant wel zin om weer bezig te gaan met HTML en CSS, maar aan de andere kant is het ook weer veel werk want als het een veranderd, wil ik het andere ook anders..... En dan vind ik mijn lay out opeens toch nog wel okay :)

    BeantwoordenVerwijderen
  8. Wat ben je toch een kanjer, Britt! Ik zou net zo goed Arabisch kunnen lezen, html is écht niet voor mij weggelegd. Superhandige post dit! Maar ik vraag me nog 1 dingetje af: hoe krijg je van die mooie lijnen in je artikelen, zoals jij hier boven elk kopje hebt staan? Liefs!

    BeantwoordenVerwijderen
  9. Zo goed dat je dit deelt én dat je het kan uberhaupt! Echt leerzaam :)

    BeantwoordenVerwijderen
  10. leuk zo hebben we alweer iets bijgeleerd. hoe je dat allemaal voor elkaar krijgt! chapo

    BeantwoordenVerwijderen
  11. Super tof dat je dit post. Heel handig voor iemand zoals mij, die totaal niks van HTML codes kent. Dus bedankt :)

    BeantwoordenVerwijderen
  12. Heel erg handig Britt! Html en Css beginnen stilaan hun geheimen prijs te geven bij mij, bij jou zo te zien ook! Zelf maak ik niet echt gebruik van een blogarchief en populaire berichten, maar wel leuk voor de mensen die dit wel gebruiken! Ik hoop dat we ooit eens samen naar zo'n codeercursus kunnen gaan! (:

    BeantwoordenVerwijderen
  13. Liefd evoor jouw HTML artikelen Britt. Ik ga op een vrije middag gelijk even aan de slag met die lettertypes en de commentbox. Vooral die letterttypes heb ik al zo vaak geprobeerd, maar het mislukte altijd.

    BeantwoordenVerwijderen
  14. wow wat super dat je dit met ons deelt echt zo bedankt! Ik vind dit echt heel interessant om te lezen :)
    x

    BeantwoordenVerwijderen
  15. Heel handig en heel fijn en duidelijk uitgelegd! Hoe kan ik het standaard formaat van foto's aanpassen en dan bedoel ik niet zoals in een artikel dat je extra groot enzo aan kan klikken?

    BeantwoordenVerwijderen
  16. Hmm, zowel de afbeeldingen van populaire posts groter maken als de commentbox verplaatsen lukt bij mij niet. Snap niet wat ik verkeerd doe, CSS werkt eigenlijk altijd als ik iets aanpas maar HTML negen van de tien keer niet!

    BeantwoordenVerwijderen
    Reacties
    1. Ik stuur je anders even een mailtje! Dan kan ik kijken wat je misschien fout doet!

      Verwijderen
  17. Hoe moet je zo'n dropdown menu (volgens mij heet het zo. Ik bedoel dat balkje bovenaan met home, about, enz.) aanpassen? Met ander lettertype enzo. Je hebt echt een leuk blog!

    BeantwoordenVerwijderen