Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Friday, December 8, 2017

Sub-menus with Bloggers Simple Template (Part 1)

In this post I'm going to explain, how I added a sub-menu to my blogs page list. It is a common question, how to do this. And there are some solutions out there. But I decided to do a few things differently this might be interesting for others too.

Lets first take a look at the existing widget code. For some reason, the Pagelist widget only allows a list with one level of entries. It has already been asked, if there is a way to adjust the widget code, which looks like this:

        <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
          <b:widget-settings>
            <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'http://www.wgdd.de/', 'title': 'Home', 'position': 0}, '4785025671937868325': {'href': 'http://www.wgdd.de/p/aquarien.html', 'title': 'Aquarien', 'position': 1}, '3693528163117485839': {'href': 'http://www.wgdd.de/p/heart-of-gold.html', 'title': 'Hardware (Debian)', 'position': 2}}]]></b:widget-setting>
            <b:widget-setting name='homeTitle'>Home</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <option expr:value='data:link.href'>
            <b:attr cond='data:link.isCurrentPage' name='selected' value='selected'/>
            <data:link.title/>
          </option>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&#9660;</span>
    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <li>
            <b:class cond='data:link.isCurrentPage' name='selected'/>
            <a expr:href='data:link.href'><data:link.title/></a>
          </li>
        </b:loop>
      </ul>
    </b:if>

I'll try to explain the code (to my understanding). The variable pageListJson contains the page list as a structure of instanceIDs linked to hashes with key-value-pairs for each page. The value to the key href contains the URL of the page and title the chosen title. The variable is filled by whatever changes you make to the Pagelist widget. The data in this structure is later accessed by values named data:*. There is another variable called homeTitle, which is how you titled your homepage (e.g. Home or Startseite or similar - you configured this in the Pagelist widget). After this, there is the main widget code that creates the resulting HTML web code. If you gave your widget a title, it will be output as <h2> header. And depending, if the code is created for a mobile target or not, the list items are put in a form (mobile device):

<div class='widget PageList' data-version='1' id='PageList1'>
<h2>Pages</h2>
<div class='widget-content'>
<select id='PageList1_select'>
<option selected='selected' value='http://www.wgdd.de/?m=1'>Home</option>
<option value='http://www.wgdd.de/p/aquarien.html?m=1'>Aquarien</option>
<option value='http://www.wgdd.de/p/heart-of-gold.html?m=1'>Hardware (Debian)</option>
</select>

or a list (website):

<div class='widget PageList' data-version='1' id='PageList1'>
<h2>Pages</h2>
<div class='widget-content'>
<ul>
<li class='selected'>
<a href='http://www.wgdd.de/'>Home</a>
</li>
<li>
<a href='http://www.wgdd.de/p/aquarien.html'>Aquarien</a>
</li>
<li>
<a href='http://www.wgdd.de/p/heart-of-gold.html'>Hardware (Debian)</a>
</li>
</ul>

To answer the original question, if the widget code can be adjusted: no solution has been offered yet and I also cannot think of any way to adjust this code to get a submenu properly. There is also the fact, that pageListJson gets its data from the Pagelist widget and the widget won't support any multi-level data structure. The problem could probably easily be fixed by the Google developers I guess, which would also have the advantage of properly supporting this structure in the mobile output (we'll get to that later), but for some reason, the feature has never been added to blogger. So I'm going to make the same approach everybody else does, using an HTML widget and lists. However, my goal was to use the existing CSS code for the Pagelist widget including the usage of the already existing variables for tab colors and stuff. So lets take a look at the existing code first. This is what is already there in the <b:skin>...</b:skin> element holding the CSS and template style stuff (I've shortened the outout to the relevant parts):

    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Blogger
URL:      www.blogger.com
----------------------------------------------- */

/* Variable definitions
   ====================
[..]

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#999999"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="#f5f5f5"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
   </Group>

[..]

   <Group description="Accents" selector=".content-inner">
     <Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#eeeeee"/>
   </Group>

[..]

   <Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)"/>
   <Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>

[..]

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

[..]

]]></b:skin>

So there are some already defined variables in the simple blogger template, e.g. tabs.background.color to define the tab background color or tabs.text.color for the tab text color. As you can see, the widget uses the variable values then in the template CSS. And in the resulting website the variables will be replaced by their values.

Ok, so that's where we are. I don't want to re-invent the wheel, so I'm going to make use of these existing variables and code. But I'll have to adjust it to support nested lists. More in another post. Stay tuned...

Wednesday, February 11, 2015

Blogger RSS feed and category URLs with combined labels/tags

Run a blog on blogger.com? Maybe made it bilingual? Maybe blog on different topics? Wondering how the URL for an RSS feed for e.g. two labels looks like? Asking how to see all articles matching two tags (labels)? Finding a keyword under one or more labels? Many things are possible. I'll show a few examples below. Maybe that is even interesting for the planet Debian folks. I happen to blog mostly in English about Debian topics. But sometimes I also want to post something in German only (e.g. about German tax software). It is discouraged to put the latter on planet-debian. Instead it can be published in the language specific planet feed. So instead of adding new tags, one could easily combine two labels: the one for language of the feed and the one for Debian related posts (e.g. debian+english or debian+german). Therefor this post goes to the Debian planet.

Search for combbined labels/tags

Say I want to view all postings related to the topics FOO and BAR. Then it is:

http://domain.tld/search/label/FOO+BAR OR
http://domain.tld/search/?q=label:FOO+label:BAR

Be aware that labels are case sensitive and that more labels can be added. The examples below will show all postings related to the topics debian and n54l and xbmc:

http://www.wgdd.de/search/label/debian+n54l+xbmc
http://www.wgdd.de/search/?q=label:debian+label:n54l+label:xbmc

It is also possible to search for all posts related to the topics FOO or BAR:

http://domain.tld/search/?q=label:FOO|label:BAR

Say for example, you want to see all postings related to the topics logitech or toshiba, then it is:

http://www.wgdd.de/search/?q=label:logitech|label:toshiba

Feed URLs

To get back to the first example lets say, the feed shall contain all posts related to the topics FOO and BAR. Then it is:

http://domain.tld/feeds/posts/default/-/FOO/BAR/ OR
http://domain.tld/feeds/posts/default?q=label:FOO+label:BAR

Respecitvely to show all feeds related to either of those topics use:

http://domain.tld/feeds/posts/default/?q=label:FOO|label:BAR

To get a feed of the example topics as shown above then would be:

http://www.wgdd.de/feeds/posts/default/-/debian/n54l/xbmc/
http://www.wgdd.de/feeds/posts/default?q=label:debian+label:n54l+label:xbmc
http://www.wgdd.de/feeds/posts/default?q=label:logitech|label:toshiba

Coming back to planet Debian, below is a solution for a multi-lingual planet contribution (if both planets would exist):

http://www.wgdd.de/feeds/posts/default?q=label:planet-debian+label:english
http://www.wgdd.de/feeds/posts/default?q=label:planet-debian+label:german

Advanced ...

There is much more possible. I'll just show two more examples. AND and OR can be combined ...

http://www.wgdd.de/feeds/posts/default?q=label:debian+(label:logitech|label:toshiba)

... and a keyword search can be added too:

http://www.wgdd.de/feeds/posts/default?q=stick+(label:debian+(label:logitech|label:toshiba))

Links