Lay-out in HTML en CSS #2 comment box boven comments, powered by blogger weghalen en meer!

04 december 2015


Hi allemaal!
Omdat mijn vorige HTML en CSS tutorial heel goed ontvangen werd heb ik ervoor gekozen om een deel 2 te maken! In dit deel zie je o.a. hoe je je read more button centreert installeert, hoe je je comment box boven je comments kan plaatsen zodat je lezers niet meer naar beneden hoeven te scrollen en nog wat andere dingen, kijk je mee?

Read more button centreren.
Ga naar blogger->sjabloon->aanpassen->geavanceerd->CSS toevoegen en plak deze code in je CSS:  

 .jump-link {
text-align: center;
}

Abonneren op berichten (Atom) weghalen.

Ga naar blogger->sjabloon->HTML bewerken en zoek naar deze code:

<!-- feed links-->

<b:include name="feedLinks"/>

Die haal je weg en je ziet het niet meer staan!

Je comment box boven de comments neerzetten.
 Zoek deze code op:
<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>
Verwijder deze code en plak op de plaats van de verwijderde code 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>
Gelukt? Ga dan nu op zoek naar deze code: </body>  en plak deze code er DIRECT boven:

<!-- comment form before comment content starts -->

<script src='http://code.jquery.com/jquery-latest.js'/>

<script>

var yob = $(".comment-replybox-thread").closest(".comment-thread").parent("div").children(".comment-thread").children(".comment-replybox-thread");

jQuery('.comment-thread ol').before(jQuery(yob));
</script>
<!-- comment form before comment content ends -->
En dan is het klaar!

 De gestipte en de gewone lijn weghalen (onderaan als je het sjabloon simple gebruikt)
Ga naar blogger->sjabloon->aanpassen->geavanceerd->CSS toevoegen als je daar bent plak je deze code in je CSS en die lelijke lijnen zijn weg!

.footer-outer {
border: none;
}

.blog-pager {
background: none;
}


Powered by blogger (onderaan je blog) verbergen.
Plak deze code in je CSS:

#Attribution1{
display: none;
}
Zo dit was het dan voor deze keer! Ik hoop dat jullie er wat aan gehad hebben! 
 

9 opmerkingen

  1. Hi!

    Kun je uitleggen hoe je je blogarchief centreert?
    En hoe je die zoekbalk hebt gedaan?

    Liefs Annemae

    BeantwoordenVerwijderen
  2. Dat komt in mijn volgende tutorial!

    BeantwoordenVerwijderen
  3. I read your post and need to thank you for sharing such pleasant lines about the travel Ft Myers. Be that as it may, I likewise need to instruct you to share more data as I had needed to peruse all the more yet didn't get acceptable substance from anyplace. websites design service

    BeantwoordenVerwijderen
  4. Hee, ik heb geprobeerd om deze code in de hmlt te vinden:

    maar ik kan 'm niet vinden, is er een truckje zodat je zoiets gemakkelijk kunt vinden? ^-^

    BeantwoordenVerwijderen
  5. Oh ja en die laatste werkt bij mij niet? (het kan ook aan mij liggen want ik ben hier best wel slecht in xd)

    BeantwoordenVerwijderen
  6. Oh ja en die laatste werkt bij mij niet? (het kan ook aan mij liggen want ik ben hier best wel slecht in xd)

    BeantwoordenVerwijderen

Latest Instagrams

© Inspiregirll. Design by Fearne.