Responsive iFrame - All Devices - Draggable

29 Sep 2022 / M!CROCH!C

Scaling iFrame - CSS Transforms

29 Sep 2022 / M!CROCH!C

Remove Link Titles

24 Sep 2022 / M!CROCH!C

<a href="https://denverit.com" title="This is the Title Attribute">A Link with a Title Attribute</a>

The Title ToolTip is hidden by this script...

<script>
var anchors = document.querySelectorAll('a[title]');
    for (let i = anchors.length - 1; i >= 0; i--) {
    anchors[i].addEventListener('mouseenter', function(e){
        anchors[i].setAttribute('data-title', anchors[i].title);
        anchors[i].removeAttribute('title');
        
    });
    anchors[i].addEventListener('mouseleave', function(e){
        anchors[i].title = anchors[i].getAttribute('data-title');
        anchors[i].removeAttribute('data-title');
    });
}
</script>

By @hugsbrugs at https://stackoverflow.com/questions/15364063/is-it-possible-to-hide-the-title-from-a-link-with-css/73835463

Blockchain Simplified

18 May 2022 / M!CROCH!C

Best explanation I've found so far...

Tab Box

14 May 2022 / M!CROCH!C

w3c html css js

History of the Web

Tim Berners-Lee invented the World Wide Web in 1989, about 20 years after the first connection was established over what is today known as the Internet. At the time, Tim was a software engineer at CERN, the large particle physics laboratory near Geneva. Many scientists participated in experiments at CERN for extended periods of time, then returned to their laboratories around the world. These scientists were eager to exchange data and results, but had difficulties doing so. Tim understood the unrealized potential of millions of computers connected together through the Internet.
HTML

HTML —which is short for HyperText Markup Language— is the official language of the World Wide Web and was first conceived in 1990. HTML is a product of SGML (Standard Generalized Markup Language) which is a complex, technical specification describing markup languages, especially those used in electronic document exchange, document management, and document publishing. HTML was originally created to allow those who were not specialized in SGML to publish and exchange scientific and other technical documents. HTML especially facilitated this exchange.
CSS

The saga of CSS starts in 1994. One of the authors of this book works at CERN - the cradle of the Web - and the Web is starting to be used as a platform for electronic publishing. One crucial part of a publishing platform is missing, however: there is no way to style documents. For example, there is no way to describe a newspaper-like layout in a Web page. Having worked on personalized newspaper presentations at the MIT Media Laboratory, Håkon saw the need for a style sheet language for the Web. Style sheets in browsers were not an entirely new idea.
JavaScript

JavaScript was originally developed in Netscape, by Brendan Eich. Battling with Microsoft over the Internet, Netscape considered their client-server solution as a distributed OS, running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++ and aimed at professional programmers, Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers, like Microsoft's VB. Developed under the name Mocha, LiveScript was the official name for the language.

.htaccess URL Forwarding

09 May 2022 / M!CROCH!C

RewriteEngine on
RewriteCond %{HTTP_HOST} ^coloradojustice\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.coloradojustice\.com$
RewriteRule ^/?$ "https\:\/\/1colo\.com\/coloradojustice" [R=301,L]

This causes the URL coloradojustice.com to redirect (or "permanently forward") to 1colo.com/coloradojustice

Ghost comes with a best-in-class editor which does its very best to get out of the way, and let you focus on your content. Don't let its minimal looks fool you, though, beneath the surface lies a powerful editing toolset designed to accommodate the extensive needs of modern creators.

For many, the base canvas of the Ghost editor will feel familiar. You can start writing as you would expect, highlight content to access the toolbar you would expect, and generally use all of the keyboard shortcuts you would expect.

Our main focus in building the Ghost editor is to try and make as many things that you hope/expect might work: actually work.

You can copy and paste raw content from web pages, and Ghost will do its best to correctly preserve the formatting.
Pasting an image from your clipboard will upload inline.
Pasting a social media URL will automatically create an embed.
Highlight a word in the editor and paste a URL from your clipboard on top: Ghost will turn it into a link.
You can also paste (or write!) Markdown and Ghost will usually be able to auto-convert it into fully editable, formatted content.

The Ghost editor. Also available in dark-mode, for late night writing sessions.

The goal, as much as possible, is for things to work so that you don't have to think so much about the editor. You won't find any disastrous "block builders" here, where you have to open 6 submenus and choose from 18 different but identical alignment options. That's not what Ghost is about.

What you will find though, is dynamic cards which allow you to embed rich media into your posts and create beautifully laid out stories.

Using cards

You can insert dynamic cards inside post content using the + button, which appears on new lines, or by typing / on a new line to trigger the card menu. Many of the choices are simple and intuitive, like bookmark cards, which allow you to create rich links with embedded structured data:

or embed cards which make it easy to insert content you want to share with your audience, from external services:

But, dig a little deeper, and you'll also find more advanced cards, like one that only shows up in email newsletters (great for personalized introductions) and a comprehensive set of specialized cards for different types of images and galleries.

Once you start mixing text and image cards creatively, the whole narrative of the story changes. Suddenly, you're working in a new format.

As it turns out, sometimes pictures and a thousand words go together really well. Telling people a great story often has much more impact if they can feel, even for a moment, as though they were right there with you.

Galleries and image cards can be combined in so many different ways — the only limit is your imagination.

Build workflows with snippets

One of the most powerful features of the Ghost editor is the ability to create and re-use content snippets. If you've ever used an email client with a concept of saved replies then this will be immediately intuitive.

To create a snippet, select a piece of content in the editor that you'd like to re-use in future, then click on the snippet icon in the toolbar. Give your snippet a name, and you're all done. Now your snippet will be available from within the card menu, or you can search for it directly using the / command.

This works really well for saving images you might want to use often, like a company logo or team photo, links to resources you find yourself often linking to, or introductions and passages that you want to remember.

You can even build entire post templates or outlines to create a quick, re-usable workflow for publishing over time. Or build custom design elements for your post with an HTML card, and use a snippet to insert it.

Once you get a few useful snippets set up, it's difficult to go back to the old way of diving through media libraries and trawling for that one thing you know you used somewhere that one time.

Publishing and newsletters the easy way

When you're ready to publish, Ghost makes it as simple as possible to deliver your new post to all your existing members. Just hit the Preview link and you'll get a chance to see what your content looks like on Web, Mobile, Email and Social.

You can send yourself a test newsletter to make sure everything looks good in your email client, and then hit the Publish button to decide who to deliver it to.

Ghost comes with a streamlined, optimized email newsletter template that has settings built-in for you to customize the colors and typography. We've spent countless hours refining the template to make sure it works great across all email clients, and performs well for email deliverability.

So, you don't need to fight the awful process of building a custom email template from scratch. It's all done already!

The Ghost editor is powerful enough to do whatever you want it to do. With a little exploration, you'll be up and running in no time.

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.

YT Embed

28 Mar 2021 / M!CROCH!C

<div class="youtube-embed" data-id="xuHQSLUZW5M"></div>

YT Full Canvas

28 Mar 2021 / M!CROCH!C

YT Full Canvas Template

28 Mar 2021 / M!CROCH!C

Bubbly Trail

27 Mar 2021 / M!CROCH!C

3D Plane

27 Mar 2021 / M!CROCH!C

OPEN

Bigfoot Footnote

22 Mar 2021 / M!CROCH!C

Image Test

22 Mar 2021 / M!CROCH!C

MicroChic Interruptus

19 Mar 2021 / M!CROCH!C

Welcome

18 Mar 2021 / M!CROCH!C

Navigation Bling

17 Mar 2021 / M!CROCH!C

COOL NAV

Cave

16 Mar 2021 / M!CROCH!C

This is an excerpt.

Frog

16 Mar 2021 / M!CROCH!C

Fox

16 Mar 2021 / M!CROCH!C

Custom Cards (Snippets)

15 Mar 2021 / M!CROCH!C

Discourse iFrame Embed

01 Mar 2021 / M!CROCH!C

CSS Radio Buttons

01 Mar 2021 / M!CROCH!C

Javascript iFrame

23 Feb 2021 / M!CROCH!C

From this tutorial

From https://www.dyn-web.com/tutorials/iframes/

<style>
iframe#ifrm {
    width: 50%;
    margin: 0 25%;
    height: 150px;
    border: 1px solid #ccc;
    margin-top: .8em;
}
</style>

<div id="framer"></div>

<script>
var ifrm = document.createElement('iframe');
ifrm.setAttribute('id', 'ifrm'); // assign an id

// document.body.appendChild(ifrm); // to place at end of document

// to place before another page element
var el = document.getElementById('framer');
el.parentNode.insertBefore(ifrm, el);

// assign url
ifrm.setAttribute('src', 'https://denvergeeks.com');
</script>

Mobile Button Animated

21 Feb 2021 / M!CROCH!C

Test Post

20 Feb 2021 / M!CROCH!C

The Default Template

Word Galaxy

20 Feb 2021 / M!CROCH!C

The iFrame Full Canvas Template

Blank Full Canvas

20 Feb 2021 / M!CROCH!C

The Blank Full Canvas Template

Tyrannosaurus Thesaurus

19 Feb 2021 / M!CROCH!C

Inline content embed, Default Template, all page elements css-hidden.

Otterframe Embed

19 Feb 2021 / M!CROCH!C

<div class="otterframe">
<iframe src="https://otter.ai/s/OKUtWbXvTdODm7XlnnSnPg?noGapBottom=true&scrolling=true"></iframe>
</div>

Otter Embed Codes

19 Feb 2021 / M!CROCH!C

... while hiding the top branding banner ...

FRONT PAGE

Excerpt Link Slide-In

Put this in the Excerpt field, replacing CODE with the code from the shared Otter Note URL.
(uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

<a href="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true" rel="otter">LISTEN</a>

Note: to slide-in a page other than Otter, use rel=dd
(uses ddajaxsidepanel.min.js, div.ddajaxsidepanel, .ddajaxsidepanel .contentarea, and div.ddajaxsidepanel iframe)

Title/Image Pop-Up (full canvas) iFrame

Full canvas - the iFrame content covers the entirety of the popped-up page, with a Home button in the top left corner (also useful for embedding, popping up or sliding in from other sites.)

a. In the editor, select the Otter Full Canvas Template (which only uses the empty {{#post}} {{/post}} as wrapper for the iFrame.
b. In the Facebook Description, put (only) the Otter CODE.

Or... alternatively – put this HTML into the content of the post. This accomplishes the same as the above, but includes all of the default post elements which you can selectively include on the page along with the iFrame. (Also useful as a re-usable Snippet in the editor.)

(uses iframe.modal_iframe modal_iframe-on, div.otterpop, and div.otterpop iframe)

<div class="otterpop">
    <iframe src="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true"></iframe>
</div>
<style>
body.post-template article.post,
section.post,
.container-wrap-modal {
    padding: 0;
    margin:0
    }
.post-title,
.post-full-image,
.post-nav,
.post-meta--top,
.authors,
.aside,
.toc-details,
.group {
    display:none
    }
figure {
    margin: 0
    }
</style>

IN CONTENT

Image Link Slide-In >>

(uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

<div style="padding: 0 25%">
  <a href="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true" rel="otter">
    <h2 class="post-title" style="font-size: 1.2em">
        Listen >>
    </h2>

>> INSERT IMAGE CARD HERE <<

  </a>
</div>
<style>
.post-full-image {
    display: none
    }
.kg-image-card {
    margin: 0
    }
</style>

Text Link Slide-In >>

(uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

<a href="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true" rel="otter">Listen >></a>

Embedded Block >>

Use this sparingly as it loads with the page and slows down the site.
(uses div.otterframe and div.otterframe iframe)

<div class="otterframe">
<iframe src="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true"></iframe>
</div>

The portable version (to embed Otter.ai posts in any other site) is this code (also useful as a re-usable Snippet in the editor):

<style>

div.otterframe iframe {
    height:30em;
    width:100%;
    border:0px none;
    margin:-57px 0 1.5em 0
    }
    
div.otterframe {
    overflow:hidden;
    border-radius:10px;
    background-color:#fff;
    width:30em;
    margin:auto;
    box-shadow: -1px 3px 15px -4px rgba(0,0,0,0.76)
    }
    
@media (max-width: 767px) {
    div.otterframe {
        width:100%;
        box-shadow:none
    }        
}

</style>
<div class="otterframe">
<iframe src="https://otter.ai/u/CODE?noGapBottom=true&scrolling=true">
</iframe>
</div>

Gallery

17 Feb 2021 / M!CROCH!C

In-page Image Gallery, Default Template.

iFrame Popup

17 Feb 2021 / M!CROCH!C

<< iFrame Slide-In

Otter Popup

16 Feb 2021 / M!CROCH!C

<< Otter Slide-In

Image Archive Template

16 Feb 2021 / M!CROCH!C

Image Archive Template

YouTube Title Popup

01 Jan 2021 / M!CROCH!C

<< YouTube Slide-In

<a href="https://www.youtube.com/embed/EGSsjOynXg4" rel="dd">>>CLICK<<</a>

>>CLICK<<

Content Accordion

27 Dec 2020 / M!CROCH!C

Content Accordions demo, Default Template.

Click Here to Open and Close this Accordion

This accordion defaults to closed...

Click Here to Close and Open this Accordion

To make an accordion default to open, add open after details, like this...

<details open>

ANY CONTENT THAT YOU WANT TO HIDE INSIDE AN ACCORDION, put it in between these 2 blocks of HTML:

HTML block 1:

<details>
  <summary>Click Here to Close and Open this Accordion</summary>

    <p>This accordion defaults to closed</P>

[Add your content and blocks as usual, sandwiched right here, in between]

HTML block 2:

</details>

<style> /* some optional pretty styling */
            
details {
    width: 100%;
    background-color: #eee;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #35353536;
}
            
summary {
    background: rgb(59,89,152,.5);
    color: #fff;
    padding: 0 0 0 15px;
    margin: -5px;
    cursor: pointer;
    border: .5px solid gray;
    border-radius: 5px;
    outline: none;
}

summary:focus, summary:hover {
background-color: rgb(0,172,237,.5);
}
            
</style>

Website Thumbnail iFrames

27 Dec 2020 / M!CROCH!C

Website Thumbnail iFrames demo, Default Template.

Method from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db

Embedding these (and Otterframes or other iFrames) in Popup Footnotes and Slide-Ins is good, as the remote sites only load when triggered and do not slow down the site.

<div style="text-align:center">
<a href="https://microchic.fm" rel="dd">
<div class="i-thumbnail-container" title="https://microchic.fm -->">
<div class="i-thumbnail">
  <iframe src="https://microchic.fm/" frameborder="0" onload="var that=this;setTimeout(function() { that.style.opacity = 1 }, 500)"></iframe>
</div>
</div>
</a>

<a href="https://microchic.me" rel="dd">
<div class="i-thumbnail-container" title="https://microchic.me -->">
<div class="i-thumbnail">
  <iframe src="https://microchic.me/" frameborder="0" onload="var that=this;setTimeout(function() { that.style.opacity = 1 }, 500)"></iframe>
</div>
</div>
</a>
</div>

<style> /* This is the contents of /partials/iframe-thumbnail.hbs (included in post.hbs) */

/* This container helps the thumbnail behave as if it were an unscaled IMG element */
.i-thumbnail-container {
  width: calc(1440px * 0.25);
  height: calc(900px * 0.25);
  display: inline-block;
  overflow: hidden;
  position: relative;
  background: #f9f9f9;
}
/* Image Icon for the Background */
.i-thumbnail-container::before {
  position: absolute;
  left: calc(50% - 16px);
  top: calc(50% - 18px);
  opacity: 0.2;
  display: block;
  -ms-zoom: 2;
  -o-transform: scale(2);
  -moz-transform: scale(2);
  -webkit-transform: scale(2);
  content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJwaG90b18xXyI+PHBhdGggZD0iTTI3LDBINUMyLjc5MSwwLDEsMS43OTEsMSw0djI0YzAsMi4yMDksMS43OTEsNCw0LDRoMjJjMi4yMDksMCw0LTEuNzkxLDQtNFY0QzMxLDEuNzkxLDI5LjIwOSwwLDI3LDB6ICAgIE0yOSwyOGMwLDEuMTAyLTAuODk4LDItMiwySDVjLTEuMTAzLDAtMi0wLjg5OC0yLTJWNGMwLTEuMTAzLDAuODk3LTIsMi0yaDIyYzEuMTAyLDAsMiwwLjg5NywyLDJWMjh6IiBmaWxsPSIjMzMzMzMzIi8+PHBhdGggZD0iTTI2LDRINkM1LjQ0Nyw0LDUsNC40NDcsNSw1djE4YzAsMC41NTMsMC40NDcsMSwxLDFoMjBjMC41NTMsMCwxLTAuNDQ3LDEtMVY1QzI3LDQuNDQ3LDI2LjU1Myw0LDI2LDR6ICAgIE0yNiw1djEzLjg2OWwtMy4yNS0zLjUzQzIyLjU1OSwxNS4xMjMsMjIuMjg3LDE1LDIyLDE1cy0wLjU2MSwwLjEyMy0wLjc1LDAuMzM5bC0yLjYwNCwyLjk1bC03Ljg5Ni04Ljk1ICAgQzEwLjU2LDkuMTIzLDEwLjI4Nyw5LDEwLDlTOS40NCw5LjEyMyw5LjI1LDkuMzM5TDYsMTMuMDg3VjVIMjZ6IE02LDE0LjZsNC00LjZsOC4wNjYsOS4xNDNsMC41OCwwLjY1OEwyMS40MDgsMjNINlYxNC42eiAgICBNMjIuNzQsMjNsLTMuNDI4LTMuOTU1TDIyLDE2bDQsNC4zNzlWMjNIMjIuNzR6IiBmaWxsPSIjMzMzMzMzIi8+PHBhdGggZD0iTTIwLDEzYzEuNjU2LDAsMy0xLjM0MywzLTNzLTEuMzQ0LTMtMy0zYy0xLjY1OCwwLTMsMS4zNDMtMywzUzE4LjM0MiwxMywyMCwxM3ogTTIwLDhjMS4xMDIsMCwyLDAuODk3LDIsMiAgIHMtMC44OTgsMi0yLDJjLTEuMTA0LDAtMi0wLjg5Ny0yLTJTMTguODk2LDgsMjAsOHoiIGZpbGw9IiMzMzMzMzMiLz48L2c+PC9zdmc+");
}
/* This is a masking container for the zoomed iframe element */
.i-thumbnail {
  -ms-zoom: 0.25;
  -moz-transform: scale(0.25);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.25);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.25);
  -webkit-transform-origin: 0 0;
}
/* This is our screen sizing */
.i-thumbnail,
.i-thumbnail iframe {
  width: 1440px;
  height: 900px;
}
/* This facilitates the fade-in transition instead of flicker. It also helps us maintain the illusion that this is an image, since some webpages will have a preloading animation or wait for some images to download */
.i-thumbnail iframe {
  opacity: 0;
  transition: all 300ms ease-in-out;
}
/* This pseudo element masks the iframe, so that mouse wheel scrolling and clicking do not affect the simulated "screenshot" */
.i-thumbnail:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

</style>

YouTube Embed

19 Dec 2020 / M!CROCH!C

Youtube in content, Default Template.

<div class="youtube-embed" data-id="xuHQSLUZW5M"></div>

Otter Block in Post

04 Dec 2020 / M!CROCH!C

<div class="otterframe">
<iframe src="https://otter.ai/s/OKUtWbXvTdODm7XlnnSnPg">
</iframe>
</div>

Then you can also unpublish the page (in order to not have it indexed or visible in the site) and then use the post's "preview" link (from the post editor) as the URL for external site embedding.

<style>
    /* .modal{max-width:60vw} */
    /* .post-wrap{height:100vh} */
    .post-nav,.post-title,.post-meta{display:none}
    .container-wrap-modal{padding:0}
    section.post{margin:0}
    body.post-template article.post{padding:0}
    div.contentarea{height:50px}
</style>

Bookmark Collections

22 Oct 2020 / M!CROCH!C

In-content list of links that slide-in Raindrop.io Bookmark Collections, Default Template.

YouTube Full Canvas Embed

25 Sep 2020 / M!CROCH!C

Youtube in content, Default Template, all page elements css-hidden.

Popup Footnotes

18 Sep 2020 / M!CROCH!C

Inline Content Pop-Ups to click and show any HTML, iFrames, Slide-Ins, etc.

Method from https://github.com/GCHS/purplemountainmajesty

How to use Markdown Footnotes: https://www.markdownguide.org/extended-syntax/#footnotes

This here is a footnote (click it) --> ^[1]

This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page.

This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page.

This here is a second footnote, buried in the text (click it) --> ^[2] This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page. This is a bunch of placeholder text to fill up space on the page.

This is a footnote. It can have HTML or Markup. MicroChic.fm is an example of an link composed in Markup.

CLICK HERE TO SEE A SERIES OF NESTED FOOTNOTES --> ^[3]

This is indented by selecting and hitting tab.

Beyond the first paragraph, indenting any additional content is required in order to make it appear in the footnote.

Below I've inserted HTML code to embed this tiny little iFrame using the method I documented in this post.

↩︎
This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. Here is an Otterframe:

This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. This is a second footnote. ↩︎
This is a SECOND LEVEL NESTED FOOTNOTE - a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote! This is a footnote within a footnote!

CLICK HERE TO SEE A THIRD LEVEL NESTED FOOTNOTE --> ^[4] ↩︎
This is a THIRD LEVEL NESTED FOOTNOTE! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote! This is a third-level nested footnote!

CLICK HERE TO SEE A FOURTH LEVEL NESTED FOOTNOTE --> ^[5] ↩︎
This is FOURTH LEVEL NESTED FOOTNOTE... This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... This is the 4th level of nested footnotes. This can go on forever... ↩︎

myIframe

11 Aug 2020 / M!CROCH!C

iFrame using CORS-ANYWHERE code.

<iframe id="myIframe" src="https://denverit.com/kudos"></iframe>

Blockster Docs

03 May 2020 / M!CROCH!C

http://pixelandkraft.com/blockster/demo/docs/

BLOCKSTER
Master Documentation

Getting Started

Before installing Blockster, we recommend setting your configuration preferences. There's nothing wrong with doing this after installing, but it's generally easier to edit files on your local machine than on a remote server.

Insight on configuring Blockster follows. Once configured, you're ready to upload it to your Ghost site. For info on installing and activating themes, see the official ghost installation docs.

Configuring

All Blockster configuration settings are in the file config.hbs located in the theme's partials directory. To edit this file, follow these steps:

Navigate to config.hbs in the partials directory (blockster-root/partials/config.hbs).
Make a copy of config.hbs (name it however you prefer, perhaps config.backup.hbs). This is simply standard good practice. It will be there for you if things go south and you need to start over.
Open the config.hbs file in a text editor (or a simple notepad application -- just not a rich text editor like Word or Open Office).
Adjust the settings according to your preferences. The config file is thoroughly commented to help make things as self-explanitory as possible. Don't forget to use the demo for reference.
Save a copy of this file. Upon installing future updates of Blockster, having a saved copy will ensure that you settings are not overridden.

Editing the Config.hbs settings file should be intuitive. Should you have recommendations for how we can improve it, please contact us.

Customizing

All style source files are included with Blockster. The css is written in Sass using it's bracketed .scss syntax. If you're familiar with Sass then you'll have no problem jumping-in and customizing.

If you're not familiar with Sass, here are some resources and quick bits to understand:

Sass Overview

Sass is a css pre-processor. Checkout these great resources for learning more:

Preprocessing is for Everybody presentation by Chris Coyier.
A great brief overview
Sass Level-Up Tuts Tutorials
Lots more exist. A simple Google search is really all that's needed.

Being a pre-processor, .scss files need to be compiled.
Here are some options for compiling Sass:

All in one Desktop Apps:

Prepos (Mac, Win - free)

Compass App (Linux, Mac, Win - paid)

Code Kit (Mac - paid)

hammer (Mac - paid)

Command Line Approaches:

NPM

Gulp

Grunt

Brunch

And many others... this list could seemingly grow daily.

Each of the desktop apps are powerful applications that will do much more than simply compile your stylesheets. Check out their feature lists to understand their full capabilities.

Important!

However you choose to compile, it's crucial that the method include support for Autoprefixer. We've developed Blockster with the aid of Autoprefixer, which means that CSS3 elements don't have their vendor prefixes in the core Blockster code.
The good news? Autoprefixer will change your life (in an awesome way) and the above mentioned compiling tools (and others) make it easy to setup autoprefixing (Codekit even auto-prefixes by default, I believe).

Blockster Docs

Home Page Styles

Blockster includes several home-page layout styles:

Classic 1 (masonry)
Classic 2 (stacked)
Gallery 1 (masonry)
Gallery 2 (tiles)
Gallery 3 (tiles with horizontal/vertical 2x option -- ie: large rectangles)
Gallery 4 (tiles with square 2x option -- ie: large squares)
Gallery i (legacy gallery option with original hover style)
Text Only (demo purposes only, create the same style manually for best performance)

Gallery Featured Images

Gallery1 is the only gallery layout option that fully shows a post's featured image. Other gallery layouts may at times leave your images only partially visible (depending on their sizes). This is because gallery1 uses a masonry layout, while the others use tiled layouts.

All gallery layouts preserve image ratios (preventing distortion).

Gallery Titles

Set gallery titles to "toggled on" via Blockster's global config.hbs file. This option is off by default.

Post Excerpts

Post excerpts are the blurbs of text connected to each post item on the home page. Post excerpts are only used with the following excerpt styles:

Classic 1
Classic 2
Gallery i
Text Only

By default, post excerpts are set to 30 characters (in the index.hbs file).

Custom excerpt content and length can be set on a post-by-post basis in one of two ways:

Method 1: Surround your desired excerpt text in an excerpt tag. Example:

<excerpt>I'm a post excerpt!</excerpt>

Method 2: Surround your desired excerpt text in a div with a class of excerpt.

<div class="excerpt">I'm a post excerpt!</div>

Which to use (and when)?

The tag method (<excerpt>Excerpt text here</excerpt>) only works with inline-level formatting (bold, italics, links, etc). This means that, the tag method will not work for multiple paragraphs, lists, etc.

The div method (<div class="excerpt">Excerpt text here</div>) can accept block-level html (lists are the primary use case here). The catch? Markdown formatting won't work between the div tags.

Essentially, use the:

Tab Method when excerpts only need inline formatting (or none at all).
Tab Method when you want to use markdown markup for inline excerpt formatting.
Div Method when excerpts need block-level formatting.
Div Method when you want to use HTML markup for inline/block excerpt formatting.

Home-only Excerpts

To have excerpt text only be shown on home-page excerpts (not shown on the actual post's page), add the class home-only to the tag or div used to create the excerpt (surrounding the excerpt).

Tag Example:

<excerpt class="home-only">Excerpt content here...</excerpt>

Div Example:

<div class="excerpt home-only">Excerpt content here...</div>

Excerpt Images

An image, video, or audio can be used as a post's featured "image" -- also referred to as an "excerpt image."

For Images: Upload a featured image via Ghost's cover-image uploader (introduced in Ghost's version 0.5.2).

Important: Blockster will automatically place a post's featured image at the top of its page. To disable this behaviour on a post-by-post basis simply add the tag no-cover to the post. This will completely remove the cover image from the post.

Depreciation Note: Before ghost 0.5.2, Blockster made use of the "alt-tag" method for post-excerpt images. This feature is depreciated in Blockster 2.0 and no longer works.

For Video and Audio: Two classes are needed on the iframe html:

featured
video or audio, as appropriate.

Video Example:

<iframe class="featured video" src="//player.vimeo.com/video/62022718?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Audio Example:

<iframe width="100%" height="166" scrolling="no" class="featured audio" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/155100180&amp;auto_play=false&amp;hide_related=true&amp;show_comments=true&amp;&amp;show_reposts=false&amp;visual=false"></iframe>

Note: Adding the tag no-cover to a post that uses an audio or video for it's featured image will remove it from the top of the post but not entirely from the post (contrary to featured images). To remove the featured audio or video from the post entirely (effectively using it only for a home-page featured audio or video), add the class home-only to it.

2x Width, Height, and Square Excerpt Images

Horizontal and vertical 2x excerpt images can be set when using the gallery3 layout. 2x square excerpt imags can be set when using the gallery4 layout. These are set individually for each post excerpt.

Set 2x width, height, and square excerpts on a post-by-post basis by adding one (only one) appropriate tag to a post.

Tags to add:
For width: width2x
For height: height2x
For square: square2x

Background Images

As of version 1.1, Blockster supports the use of an image for the site's global background. As with most settings, activate this in Blockster's global config.hbs file. Twelve background images come with the theme (as seen in the demo, named bgImg1, bgImg2, etc. (respectively from left to right)). To use a custom image, follow the steps below.

How to use a custom background image

Upload your image to Blockster's image background directory, located at /assets/images/backgrounds/
Name your image eith bgImgCustom.jpg, bgImgCustomJPG.jpg, or bgImgCustomPNG.png.
In config.hbs, set background_image to the name you're using (from step 2).

NOTE: "bgImgCustom" is only for .jpeg images. "bgImgCustomJPG" was added for clarity.

Recommended Size: 1900 x 1250px
For Retina Screens: include a "twice-as-large" copy of the image in the same directory and suffix it with @2x before the extension (example: [email protected]).

Image Captions

Blockster will automatically use the title-tag text of an image and turn it into a caption. Since there's not yet any way to add title tags to images through Markdown in Ghost, use standard html.

Example:

<img src="/blockster/demo/content/images/2014/Jul/13.jpg"  
title="Example caption of non-featured image">

Retina Images

Blockster is fully "retina ready."

Theme icons are vector based (svg), which by definition means they look sharp on all devices.

For images uploaded into Ghost (logos, post images, etc) that are pixel based (.png or .jpg), a second one of two-times the size will also need to be uploaded. Important: Add @2x to the end of the file name, but before the extension. This allows retina devices to detect the "retina-friendly image" and act appropriately.

For example: Say you're uploading a photo into a blog post named sky.jpg that is 750px x 400px. You'll need to also upload a second photo. Call this one [email protected]. It should be double the size, 1500px x 800px. We find that it's easier to think in terms of the "original" and "scaled-down" images, since the original image format is usually quite large.

Important: Ghost doesn't yet support multiple image size uploads (or image resizing) for the same picture. Thus, you'll need to upload this second "@2x" version of you images via FTP. The only criteria is to make sure it goes into the same folder as the original upload (image folders are organized by year and month). As soon as there's a better option for this within Ghost, Blockster will support it.

Logos and Avatars

Blockster has pre-defined sizing for logos and avatars, so no visual cons come from uploading an image that's too big. For best performance, however, it's best to use the optimal size (and include an @2x version as specified above).

Here are optimal image sizes in pixels (NOT retina @2x sizes):

Left-Nav Logo (square): 87 x 87
Mobile-width Logo (rectangle): 113 x 26
Author Avatar: 130 x 130
About page (cover): 890 x 526
Post page photos: 890 x 526

Where to Upload
inside Ghost Admin

Left-Nav Logo: general -> Blog Logo
Mobile-width Logo: general -> Blog Cover

Author Avatar: Users -> User -> Avatar (circle guy)

Static Pages

Blockster supports static pages. To create a static page:

create a new post
click on the gear icon button on the post editor page (located at the bottom right, next to the publish/update button)
check "Turn this post into a static page"
publish it

Featured Images in Static Pages

If you upload a "featured image" in a static page then the page will be formatted like a post page, with the featured image at the top with the page's title underneath. If you don't set a featured image, no title will be displayed on the page by default. This allows static pages to be treated as "blank slates."

Static Page Templates

About and Contact page templates are built into Blockster. If you don't want either of these, you can disable one or both in the config.hbs file. Otherwise, simply create an about and contact static page for the built-in navigation to work for these pages.

About Page

Blockster's about page template is essentially a blank canvas. Follow the above general rules for Blockster's static pages regarding the about page's featured image and header.

Contact Page

Blockster's contact-page template is more opinionated than the about-page template. Adjust this template to add your own contact info and Google map (everything is optional, include only what you would like).

The following is the contact page for the demo, use it as a starting point and reference:

<phone>(800) 123-1234, (177) 432-4321</phone>  
<skype>[View my Skype Profile](skype:SkypeNameHere?userinfo)</skype>  
<fax>(800) FAX-STILL-ROCKS</fax>  
<address>555 Everyday Lane, Best Town, WA 232323, USA</address>  
<website>[Pixel and Kraft Home](http://pixelandkraft.com)</website>  
<email>[Click to Email](mailto:[email protected])</email>

<div class=map>  
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d344863.67023592436!2d-122.22632229780181!3d47.52404578640302!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490102c93e83355%3A0x102565466944d59a!2sSeattle%2C+WA!5e0!3m2!1sen!2s!4v1403704783891" width="100%" height="450" frameborder="0"></iframe>  
</div>

<blurb>Blockster is made by Pixel & Kraft. Should you like to be in touch for any reason, you now know how to contact us. This "blurb" area will always be shown beside your author photo at the bottom of this default contact-page template.<br>  
- The Creators @Pixel&Kraft</blurb>

Smooth Scrolling

To create in-page links that smoothly scroll to an area of the page (anchor links), follow this simple formula:

Add to the link href="#destination" + data-toggle="smoothScroll"

Add to the destination id="destination"

Here's an example of a link that would smoothly scroll to the top of the page (assuming that this div with an id of top be located at the top of the page, say, just after the <body> tag):

Link:
<a href="#top" data-toggle="smoothScroll">Go to Top</a>

Destination:
<div id="top"></div>

Banners

Home-page banners are possible as of Blockster version 1.1. Options include top and bottom, minimally formated or unformated.

How to Add a Banner

Create a new post
Create an empty div with the class of bannerTop or bannerBottom.
Put your banner content into this div (using html markup).
Optional: Add a class of raw to the banner div to remove default margin and padding (inner and outer spacing).
Publish.

Example:

<div class="bannerTop"><b>This is a banner...</b> if and how you use it is up to you. Use it for any sticky content... such as announcements or ads.</div>

Banner Use Cases

Since the top/bottom banner feature simply takes a chunk of html, there are lots of possible ways to use it. Here are a few:

Advertisments
Site notifications
A welcome message

Pro Tip: Use inline css to customize the banners' appearances.

Page Width

Per request of a Blockster user, it's now (as of v1.1) possible to set custom page widths for different breakpoints via the config.hbs file. These settings affect the container width for all non-homepage posts/pages. Rather than editing the theme's core css (which is completely fine, of course, only it's not update-proof), this option allows for quick and easy customization (that is update proof).

Here's what the custom page width settings section of the config.hbs file looks like:

var use_custom_container_width  = false; {{! make true to activate any width customizations below }}

{{! initial values here are Blockster's defaults }}
{{! breakpoint values are MAX widths, meaning anything BELOW the px amount will be targeted }}

{{! BREAKPOINTS }}
var breakpoint_1                = '1250px';  
var breakpoint_2                = '850px';  
var breakpoint_3                = '600px'; 

{{! WIDTHS }}
var wider_than_breakpoint_1     = '50%';  
var breakpoint_1_width          = '63%';  
var breakpoint_2_width          = '75%';  
var breakpoint_3_width          = '100%';

How To Customize:

First, activate the custom settings by setting use_custom_container_width to true (note that this has no quotes, as it's a simple boolean value). Then, begin making your customizations. All initial settings are Blockster's defaults. Use them as a starting point.

Two sections makeup this area of the config file: 1) Breakpoints 2) Widths.

Breakpoints

The breapoints are MAX widths, which means that their settings are for anything under their pixel value. Pixel values must be used here. To customize, simply change the value.

Widths

Width values can use percentages or pixels.

Nav Widget

(Like the one at the bottom right of this page)

Creating an in-page navigation widget (like the one here in the docs) is simple and easy. Here's how:

Inside of the Markdown editor for a post or page, at the bottom of the page, create two html tags, one for the widget title and the other to wrap the navigation items:

<!-- Title -->  
<tocTitlte>NAV WIDGET TITLE HERE</tocTitle>

<!-- Wrapper for navigation items -->  
<toc>  
  NAVIGATION ELEMENTS HERE
</toc>

Then, for each navigation item you'd like in the widget, wrap the name you'd like for the navigation item (this can be anything) inside bracket tags of the heading id to which it should scroll.

Important: Ghost automatically adds an id to every header element in your page. These have no spaces and hyphens are stripped away, leaving one alpha-numeric string. Here are some examples:

markdown:              html:  
## My Heading          <h2 id="myheading">My Heading</h2>
###Hyphenated-heading  <h3 id="hyphenatedheading">Hypnentated-heading</h3>

Note: you can have a space after the markdown hashmark heading declaration, or not. Some markdown interpreters care, but the one Ghost is using doesn't.

TIP: You can inspect your post/page's heading ids by right clicking on the text in the page and clicking inspect element. Then inside of the browser inspector that pops up, look for the id on the h1, h2, h3, h4, h5, or h6 tag. Chrome is suggested for this, but Firefox should also work.

Here's a full example:

<!-- Markdown Page Content -->  
### What you need to know
    <!-- paragraphs, lists, image, and other content here -->
###Always Remember  
    <!-- more paragraphs, lists, image, and other content here -->
### Point-3
    <!-- more paragraphs, lists, image, and other content here -->

<!-- Nav Widget markup/text -->  
<tocTitle>Contents</tocTitle>  
<toc>  
    <whatyouneedtoknow>Knowledge</whatyouneedtoknow>
    <alwaysremember>Always Remember</alwaysremember>
    <point3>Point Three</point3>
</toc>

Here's the code for the nav-widget here on the Blockster-docs page:

<tocTitle>Contents</tocTitle>  
<toc>  
  <top>Top</top>
  <gettingstarted><b>Getting Started</b></gettingstarted>  
  <blocksterdocs><b>Blockster Docs</b></blocksterdocs>
  <postexcerpts>Post Excerpts</postexcerpts>
  <featuredimages>Images</featuredimages>
  <logosandavatars>Logos and Avatars</logosandavatars>
  <staticpages>Static Pages</staticpages>
  <smoothscrolling>Smooth Scrolling</smoothscrolling>
  <navwidget>Nav Widget</navwidget>
</toc>

Tip: If you have a key section of your page or post that you'd like to stand out, wrap it in <b></b> tags as seen above for the "Getting Started" and "Blockster Docs" links. In other words, you can use inline html.

You can create these for long or short posts. The idea is to help people quickly and easily navigate to different areas of the page without having to spend time scrolling. Even for a short post, depending on the content, they can be quite nice.

Something Missing?

Is there something missing from these docs? Perhaps you'd like more examples for a particular aspect of working with Blockster? Make a request!

Help us make improve the Blockster docs, contact us to make a request.

Contents

Top
Getting Started
Blockster Docs
Home Page Styles
Post Excerpts
Images - Excerpts
Images - Other
Logos and Avatars
Static Pages
Smooth Scrolling
Banners
Page Width
Nav Widget
Requests!

A Long Post with Headings

20 Apr 2020 / M!CROCH!C

A long post with headings and a Featured Image, Default Template.

Use headings to show text structure

Headings are signposts that guide readers through an article. Because people tend to read them carefully, they should indicate what a section or paragraph is about, or people won’t know what to expect. Also, headings may help them get back on track if they get lost.

For web copy, it’s good practice to make sure that your headings are informative to the reader. Some people like to tease their audience in the headings, trying to entice them to read further. While that can work very well, it’s easy to get wrong. Remember that the main focus of headings should be on the content – and the main purpose should be to make the text easier to read and understand.

Use headings to improve accessibility

Heading structure is important for accessibility as well, especially for people who can’t easily read from a screen. Because headings are in HTML, a screen reader can understand the article structure and read them out loud.

By reading or listening to the headings in an article, visually impaired people can decide whether or not to read an article. Screen readers also offer shortcuts to jump from one heading to the next, so they are used for navigation as well.

Don’t forget that, in many cases, what’s good for accessibility is also good for SEO!

Use headings to improve SEO

It’s generally agreed that how you use headings doesn’t specifically impact your SEO; making minor tweaks to individual headings likely won’t help your performance. There are indirect benefits, though. Using headings creates better quality, more easily readable text. Better text is better for users, which is better for your SEO.

And headings give you a great chance to use your focus keyword (or its synonyms) prominently, to make it really clear what the page is about. But it’s important not to over-do it. It shouldn’t feel unnatural or weird, and if it does, that’s probably because you’re trying too hard, or over-optimizing.

So with headings, you should always put the user first. Use them to add structure and signposts to your content, and to describe what each section is about. If your headings let users know what your article is about, they’ll help Google to understand, too.

How to use headings in content

How headings work

NOTE: There are two different sets of ‘rules’ when it comes to how to use HTML heading tags; the ‘classic’ approach (from the HTML4 standard), and, the ‘modern’ approach (from the HTML5 standard). We’re going to focus on the classic approach, as there are some usability and SEO challenges with the modern approach (you can read more about that here).

When you’re editing an article, you’ll usually see different ‘levels’ of headings in the text editor – from ‘Heading 1’ to ‘Heading 6’. These are ordered by size, and by importance. A ‘Heading 2’ is more important than a ‘Heading 4’.

Behind the scenes, these are converted into HTML heading tags; from `<h1>` to `<h6>`. Your theme probably uses these HTML tags in its templates, too.

That’s why, when we talk about how to structure headings and content well, we talk about ‘H1’ tags, ‘H2’ tags, and so on. We’re referring to the underlying HTML code.

Learning the rules

Your H1 isn’t the same thing as your page title. For more information, you can read about the difference between and H1 and the SEO title.

Firstly, you should use only one H1 heading on each page. The H1 heading should be the name/title of the page or post. You can think of your H1 like you would think of the name of a book. On a category page, your H1 would be the name of that category. On a product page, it should be the product name.

Then, as you write your content, you can use H2 and H3 headings to introduce different sections – like the “Learning the rules“ section which you’re currently reading, which sits within the “How to use headings in content” section. Think of H2 headings like the chapters of a book. Those individual sections might also use more specific headers (h3 tags, then H4 tags, etc) to introduce sub-sections.

It’s rare for most content to get ‘deep’ enough to need to use H4 tags and beyond unless you’re writing really long, or really technical content.

An example heading structure

Let’s say that we have a blog post about ballet shoes. We’ve chosen “ballet shoes” as our focus keyword, and written an article about all of the reasons why we like ballet shoes.

Without headings, there’s a risk that we might end up writing a really long, rambling piece that is hard to understand.

But if we structure things logically using headings, we not only make it easier to read, we help focus our writing.

Here’s what the structure of that post might look like:

H1: Ballet shoes are awesome
- H2: Why we think ballet shoes are awesome
  - H3: They don’t just come in pink!
  - H3: They’re good for more than just dancing
  - H3: They’re not as expensive as you think
- H2: Where should you buy your ballet shoes?
  - H3: The 10 best ballet equipment websites
  - H3: Our favorite local dancing shops

See how we’ve created a logical structure, using H2 tags to plan out sections, and H3 tags to cover specific topics? You’ll see that we’ve done the same thing in the post you’re reading, too!

We’ve also tried to mention our focus keyword – as well as some related terms – a few times (but only when it makes sense), and to outline the structure of the page. We’ve also tried to promise the reader something in each section, to encourage them to read through.

This is a good example of how your headings should be structured in a medium-length article. For a shorter article, you should use fewer (or more general, high-level) headings. If you want to go into much more detail, there’s nothing stopping you from using H4 tags to create even ‘lower-level’ sections!

Headings in themes

Most themes will use headings as part of their HTML code, but some don’t follow best practices.

Almost all themes will automatically use the name of your article in an H1 tag. This is helpful because it means you don’t need to repeat the post name inside your content.

Unfortunately, some themes use tags incorrectly – they use tags in an illogical order (e.g., an H4 then an H2), or use tags messily in sidebars, headers, and footers. This can cause problems for accessibility, as the order of your headings might not make sense. Users, search engines and assistive technologies usually look at the whole page, not just your content area.

If you have a custom theme, you might be able to fix this by adjusting your HTML code. If you’re using an off-the-shelf theme, you may need to reach out to the developers.

Either way, you should check that your headings make sense on each template type!

Check your blog’s headings

Using headings well is helpful for your users, increases the chances of people actually reading your article, improves accessibility and might even contribute to SEO. So add them into your copy – just make sure you use them correctly! If you want to check if you do, go and use them now to check your blog’s outline. And when you’ve read and understood all the above, you should now be able to determine whether your theme is doing a good job.

.DEV

small

medium

History of the Web

HTML

CSS

JavaScript

SITE HEADER CODE

SITE FOOTER CODE

Solitude and Leadership

Using cards

Build workflows with snippets

Publishing and newsletters the easy way

Snippets (Custom Cards) for the Post Editor...

FRONT PAGE

Excerpt Link Slide-In

Title/Image Pop-Up (full canvas) iFrame

IN CONTENT

Image Link Slide-In >>

Text Link Slide-In >>

Embedded Block >>

Interactive Timeline of the Internet >>

BLOCKSTER Master Documentation

Getting Started

Configuring

Customizing

Sass Overview

Blockster Docs

Contents:

Home Page Styles

Gallery Featured Images

Gallery Titles

Post Excerpts

Home-only Excerpts

Excerpt Images

2x Width, Height, and Square Excerpt Images

Background Images

How to use a custom background image

Image Captions

Retina Images

Logos and Avatars

Where to Upload inside Ghost Admin

Static Pages

Featured Images in Static Pages

Static Page Templates

About Page

Contact Page

Smooth Scrolling

Banners

How to Add a Banner

Banner Use Cases

Page Width

How To Customize:

Breakpoints

Widths

Nav Widget

(Like the one at the bottom right of this page)

Something Missing?

Use headings to show text structure

Use headings to improve accessibility

Use headings to improve SEO

How to use headings in content

How headings work

Learning the rules

An example heading structure

Headings in themes

Check your blog’s headings

BLOCKSTER
Master Documentation

Where to Upload
inside Ghost Admin