So, How do I...

Posts

Showing posts from 2015

Make Google Photos img tags responsive

July 08, 2015

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_

Change the colours of the Polls Widget

July 07, 2015

For some reason, the polls widget does not have settings for its colours in the configuration dialog. It seems to pick up its colors from template variables instead. Find or Add the variables The variable that the polls widget uses for its text color is sidebar.text.color - if this variable already exists in your skin, you will find it in the group that it belongs to. If it doesn't already exist, add it by copying this into the <b:skin> section of your blog's template ( Template => Edit HTML). <Group description="Poll Widget" selector="widget.Poll"> <Variable name="sidebar.text.color" description="Text Color" type="color" default="#2288bb" value="#2288bb"/> <Variable name="sidebar.link.color" description="Link Color" type="color" default="#2288bb" value="#2288bb"/> </Group> Add new variables if

Set a custom domain for your blog with BlueHost

March 28, 2015

A custom domain gives you a much more personal touch when it comes to publishing your blog. If you have an existing website, and want to use a subdomain to point at your Blogger blog, here's how to set one up if you're using BlueHost - though the same concepts apply to all domain vendors. Add your custom domain to your blog Navigate to Settings => Basic . The setting for adding your custom domain. Click '+ Set up a third-party URL for your blog'. Enter your custom domain, including the subdomain that you want to use. Currently, Blogger requires you to use a subdomain , with the option of redirecting the naked domain to that subdomain . Here's some examples to clarify what naked domains, domains, and subdomains mean. Say you own example.com as your domain. Top Level Domain: .com Naked domain (no subdomain): example.com Subdomain 'blog': blog.example.com If you then choose to redirect your naked domain to your blog's subdomain, visit

Make post title hyperlinks colour the same as the title colour

March 14, 2015

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"

Filter out certain labels from my Blog Homepage

March 11, 2015

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

Increase the number of posts shown on the home page

March 11, 2015

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

Change the width of the Sidebar in Dynamic Views

March 08, 2015

The default width of the sidebar truncates longer post titles, so it's good to be able to increase the size. Change the width custom CSS Custom CSS can be added to your blog under Template => Customise => Advanced => Add CSS. Dialog for adding custom CSS to your blog In this dialog, add the following styles. .sidebar #sidebar { width: 380px; } .sidebar #content { margin-left: 380px; } Custom CSS for making the Dynamic Views sidebar wider. Adjust the value to the size you want. Happy Blogging!

Disable particular views in Dynamic Views Blogs

March 06, 2015

Or: So, how do I hide some views from the dropdown in Dynamic Views blogs? Dynamic Views templates on Blogger are rendered client-side and designed to allow the user to select the way in which they want to view the blog. Some views are more appropriate than others though, so it would be good if there was a setting for which views to enable. Alas, we can hack in a little workaround in a couple of ways. Hide menu items with custom CSS Custom CSS can be added to your blog under Template => Customise => Advanced => Add CSS. Dialog for adding custom CSS to your blog In this dialog, add a display: none!important; style for any items you want to hide. li.Magazine { display: none!important; } Custom CSS for hiding the 'Magazine' view menu item. Comma separate the li.ItemName CSS selectors for all the items you want; the class names all match the text of the menu item. Hide menu items with template CSS The alternative option is to paste the

Fetch Posts using the v3 API

March 06, 2015

Blogger's templates aren't necessarily straightforward to tweak, and a common use case is embedding your posts from blogger.com in an existing website. To do this, you can call the Blogger v3 API from your webpage using an ajax request - these instructions are based on a webpage which has jquery . Note: The v3 API is not openly available yet, so if you haven't yet, you'll need to apply for access . Fetching Public Posts Getting posts for a public blog is just an http request to the Blogger API. Click this link below to play around with the request in the Google API Explorer. GET https://www.googleapis.com/blogger/v3/blogs/2399953/posts?key={YOUR_API_KEY} To get the posts for a blog in your web page, run an ajax request to the api. 1 2 3 4 5 6 7 8 9 10 11 var blogId = '2399953' ; var apiKey = '(Your API Key)' ; $.ajax({ url: 'https://www.googleapis.com/blogger/v3/blogs/$BLOG_ID$/posts?key=$API_KEY$' .re

Apply for Blogger API v3 Access

March 06, 2015

Blogger's v3 API is a little bit more expansive than the v2 API, but doesn't allow open access yet. To get access to the API, you have to apply for it. API Project First, you'll need an API project. https://console.developers.google.com/project Create a project in the Google Developers Console Once you have a project, in the tabs on the left, select APIs under APIs and Auth . Search for the Blogger API, and click the OFF button to try turn it on. This will redirect you to form for API access. Fill out the form! The authorization process can take a while, and doesn't seem to be automated. If you find it's taking more than a few days, a few people have chased it up on the Blogger Developer Forum . Happy API Developing!

Make Dynamic Views use the width from the Template Editor

March 04, 2015

Dynamic Views is little bit different to the other Blog templates on Blogger. It renders all of the posts client-side, with a variety of views. But, there's no easy way to adjust the width of a Dynamic Views Blog, as it doesn't respond to the value selected in the GUI editor. Blogger's template designer makes it easy to trial different widths. Too bad this doesn't work on Dynamic Views :( The reason that it doesn't work is that the javascript for Dynamic Views clears out all the existing <style> from the <head> element of the page when a view is loaded. So even though the <b:template-skin> element propagates the content.width variable into the css, it's wiped away before Dynamic Views even gets started. Unless... Actually, there is one case in which it doesn't wipe the <style> tags - when they have a class of "singleton-element" . This is how we're going to propagate the content.width variable. S

Add a Page to my Dynamic Views Blog

March 03, 2015

Or: So, How do I add a link to the navbar in my Dynamic Views Blog The Pages concept changed a while ago in Blogger, and now it's not necessarily straight-foward to add a Page to your links section. The instructions here cover it for the most part, but it's a little out of date, so here's a quick re-cap on the two major use-cases, when you're using a Dynamic Views Blog. Step 0: Adding a Pages Widget You can't even add your pages to a Pages Widget until you've got one in your Blog. Unlike most of the Blogger templates, a lot of the rendering for the Dynamic Views Blogs is done client-side, so there's much less control for which sections and widgets are displayed. However, the Dynamic Views blogs do use the Pages Widget to determine whether to show all the View configurations in the nav-bar, or whether to compress the views into a dropdown and show the Pages links. Notice that there's really only the one section visible? Hit 'Add a Gadg

Add a Section to my Template

March 03, 2015

Note: This does not apply to Dynamic Views blogs! In the 'Layouts' tab, you can drag and drop widgets into sections. The sections that you can see are defined in your blog's template. To add your own section, you can simply add a b:section element to your template wherever you want it to sit. Note: The element will not be visible since it will be empty, but you can still drop a widget onto it. If you want to make it easier to find after you've added it, move an existing widget from another section into your new section. <b:section class='my-section' id='my-section'> </b:section> Let's say I want the section to be a footer section, above the attribution section. I can easily find the attribution section by jumping to the attribution widget. Then, above the section, I add the code: Save the template, and navigate to the Layouts tab. You will now see an extra section!