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.

Documentation

Gelati Sugarfree –

A+ Retrofitted Blogger v2 Template

Feature Examples and Usage Instructions

Explore blog template reference

Quick Installation Guide

Preperations

Get Gelati Sugarfree

Backup current blog theme

Import Gelati Sugarfee

Configuration and Customization

Apply Blogger settings

Apply Template-Editor settings

Apply Template-Editor customizations

Final notes

Advanced Setup Guide

Custom Domain Usage

License Information

License Setup

Further Customization and Development

Hosting and DEV environment settings

DEV/PROD resources locations

Gelati Sugarfree Toolchain

Blog Resources development

Blog Post styling

Final notes

No comments

Post a Comment

A⁺ Retrofitted Blogger v2 Template