Posts

Showing posts with the label Posts

Shuffle the order of my posts

There was an  interesting question  posted in the forums recently by a user named Gayathri, where he was hoping to shuffle the order in which his posts appear. This is achievable, so far as I can see, one of two ways - custom markup (server-side shuffling) or JS (client-side shuffling). However, because the output of any given server-side render might be cached, for the next viewer, the shuffled output order would persist, and each viewer would only see the same (random) order. JS Shuffling We can shuffle the content once the page has loaded on the client, which would produce a different result for each view. Note that this does have the downside of potentially causing content jankyness, but should execute fast enough not to be noticed by the reader. We shuffle the order of posts by removing and re-inserting sibling posts in a random postion. See the  MDN general sibling selector  documentation for more detail. var posts = document.querySelectorAll( '.po...
1 comment
Read more

Make Google Photos img tags responsive

Image
Blogger, like Google Photos, has great photos handling which allows you to resize an image just by tweaking its URL, which can be incredibly useful for using dynamic images to ensure that your mobile readers aren't downloading MB of data over their mobile network. URL Size Parameter Take, for example, a panoramic image that I took of the coliseum in Rome. Its original size is a whopping 4.6MB - overkill for any mobile client viewing it. Even on an iPhone 6+, we're talking 1920x1080 res, when the original image itself is 8682x2630. Uploading the image to Blogger and adding it to this post, we see straight away the resizing behaviour in action. The image above is the default size when you insert into blogger's post editor: 320px wide. The URL is: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgLw0X4x4JCco_ogwQMt44xWIEP9dhtNmAAHBTxSQoixIVBMt0EQRpUbIBOwYoQlR5BJzUOyqt-UUAtUti_u86nQbyb01pzcixAXofDM9b_RacvC2IjbVJ-U9rHi0SeXb48cNcUMatejI/ s320 /PANO_...
1 comment
Read more

Make post title hyperlinks colour the same as the title colour

Image
In the template designer, some templates have a different colour for hyperlinks than for the title. We can re-use the same variable value in order to override the hyperlink colours with the post title colour. Note: This example is done for the  Simple  template. CSS variables and definitions may be quite different in other templates, but the same concepts apply. Change the Skin CSS Skin CSS can be found when editing your template's HTML, under Template => Edit HTML. The skin for a template is near the top, in the <head> element. Add a variable for post.title.color Find the variable group relating to the class of the post titles - for example, in 'Simple' templates, the variable group has description="Post Title". Add the new variable. <Group description="Post Title" selector="h3.post-title, .comments h4"> <Variable name="post.title.font" description="Font" type="font"...
Post a Comment
Read more

Filter out certain labels from my Blog Homepage

Image
Sometimes, you want to be able to filter your posts on the homepage. Maybe you want to use the label "Home" to be the only posts that show on the homepage, or maybe you don't want to show your "Cooking" and "Dancing" posts on the home page. Here's how you can filter by label. Notes:  This does not require any javascript! This  does not apply to Dynamic Views templates. This will look funny if you have posts grouped by date, as there will be dates with no posts. WARNING: This method will filter blogs of a certain label out of a list of all the posts that were loaded. So, if you only load the first 7 posts in your feed, and then filter to "Home" posts, you're going to only see the posts out of the first 7  which have the label Home. You can, of course, increase the number of posts shown in the home-page , but do so with the knowledge it could slow the homepage on your blog down! Filtering to Posts with a specific Label ...
1 comment
Read more

Increase the number of posts shown on the home page

Image
Sometimes, you might have enormous posts, and only want to show two or three on the home page. Other times, you might have posts which are just videos , so you want to show a bigger number. Or maybe you need to increase the number so that the filter on your home page shows a decent number or results. 'Show at most' Setting The Show at most  setting is found under Settings => Posts and Comments => Show at most . Change the Show at Most  setting to show a different number of posts on the home page Warning: Changing this setting to a large number will slow down the load time for your blog!  Blogger is pretty good at caching the results of a rendered page, but it still takes ten times as long if it has to load 50 posts versus loading 5. Change with caution! Happy Blogging
Post a Comment
Read more