Nov 7, 2018

How to modify Blogger's Dynamic Views template

These three lines launch the rendering engine that displays the blog:

window.onload = function() {
    blogger.ui().configure().view();
  };

To update the templates, call blogger.templates().compile(). Place the call to compile() before the call to blogger.ui().configure().view(), then you can update the template before it's used.

For example to change RSS Icon:

 blogger.templates().compile(
  '{template:RSSIcon}' +
    '<a id="rssIcon" href="/feeds/posts/default" target="_blank">' +
    '<img width="28" height="28" ' +
       'src="data:image/png;base64,my-path-to-image" />' +
    '</a>' +
  '{/template:RSSIcon}');

To replace Blog Header:

blogger.templates().compile(
  blogger.templates().template("BlogHeader")
    .raw().replace("&lt;input", "{RSSIcon}&lt;input"));

Note that the < and > characters have to be encoded as &lt; and &gt; because Blogger uses XML templates.

To use Custom CSS:

blogger.templates().template(
  "CustomCSS",
  "#rssIcon {width="28" height="28";}");