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

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