HTML & CSS #7 Instagram widget en pagina nummering

01 februari 2016


Alweer het 7e deel uit deze serie! Vandaag laat ik jullie zien hoe ik het Instagram widget op mijn blog heb geplaatst en hoe ik de pagina nummering heb toegevoegt!

Instagram widget
Ga naar http://snapwidget.com/ en klik op 'get your free widget' als je de instellingen zo hebt gekregen dat het er helemaal naar jou smaak uit ziet (klik op preview) dan klik je op 'get widget' dan krijg je een code. Dan ga je naar Blogger-->indeling-->een gadget toevoegen-->HTML JavaScript en plak die code daar, klik op indeling opslaan en je bent klaar!

Pagina nummering toevoegen
Als je het Simple sjabloon hebt heb je de stomme 'nieuwere pagina, oudere pagina' gelukkig is er een optie om het te veranderen in een mooiere, overzichtelijkere pagina nummering!

Ik heb het zelf met een tutorial  gedaan maar die is in het Engels, dus ik zal het nog een keer uitleggen maar dan in het Nederlands!

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

]]></b:skin>

Plak vervolgens de volgende code daar boven:

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Let op: dit is een code die je zelf kan veranderen, bijvoorbeeld in de eerste zin: text-align:center; wil je hem links uitgelijnd hebben? Haal center weg en typ: left, zo kan je ook de kleuren veranderen waardoor je hem nog meer naar jou smaak kan maken! 

Klaar? Zoek dan deze code op:

</body>

Plak dan deze code er boven:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Note: de dingen die in het rood staan kan je veranderen naar jou smaak!
Dit is wat ze betekenen:

 perPage=7: hoeveel artikelen je op een pagina wilt weergeven (dit kan het beste hetzelfde getal zijn als het getal in de eerste, lange code, zie eerste regel, padding:7
numPage=6: hoeveel cijfers er in je pagina nummering hebt staan
Last, previous, next, daar kunnen mensen op klikken, wil je dat er 'volgende' staat? Verander dat gewoon naar de tekst die jij wilt.

Ga dan op zoek naar deze code:

expr:href='data:label.url'

En vervang dat voor deze code:

 expr:href='data:label.url + "?&amp;max-results=7"'

Die 7 is van de 7 van hiervoor, als je het 7 hebt gelaten hoef je het niet te veranderen, heb je het bijvoorbeeld veranderd naar 5? Verander deze 7 dan ook naar 5.

En dan ben je klaar! Kijk of het allemaal goed is gegaan en sla dan pas je sjabloon op! Is het je niet gelukt? Je kan altijd vragen stellen in de comments!  

 



 

3 opmerkingen

  1. Ohh, lijkt me zo'n leuke code, voor pagina nummering, maar bij mij werkt-ie niet...

    BeantwoordenVerwijderen
  2. Hier staat het ook uitgelegd, misschien werkt hij dan wel! https://helplogger.blogspot.nl/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html

    BeantwoordenVerwijderen

Latest Instagrams

© Inspiregirll. Design by Fearne.