Blipper widget example

NB Repeated refreshing of this page may reach the request limit because of the number of Blipper Widgets on the page. Reaching the request limit will result in an error message being displayed instead of my latest blip. Please allow fifteen minutes or so for the request count to reset.

My Blipper Widget for WordPress is included on this page below using a shortcode. The shortcode used is given in the content of the blip’s caption. The content is text given between a pair of opening and closing Blipper Widget shortcodes:

My latest blip

Advent calendar
Sun 5 Dec 2021
Advent calendar by pandammonium
The content goes here

The content allows you to add text independently of Blipfoto to the display text. It is constant for every blip.

The blip is styled using the CSS following the blip. The CSS is set in the Additional CSS section of the WordPress customiser. NB If you change your theme, you will need to remember to copy your Blipper Widget CSS from the old theme before you change so that you can easily paste it into the Additional CSS of your new theme. Alternatively, you could use a third-party CSS plugin to store Blipper Widget’s CSS, then it won’t change until you edit it in the third-party plugin or unti you delete that plugin.

The widget is displayed in the sidebar (which may be below the main text if your browser window or screen is narrow). It is styled using the widget settings form. Elsewhere on the site, the widget is styled using CSS – the same CSS used to style the shortcode version below.

Styling the widget using the widget settings form is simpler than using CSS, especially if you’re unfamiliar with CSS, but styling with CSS is more powerful and more flexible.

Placing Blipper Widget on the page with the shortcode

Advent calendar
Sun 5 Dec 2021
Advent calendar by pandammonium
Blipper Widget in action using the shortcode
[blipper_widget title='Placing Blipper Widget on the page with the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>
As well as the difficult Advent calendar, I have a chocolate one. Mr Perkins helped me find today’s door.
to construct and display my latest blip. The blip is styled using the CSS below.[/blipper_widget]

Shortcode

This is the shortcode that generates the above instance of Blipper Widget:

[blipper_widget title='Placing Blipper Widget on the page with the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>[/blipper_widget]

CSS code

This is the CSS that styles the above instance of Blipper Widget:

.bw-blip {
  margin-bottom: 2ex;
  text-align: centre;
}
.bw-figure {
  background-color: #383E41;
  border: 4px ridge #7949B1;
  color: inherit;
}
.bw-image {
  padding: 30px;	
}
.bw-caption {
  background-color: #ffffff;
  color: #7949B1;
}
.bw-caption-header {
  font-size: larger;
  font-weight: bolder;
  margin-bottom: 1ex;
  text-align: center;
}
.bw-caption-content {
  padding-bottom: 0.5ex;
  text-align: left;
}
.bw-caption-footer {
  background-color: inherit;
  color: #E1FDFF;
  font-size: smaller;
  font-weight: lighter;
  text-align: right;
}
.bw-text {
  background-color: inherit;
  border: 3px ridge #7949B1;
  color: #383E41;
  margin-top: 2ex;
}
.bw-caption,
.bw-text {
  padding-left: 0.5em;
  padding-right: 0.5em;
}