Gelati Sugarfree B DEV

Vorlage: Gelati Sugarfree B DEV

2017-11-19T07:11:18.411-08:00

+tag:blogger.com,1999:blog-6263380266463058697.archive2022-11-24T02:20:53.394-08:00Gelati Sugarfree B DEVChristian Samnoreply@blogger.comBloggertag:blogger.com,1999:blog-6263380266463058697.layout2017-11-19T07:11:18.411-08:002022-11-24T02:20:53.394-08:00Vorlage: Gelati Sugarfree B DEV @@ -721,6 +721,25 @@ margin-right: 0.5em; } + body.list-view #blog-banner-2 { + margin-top: 3em; + margin-bottom: 1em; + } + + body.article-view #blog-banner-2 { + display: none; + } + + body.list-view #blog-banner-2 [id$="_ninja-slider"] { + width: 35%; + max-width: 250px; + } + + body.list-view #blog-banner-2 [id$="_ninja-slider"] .caption { + background-color: rgba(0, 0, 0, 0.5); + color: #ffffff; + } + body .column-left-outer, body .column-right-outer { box-sizing: border-box; @@ -1917,6 +1936,11 @@ } + body.list-view #blog-banner-2 [id$="_ninja-slider"] { + width: 250px; + } + + body.article-view #Blog1 .post-header .title-item { font-size: 1.75em; /* text-overflow: ellipsis; */ @@ -8170,4 +8194,4 @@ head.appendChild(script); -

Der Veröffentlichungstyp für diesen Blog.

2017-11-19T07:11:18.411-08:00

PUBLISH_MODE_BLOGSPOT

Die Liste mit den E-Mail-Adressen der Administratoren dieses Blogs

2017-11-19T07:11:18.411-08:00

christian.sam@gmail.com

Ob dieser Blog nicht jugendfreien Inhalt enthält

2017-11-19T07:11:18.411-08:00

false

Google Analytics-Kontennummer des Blogs

2017-11-19T07:11:18.411-08:00

Formatnummer des Archivindexdatums

2017-11-19T07:11:18.411-08:00

Häufigkeit, mit der dieser Blog archiviert werden soll

2017-11-19T07:11:18.411-08:00

DAILY

Die Liste mit den E-Mail-Adressen der Autoren, die zur Veröffentlichung berechtigt sind.

2017-11-19T07:11:18.411-08:00

Ob eine Archivseite für jeden Post angelegt werden soll

2017-11-19T07:11:18.411-08:00

true

Wer darf Kommentare erstellen?

2017-11-19T07:11:18.411-08:00

TEAM

Ob Kommentatoren ein Captcha ausfüllen müssen

2017-11-19T07:11:18.411-08:00

true

E-Mail-Liste, an die Benachrichtigungen zu neuen Kommentaren gesendet werden sollen

2017-11-19T07:11:18.411-08:00

Der Feed-Typ, der für Blog-Kommentare verwendet werden soll

2017-11-19T07:11:18.411-08:00

FULL

Ort des Blog-Kommentarformulars

2017-11-19T07:11:18.411-08:00

EMBEDDED_IFRAME

Blog-Kommentarnachricht

2017-11-19T07:11:18.411-08:00

☎ GitHub Issues

Ob die Kommentarprüfung aktiviert werden soll

2017-11-19T07:11:18.411-08:00

DISABLED

Anzahl an Tagen, nach denen neue Kommentare geprüft werden sollen

2017-11-19T07:11:18.411-08:00

E-Mail-Adresse, an die Benachrichtigungen über neue Kommentare gesendet werden sollen, die eine Überprüfung erfordern

2017-11-19T07:11:18.411-08:00

Ob Profilbilder in Kommentaren angezeigt werden sollen

2017-11-19T07:11:18.411-08:00

true

Ob Kommentare angezeigt werden

2017-11-19T07:11:18.411-08:00

true

Formatnummer des Kommentarzeitstempels

2017-11-19T07:11:18.411-08:00

Ob Zeilenumbrüche im Post-Editor in
-Tags umgewandelt werden

2017-11-19T07:11:18.411-08:00

true

Der benutzerdefinierte ads.txt-Inhalt des Blogs, der Anzeigensuchmaschinen bereitgestellt wird.

2017-11-19T07:11:18.411-08:00

Mit dieser Einstellung wird festgelegt, ob der Blog benutzerdefinierte ads.txt-Inhalte für Anzeigensuchmaschinen bereitstellt.

2017-11-19T07:11:18.411-08:00

false

Inhalt, der angezeigt wird, wenn der angeforderte Post oder die Seite nicht gefunden wurde

2017-11-19T07:11:18.411-08:00

Der benutzerdefinierte robots.txt-Inhalt des Blogs, der Suchmaschinen bereitgestellt wird.

2017-11-19T07:11:18.411-08:00

Legt fest, ob dieser Blog benutzerdefinierte robots.txt-Inhalte für Suchmaschinen bereitstellt.

2017-11-19T07:11:18.411-08:00

false

Formatnummer für Datumskopfzeile

2017-11-19T07:11:18.411-08:00

Standard-Kommentarmodus für Posts

2017-11-19T07:11:18.411-08:00

DEFAULT_HAVE_COMMENTS

Eine Beschreibung des Blogs.

2017-11-19T07:11:18.411-08:00

A+ Retrofitted Blogger v2 Template

Ob ein Link angezeigt wird, über den Nutzer Posts per E-Mail senden können.

2017-11-19T07:11:18.411-08:00

false

URL, an die Post-Feed-Anfragen weitergeleitet werden sollen

2017-11-19T07:11:18.411-08:00

Ob dynamische Textanpassung für den Blog aktiviert ist

2017-11-19T07:11:18.411-08:00

true

Sprache für diesen Blog

2017-11-19T07:11:18.411-08:00

Maximale Anzahl an Elementen, die auf der Hauptseite angezeigt werden"

2017-11-19T07:11:18.411-08:00

Block mit Elementen, die auf der Hauptseite angezeigt werden

2017-11-19T07:11:18.411-08:00

POSTS

Meta-Beschreibung des Blogs, die für Suchmaschinen bereitgestellt wird

2017-11-19T07:11:18.411-08:00

A+ Retrofitted Blogger v2 Template

Legt fest, ob für diesen Blog Meta-Beschreibungen bereitgestellt werden

2017-11-19T07:11:18.411-08:00

true

Der Name des Blogs

2017-11-19T07:11:18.411-08:00

Gelati Sugarfree B DEV

Der Feed-Typ, der für Pro-Post-Kommentare verwendet werden soll.

2017-11-19T07:11:18.411-08:00

FULL

Der Feed-Typ, der für Blog-Posts verwendet werden soll

2017-11-19T07:11:18.411-08:00

FULL

Footer, der an das Ende eines jeden Eintrags im Post-Feed angehängt werden soll

2017-11-19T07:11:18.411-08:00

Die Vorlage für Blog-Posts

2017-11-19T07:11:18.411-08:00

Ob Schnellbearbeitung aktiviert ist

2017-11-19T07:11:18.411-08:00

true

Der Zugriffstyp für die Leser des Blogs.

2017-11-19T07:11:18.411-08:00

PUBLIC

Die Liste mit den E-Mail-Adressen der Nutzer, die zum Lesen des Blogs berechtigt sind.

2017-11-19T07:11:18.411-08:00

Ob dieser Blog von Suchmaschinen indexiert werden soll

2017-11-19T07:11:18.411-08:00

false

Kommagetrennte Liste von E-Mails, an die neue Blog-Posts gesendet werden sollen.

2017-11-19T07:11:18.411-08:00

Ob ein Feld mit verwandten Links in der Erstellungshilfe für Posts angezeigt wird

2017-11-19T07:11:18.411-08:00

false

Die BlogSpot-Subdomain, unter der dein Blog veröffentlicht wird

2017-11-19T07:11:18.411-08:00

gelatisugar3-dev

Formatnummer für Zeitstempel

2017-11-19T07:11:18.411-08:00

Die Zeitzone für diesen Blog

2017-11-19T07:11:18.411-08:00

America/Los_Angeles

Legt fest, ob Bilder beim Anklicken in der Lightbox angezeigt werden sollen

2017-11-19T07:11:18.411-08:00

true

Showcase – Markup, Gallery and Hero-Header

2020-08-01T06:39:00.007-07:00

Blog template capabilities

To change overall blog appearance Blogger allows its users to choose from various provided blog themes or import custom made blog templates like Gelati Sugarfree

Blogger provides a WYSIWYG blog post-editor which enables its users to express multiple markup elements like headings, paragraph, image, list, quote and video. This blog template expands that feature set with beginner friedly CSS-triggered generation of hero-image variations and Javascript-configurable gallery and carousel components, powered by third-party integrations from menucool.com

Let's start with some Headings

H3 Heading

H4 Heading

The paragraph is the default markup type. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love.

This paragraph is left aligned.

This italic paragraph is centered.

This paragraph is right aligned.

Even before the internet was a thing, people already used Filler Text.

This paragraph is colorful, with a orange background and blue text. Colored content should have a high enough contrast, so that the text is readable.

This paragraph prefers Jazz over Justin Timberlake. It also uses the small font size.

This paragraph has something important to say: It has a large font size, which defaults to 36px.

The huge text size defaults to 46px, but the size can be customized.

Neither of these paragraphs care about politics, but this one is bold, medium sized and has a drop cap.

Ordered list

Orderd List Item 1
Orderd List Item 2
Orderd List Item 3
Orderd List ~~Item~~ 4

Unordered list

Unorderd List 👀 1
Unorderd List 👽 2
Unorderd List 👻 3
Unorderd List 👍 4

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Supports Youtube, Vimeo and HTML video/audio
This video starts from 0:10

Video components have settings for showing and hiding the playback controls. Use autoplay and playback controls responsibly.

Quote

The Verse block

A block for haiku?
Why not?
Blocks for all the things!

Showcase – Extensive Markup, Image Handling and Hero-Image

2020-07-31T06:48:00.004-07:00

Blog post styling

Tacit is a general purpose CSS framework. A customized version is provided along with this blog template, specifically configured to address only blog post-related CSS rules to prevent unintended interactions with blog's overall layout.

You should not use any CSS classes to make your HTML code look nice. Just make sure it is HTML5 compliant and you'll be fine. Again, no classes, just standard HTML elements, like <table> and <input>. Check the source code of this page.


  /* b:comment: customize blogtemplate - blogpost css (start) */
  body.article-view .post-body .content-item input,body.article-view .post-body .content-item textarea,body.article-view .post-body .content-item select,…
  /* b:comment: customize blogtemplate - blogpost css (end) */
]]></b:skin>
<b:template-skin>

By the way, Tacit is compliant with W3C validator requirements: HTML and CSS.

Forms

This is a one-line form without <fieldset>:

Tables

A simple table would look like this:

Make	Price	Year
BMW X6	$75,000	2013
Mercedes-Benz E350	$52,700	2014

Headings

Just use standard <h1>...<h6> tags:

This is <h1>

Use a heading of the highest level once per page.

This is <h2>

Use <h2> for sections of the page.

This is <h3>

Use <h3> for sub-sections.

This is <h4>

I would recommend to avoid this type of heading at all.

This is <h5>

I would recommend to avoid this type of heading at all.

This is <h6>

I would recommend to avoid this type of heading at all.

Sup^® and Sub_® Elements

Lists

Just use standard <ul>, <ol> and <dl> tags:

Orange
Apple
1. First
2. Second
  - Blue
  - Yellow
  - Green
  - Red
3. Third
Apricot

Banana: A yellow fruit that is easy to peel.; Which also grows on a tree.
Cashew: A tan nut without a peel.
Cherry: A red fruit that is hard to peel.

Blockquote

Use this to emphasize a quote
— Author Name, Publication

Aside

main content

Keyboard

Sometimes you want to let people know they should press a keyboard command like ctrl + l.

Media

It's recommended to add .content-block css-class to image, video and embedded elements to acquire a better responsive behavior.

To scale images, append an additional css-class to provide aligned and floating images a coherent layout, including mobile views.

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block.full-width

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block.small-width

As an alternative use Blogger's standard sizinig method, e.g. img-attribute. Hint: Blogger adapts image width and alignment for mobile requests.

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block img:not([width])

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block img[width="400"]

Image Handling – Basic Usage

2020-07-30T06:46:00.008-07:00

Lists are an interesting beast

.content-block.content-spacer

style="padding-right: 1em"

It's a corner case to make sure that:

Floating elements align and space correct next to bullet items
Lists within lists do not break the ordered list numbering order
Your list styles go deep enough

Ordered - Unordered - Ordered

ordered item
ordered item
- unordered
- unordered
  1. ordered item
  2. ordered item
ordered item
ordered item

Ordered - Unordered - Unordered

ordered item
ordered item
- unordered
- unordered
  - unordered item
  - unordered item
ordered item
ordered item

.content-block.content-spacer

Now to compose a text Lorem Ipsum is much more fun!

With the online text generator you can process your personal Lorem Ipsum enriching it with html elements that define its structure, with the possibility to insert external links, but not only.

Be original, test your imagination... our Lorem Ipsum generator will amaze you. Try it now!

In fact, inserting any fantasy text or a famous text, be it a poem, a speech, a literary passage, a song's text, etc., our text generator will provide the random extraction of terms and steps to compose your own exclusive Lorem Ipsum.

Unordered - Ordered - Unordered

unordered item
unordered item
1. ordered
2. ordered
  - unordered item
  - unordered item
unordered item
unordered item

Unordered - Unordered - Ordered

unordered item
unordered item
- unordered
- unordered
  1. ordered item
  2. ordered item
unordered item
unordered item

Image Handling – Advanced Usage

2020-07-29T06:49:00.012-07:00

Welcome to image positioning and sizing! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started.

On the topic of alignment, it should be noted that users can choose from the options of None, Left, Right, and Center. In addition, they also get the options of Small, Medium, Large, X-Large & Fullsize.

The image above happens to be centered.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150x150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thang. Mission accomplished!

And now for a massively large image

It also has no alignment.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And we try the large image again, but this time scaled down

floating image

.content-block.small-width

Scale Methode 1

css-class

Keeps a rational and coherent layout to floating and aligned images, including mobile views.

aligned image

.content-block.small-width

floating image

.content-block img[width="400"]

Scale Methode 2

img-attribute

Hint: Blogger adapts image width and alignment for mobile requests.

aligned image

.content-block img[width="400"]

And now we're going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there... Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah... Just like that. It never felt so good to be right.

And just when you thought we were done, we're going to do them all over again with captions!

Look at 580x300 getting some captionlove.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

Bigger caption than the image usually is.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150x150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thang. Mission accomplished!

And now for a massively large image

It also has no alignment.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And we try the large image again, but this time scaled down

floating image

.content-block.small-width

Scale Methode 1

css-class

Keeps a rational and coherent layout to aligned and floating images, including mobile views.

aligned image

.content-block.small-width

floating image

.content-block img[width="400"]

Scale Methode 2

img-attribute

Hint: Blogger adapts image width and alignment for mobile requests.

aligned image

.content-block img[width="400"]

Feels good to be right all the time.

And now we're going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there... Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah... Just like that. It never felt so good to be right.

And that's a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked! One last thing: The last item in this post's content is a thumbnail floated right. Make sure any elements after the content are clearing properly.

Article HowTo – Hero-Image

2020-07-28T10:15:00.008-07:00


<div class="separator cover-item full-cover center-text-align" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-JCeb9BxYiUE/XwCFe7r-XoI/AAAAAAAAWg0/Qf4aw4GjkCIeVVthoY7jxC8cv8uD_IZpwCLcBGAsYHQ/s1600/landscape_color_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="512" data-original-width="1024" src="https://4.bp.blogspot.com/-JCeb9BxYiUE/XwCFe7r-XoI/AAAAAAAAWg0/Qf4aw4GjkCIeVVthoY7jxC8cv8uD_IZpwCLcBGAsYHQ/w800-h400-p-k-no-nu/landscape_color_1.png" />
  </a>
</div>

cover-item full-cover center-text-align

Article HowTo – Hero-Header

2020-07-27T11:48:00.008-07:00


<div class="separator cover-item small-cover light-text-color" style="clear: both; text-align: center;">
  <a href="https://1.bp.blogspot.com/-5oCQFzl106k/XwCFgGK7toI/AAAAAAAAWg8/MASI67zxk6oZomJLowmZfiI8Y75C2-5ywCLcBGAsYHQ/s1600/landscape_color_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="512" data-original-width="1024" src="https://1.bp.blogspot.com/-5oCQFzl106k/XwCFgGK7toI/AAAAAAAAWg8/MASI67zxk6oZomJLowmZfiI8Y75C2-5ywCLcBGAsYHQ/w800-h400-p-k-no-nu/landscape_color_5.png" />
  </a>
</div>

cover-item small-cover light-text-color

Index HowTo – Post-Thumbnail

2020-07-26T04:00:00.005-07:00

Situation

Following we have text content only, no media content available.


<div class="separator cover-item none-cover" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-6oiaYKJVYgY/XwCFhVyNaoI/AAAAAAAAWhQ/u_fMoZBmJtU_T5jC44RkPmZ3XunZK3hNQCLcBGAsYHQ/s1600/landscape_gray_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="512" data-original-width="1024" src="https://4.bp.blogspot.com/-6oiaYKJVYgY/XwCFhVyNaoI/AAAAAAAAWhQ/u_fMoZBmJtU_T5jC44RkPmZ3XunZK3hNQCLcBGAsYHQ/w800-h534-p-k-no-nu/landscape_gray_2.png" />
  </a>
</div>

cover-item none-cover

By the way, there are nested comments too…

Index HowTo – Post-Snippet

2020-07-25T04:30:00.007-07:00

Sometimes it's convenient to control a post's text and/or image excerpt for index view, regardless of its actual content. To be clear, this methode is just a visual facade and utilizes only css properties to become hidden in post view.

Situation

Following we have text content only, no media content available.


<div class="separator cover-item none-cover center-text-align" style="clear: both; text-align: center;">
  <span>Sometimes it's convenient to control a post's text and/or image excerpt for index view, regardless of its actual content. To be clear, this methode is just a visual facade and utilizes only css properties to become hidden in post view.</span>
</div>

cover-item none-cover center-text-align

By the way, there are comments too…

Index HowTo – Post-Snippet and Post-Thumbnail

2020-07-24T06:38:00.008-07:00

Index-Snippets consist of textnodes only and are limited to a specific amount of the first characters. For effective use it's recommended to strip unecessary whitespace, e.g. markup indentations.

Situation

Following we have text content only, no media content available.


<div class="separator cover-item none-cover" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-QpvwmelSiO0/XwCFiK6McXI/AAAAAAAAWic/hqylup0z-sonKR7I3QfzmdSi7XF55E4xwCPcBGAYYCw/s1600/landscape_gray_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="512" data-original-width="1024" src="https://4.bp.blogspot.com/-QpvwmelSiO0/XwCFiK6McXI/AAAAAAAAWic/hqylup0z-sonKR7I3QfzmdSi7XF55E4xwCPcBGAYYCw/w800-h534-p-k-no-nu/landscape_gray_5.png" />
</a>
<span>Sometimes it's convenient to control a post's text and/or image excerpt for index view, regardless of its actual content. To be clear, this methode is just a visual facade and utilizes only css properties to become hidden in post view.</span>
</div>

cover-item none-cover

Index-Snippets consist of textnodes only and are limited to a specific amount of the first characters. For effective use it's recommended to strip unecessary whitespace, e.g. markup indentations.

Embedded Handling – Post-Thumbnail

2020-07-23T12:26:00.008-07:00

Various Tags and Embedded Content

Address Tag

1600 Amphitheatre Pkwy
Mountain View, CA 94043
United States

Anchor Tag (aka. Link)
This is an example of a link.

Abbreviation Tag
The abbreviation srsly stands for "seriously".

Acronym Tag (deprecated in HTML5)
The acronym ftw stands for "for the win".

Big Tag (deprecated in HTML5)
These tests are a big deal, but this tag is no longer supported in HTML5.

Sieh dir diesen Beitrag auf Instagram an

© Unsplash

Ein Beitrag geteilt von sugar3.io (@sugar3.io) am Jul 3, 2020 um 3:22 PDT

Cite Tag
"Code is poetry." --Automattic

Delete Tag
This tag will let you
~~strike out text~~, but this tag is recommended supported in HTML5 (use the <s> instead).

Emphasize Tag
The emphasize tag should italicizetext.

Horizontal Rule Tag

This sentence is following a <hr /> tag.

Insert Tag
This tag should denote inserted text.

© Unsplash pic.twitter.com/qcG2oiO4lJ
— sugar3.io (@sugar3_io) July 3, 2020

Keyboard Tag
This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Quote Tag for short, inline quotes
Developers, developers, developers...--Steve Ballmer

Strike Tag (deprecated in HTML5) and S Tag
This tag shows ~~strike-through~~ ~~text~~.

Small Tag
This tag shows smaller text.

Strong Tag
This tag shows bold text.

© Unsplash
Gepostet von sugar3.io am Freitag, 3. Juli 2020

Subscript Tag
Getting our science styling on with H₂O, which should push the "2" down.

Superscript Tag
Still sticking with science and Albert Einstein's E = MC², which should lift the 2 up.

Teletype Tag (obsolete in HTML5)
This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Underline Tagdeprecated in HTML 4, re-introduced in HTML5 with other semantics
This tag shows underlined text.

Variable Tag
This allows you to denote variables.

Embedded Handling – Explicit Aspect-Ratio

2020-07-22T06:39:00.015-07:00

Default

This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.

Left Align

This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it's views. It's favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment.

Center Align

This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.

Right Align

This is a paragraph. It is right aligned. It is a bit more conservative in it's views. It's prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it's a pretty good shot from at least four or five football fields away. Dead on. So boss.

Justify Align

This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it's place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude.

Embedded Handling – Implicit Aspect-Ratio

2020-07-21T06:38:00.014-07:00

Blockquotes

Multi line blockquote with a cite reference:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

multiple contributors - MDN HTML element reference - blockquote

Tables

Employee	Salary
John Doe	$1	Because that's all Steve Jobs needed for a salary.
Jane Doe	$100K	For all the blogging she does.
Fred Bloggs	$100M	Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs	$100B	With hair like that?! Enough said...

Preformatted

This tag is for preserving whitespace as typed, such as in poetry or ASCII art.

The Road Not Taken

Robert Frost

  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth

Image-Gallery – Unobtrusive Captions

2020-07-18T07:19:00.011-07:00

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Image-Gallery – Unobtrusive Thumbnails

2020-07-17T07:17:00.007-07:00

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Image-Gallery – Fixed Aspect-Ratio

2020-07-16T07:15:00.005-07:00

1. Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2. Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
3.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Image-Gallery – Portrait Orientation

2020-07-15T07:11:00.006-07:00

Griechenlands neuer Eigentümer
Das doppelte Lottchen
Workshop Plakat
Lampedusa
Small Cause
20 Jahre Radio RaBe
Design x Taipei
Astronautovic

Image-Gallery – Embedded Link

2020-07-14T07:13:00.007-07:00

Link

Carousel-Slider

2020-07-13T07:07:00.005-07:00

Video-Slider

2020-07-12T07:26:00.005-07:00

Supports Youtube, Vimeo and HTML video/audio
This video starts from 0:10

Video-Gallery

2020-07-11T07:28:00.005-07:00

Index HowTo – Jump Link

2020-05-20T06:32:00.005-07:00

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.

Česky

Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změny. Nejvíce popularizováno bylo Lorem Ipsum v šedesátých letech 20. století, kdy byly vydávány speciální vzorníky s jeho pasážemi a později pak díky počítačovým DTP programům jako Aldus PageMaker.

Româna

Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.

Српски

Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.

Ελληνικά

Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός. Ϊϊϋ, Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός. ΤΑΧΙΣΤΗ ΑΛΩΠΗΞ ΒΑΦΗΣ ΨΗΜΕΝΗ ΓΗ, ΔΡΑΣΚΕΛΙΖΕΙ ΥΠΕΡ ΝΩΘΡΟΥ ΚΥΝΟΣ. Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός. Ϊϊϋ, Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός Τάχιστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός. ΤΑΧΙΣΤΗ ΑΛΩΠΗΞ ΒΑΦΗΣ ΨΗΜΕΝΗ ΓΗ, ΔΡΑΣΚΕΛΙΖΕΙ ΥΠΕΡ ΝΩΘΡΟΥ ΚΥΝΟΣ.

Index HowTo – Prevent Post-Snippet

2020-05-19T06:34:00.005-07:00

All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, "Oh, why can't you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.

Mrs. Darling first heard of Peter when she was tidying up her children's minds. It is the nightly custom of every good mother after her children are asleep to rummage in their minds and put things straight for next morning, repacking into their proper places the many articles that have wandered during the day.

If you could keep awake (but of course you can't) you would see your own mother doing this, and you would find it very interesting to watch her. It is quite like tidying up drawers. You would see her on her knees, I expect, lingering humorously over some of your contents, wondering where on earth you had picked this thing up, making discoveries sweet and not so sweet, pressing this to her cheek as if it were as nice as a kitten, and hurriedly stowing that out of sight. When you wake in the morning, the naughtiness and evil passions with which you went to bed have been folded up small and placed at the bottom of your mind and on the top, beautifully aired, are spread out your prettier thoughts, ready for you to put on.

I don't know whether you have ever seen a map of a person's mind. Doctors sometimes draw maps of other parts of you, and your own map can become intensely interesting, but catch them trying to draw a map of a child's mind, which is not only confused, but keeps going round all the time. There are zigzag lines on it, just like your temperature on a card, and these are probably roads in the island, for the Neverland is always more or less an island, with astonishing splashes of colour here and there, and coral reefs and rakish-looking craft in the offing, and savages and lonely lairs, and gnomes who are mostly tailors, and caves through which a river runs, and princes with six elder brothers, and a hut fast going to decay, and one very small old lady with a hooked nose. It would be an easy map if that were all, but there is also first day at school, religion, fathers, the round pond, needle-work, murders, hangings, verbs that take the dative, chocolate pudding day, getting into braces, say ninety-nine, three-pence for pulling out your tooth yourself, and so on, and either these are part of the island or they are another map showing through, and it is all rather confusing, especially as nothing will stand still.

Of course the Neverlands vary a good deal. John's, for instance, had a lagoon with flamingoes flying over it at which John was shooting, while Michael, who was very small, had a flamingo with lagoons flying over it. John lived in a boat turned upside down on the sands, Michael in a wigwam, Wendy in a house of leaves deftly sewn together. John had no friends, Michael had friends at night, Wendy had a pet wolf forsaken by its parents, but on the whole the Neverlands have a family resemblance, and if they stood still in a row you could say of them that they have each other's nose, and so forth. On these magic shores children at play are for ever beaching their coracles [simple boat]. We too have been there; we can still hear the sound of the surf, though we shall land no more.

Of all delectable islands the Neverland is the snuggest and most compact, not large and sprawly, you know, with tedious distances between one adventure and another, but nicely crammed. When you play at it by day with the chairs and table-cloth, it is not in the least alarming, but in the two minutes before you go to sleep it becomes very real. That is why there are night-lights.

Occasionally in her travels through her children's minds Mrs. Darling found things she could not understand, and of these quite the most perplexing was the word Peter. She knew of no Peter, and yet he was here and there in John and Michael's minds, while Wendy's began to be scrawled all over with him. The name stood out in bolder letters than any of the other words, and as Mrs. Darling gazed she felt that it had an oddly cocky appearance.

Index HowTo – Post-Thumbnail Only

2020-05-18T06:34:00.006-07:00

Robert Frost

  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth;

  Then took the other, as just as fair,
  And having perhaps the better claim,          |\_/|
  Because it was grassy and wanted wear;       / @ @ \
  Though as for that the passing there        ( > º < )
  Had worn them really about the same,         `>>x<<´
                                               /  O  \
  And both that morning equally lay
  In leaves no step had trodden black.
  Oh, I kept the first for another day!
  Yet knowing how way leads on to way,
  I doubted if I should ever come back.

  I shall be telling this with a sigh
  Somewhere ages and ages hence:
  Two roads diverged in a wood, and I—
  I took the one less traveled by,
  And that has made all the difference.

  and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows

Only one thing is impossible for God: To find any sense in any copyright law on the planet.

Mark Twain

Index HowTo – Truncate Post-Snippet

2020-05-17T06:33:00.005-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests. The actual root of that text, however, dates back nearly 2000 years to a guy named Cicero. Today, it’s mostly used for digital design before real content is added. But here’s the thing with Filler Text: it’s not the only option.

Հայերեն

Lorem Ipsum-ը տպագրության և տպագրական արդյունաբերության համար նախատեսված մոդելային տեքստ է: Սկսած 1500-ականներից` Lorem Ipsum-ը հանդիսացել է տպագրական արդյունաբերության ստանդարտ մոդելային տեքստ, ինչը մի անհայտ տպագրիչի կողմից տարբեր տառատեսակների օրինակների գիրք ստեղծելու ջանքերի արդյունք է: Այս տեքստը ոչ միայն կարողացել է գոյատևել հինգ դարաշրջան, այլև ներառվել է էլեկտրոնային տպագրության մեջ` մնալով էապես անփոփոխ: Այն հայտնի է դարձել 1960-ականներին Lorem Ipsum բովանդակող Letraset էջերի թողարկման արդյունքում, իսկ ավելի ուշ համակարգչային տպագրության այնպիսի ծրագրերի թողարկման հետևանքով, ինչպիսին է Aldus PageMaker-ը, որը ներառում է Lorem Ipsum-ի տարատեսակներ:

Български

Lorem Ipsum е елементарен примерен текст, използван в печатарската и типографската индустрия. Lorem Ipsum е индустриален стандарт от около 1500 година, когато неизвестен печатар взема няколко печатарски букви и ги разбърква, за да напечата с тях книга с примерни шрифтове. Този начин не само е оцелял повече от 5 века, но е навлязъл и в публикуването на електронни издания като е запазен почти без промяна. Популяризиран е през 60те години на 20ти век със издаването на Letraset листи, съдържащи Lorem Ipsum пасажи, популярен е и в наши дни във софтуер за печатни издания като Aldus PageMaker, който включва различни версии на Lorem Ipsum.

Català

Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques. No només ha sobreviscut cinc segles, sinó que ha fet el salt cap a la creació de tipus de lletra electrònics, romanent essencialment sense canvis. Es va popularitzar l'any 1960 amb el llançament de fulls Letraset que contenien passatges de Lorem Ipsum, i més recentment amb programari d'autoedició com Aldus Pagemaker que inclou versions de Lorem Ipsum.

Hrvatski

Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska. Taj je tekst ne samo preživio pet stoljeća, već se i vinuo u svijet elektronskog slovoslagarstva, ostajući u suštini nepromijenjen. Postao je popularan tijekom 1960-ih s pojavom Letraset listova s odlomcima Lorem Ipsum-a, a u skorije vrijeme sa software-om za stolno izdavaštvo kao što je Aldus PageMaker koji također sadrži varijante Lorem Ipsum-a.

2020-05-14T12:43:00.007-07:00

No Title – Just Content.

Tauma tawhakatangi hangakoauauo tamatea turipuka kapiki maungahoronu kupokai whenua kitanatahu.

Long Title – Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu

2020-05-13T12:39:00.005-07:00

Title should not overflow the content area.

A few things to check for:

Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
Check the browser window / tab title.

The following CSS properties are used to support non-breaking text:


-ms-word-wrap: break-word;
word-wrap: break-word;

No Content – Tauma tawhakatangi hangakoauauo tamatea turipuka kapiki maungahoronu kupokai whenua kitanatahu

2020-05-12T12:38:00.003-07:00

Video Handling – YouTube

2020-05-11T15:09:00.004-07:00

Video Handling – Vimeo

2020-05-10T15:08:00.004-07:00

Layout Test Suite – Videos #1

2020-05-09T13:23:00.005-07:00

Layout Test Suite – Videos #2

2020-05-08T13:22:00.005-07:00

Layout Test Suite – Videos #3

2020-05-07T13:21:00.005-07:00

Layout Test Suite – Videos #4

2020-05-06T13:20:00.004-07:00

Layout Test Suite – Videos #5

2020-05-05T12:47:00.004-07:00

Layout Test Suite – Videos #6

2020-05-04T12:46:00.004-07:00

Layout Test Suite – Videos #7

2020-05-03T12:46:00.002-07:00

Layout Test Suite – Videos #8

2020-05-02T12:46:00.004-07:00

Layout Test Suite – Images #1

2020-05-01T12:09:00.004-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Layout Test Suite – Images #2

2020-04-30T12:08:00.004-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Layout Test Suite – Images #3

2020-04-29T12:07:00.004-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Layout Test Suite – Embedded #1

2020-04-28T12:03:00.004-07:00

© Unsplash pic.twitter.com/qcG2oiO4lJ
— sugar3.io (@sugar3_io) July 3, 2020

Layout Test Suite – Embedded #2

2020-04-27T12:02:00.004-07:00

© Unsplash
Gepostet von sugar3.io am Freitag, 3. Juli 2020

Layout Test Suite – Embedded #3

2020-04-26T12:01:00.008-07:00

Sieh dir diesen Beitrag auf Instagram an

© Unsplash

Ein Beitrag geteilt von sugar3.io (@sugar3.io) am Jul 3, 2020 um 3:22 PDT

Documentation

2020-08-23T03:00:00.000-07:00

Gelati Sugarfree –

A⁺ Retrofitted Blogger v2 Template

Feature Examples and Usage Instructions

Explore blog template reference

Quick Installation Guide

Preperations

Download Gelati Sugarfree

Blog Theme
Optional Demo Content

Backup current blog theme

Blogger > Theme > Backup/Restore: ▸ Download a backup of your theme – Download current Theme; Hint: If applicable, setup a new blog instance on Blogger instead and start from scratch

Import Gelati Sugarfee

Blogger > Theme > Backup/Restore: ▸ Upload a theme from a file – Upload Blog Theme
Blogger > Settings > Other: ▸ Content (pages, posts & comments) – Import Demo Content
▸ ✅ Automatically publish all imported posts and pages; Hint: Import of Demo Content is optional but recommended to ease further configuration and usage examples

Configuration and Customization

Apply Blogger settings

Blogger > Settings > Posts, comments and sharing: ▸ Posts — 🔟 Posts on the main page; Configure an even Number for posts per page. Six posts per page is a recommended value
Blogger > Theme > Mobile > Gear wheel: ▸ Customize Mobile Theme — ✅ No. Show desktop theme on mobile devices; Hint: Instructs Blogger to include custom web fonts in mobile mode too. Alternatively you'd have to add them manually via CSS
Blogger > Layout > Gelati Sugarfree (Header): ▸ Image — First, click Remove current image, then Upload new logo
▸ Placement — ✅ Instead of title and description.; Afterwards note URL and dimensions of the new logo for further configuration, e.g. right click image; Hint: You can also use a title and description, text-based header, instead of logo image
Blogger > Posts: ▸ All Lables – Determine favorite labels; Choose top category labels for further configuration of prominent label portrayal in related menu and widgets. Otherwise label items might get displayed conealed for layout reasons; Hint: For layout reasons a maximum of 4 top category labels is recommended
Blogger > Posts: ▸ Published – Designate featured posts; Assign label FEATUREDSLIDERto posts you want be featured in the Hero-Slider widget; Hint: While label configurations are optional features of this blog template, it's recommended to assign at least one blog post the FEATUREDSLIDER label. It works as special label, used to designate posts as items for Hero-Slider, but is hidden on purpose in regular label listings of other menu and widgets. This mechanic prevents label clutter in blog scenarios where actually no label usage is wanted/needed at all

Apply Template-Editor settings

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - disable cookie conset
</b:comment>
<script type='text/javascript'> cookieChoices = {}; </script>


…

<b:comment>
configure blogtemplate - blog settings
</b:comment>
<b:with value='🔟' var='postsPerPage'>
Use the same even Number as before

<b:with value='{ url: &quot;https://4.bp.blogspot.com/-abc…/def…/ghi…/jkl…&quot;, name: &quot;logo.png&quot;, width: 186, height: 72 }' var='blogCover'>
Split the Blogger hosted blog logo URL in two substrings - one before, and another after the pattern "/s1600/" - and insert them in the corresponding fields of "url" and "name". Place dimension's "width" and "height" too.

<b:with value='{&quot;Layout&quot;, &quot;Markup&quot;, &quot;Gallery&quot;, &quot;Test Case&quot;}' var='labelsTop'>
Insert the determined top category labels items

<b:with value='&quot;FEATUREDSLIDER&quot;' var='featuredSliderLabel'>
Optonal: Define another label name for the FEATUREDSLIDER special label

Apply Template-Editor customizations

Blogger > Theme > Edit HTML


<!-- b:comment: customize blogtemplate - label css (start) -->
<Variable hideEditor='true' name="label.cover.Video" description="Label Cover Video" type="string" default="https://2.bp.blogspot.com/-abc…/def…/ghi…/jkl…/s1600/video.png" value="https://2.bp.blogspot.com/-abc…/def…/ghi…/jkl…"/>
Some label related widgets are able to display covers next to label names. This optional feature requires to define a Blogger skin label item variable. Split the Blogger hosted label cover URL in two substrings and insert the part before the pattern "/s1600/" in its "value" field. As a reminder you can note the full url in the field "default"

<Variable hideEditor='true' name="label.cover.Test_Case" description="Label Cover Test_Case" type="string" default="https://3.bp.blogspot.com/-abc…/def…/ghi…/jkl…/s1600/test_case.png" value="https://3.bp.blogspot.com/-abc…/def…/ghi…/jkl…"/>
Label names have to be latin-only and must contain no special characters except whitespace. In such circumstances replace every " " occurance with "_" character

<!-- b:comment: customize blogtemplate - label css (end) -->

…

body .label-item-Test_Case { background-image: url("$(label.cover.Test_Case)/w400-h200-c/test_case.png"); }
Every label item variable is accompanied by three label associated CSS rules

body .full-width.label-item-Test_Case { background-image: url("$(label.cover.Test_Case)/w800-h400-c/test_case.png"); }
This allows to define tailored cover images resolutions

body .ratio-square.label-item-Test_Case { background-image: url("$(label.cover.Test_Case)/w400-h400-c/test_case.png"); }
It's recommended to use Blogger API-based image hosting infrastructure for efficient storage and retrieval of label covers
Hint: This blog template tries it's best to offer media-related features like covers, thumbnails, hero-images, etc. regardless of their source. But whenever applicable, use official Blogger hosting capabilities for image and video to get the best UX with this blog temaplate.

Final notes

Voilà, installation completed – if everything works get some 🍦

For a correct presentation of the PopularPosts widget your blog's posts need to have a certain amount of page views. Apart from proper configuration please do also ensure to have actual pageviews for a couple of your favorite blog posts, especially in case of start from scratch.

Advanced Setup Guide

Custom Domain Usage

This blog template employs third-party components from Menucool which provide versatile Menu and Gallery elements to enhance the blog template's UX in a significant way.

License Information

While there exists no association, Gelati Sugarfree was provided with free licenses for its integrated Menucool components, valid for all blog template instances running on standard Blogger *.blogspot.com subdomains. Users that plan to utilize this blog template with custom domain configured Blogger blog-instances have to provide domain-bound licenses, purchasable form Menucool:

License Setup

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - custom domain (optional)
</b:comment>
<b:with value='data:view.isPreview or not data:blog.hasCustomDomain ? { menu: &quot;2c6b88&quot;, slider: &quot;b2l868&quot;, tooltip: &quot;248t8&quot; } : { menu: &quot;2c4g83&quot;, slider: &quot;b2l348&quot;, tooltip: &quot;248h3&quot; }' var='licenseKeys'>
Insert your aquired McMenu, Ninja Slider and JS Tooltip license keys in the respective fields

Further Customization and Development

Hosting and DEV environment settings

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - hosting/development (optional)
</b:comment>
<b:with value='data:view.isPreview or not data:blog.hasCustomDomain ? &quot;//gelatistatic.sugar3.io&quot; : &quot;//your.host.com&quot;' var='resourcesUrl'>
A valid blog template resources url is composed of a protocol-relative schema, a hostname, and optional a following path: "https://gelatistatic-dev.sugar3.io/v1/css/main.css"
Hint: Regardless of path information, this value does not include a trailing slash

<b:with value='&quot;v1_dev&quot;' var='resourcesVersion'>
Furthermore there is a mandatory subdirectory. Effecively representing the blog template's resources basepath, allowing to serve multiple resource versions: "https://gelatistatic-dev.sugar3.io/v1/css/main.css"
Hint: This also acts as primitive dev/prod environment switch-logic flag, current valid values are "v1|v1_dev"

DEV/PROD resources locations

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - hosting/development (optional)
</b:comment>
<b:if cond='data:resourcesVersion contains &quot;_dev&quot;'>
dev/prod switch-logic
…
<link expr:href='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/css/feedwidgets.css&quot;' rel='stylesheet' type='text/css'/>
<script expr:src='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/js/feedwidgets.js&quot;' type='text/javascript'/>
<link expr:href='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/css/paginationwidgets.css&quot;' rel='stylesheet' type='text/css'/>
<script expr:src='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/js/paginationwidgets.js&quot;' type='text/javascript'/>
references unbundled resources
<b:else/>
dev/prod switch-logic
<link expr:href='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/css/main.css&quot;' rel='stylesheet' type='text/css'/>
<script expr:src='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/js/app.js&quot;' type='text/javascript'/>
references bundled resources

</b:if>

Gelati Sugarfree Toolchain

Toolchain Requirements
Download Toolchain: ▸ git clone https://github.com/sugar3-io/gelati-sugarfree.git; ▸ cd gelati-sugarfree

Blog Resources development

Usage: ▸ cd blog-resources; ▸ npm install; edit sources in 📁 src/; 📄📄… js/*.js; 📄📄… css/*.css; ▸ npm run build; find bundled output in 📁 dist/; 📃 js/app.js; 📃 css/main.css
Deploy: transfer or serve 📁; blog-resources/src/* ➜ resourcesUrl/v1_dev/*; blog-resources/dist/* ➜ resourcesUrl/v1/*

Blog Post styling

Usage

▸ cd blogpost-style

▸ npm install

edit sources in 📁 scss/

📄📄… *.scss

▸ npm run rultor

find blog post CSS-file in 📁 dist/

📃 gelati-sugarfree-blogpoststyle-x.y.z.min.css

📋 copy content to clipboard

Blogger > Theme > Edit HTML


/* b:comment: customize blogtemplate - blogpost css (start) */
body.article-view .post-body .content-item input,body.article-view .post-body .content-item textarea,body.article-view .post-body .content-item select,…
📋 paste content into Blog Theme
/* b:comment: customize blogtemplate - blogpost css (end) */

Final notes

Congratulations your customized blog template environment is now setup 🎉

Gelati Sugarfree's tooling is based on npm-build-boilerplate and tacit. While both toolchains will provide various sophisticated develop environment capbilities like live-reloading, neither Blogger nor this blog template do support these features. Serving blog resources from a local enviroment could work but was out of project scope and has not been tested.

About

2020-08-23T06:24:00.000-07:00

Gelati Sugarfree –

A⁺ Retrofitted Blogger v2 Template

Gelati Sugarfree is a Gadget v1 based Blogger Template, retrofitted with contemporary look 'n feel components. While feature comparable to current Layout v3 based designs, it tries to follows a more conventional UI and UX approach of Blog design.

Configurable and Customizable

Most configurable features of this blog template are a accessible through standard Blogger menus or methods, e.g.:

Labels and Pages
Related Widgets and Blog items are populated automatically.
Multilingual Support
Localized UI captions are provided by Blogger's i18n'd data:messages dictionary.
Layout and Theme Designer
Overall visual settings (Widgets, layout, typography, colors) are accessible through Blogger's usual methods. These mechanics are integrated into a fluid, respsonsive presentation on Mobiles, Tablets and Desktop devices.

Just a handful settings or advanced customization features, that can't be integrated with standard Blogger configuration methods in a reasonable way, need to be addressed in their respective configuration sections within Blogger's Template-Editor.

Follows Blogger's conventions

Available template language features are used wherever possible to take advantage of the platform's scaled and robust architecture.

Customized solutions for some of this blog template's extended features were designed with care to ensure maintainability with future Blogger template and platform versions.

Zero dependency

No third-party WebServices
Only Google APIs, regular used by official Blogger templates, are consumed in this blog template.
No frontend frameworks or libraries
This blog template comprises of handcrafted, vanilla Javascript and CSS components. Extensive browser coverage for major platforms is provided including desktop legacy browsers.
Accessible codebase
Despite lack of the "usual suspects", there is no need to reinvent the wheel. This blog template employs a small but powerfull set of third-party integrations: Javascipt components to handle complex UI patterns like Menu and Gallery variations, as well as an (optional) blog post CSS-template, particually affecting article content only, ruling out unintended interference with overall blog layout

Credits

Third-Party

menucool.com

tacit

npm-build-boilerplate

unsplash.com

coverr.co

flaticon.com

License and Copyright

MIT License © Gelati Sugarfree / sugar3.io

[...] Trackback test. [...]

2007-11-21T03:31:12.000-08:00

[...] Trackback test. [...]

[...] Another trackback test. Lorem ipsum dolor s...

2007-11-21T03:35:47.000-08:00

[...] Another trackback test. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit gravida nisi. Praesent libero odio, tincidunt nec, fringilla et, mollis ut, ipsum. Proin a lacus quis nisi pulvinar bibendum. Donec massa justo, dapibus at, imperdiet vestibulum, dapibus in, leo. Donec pretium tellus in dui. Phasellus tristique aliquet justo. Donec sodales. Nulla urna mi, molestie ac, malesuada sit amet, sagittis id, lacus. Mauris auctor leo ac justo. Proin convallis. Nulla eleifend dictum mi. Donec at lectus. Integer augue sapien, ornare vitae, rhoncus quis, rhoncus sed, sapien. Nunc mattis diam sodales diam.Etiam porttitor, ante sed varius semper, ante arcu rutrum tortor, at luctus nunc urna id nibh. Fusce sodales. Integer sed ligula. Donec posuere, nibh aliquet auctor congue, augue est porttitor odio, imperdiet facilisis tortor urna vel mauris. Pellentesque pretium, lorem non pellentesque varius, elit diam ultrices mi, sed posuere sapien lectus sed mi. Donec vestibulum urna. Donec gravida elit et enim. Ut dignissim neque ut erat. Morbi tincidunt nunc vitae lorem. Morbi rhoncus mi. Praesent facilisis tincidunt enim. Ut pulvinar. Suspendisse potenti. Vivamus turpis odio, porta at, malesuada in, iaculis eget, odio. Aenean faucibus, urna quis congue dignissim, orci tellus ornare leo, eget viverra ante ipsum sit amet magna. Suspendisse mattis nunc at justo. Nullam malesuada lobortis lorem. Morbi ultricies. Nam risus erat, sagittis ut, tristique rhoncus, luctus id, ante. Maecenas ac dui. [...]

[...] Just a short one. [...]

2007-11-21T03:38:22.000-08:00

[...] Just a short one. [...]

[...] Another short one. [...]

2007-11-21T03:39:25.000-08:00

[...] Another short one. [...]

This is a comment amongst pingbacks and trackbacks.

2010-06-11T08:27:04.000-07:00

This is a comment amongst pingbacks and trackbacks.

This user it trying to be anonymous.

...

2013-03-11T16:45:54.000-07:00

This user it trying to be anonymous.

They used a fake email, so there should be no Gravatar associated with it.
They did not speify a website, so there should be no link to it in the comment.

Comments? I love comments!

2013-03-12T06:17:35.000-07:00

Comments? I love comments!

These tests are amazing!

2013-03-14T00:53:26.000-07:00

These tests are amazing!

Author Comment.

2013-03-14T00:56:46.000-07:00

Author Comment.

Comment Depth 01

2013-03-14T00:57:01.000-07:00

Comment Depth 01

Comment Depth 02

2013-03-14T01:01:21.000-07:00

Comment Depth 02

Comment Depth 03

2013-03-14T01:02:06.000-07:00

Comment Depth 03

Comment Depth 04

2013-03-14T01:03:22.000-07:00

Comment Depth 04

Comment Depth 05

Also an author comment.

2013-03-14T01:10:29.000-07:00

Comment Depth 05

Also an author comment.

Comment Depth 06 has some more text than some of t...

2013-03-14T01:12:16.000-07:00

Comment Depth 06 has some more text than some of the other comments on this post.

Comment Depth 07 has a little bit.

2013-03-14T01:12:58.000-07:00

Comment Depth 07 has a little bit.

Comment Depth 08

2013-03-14T01:13:42.000-07:00

Comment Depth 08

Comment Depth 09 is way nested, but there are a lo...

2013-03-14T01:14:13.000-07:00

Comment Depth 09 is way nested, but there are a lot of sites with very nested comments.

Comment Depth 10

Also an author comment.

2013-03-14T01:14:47.000-07:00

Comment Depth 10

Also an author comment.

Image comment.

If the image imports...

2013-03-14T02:56:43.000-07:00

Image comment.

If the image imports...

We are totally going to blog about these tests Σίγ...

2013-03-14T04:23:24.000-07:00

We are totally going to blog about these tests Σίγουρα θα σχολιάσουμε τα τεστς!

We use these tests all the time! Killer stuff!

2013-03-14T04:27:54.000-07:00

We use these tests all the time! Killer stuff!

Thanks for all the comments, everyone!

2013-03-14T04:30:33.000-07:00

Thanks for all the comments, everyone!

this is test comment

Feeling testy?

2014-09-28T19:52:15.000-07:00

this is test comment

Feeling testy?

With the online text generator you can process you...

2020-07-11T09:35:51.575-07:00

With the online text generator you can process your personal Lorem Ipsum enriching it with html elements that define its structure, with the possibility to insert external links, but not only. Now to compose a text Lorem Ipsum is much more fun! In fact, inserting any fantasy text or a famous text, be it a poem, a speech, a literary passage, a song's text, etc., our text generator will provide the random extraction of terms and steps to compose your own exclusive Lorem Ipsum. Be original, test your imagination... our Lorem Ipsum generator will amaze you. Try it now! Copy and Paste!

Duis autem vel eum iriure dolor in hendrerit in vu...

2020-07-11T09:37:33.211-07:00

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vu...

2020-07-11T09:38:27.242-07:00

Lorem ipsum dolor sit amet, consetetur sadipscing ...

2020-07-14T00:24:36.305-07:00

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem Ipsum is simply dummy text of the printing a...

2020-07-14T00:25:21.028-07:00

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Der Veröffentlichungstyp für diesen Blog.

2017-11-19T07:11:18.411-08:00

PUBLISH_MODE_BLOGSPOT

Die Liste mit den E-Mail-Adressen der Administratoren dieses Blogs

2017-11-19T07:11:18.411-08:00

christian.sam@gmail.com

Ob dieser Blog nicht jugendfreien Inhalt enthält

2017-11-19T07:11:18.411-08:00

false

Google Analytics-Kontennummer des Blogs

2017-11-19T07:11:18.411-08:00

Formatnummer des Archivindexdatums

2017-11-19T07:11:18.411-08:00

Häufigkeit, mit der dieser Blog archiviert werden soll

2017-11-19T07:11:18.411-08:00

DAILY

Die Liste mit den E-Mail-Adressen der Autoren, die zur Veröffentlichung berechtigt sind.

2017-11-19T07:11:18.411-08:00

Ob eine Archivseite für jeden Post angelegt werden soll

2017-11-19T07:11:18.411-08:00

true

Wer darf Kommentare erstellen?

2017-11-19T07:11:18.411-08:00

TEAM

Ob Kommentatoren ein Captcha ausfüllen müssen

2017-11-19T07:11:18.411-08:00

true

E-Mail-Liste, an die Benachrichtigungen zu neuen Kommentaren gesendet werden sollen

2017-11-19T07:11:18.411-08:00

Der Feed-Typ, der für Blog-Kommentare verwendet werden soll

2017-11-19T07:11:18.411-08:00

FULL

Ort des Blog-Kommentarformulars

2017-11-19T07:11:18.411-08:00

EMBEDDED_IFRAME

Blog-Kommentarnachricht

2017-11-19T07:11:18.411-08:00

☎ GitHub Issues

Ob die Kommentarprüfung aktiviert werden soll

2017-11-19T07:11:18.411-08:00

DISABLED

Anzahl an Tagen, nach denen neue Kommentare geprüft werden sollen

2017-11-19T07:11:18.411-08:00

E-Mail-Adresse, an die Benachrichtigungen über neue Kommentare gesendet werden sollen, die eine Überprüfung erfordern

2017-11-19T07:11:18.411-08:00

Ob Profilbilder in Kommentaren angezeigt werden sollen

2017-11-19T07:11:18.411-08:00

true

Ob Kommentare angezeigt werden

2017-11-19T07:11:18.411-08:00

true

Formatnummer des Kommentarzeitstempels

2017-11-19T07:11:18.411-08:00

Ob Zeilenumbrüche im Post-Editor in
-Tags umgewandelt werden

2017-11-19T07:11:18.411-08:00

true

Der benutzerdefinierte ads.txt-Inhalt des Blogs, der Anzeigensuchmaschinen bereitgestellt wird.

2017-11-19T07:11:18.411-08:00

Mit dieser Einstellung wird festgelegt, ob der Blog benutzerdefinierte ads.txt-Inhalte für Anzeigensuchmaschinen bereitstellt.

2017-11-19T07:11:18.411-08:00

false

Inhalt, der angezeigt wird, wenn der angeforderte Post oder die Seite nicht gefunden wurde

2017-11-19T07:11:18.411-08:00

Der benutzerdefinierte robots.txt-Inhalt des Blogs, der Suchmaschinen bereitgestellt wird.

2017-11-19T07:11:18.411-08:00

Legt fest, ob dieser Blog benutzerdefinierte robots.txt-Inhalte für Suchmaschinen bereitstellt.

2017-11-19T07:11:18.411-08:00

false

Formatnummer für Datumskopfzeile

2017-11-19T07:11:18.411-08:00

Standard-Kommentarmodus für Posts

2017-11-19T07:11:18.411-08:00

DEFAULT_HAVE_COMMENTS

Eine Beschreibung des Blogs.

2017-11-19T07:11:18.411-08:00

A+ Retrofitted Blogger v2 Template

Ob ein Link angezeigt wird, über den Nutzer Posts per E-Mail senden können.

2017-11-19T07:11:18.411-08:00

false

URL, an die Post-Feed-Anfragen weitergeleitet werden sollen

2017-11-19T07:11:18.411-08:00

Ob dynamische Textanpassung für den Blog aktiviert ist

2017-11-19T07:11:18.411-08:00

true

Sprache für diesen Blog

2017-11-19T07:11:18.411-08:00

Maximale Anzahl an Elementen, die auf der Hauptseite angezeigt werden"

2017-11-19T07:11:18.411-08:00

Block mit Elementen, die auf der Hauptseite angezeigt werden

2017-11-19T07:11:18.411-08:00

POSTS

Meta-Beschreibung des Blogs, die für Suchmaschinen bereitgestellt wird

2017-11-19T07:11:18.411-08:00

A+ Retrofitted Blogger v2 Template

Legt fest, ob für diesen Blog Meta-Beschreibungen bereitgestellt werden

2017-11-19T07:11:18.411-08:00

true

Der Name des Blogs

2017-11-19T07:11:18.411-08:00

Gelati Sugarfree B DEV

Der Feed-Typ, der für Pro-Post-Kommentare verwendet werden soll.

2017-11-19T07:11:18.411-08:00

FULL

Der Feed-Typ, der für Blog-Posts verwendet werden soll

2017-11-19T07:11:18.411-08:00

FULL

Footer, der an das Ende eines jeden Eintrags im Post-Feed angehängt werden soll

2017-11-19T07:11:18.411-08:00

Die Vorlage für Blog-Posts

2017-11-19T07:11:18.411-08:00

Ob Schnellbearbeitung aktiviert ist

2017-11-19T07:11:18.411-08:00

true

Der Zugriffstyp für die Leser des Blogs.

2017-11-19T07:11:18.411-08:00

PUBLIC

Die Liste mit den E-Mail-Adressen der Nutzer, die zum Lesen des Blogs berechtigt sind.

2017-11-19T07:11:18.411-08:00

Ob dieser Blog von Suchmaschinen indexiert werden soll

2017-11-19T07:11:18.411-08:00

false

Kommagetrennte Liste von E-Mails, an die neue Blog-Posts gesendet werden sollen.

2017-11-19T07:11:18.411-08:00

Ob ein Feld mit verwandten Links in der Erstellungshilfe für Posts angezeigt wird

2017-11-19T07:11:18.411-08:00

false

Die BlogSpot-Subdomain, unter der dein Blog veröffentlicht wird

2017-11-19T07:11:18.411-08:00

gelatisugar3-dev

Formatnummer für Zeitstempel

2017-11-19T07:11:18.411-08:00

Die Zeitzone für diesen Blog

2017-11-19T07:11:18.411-08:00

America/Los_Angeles

Legt fest, ob Bilder beim Anklicken in der Lightbox angezeigt werden sollen

2017-11-19T07:11:18.411-08:00

true

Showcase – Markup, Gallery and Hero-Header

2020-08-01T06:39:00.007-07:00

Blog template capabilities

Let's start with some Headings

H3 Heading

H4 Heading

This italic paragraph is centered.

This paragraph is right aligned.

Even before the internet was a thing, people already used Filler Text.

Neither of these paragraphs care about politics, but this one is bold, medium sized and has a drop cap.

Ordered list

Orderd List Item 1
Orderd List Item 2
Orderd List Item 3
Orderd List ~~Item~~ 4

Unordered list

Unorderd List 👀 1
Unorderd List 👽 2
Unorderd List 👻 3
Unorderd List 👍 4

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Supports Youtube, Vimeo and HTML video/audio
This video starts from 0:10

Video components have settings for showing and hiding the playback controls. Use autoplay and playback controls responsibly.

Quote

The Verse block

A block for haiku?
Why not?
Blocks for all the things!

Showcase – Extensive Markup, Image Handling and Hero-Image

2020-07-31T06:48:00.004-07:00

Blog post styling


  /* b:comment: customize blogtemplate - blogpost css (start) */
  body.article-view .post-body .content-item input,body.article-view .post-body .content-item textarea,body.article-view .post-body .content-item select,…
  /* b:comment: customize blogtemplate - blogpost css (end) */
]]></b:skin>
<b:template-skin>

By the way, Tacit is compliant with W3C validator requirements: HTML and CSS.

Forms

This is a one-line form without <fieldset>:

Tables

A simple table would look like this:

Make	Price	Year
BMW X6	$75,000	2013
Mercedes-Benz E350	$52,700	2014

Headings

Just use standard <h1>...<h6> tags:

This is <h1>

Use a heading of the highest level once per page.

This is <h2>

Use <h2> for sections of the page.

This is <h3>

Use <h3> for sub-sections.

This is <h4>

I would recommend to avoid this type of heading at all.

This is <h5>

I would recommend to avoid this type of heading at all.

This is <h6>

I would recommend to avoid this type of heading at all.

Sup^® and Sub_® Elements

Lists

Just use standard <ul>, <ol> and <dl> tags:

Orange
Apple
1. First
2. Second
  - Blue
  - Yellow
  - Green
  - Red
3. Third
Apricot

Banana: A yellow fruit that is easy to peel.; Which also grows on a tree.
Cashew: A tan nut without a peel.
Cherry: A red fruit that is hard to peel.

Blockquote

Use this to emphasize a quote
— Author Name, Publication

Aside

main content

Keyboard

Sometimes you want to let people know they should press a keyboard command like ctrl + l.

Media

It's recommended to add .content-block css-class to image, video and embedded elements to acquire a better responsive behavior.

To scale images, append an additional css-class to provide aligned and floating images a coherent layout, including mobile views.

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block.full-width

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block.small-width

As an alternative use Blogger's standard sizinig method, e.g. img-attribute. Hint: Blogger adapts image width and alignment for mobile requests.

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block img:not([width])

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

.content-block img[width="400"]

Image Handling – Basic Usage

2020-07-30T06:46:00.008-07:00

Lists are an interesting beast

.content-block.content-spacer

style="padding-right: 1em"

It's a corner case to make sure that:

Floating elements align and space correct next to bullet items
Lists within lists do not break the ordered list numbering order
Your list styles go deep enough

Ordered - Unordered - Ordered

ordered item
ordered item
- unordered
- unordered
  1. ordered item
  2. ordered item
ordered item
ordered item

Ordered - Unordered - Unordered

ordered item
ordered item
- unordered
- unordered
  - unordered item
  - unordered item
ordered item
ordered item

.content-block.content-spacer

Now to compose a text Lorem Ipsum is much more fun!

Unordered - Ordered - Unordered

unordered item
unordered item
1. ordered
2. ordered
  - unordered item
  - unordered item
unordered item
unordered item

Unordered - Unordered - Ordered

unordered item
unordered item
- unordered
- unordered
  1. ordered item
  2. ordered item
unordered item
unordered item

Image Handling – Advanced Usage

2020-07-29T06:49:00.012-07:00

The image above happens to be centered.

And now for a massively large image

It also has no alignment.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And we try the large image again, but this time scaled down

floating image

.content-block.small-width

Scale Methode 1

css-class

Keeps a rational and coherent layout to floating and aligned images, including mobile views.

aligned image

.content-block.small-width

floating image

.content-block img[width="400"]

Scale Methode 2

img-attribute

Hint: Blogger adapts image width and alignment for mobile requests.

aligned image

.content-block img[width="400"]

Look at 580x300 getting some captionlove.

The image above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

And now for a massively large image

It also has no alignment.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And we try the large image again, but this time scaled down

floating image

.content-block.small-width

Scale Methode 1

css-class

Keeps a rational and coherent layout to aligned and floating images, including mobile views.

aligned image

.content-block.small-width

floating image

.content-block img[width="400"]

Scale Methode 2

img-attribute

Hint: Blogger adapts image width and alignment for mobile requests.

aligned image

.content-block img[width="400"]

Article HowTo – Hero-Image

2020-07-28T10:15:00.008-07:00


<div class="separator cover-item full-cover center-text-align" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-JCeb9BxYiUE/XwCFe7r-XoI/AAAAAAAAWg0/Qf4aw4GjkCIeVVthoY7jxC8cv8uD_IZpwCLcBGAsYHQ/s1600/landscape_color_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="512" data-original-width="1024" src="https://4.bp.blogspot.com/-JCeb9BxYiUE/XwCFe7r-XoI/AAAAAAAAWg0/Qf4aw4GjkCIeVVthoY7jxC8cv8uD_IZpwCLcBGAsYHQ/w800-h400-p-k-no-nu/landscape_color_1.png" />
  </a>
</div>

cover-item full-cover center-text-align

Article HowTo – Hero-Header

2020-07-27T11:48:00.008-07:00


<div class="separator cover-item small-cover light-text-color" style="clear: both; text-align: center;">
  <a href="https://1.bp.blogspot.com/-5oCQFzl106k/XwCFgGK7toI/AAAAAAAAWg8/MASI67zxk6oZomJLowmZfiI8Y75C2-5ywCLcBGAsYHQ/s1600/landscape_color_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="512" data-original-width="1024" src="https://1.bp.blogspot.com/-5oCQFzl106k/XwCFgGK7toI/AAAAAAAAWg8/MASI67zxk6oZomJLowmZfiI8Y75C2-5ywCLcBGAsYHQ/w800-h400-p-k-no-nu/landscape_color_5.png" />
  </a>
</div>

cover-item small-cover light-text-color

Index HowTo – Post-Thumbnail

2020-07-26T04:00:00.005-07:00

Situation

Following we have text content only, no media content available.


<div class="separator cover-item none-cover" style="clear: both; text-align: center;">
  <a href="https://4.bp.blogspot.com/-6oiaYKJVYgY/XwCFhVyNaoI/AAAAAAAAWhQ/u_fMoZBmJtU_T5jC44RkPmZ3XunZK3hNQCLcBGAsYHQ/s1600/landscape_gray_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" data-original-height="512" data-original-width="1024" src="https://4.bp.blogspot.com/-6oiaYKJVYgY/XwCFhVyNaoI/AAAAAAAAWhQ/u_fMoZBmJtU_T5jC44RkPmZ3XunZK3hNQCLcBGAsYHQ/w800-h534-p-k-no-nu/landscape_gray_2.png" />
  </a>
</div>

cover-item none-cover

By the way, there are nested comments too…

Index HowTo – Post-Snippet

2020-07-25T04:30:00.007-07:00

Situation

Following we have text content only, no media content available.


<div class="separator cover-item none-cover center-text-align" style="clear: both; text-align: center;">
  <span>Sometimes it's convenient to control a post's text and/or image excerpt for index view, regardless of its actual content. To be clear, this methode is just a visual facade and utilizes only css properties to become hidden in post view.</span>
</div>

cover-item none-cover center-text-align

By the way, there are comments too…

Index HowTo – Post-Snippet and Post-Thumbnail

2020-07-24T06:38:00.008-07:00

Index-Snippets consist of textnodes only and are limited to a specific amount of the first characters. For effective use it's recommended to strip unecessary whitespace, e.g. markup indentations.

Situation

Following we have text content only, no media content available.


<div class="separator cover-item none-cover" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-QpvwmelSiO0/XwCFiK6McXI/AAAAAAAAWic/hqylup0z-sonKR7I3QfzmdSi7XF55E4xwCPcBGAYYCw/s1600/landscape_gray_5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="512" data-original-width="1024" src="https://4.bp.blogspot.com/-QpvwmelSiO0/XwCFiK6McXI/AAAAAAAAWic/hqylup0z-sonKR7I3QfzmdSi7XF55E4xwCPcBGAYYCw/w800-h534-p-k-no-nu/landscape_gray_5.png" />
</a>
<span>Sometimes it's convenient to control a post's text and/or image excerpt for index view, regardless of its actual content. To be clear, this methode is just a visual facade and utilizes only css properties to become hidden in post view.</span>
</div>

cover-item none-cover

Index-Snippets consist of textnodes only and are limited to a specific amount of the first characters. For effective use it's recommended to strip unecessary whitespace, e.g. markup indentations.

Embedded Handling – Post-Thumbnail

2020-07-23T12:26:00.008-07:00

Various Tags and Embedded Content

Address Tag

1600 Amphitheatre Pkwy
Mountain View, CA 94043
United States

Sieh dir diesen Beitrag auf Instagram an

© Unsplash

Ein Beitrag geteilt von sugar3.io (@sugar3.io) am Jul 3, 2020 um 3:22 PDT

This sentence is following a <hr /> tag.

Insert Tag
This tag should denote inserted text.

© Unsplash pic.twitter.com/qcG2oiO4lJ
— sugar3.io (@sugar3_io) July 3, 2020

© Unsplash
Gepostet von sugar3.io am Freitag, 3. Juli 2020

Embedded Handling – Explicit Aspect-Ratio

2020-07-22T06:39:00.015-07:00

Default

Left Align

Center Align

Right Align

Justify Align

Embedded Handling – Implicit Aspect-Ratio

2020-07-21T06:38:00.014-07:00

Blockquotes

Multi line blockquote with a cite reference:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

multiple contributors - MDN HTML element reference - blockquote

Tables

Employee	Salary
John Doe	$1	Because that's all Steve Jobs needed for a salary.
Jane Doe	$100K	For all the blogging she does.
Fred Bloggs	$100M	Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs	$100B	With hair like that?! Enough said...

Preformatted

This tag is for preserving whitespace as typed, such as in poetry or ASCII art.

The Road Not Taken

Robert Frost

  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth

Image-Gallery – Unobtrusive Captions

2020-07-18T07:19:00.011-07:00

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Image-Gallery – Unobtrusive Thumbnails

2020-07-17T07:17:00.007-07:00

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

1.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
4.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
5.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
6.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
7.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
8.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Image-Gallery – Fixed Aspect-Ratio

2020-07-16T07:15:00.005-07:00

1. Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
2. Even before the internet was a thing, people already used Filler Text as a filler in printing tests.
3.) Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Image-Gallery – Portrait Orientation

2020-07-15T07:11:00.006-07:00

Griechenlands neuer Eigentümer
Das doppelte Lottchen
Workshop Plakat
Lampedusa
Small Cause
20 Jahre Radio RaBe
Design x Taipei
Astronautovic

Image-Gallery – Embedded Link

2020-07-14T07:13:00.007-07:00

Link

Carousel-Slider

2020-07-13T07:07:00.005-07:00

Video-Slider

2020-07-12T07:26:00.005-07:00

Supports Youtube, Vimeo and HTML video/audio
This video starts from 0:10

Video-Gallery

2020-07-11T07:28:00.005-07:00

Index HowTo – Jump Link

2020-05-20T06:32:00.005-07:00

Index HowTo – Prevent Post-Snippet

2020-05-19T06:34:00.005-07:00

Index HowTo – Post-Thumbnail Only

2020-05-18T06:34:00.006-07:00

Robert Frost

  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth;

  Then took the other, as just as fair,
  And having perhaps the better claim,          |\_/|
  Because it was grassy and wanted wear;       / @ @ \
  Though as for that the passing there        ( > º < )
  Had worn them really about the same,         `>>x<<´
                                               /  O  \
  And both that morning equally lay
  In leaves no step had trodden black.
  Oh, I kept the first for another day!
  Yet knowing how way leads on to way,
  I doubted if I should ever come back.

  I shall be telling this with a sigh
  Somewhere ages and ages hence:
  Two roads diverged in a wood, and I—
  I took the one less traveled by,
  And that has made all the difference.

  and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows

Only one thing is impossible for God: To find any sense in any copyright law on the planet.

Mark Twain

Index HowTo – Truncate Post-Snippet

2020-05-17T06:33:00.005-07:00

2020-05-14T12:43:00.007-07:00

No Title – Just Content.

Tauma tawhakatangi hangakoauauo tamatea turipuka kapiki maungahoronu kupokai whenua kitanatahu.

Long Title – Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu

2020-05-13T12:39:00.005-07:00

Title should not overflow the content area.

A few things to check for:

Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
Check the browser window / tab title.

The following CSS properties are used to support non-breaking text:


-ms-word-wrap: break-word;
word-wrap: break-word;

No Content – Tauma tawhakatangi hangakoauauo tamatea turipuka kapiki maungahoronu kupokai whenua kitanatahu

2020-05-12T12:38:00.003-07:00

Video Handling – YouTube

2020-05-11T15:09:00.004-07:00

Video Handling – Vimeo

2020-05-10T15:08:00.004-07:00

Layout Test Suite – Videos #1

2020-05-09T13:23:00.005-07:00

Layout Test Suite – Videos #2

2020-05-08T13:22:00.005-07:00

Layout Test Suite – Videos #3

2020-05-07T13:21:00.005-07:00

Layout Test Suite – Videos #4

2020-05-06T13:20:00.004-07:00

Layout Test Suite – Videos #5

2020-05-05T12:47:00.004-07:00

Layout Test Suite – Videos #6

2020-05-04T12:46:00.004-07:00

Layout Test Suite – Videos #7

2020-05-03T12:46:00.002-07:00

Layout Test Suite – Videos #8

2020-05-02T12:46:00.004-07:00

Layout Test Suite – Images #1

2020-05-01T12:09:00.004-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Layout Test Suite – Images #2

2020-04-30T12:08:00.004-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Layout Test Suite – Images #3

2020-04-29T12:07:00.004-07:00

Even before the internet was a thing, people already used Filler Text as a filler in printing tests.

Layout Test Suite – Embedded #1

2020-04-28T12:03:00.004-07:00

© Unsplash pic.twitter.com/qcG2oiO4lJ
— sugar3.io (@sugar3_io) July 3, 2020

Layout Test Suite – Embedded #2

2020-04-27T12:02:00.004-07:00

© Unsplash
Gepostet von sugar3.io am Freitag, 3. Juli 2020

Layout Test Suite – Embedded #3

2020-04-26T12:01:00.008-07:00

Sieh dir diesen Beitrag auf Instagram an

© Unsplash

Ein Beitrag geteilt von sugar3.io (@sugar3.io) am Jul 3, 2020 um 3:22 PDT

Documentation

2020-08-23T03:00:00.000-07:00

Gelati Sugarfree –

A⁺ Retrofitted Blogger v2 Template

Feature Examples and Usage Instructions

Explore blog template reference

Quick Installation Guide

Preperations

Get Gelati Sugarfree

Start at Gelati Sugarfree's GitHub-Repository 📁

▸ Get familiar with the 📋 README

▸ and afterwards download the following resources:

📄 Blog Theme
📄 Demo Content (optional)

Backup current blog theme

Blogger > Theme > Backup/Restore: ▸ Download a backup of your theme – Download current Theme; Hint: If applicable, setup a new blog instance on Blogger instead and start from scratch

Import Gelati Sugarfee

Blogger > Theme > Backup/Restore: ▸ Upload a theme from a file – Upload Blog Theme
Blogger > Settings > Other: ▸ Content (pages, posts & comments) – Import Demo Content
▸ ✅ Automatically publish all imported posts and pages; Hint: Import of Demo Content is optional but recommended to ease further configuration and usage examples

Configuration and Customization

Apply Blogger settings

Blogger > Settings > Posts, comments and sharing: ▸ Posts — 🔟 Posts on the main page; Configure an even Number for posts per page. Six posts per page is a recommended value
Blogger > Theme > Mobile > Gear wheel: ▸ Customize Mobile Theme — ✅ No. Show desktop theme on mobile devices; Hint: Instructs Blogger to include custom web fonts in mobile mode too. Alternatively you'd have to add them manually via CSS
Blogger > Layout > Gelati Sugarfree (Header): ▸ Image — First, click Remove current image, then Upload new logo
▸ Placement — ✅ Instead of title and description.; Afterwards note URL and dimensions of the new logo for further configuration, e.g. right click image; Hint: You can also use a title and description, text-based header, instead of logo image
Blogger > Posts: ▸ All Lables – Determine favorite labels; Choose top category labels for further configuration of prominent label portrayal in related menu and widgets. Otherwise label items might get displayed conealed for layout reasons; Hint: For layout reasons a maximum of 4 top category labels is recommended
Blogger > Posts: ▸ Published – Designate featured posts; Assign label FEATUREDSLIDERto posts you want be featured in the Hero-Slider widget; Hint: While label configurations are optional features of this blog template, it's recommended to assign at least one blog post the FEATUREDSLIDER label. It works as special label, used to designate posts as items for Hero-Slider, but is hidden on purpose in regular label listings of other menu and widgets. This mechanic prevents label clutter in blog scenarios where actually no label usage is wanted/needed at all

Apply Template-Editor settings

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - disable cookie conset
</b:comment>
<script type='text/javascript'> cookieChoices = {}; </script>


…

<b:comment>
configure blogtemplate - blog settings
</b:comment>
<b:with value='🔟' var='postsPerPage'>
Use the same even Number as before

<b:with value='{ url: &quot;https://4.bp.blogspot.com/-abc…/def…/ghi…/jkl…&quot;, name: &quot;logo.png&quot;, width: 186, height: 72 }' var='blogCover'>
Split the Blogger hosted blog logo URL in two substrings - one before, and another after the pattern "/s1600/" - and insert them in the corresponding fields of "url" and "name". Place dimension's "width" and "height" too.

<b:with value='{&quot;Layout&quot;, &quot;Markup&quot;, &quot;Gallery&quot;, &quot;Test Case&quot;}' var='labelsTop'>
Insert the determined top category labels items

<b:with value='&quot;FEATUREDSLIDER&quot;' var='featuredSliderLabel'>
Optonal: Define another label name for the FEATUREDSLIDER special label

Apply Template-Editor customizations

Blogger > Theme > Edit HTML


<!-- b:comment: customize blogtemplate - label css (start) -->
<Variable hideEditor='true' name="label.cover.Video" description="Label Cover Video" type="string" default="https://2.bp.blogspot.com/-abc…/def…/ghi…/jkl…/s1600/video.png" value="https://2.bp.blogspot.com/-abc…/def…/ghi…/jkl…"/>
Some label related widgets are able to display covers next to label names. This optional feature requires to define a Blogger skin label item variable. Split the Blogger hosted label cover URL in two substrings and insert the part before the pattern "/s1600/" in its "value" field. As a reminder you can note the full url in the field "default"

<Variable hideEditor='true' name="label.cover.Test_Case" description="Label Cover Test_Case" type="string" default="https://3.bp.blogspot.com/-abc…/def…/ghi…/jkl…/s1600/test_case.png" value="https://3.bp.blogspot.com/-abc…/def…/ghi…/jkl…"/>
Label names have to be latin-only and must contain no special characters except whitespace. In such circumstances replace every " " occurance with "_" character

<!-- b:comment: customize blogtemplate - label css (end) -->

…

body .label-item-Test_Case { background-image: url("$(label.cover.Test_Case)/w400-h200-c/test_case.png"); }
Every label item variable is accompanied by three label associated CSS rules

body .full-width.label-item-Test_Case { background-image: url("$(label.cover.Test_Case)/w800-h400-c/test_case.png"); }
This allows to define tailored cover images resolutions

body .ratio-square.label-item-Test_Case { background-image: url("$(label.cover.Test_Case)/w400-h400-c/test_case.png"); }
It's recommended to use Blogger API-based image hosting infrastructure for efficient storage and retrieval of label covers
Hint: This blog template tries it's best to offer media-related features like covers, thumbnails, hero-images, etc. regardless of their source. But whenever applicable, use official Blogger hosting capabilities for image and video to get the best UX with this blog temaplate.

Final notes

Voilà, installation completed – if everything works get some 🍦

For a correct presentation of the PopularPosts widget your blog's posts need to have a certain amount of page views. Apart from proper configuration please do also ensure to have actual pageviews for a couple of your favorite blog posts, especially in case of start from scratch.

Advanced Setup Guide

Custom Domain Usage

This blog template employs third-party components from Menucool which provide versatile Menu and Gallery elements to enhance the blog template's UX in a significant way.

License Information

While there exists no association, Gelati Sugarfree was provided with free licenses for its integrated Menucool components, valid for all blog template instances running on standard Blogger *.blogspot.com subdomains. Users that plan to utilize this blog template with custom domain configured Blogger blog-instances have to provide domain-bound licenses, purchasable form Menucool:

License Setup

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - custom domain (optional)
</b:comment>
<b:with value='data:view.isPreview or not data:blog.hasCustomDomain ? { menu: &quot;2c6b88&quot;, slider: &quot;b2l868&quot;, tooltip: &quot;248t8&quot; } : { menu: &quot;2c4g83&quot;, slider: &quot;b2l348&quot;, tooltip: &quot;248h3&quot; }' var='licenseKeys'>
Insert your aquired McMenu, Ninja Slider and JS Tooltip license keys in the respective fields

Further Customization and Development

Hosting and DEV environment settings

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - hosting/development (optional)
</b:comment>
<b:with value='data:view.isPreview or not data:blog.hasCustomDomain ? &quot;//gelatistatic.sugar3.io&quot; : &quot;//your.host.com&quot;' var='resourcesUrl'>
A valid blog template resources url is composed of a protocol-relative schema, a hostname, and optional a following path: "https://gelatistatic-dev.sugar3.io/v1/css/main.css"
Hint: Regardless of path information, this value does not include a trailing slash

<b:with value='&quot;v1_dev&quot;' var='resourcesVersion'>
Furthermore there is a mandatory subdirectory. Effecively representing the blog template's resources basepath, allowing to serve multiple resource versions: "https://gelatistatic-dev.sugar3.io/v1/css/main.css"
Hint: This also acts as primitive dev/prod environment switch-logic flag, current valid values are "v1|v1_dev"

DEV/PROD resources locations

Blogger > Theme > Edit HTML


<b:comment>
configure blogtemplate - hosting/development (optional)
</b:comment>
<b:if cond='data:resourcesVersion contains &quot;_dev&quot;'>
dev/prod switch-logic
…
<link expr:href='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/css/feedwidgets.css&quot;' rel='stylesheet' type='text/css'/>
<script expr:src='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/js/feedwidgets.js&quot;' type='text/javascript'/>
<link expr:href='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/css/paginationwidgets.css&quot;' rel='stylesheet' type='text/css'/>
<script expr:src='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/js/paginationwidgets.js&quot;' type='text/javascript'/>
references unbundled resources
<b:else/>
dev/prod switch-logic
<link expr:href='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/css/main.css&quot;' rel='stylesheet' type='text/css'/>
<script expr:src='data:resourcesUrl + &quot;/&quot; + data:resourcesVersion + &quot;/js/app.js&quot;' type='text/javascript'/>
references bundled resources

</b:if>

Gelati Sugarfree Toolchain

Toolchain Requirements
Download Toolchain: ▸ git clone https://github.com/sugar3-io/gelati-sugarfree.git; ▸ cd gelati-sugarfree

Blog Resources development

Usage: ▸ cd blog-resources; ▸ npm install; edit sources in 📁 src/; 📄📄… js/*.js; 📄📄… css/*.css; ▸ npm run build; find bundled output in 📁 dist/; 📃 js/app.js; 📃 css/main.css
Deploy: transfer or serve 📁; blog-resources/src/* ➜ resourcesUrl/v1_dev/*; blog-resources/dist/* ➜ resourcesUrl/v1/*

Blog Post styling

Usage

▸ cd blogpost-style

▸ npm install

edit sources in 📁 scss/

📄📄… *.scss

▸ npm run rultor

find blog post CSS-file in 📁 dist/

📃 gelati-sugarfree-blogpoststyle-x.y.z.min.css

📋 copy content to clipboard

Blogger > Theme > Edit HTML


/* b:comment: customize blogtemplate - blogpost css (start) */
body.article-view .post-body .content-item input,body.article-view .post-body .content-item textarea,body.article-view .post-body .content-item select,…
📋 paste content into Blog Theme
/* b:comment: customize blogtemplate - blogpost css (end) */

Final notes

Congratulations your customized blog template environment is now setup 🎉

Gelati Sugarfree's tooling is based on npm-build-boilerplate and tacit. While both toolchains will provide various sophisticated develop environment capbilities like live-reloading, neither Blogger nor this blog template do support these features. Serving blog resources from a local enviroment could work but was out of project scope and has not been tested.

About

2020-08-23T06:24:00.000-07:00

Gelati Sugarfree –

A⁺ Retrofitted Blogger v2 Template

Configurable and Customizable

Most configurable features of this blog template are a accessible through standard Blogger menus or methods, e.g.:

Labels and Pages
Related Widgets and Blog items are populated automatically.
Multilingual Support
Localized UI captions are provided by Blogger's i18n'd data:messages dictionary.
Layout and Theme Designer
Overall visual settings (Widgets, layout, typography, colors) are accessible through Blogger's usual methods. These mechanics are integrated into a fluid, respsonsive presentation on Mobiles, Tablets and Desktop devices.

Follows Blogger's conventions

Available template language features are used wherever possible to take advantage of the platform's scaled and robust architecture.

Customized solutions for some of this blog template's extended features were designed with care to ensure maintainability with future Blogger template and platform versions.

Zero dependency

No third-party WebServices
Only Google APIs, regular used by official Blogger templates, are consumed in this blog template.
No frontend frameworks or libraries
This blog template comprises of handcrafted, vanilla Javascript and CSS components. Extensive browser coverage for major platforms is provided including desktop legacy browsers.
Accessible codebase
Despite lack of the "usual suspects", there is no need to reinvent the wheel. This blog template employs a small but powerfull set of third-party integrations: Javascipt components to handle complex UI patterns like Menu and Gallery variations, as well as an (optional) blog post CSS-template, particually affecting article content only, ruling out unintended interference with overall blog layout

Credits

Third-Party

menucool.com

tacit

npm-build-boilerplate

unsplash.com

coverr.co

flaticon.com

License and Copyright

MIT License © Gelati Sugarfree / sugar3.io

[...] Trackback test. [...]

2007-11-21T03:31:12.000-08:00

[...] Trackback test. [...]

[...] Another trackback test. Lorem ipsum dolor s...

2007-11-21T03:35:47.000-08:00

[...] Just a short one. [...]

2007-11-21T03:38:22.000-08:00

[...] Just a short one. [...]

[...] Another short one. [...]

2007-11-21T03:39:25.000-08:00

[...] Another short one. [...]

This is a comment amongst pingbacks and trackbacks.

2010-06-11T08:27:04.000-07:00

This is a comment amongst pingbacks and trackbacks.

This user it trying to be anonymous.

...

2013-03-11T16:45:54.000-07:00

This user it trying to be anonymous.

They used a fake email, so there should be no Gravatar associated with it.
They did not speify a website, so there should be no link to it in the comment.

Comments? I love comments!

2013-03-12T06:17:35.000-07:00

Comments? I love comments!

These tests are amazing!

2013-03-14T00:53:26.000-07:00

These tests are amazing!

Author Comment.

2013-03-14T00:56:46.000-07:00

Author Comment.

Comment Depth 01

2013-03-14T00:57:01.000-07:00

Comment Depth 01

Comment Depth 02

2013-03-14T01:01:21.000-07:00

Comment Depth 02

Comment Depth 03

2013-03-14T01:02:06.000-07:00

Comment Depth 03

Comment Depth 04

2013-03-14T01:03:22.000-07:00

Comment Depth 04

Comment Depth 05

Also an author comment.

2013-03-14T01:10:29.000-07:00

Comment Depth 05

Also an author comment.

Comment Depth 06 has some more text than some of t...

2013-03-14T01:12:16.000-07:00

Comment Depth 06 has some more text than some of the other comments on this post.

Comment Depth 07 has a little bit.

2013-03-14T01:12:58.000-07:00

Comment Depth 07 has a little bit.

Comment Depth 08

2013-03-14T01:13:42.000-07:00

Comment Depth 08

Comment Depth 09 is way nested, but there are a lo...

2013-03-14T01:14:13.000-07:00

Comment Depth 09 is way nested, but there are a lot of sites with very nested comments.

Comment Depth 10

Also an author comment.

2013-03-14T01:14:47.000-07:00

Comment Depth 10

Also an author comment.

Image comment.

If the image imports...

2013-03-14T02:56:43.000-07:00

Image comment.

If the image imports...

We are totally going to blog about these tests Σίγ...

2013-03-14T04:23:24.000-07:00

We are totally going to blog about these tests Σίγουρα θα σχολιάσουμε τα τεστς!

We use these tests all the time! Killer stuff!

2013-03-14T04:27:54.000-07:00

We use these tests all the time! Killer stuff!

Thanks for all the comments, everyone!

2013-03-14T04:30:33.000-07:00

Thanks for all the comments, everyone!

this is test comment

Feeling testy?

2014-09-28T19:52:15.000-07:00

this is test comment

Feeling testy?

With the online text generator you can process you...

2020-07-11T09:35:51.575-07:00

With the online text generator you can process your personal Lorem Ipsum enriching it with html elements that define its structure, with the possibility to insert external links, but not only. Now to compose a text Lorem Ipsum is much more fun! In fact, inserting any fantasy text or a famous text, be it a poem, a speech, a literary passage, a song's text, etc., our text generator will provide the random extraction of terms and steps to compose your own exclusive Lorem Ipsum. Be original, test your imagination... our Lorem Ipsum generator will amaze you. Try it now! Copy and Paste!

Duis autem vel eum iriure dolor in hendrerit in vu...

2020-07-11T09:37:33.211-07:00

Duis autem vel eum iriure dolor in hendrerit in vu...

2020-07-11T09:38:27.242-07:00

Lorem ipsum dolor sit amet, consetetur sadipscing ...

2020-07-14T00:24:36.305-07:00

Lorem Ipsum is simply dummy text of the printing a...

2020-07-14T00:25:21.028-07:00

Gelati Sugarfree B DEV

Vorlage: Gelati Sugarfree B DEV

Der Veröffentlichungstyp für diesen Blog.

Die Liste mit den E-Mail-Adressen der Administratoren dieses Blogs

Ob dieser Blog nicht jugendfreien Inhalt enthält

Google Analytics-Kontennummer des Blogs

Formatnummer des Archivindexdatums

Häufigkeit, mit der dieser Blog archiviert werden soll

Die Liste mit den E-Mail-Adressen der Autoren, die zur Veröffentlichung berechtigt sind.

Ob eine Archivseite für jeden Post angelegt werden soll

Wer darf Kommentare erstellen?

Ob Kommentatoren ein Captcha ausfüllen müssen

E-Mail-Liste, an die Benachrichtigungen zu neuen Kommentaren gesendet werden sollen

Der Feed-Typ, der für Blog-Kommentare verwendet werden soll

Ort des Blog-Kommentarformulars

Blog-Kommentarnachricht

Ob die Kommentarprüfung aktiviert werden soll

Anzahl an Tagen, nach denen neue Kommentare geprüft werden sollen

E-Mail-Adresse, an die Benachrichtigungen über neue Kommentare gesendet werden sollen, die eine Überprüfung erfordern

Ob Profilbilder in Kommentaren angezeigt werden sollen

Ob Kommentare angezeigt werden

Formatnummer des Kommentarzeitstempels

Ob Zeilenumbrüche im Post-Editor in -Tags umgewandelt werden

Der benutzerdefinierte ads.txt-Inhalt des Blogs, der Anzeigensuchmaschinen bereitgestellt wird.

Mit dieser Einstellung wird festgelegt, ob der Blog benutzerdefinierte ads.txt-Inhalte für Anzeigensuchmaschinen bereitstellt.

Inhalt, der angezeigt wird, wenn der angeforderte Post oder die Seite nicht gefunden wurde

Der benutzerdefinierte robots.txt-Inhalt des Blogs, der Suchmaschinen bereitgestellt wird.

Legt fest, ob dieser Blog benutzerdefinierte robots.txt-Inhalte für Suchmaschinen bereitstellt.

Formatnummer für Datumskopfzeile

Standard-Kommentarmodus für Posts

Eine Beschreibung des Blogs.

Ob ein Link angezeigt wird, über den Nutzer Posts per E-Mail senden können.

URL, an die Post-Feed-Anfragen weitergeleitet werden sollen

Ob dynamische Textanpassung für den Blog aktiviert ist

Sprache für diesen Blog

Maximale Anzahl an Elementen, die auf der Hauptseite angezeigt werden"

Block mit Elementen, die auf der Hauptseite angezeigt werden

Meta-Beschreibung des Blogs, die für Suchmaschinen bereitgestellt wird

Legt fest, ob für diesen Blog Meta-Beschreibungen bereitgestellt werden

Der Name des Blogs

Der Feed-Typ, der für Pro-Post-Kommentare verwendet werden soll.

Der Feed-Typ, der für Blog-Posts verwendet werden soll

Footer, der an das Ende eines jeden Eintrags im Post-Feed angehängt werden soll

Die Vorlage für Blog-Posts

Ob Schnellbearbeitung aktiviert ist

Der Zugriffstyp für die Leser des Blogs.

Die Liste mit den E-Mail-Adressen der Nutzer, die zum Lesen des Blogs berechtigt sind.

Ob dieser Blog von Suchmaschinen indexiert werden soll

Kommagetrennte Liste von E-Mails, an die neue Blog-Posts gesendet werden sollen.

Ob ein Feld mit verwandten Links in der Erstellungshilfe für Posts angezeigt wird

Die BlogSpot-Subdomain, unter der dein Blog veröffentlicht wird

Formatnummer für Zeitstempel

Die Zeitzone für diesen Blog

Legt fest, ob Bilder beim Anklicken in der Lightbox angezeigt werden sollen

Showcase – Markup, Gallery and Hero-Header

Blog template capabilities

Let's start with some Headings

H3 Heading

H4 Heading

Showcase – Extensive Markup, Image Handling and Hero-Image

Blog post styling

Forms

Tables

Headings

This is <h1>

This is <h2>

This is <h3>

This is <h4>

This is <h5>

This is <h6>

Lists

Blockquote

Aside

Keyboard

Media

Image Handling – Basic Usage

Lists are an interesting beast

Ordered - Unordered - Ordered

Ordered - Unordered - Unordered

Now to compose a text Lorem Ipsum is much more fun!

Ob Zeilenumbrüche im Post-Editor in
-Tags umgewandelt werden

A⁺ Retrofitted Blogger v2 Template