HTML-cursus #4: Comment-box bovenaan en een Instagram-widget

dinsdag 4 maart 2014 |




Ik heb besloten eens naar mijn reacties te kijken, ik heb een aantal verzoeken gekregen voor een nieuwe HTML-cursus. Ik krijg er sowieso veel reacties op: bloggers vinden het leuk en gebruiken het vaak! Dus, hier alweer deel 4 van de cursus. Hierin ga ik vertellen hoe je een gadget met Instagram-foto's aan je blog toevoegt. Ook ga ik een tutorial geven over hoe je het reactievakje (van Blogger!) bóven de comments zet, in plaats van eronder. Op deze manier hoeven je lezers niet langs de bestaande reacties te scrollen om zelf een reactie achter te laten. Twee kleine, maar toch ook leuke en handige dingen! Klik op 'lees verder' voor de uitleg.

Edit: let op, mogelijk werkt onderstaande tutorial niet meer!

Zo zet je de comment-box in Blogger bovenaan je reacties: 
Ga naar Blogger > Sjabloon > HTML bewerken en zoek naar dit stukje in je HTML-code met CTRL + F:

<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>


Gevonden? Verwijder deze code en plak hier een nieuwe code, deze:

<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>

Zoek nu (CTRL + F) naar:

</body> 

Plak de volgende code direct boven </body>:

<!-- 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 -->


Je bent klaar! Als het goed is staat het reactievakje nu boven de reacties, en meteen onder je blogpost. 

Zo voeg je een Instagram-widget aan je blog toe:
Dit werkt allemaal met de site snapwidget.com. Heel easy. Gratis en je kunt 'm helemaal maken zoals je wilt. Een Instagram-widget is een deel van je site waarin je je foto's van Instagram laat zien, in bijvoorbeeld een slideshow of bord. Zorg er trouwens voor dat je je Instagram op openbaar hebt staan, anders kun je de widget niet gebruiken. Het gedeelte van de widget maken wijst zich eigenlijk vanzelf:





Overal staat achter wat het precies inhoudt. Klik op 'preview' wanneer je klaar bent, om te zien hoe het eruit gaat zien. Tevreden? Klik dan op 'get widget'. De code komt in beeld. Selecteer de code en kopieer 'm. Waar moet je 'm nu plakken? Dat ligt eraan, waar jij 'm wil hebben. Ga eerst naar Blogger > Indeling. Wil je de widget in de sidebar hebben? Klik dan in de sidebar op 'een gadget toevoegen' en kies HTML/Javascript. Plak de code hier, en sla op. Wil jij je gadget onderaan je blog hebben? Doe dan hetzelfde, maar voeg een gadget toe aan het onderste gedeelte bij de indeling.

Simpel, eigenlijk. Ik vind het een leuke toevoeging aan je blog, die Instagram-foto's! Ikzelf heb ze in mijn footer. Ik heb gekozen voor 'scrolling', hiermee kun je lekker scrollen door de foto's, door middel van pijlen. Try it out!

Laat me weten of het is gelukt! Volgende keer alweer de laatste HTML-cursus... X, Luna

28 opmerkingen:

Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥

  1. Handig! Vind het zeker handig dat je niet eerst alle reacties langs moet! Vooral als je veel comments hebt.

    BeantwoordenVerwijderen
  2. Tsja, ik zit bij wordpress, hihi!

    BeantwoordenVerwijderen
  3. Hallo Luna,
    Ik vind je html cursussen heel leuk. Zou je in je volgende cursus uit kunnen leggen hoe je social media iconen toevoegt?
    Alvast bedankt

    BeantwoordenVerwijderen
  4. Echt heel erg handig, ik heb hem gelijk toegepast op mijn blog, dankjewel!

    Liefs, Kim.

    BeantwoordenVerwijderen
  5. Wat handig zeg! Luna ik vroeg me af hoe je meer lezen mooi maakt?

    BeantwoordenVerwijderen
  6. Wat leuk! Ik ga ze zeker gebruiken!

    BeantwoordenVerwijderen
  7. Yes het commentvakje is weer gelukt! :D Ik vind jou uitleg zo handig en fijn, als ik het ga opzoeken op andere sites is het altijd zo moeilijk en kan ik niets vinden dan dat er aangegeven staat in mijn html. Ik zou het trouwens de volgende keer heel tof vinden om te zien hoe je een opacity in je afbeeldingen krijgt, die jij ook hebt. Dat 'ie langzaam faded zegmaar, ik heb nu een hele snelle maar vind ik persoonlijk niet zo heel mooi. Krijg het ook nergens gevonden, dus lijkt me leuk als jij dat doet zodat ik er makkelijk uit kom :) Liefs, Sharon

    BeantwoordenVerwijderen
  8. De eerste is wel erg handig, misschien ga ik die gebruiken.

    Liefs
    Daniëlle

    BeantwoordenVerwijderen
  9. Superhandig weer! Heb het allebei geprobeerd en het is gelukt :), echt bedankt voor je uitleg! Je legt het allemaal heel duidelijk uit, ik heb echt heel veel aan je HTML-cursus gehad, jammer dat de volgende keer al weer de laatste keer is

    BeantwoordenVerwijderen
  10. heel fijn, alleen nog niet helemaal gelukt maar dat komt nog wel. maar ik weet niet op welke regel je moet zoeken. ik zou het leuk vinden als je voor de volgende html cursus het lees verder tekentje en de pijl dat je naar de vorige blog post gaat.

    meike

    BeantwoordenVerwijderen
  11. Heel erg handig. Je bent echt geweldig in dit soort dingen!

    BeantwoordenVerwijderen
  12. Wat handig, de instagram widget had ik al, maar niet op jouw manier. Is echt leuk zo!

    BeantwoordenVerwijderen
  13. Altijd handig die Html cursus! kan je ook vertellen hoe je bij opmerkingen je eigen tekst kan neerzetten? zoals jij hierboven hebt gedaan: 'Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥'
    liefs Anne

    BeantwoordenVerwijderen
  14. Echt heel leuk dat je weer een HTML-cursus hebt! Ik vind het altijd heel handig en leuk om mee te spelen :)
    Xxx Sarah

    BeantwoordenVerwijderen
  15. Hey Luna!
    Zou je de volgende keer willen laten zien hoe je de 'meer lezen' button in een 'lees verder' button veranderd? Kusjes Feride
    Website: www.mymessy-world.blogspot.com

    BeantwoordenVerwijderen
  16. www.xlovelyworldx.blogspot.com13 maart, 2014

    Aaah echt super bedankt! Snapt eerst niet zoveel van html codes, maar dankzij jouw...!! You are the best. Heb nu het reactieformulier boven aan gezet. Veel handiger!

    BeantwoordenVerwijderen
  17. Ηandige cursussen Luna!! Helpt me goed! xx

    BeantwoordenVerwijderen
  18. Handig! En hij werkt gewoon! Ik heb alleen wel een klein vraagje, bij mij krijg je op het effect 'scrolling' maar 3 foto's zichtbaar zijn (en jij hebt er 5), waardoor hij dus kort/smal is. Hoe maak je daar meer foto's van?

    BeantwoordenVerwijderen
  19. Wauw, ik heb zoveel gehad aan je HTML cursussen. Super leerzaam. Mocht je er meer doen, ik volg je op de voet! Echt top!!

    BeantwoordenVerwijderen
  20. heey Luna, ik heb nog niet zo lang een blog en ik moet nog veel dingen uitvinden.. vooral met html.. ik snap er helemaal niets van ik probeer jou begin te vinden maar het lukt niet, dat met ctrl f?! wat is dat ik heb het maar geprobeerd met mijn ogen gewoon te scrollen maar ik kan het steeds niet vinden.. HELP ME! haha

    BeantwoordenVerwijderen
  21. owjah,... Luna ik heb niet jouw naam afgepakt ik had hem zelf bedacht en toen vond ik jou blog via weer een ander blog waar je gereageerd had. xxx Anna van Annaslovelyworld

    BeantwoordenVerwijderen
  22. Weet je toevallig ook hoe je een eigen commentbox/reactieformulier kan toevoegen in Blogger? Ik vind je tips namelijk erg handig en duidelijk omschreven! Ben zelf ook een beautyblog begonnen!

    BeantwoordenVerwijderen
  23. Niet gelukt met de reactiesbox, ben nu de hele reactiebox kwijt, HELP :(!!!

    BeantwoordenVerwijderen
  24. Weet je ook toevallig hoe je de lettergrootte van 'opmerkingen' aan kan passen en hoe je de nieuwste reacties bovenaan krijgt? Bij mij staan ze onderaan. Nog bedankt voor dit. ♥

    BeantwoordenVerwijderen