Overview

The basic bootstraBlogger framework is designed to provide ease by modifying Blogger's Xml code alternate features and adding new services. .

Blogger version

Use the template latest version 3:

<html b:layoutsVersion='3'>...</html>

We Use the 2 gadget version 2:

<html b:defaultwidgetversion='2'>...</html>

<b:widget version='2'>...</b:widget>

Page types

You can set the appearance of blogs, display posts, classes, and others to be different on every page type.

Below is a selection of types of pages to use data:view.

<b:comment>=== Homepage ===</b:comment>
<b:if cond='data:view.isHomepage'>
  <!-- https://example.blogspot.com -->
</b:if>

<b:comment>=== Item page ===</b:comment>
<b:if cond='data:view.isPost'>
  <!-- https://example.blogspot.com/<year>/<month>/<permalink>.html -->
</b:if>

<b:comment>=== Static page ===</b:comment>
<b:if cond='data:view.isPage'>
  <!-- https://example.blogspot.com/p/<permalink>.html -->
</b:if>

<b:comment>=== Search (label) page ===</b:comment>
<b:if cond='data:view.search.label'>
  <!-- https://example.blogspot.com/search/label/<name> -->
</b:if>

<b:comment>=== Search (query) page ===</b:comment>
<b:if cond='data:view.search.query'>
  <!-- https://example.blogspot.com/search?q=<query> -->
</b:if>

<b:comment>=== Search (default) page ===</b:comment>
<b:if cond='data:view.search and !data:view.search.label and !data:view.search.query'>
  <!-- https://example.blogspot.com/search -->
</b:if>

<b:comment>=== Archive page ===</b:comment>
<b:if cond='data:view.isArchive'>
  <!-- 1. https://example.blogspot.com/<year> -->
  <!-- 2. https://example.blogspot.com/<year>/<month> -->
  <!-- 3. https://example.blogspot.com/<year>_<month>_<day>_archive.html -->
</b:if>

<b:comment>=== Error page ===</b:comment>
<b:if cond='data:view.isError'>
  <!-- https://example.blogspot.com/404 -->
</b:if>

<b:comment>=== Preview page ===</b:comment>
<b:if cond='data:view.isPreview'>
  <!-- Preview page -->
</b:if>

<b:comment>=== Layout mode ===</b:comment>
<b:if cond='data:view.isLayoutMode'>
  <!-- https://www.blogger.com/blogger.g?blogID=<blogID>#pageelements -->
</b:if>

Body class

In the HTML body tag, there are different classes in each page type.

Below this is the name of the class for each page type.

<body>
  <b:class cond='data:view.isHomepage' name='blog-view-home'/>
  <b:class cond='data:view.isPost' name='blog-view-item'/>
  <b:class cond='data:view.isPage' name='blog-view-static'/>
  <b:class cond='data:view.search.label' name='blog-view-search-label'/>
  <b:class cond='data:view.search.query' name='blog-view-search-query'/>
  <b:class cond='data:view.search and !data:view.search.label and !data:view.search.query' name='blog-view-search-default'/>
  <b:class cond='data:view.isArchive' name='blog-view-archive'/>
  <b:class cond='data:view.isError' name='blog-view-error'/>
  <b:class cond='data:view.isPreview' name='blog-view-preview'/>
</body>

<!-- Homepage -->
<body class="blog-view-home">...</body>

<!-- Item page -->
<body class="blog-view-item">...</body>

<!-- Static page -->
<body class="blog-view-static">...</body>

<!-- Search (label) page -->
<body class="blog-view-search-label">...</body>

<!-- Search (query) page -->
<body class="blog-view-search-query">...</body>

<!-- Search (default) page -->
<body class="blog-view-search-default">...</body>

<!-- Archive page -->
<body class="blog-view-archive">...</body>

<!-- Error page -->
<body class="blog-view-error">...</body>

<!-- Preview page -->
<body class="blog-view-preview">...</body>

Example of use: :

.blog-view-item {
  ...
}

.blog-view-item .element {
  ...
}

Post

Template sections to adjust the appearance of blog posts .

Showing location of current page.

Source

template-src/post/blog-breadcrumb.xml

Includable

<b:includable id='blog-breadcrumb' var='post'>...</b:includable>

Usage

<b:include cond='!data:view.isHomepage' name='blog-breadcrumb'/>

Status message

Ujumbe utaonekana juu ya chapisho. Ujumbe utaonekana tu kwenye kurasa za matokeo ya utafutaji, kurasa za lebo, kurasa za kumbukumbu, na kurasa za makosa (404).

Source

template-src/post/blog-status-message.xml

Includable

<b:includable id='blog-status-message' var='post'>...</b:includable>

Usage

<b:include name='blog-status-message'/>

Posts

Posts are divided into sections according to the page type, to make the posts look different on each page type, you just need to adjust the appearance of the posts in each section.

In creating post views, you need to use them including blog posts .

Source

template-src/post/blog-posts.xml

Includable

<b:includable id='blog-posts' var='post'>...</b:includable>

Usage

<b:include cond='data:posts.notEmpty' name='blog-posts'/>

Comments

The default comment system for bootblogger Blogger comments.

Source

template-src/post/blog-comments.xml

Includable

<b:includable id='blog-comments' var='post'>...</b:includable>

Usage

<b:include cond='data:view.isPost' name='blog-comments'/>

Link to go to next or previous page.

Source

template-src/post/blog-pager.xml

Includable

<b:includable id='blog-pager' var='post'>...</b:includable>

Usage

<b:include cond='data:posts.notEmpty and !data:view.isPage' name='blog-pager'/>

Usage

Angalia template-src/widgets/b-section-main__Blog1.xml:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
  <b:includable id='main'>

    <b:if cond='!data:view.isMobile'>

      <b:comment>=== Breadcrumb ===</b:comment>
      <b:include cond='!data:view.isHomepage' name='blog-breadcrumb'/>

      <b:comment>=== Status message ===</b:comment>
      <b:include name='blog-status-message'/>

      <b:comment>=== Posts ===</b:comment>
      <b:include cond='data:posts.notEmpty' name='blog-posts'/>

      <b:comment>=== Comments ===</b:comment>
      <b:include cond='data:view.isPost' name='blog-comments'/>

      <b:comment>=== Pager ===</b:comment>
      <b:include cond='data:posts.notEmpty and !data:view.isPage' name='blog-pager'/>

    </b:if>

  </b:includable>
</b:widget>

Includable - Head

Tag title, tag meta, tag link, na nyingine.

Required meta tags

Set charset na utf-8.
Use responsive meta tags viewport.

Source

template-src/includable/head/head.requiredMetaTags.xml

Includable

<b:includable id='head.requiredMetaTags'>...</b:includable>

Usage

<b:include name='head.requiredMetaTags'/>

All-head-content

Custom <b:include data='blog' name='all-head-content'/>.

Source

template-src/includable/head/head.allHeadContent.xml

Includable

<b:includable id='head.allHeadContent'>...</b:includable>

Usage

<b:include name='head.allHeadContent'/>

Title

hati au lebo <title>.

Source

template-src/includable/head/head.title.xml

Includable

<b:includable id='head.title'>...</b:includable>

Usage

<b:include name='head.title'/>

Tag <meta> and <link> forSERP and social networking.

Source

- Default/SERP: template-src/includable/head/head.defaultTags.xml
- Facebook Open Graph: template-src/includable/head/head.facebookTags.xml
- Twitter Cards: template-src/includable/head/head.twitterTags.xml

Includable

<!-- Default/SERP -->
<b:includable id='head.defaultTags'>...</b:includable>
<!-- Facebook Open Graph -->
<b:includable id='head.facebookTags'>...</b:includable>
<!-- Twitter Cards -->
<b:includable id='head.twitterTags'>...</b:includable>

Usage

<b:with value='"https://example.com/path/to/image.png"' var='image'>
<b:with value='"@username_of_website"' var='twitterUsernameWebsite'>
<b:with value='"@username_of_content_creator"' var='twitterUsernameCreator'>
  <b:include name='head.defaultTags'/>
  <b:include name='head.facebookTags'/>
  <b:include name='head.twitterTags'/>
</b:with>
</b:with>
</b:with>

Example usage

<!DOCTYPE html>
<html>
  <head>

    <b:include name='head.requiredMetaTags'/>
    <b:include name='head.title'/>
    <b:include name='head.allHeadContent'/>

    <b:with value='"https://example.com/path/to/image.png"' var='image'>
    <b:with value='"@username_of_website"' var='twitterUsernameWebsite'>
    <b:with value='"@username_of_content_creator"' var='twitterUsernameCreator'>
      <b:include name='head.defaultTags'/>
      <b:include name='head.facebookTags'/>
      <b:include name='head.twitterTags'/>
    </b:with>
    </b:with>
    </b:with>

  </head>
  <body>

    <h1>Hello, world!</h1>

  </body>
</html>

Includable - Post

Includable to send blog.

Post byline items

Item posts that can be organized via a blog post configuration (look at the pictures).

To displayitem print in rowsheader.

Source

template-src/includable/post/post.header.xml

Includable

<b:includable id='post.header'>...</b:includable>

Usage

<b:if cond='data:headerByline.items.notEmpty'>
  <div class='wrapper'>
    <b:include name='post.header'/>
  </div>
</b:if>

To display item print in rows footer.

Source

template-src/includable/post/post.footer.xml

Includable

<b:includable id='post.footer'>...</b:includable>

Usage

<b:if cond='data:footerBylines.notEmpty'>
  <div class='wrapper'>
    <b:include name='post.footer'/>
  </div>
</b:if>

Post items

Item the post below cannot be edited through the configuration of a blog post.

Title

To display the title of the post .

Source

template-src/includable/post/post.title.xml

Includable

<b:includable id='post.title'>...</b:includable>

Usage

<b:include data='{ heading: "h1|h2|h3|h4|h5|h6"|false, headingClass: "class-name", link: true|false, linkClass: "class-name", noTitleMessage: true|false }' name='post.title'/>

Author name

Displaying author name.

Source

template-src/includable/post/post.authorName.xml

Includable

<b:includable id='post.authorName'>...</b:includable>

Usage

<b:include data='{ linkClass: "class-name" }' name='post.authorName'/>

Author image

To display the image of the author .

Source

template-src/includable/post/post.authorImage.xml

Includable

<b:includable id='post.authorImage'>...</b:includable>

Usage

<b:include data='{ size: number, ratioWidth: number, ratioHeight: number, noImage: "https://example.com/path/to/no-image.png"|false, imageClass: "class-name" }' name='post.authorImage'/>

Example:

Width = size, Height = ((size * ratioHeight) / ratioWidth).

128x128:

<b:include data='{ size: 128, ratioWidth: 1, ratioHeight: 1, noImage: "https://placehold.it/128x128/777/eee/?text=NO+IMAGE", imageClass: "class-name" }' name='post.authorImage'/>

Dates

To indicate the date the post was published and the date the post was last updated.

Source

- template-src/includable/post/post.datePublished.xml
- template-src/includable/post/post.dateUpdated.xml

Includable

<b:includable id='post.datePublished'>...</b:includable>
<b:includable id='post.dateUpdated'>...</b:includable>

Usage

Published: <b:include data='{ customFormat: "dd/MM/YYYY"|false, timeClass: "class-name" }' name='post.datePublished'/>
Last updated: <b:include data='{ customFormat: "dd/MM/YYYY"|false, timeClass: "class-name" }' name='post.dateUpdated'/>

Format:

Period	Symbol	Example output	Description
Year	`YY`	`17`	Year, 2 digits
Year	`YYYY`	`2017`	Year, 4 digits
Month	`M`	`1`, `11`	Month, minimum 1 digit
	`MM`	`01`, `11`	Month, 2 digits
	`MMM`	`Jan`, `Nov`	Month, 3 Letters
	`MMMM`	`January`, `November`	Month, full name
	`MMMMM`	`J`, `N`	Month, 1st letter
Week	`w`	`1`, `11`	Week of the year, minimum 1 digit
	`ww`	`01`, `11`	Week of the year, 2 digits
	`W`	`4`	Week of the month, 1 digit
Day	`d`	`1`, `11`	Day of the month, minimum 1 digit
	`dd`	`01`, `11`	Day of the month, 2 digits
	`D`	`1`, `55`, `362`	Day of the year, minimum 1 digit
	`DD`	`01`, `55`, `362`	Day of the year, minimum 2 digits
	`DDD`	`001`, `055`, `362`	Day of the year, minimum 3 digits
	`F`	`3`	Xth day of the month. Example, the 3rd Tuesday of the month.
	`E`	`M`, `T`	Name of the day of the week. 1 letter
	`EE`	`Mo`, `Tu`	Name of the day of the week. 2 letters
	`EEE`	`Mon`, `Tue`	Name of the day of the week. 3 letters
	`EEEE`	`Monday`, `Tuesday`	Full name of the day of the week.
Time of day	`aaaa`	`AM`, `PM`	Names may vary depending on the region.
	`bbbb`	`Morning`, `Afternoon`, `Evening`
	`BBBB`	`Morning`, `Afternoon`, `Evening`
Hour	`h`	`1`, `11`	Time [1-12], minimum 1 digit
	`hh`	`01`, `11`	Time [1-12], 2 digits
	`H`	`1`, `21`	Time [0-23], minimum 1 digit
	`HH`	`01`, `21`	Time [0-23], 2 digits
Minute	`m`	`1`, `59`	Minute, minimum 1 digit
Minute	`mm`	`01`, `59`	Minute, 2 digits

Number of comments

To display the number of comments per post. If you use the Google+ feedback system, it just shows up <data:messages.comments/>.

Source

template-src/includable/post/post.numComments.xml

Includable

<b:includable id='post.numComments'>...</b:includable>

Usage

<b:if cond='data:post.allowComments'>
  <b:include data='{ linkClass: "class-name" }' name='post.numComments'/>
</b:if>

Labels

To display the post tag .

Source

template-src/includable/post/post.labels.xml

Includable

<b:includable id='post.labels'>...</b:includable>

Usage

<b:include data='{ comma: true|false, maxResults: number, labelLinkClass: "class-name", unlabelledClass: "class-name" }' name='post.labels'/>

To display the share button .

Source

template-src/includable/post/post.share.xml

Includable

<b:includable id='post.share'>...</b:includable>

Usage

<b:include data='{ parentDivClass: "dropdown|dropup|class-name", dropdownToggleLinkClass: "class-name", dropdownToggleType: "icon|text|all", dropdownMenuClass: "dropdown-menu", dropdownItemLinkClass: "dropdown-item", dropdownItemIcon: true|false }' name='post.share'/>

Featured image

To display featured image.

Using HTML `<img>`

Source

template-src/includable/post/post.featuredImage.xml

Includable

<b:includable id='post.featuredImage'>...</b:includable>

Usage

<b:include data='{ size: number, sourceSet: [number]|false, sourceSizes: "sizes"|false, ratioWidth: number, ratioHeight: number, link: true|false, noImage: "https://example.com/path/to/no-image.png"|false, imageClass: "class-name" }' name='post.featuredImage'/>

Notation:

Non-responsive: Width = size, Height = ((size * ratioHeight) / ratioWidth).

Responsive: Width = sourceSet, Height = ((sourceSet * ratioHeight) / ratioWidth).

Example without srcset and sizes:

<b:include data='{ size: 512, sourceSet: false, sourceSizes: false, ratioWidth: 16, ratioHeight: 9, link: true, noImage: "https://placehold.it/512x288/777/eee/?text=NO+IMAGE", imageClass: "class-name" }' name='post.featuredImage'/>

Example with srcset, but without sizes:

<!-- Example 1: `false` -->
<b:include data='{ size: 256, sourceSet: [256, 512, 1280, 1600], sourceSizes: false, ratioWidth: 16, ratioHeight: 9, link: true, noImage: "https://placehold.it/256x144/777/eee/?text=NO+IMAGE", imageClass: "class-name" }' name='post.featuredImage'/>

<!-- Example 2: `100vw` -->
<b:include data='{ size: 256, sourceSet: [256, 512, 1280, 1600], sourceSizes: "100vw", ratioWidth: 16, ratioHeight: 9, link: true, noImage: "https://placehold.it/256x144/777/eee/?text=NO+IMAGE", imageClass: "class-name" }' name='post.featuredImage'/>

Example with srcset and sizes:

<b:include data='{ size: 256, sourceSet: [256, 512, 1280, 1600], sourceSizes: "(max-width: 575px) 256px, (max-width: 767px) 512px, (max-width: 991px) 1280px, 1600px", ratioWidth: 16, ratioHeight: 9, link: true, noImage: "https://placehold.it/256x144/777/eee/?text=NO+IMAGE", imageClass: "class-name" }' name='post.featuredImage'/>

Using CSS `background-image`

post.featuredImageBg usitumiesrcset and sizes.

Source

template-src/includable/post/post.featuredImageBg.xml

Includable

<b:includable id='post.featuredImageBg'>...</b:includable>

Usage

<div class='class-name'><!-- Target -->
  <b:include data='{ size: number, ratioWidth: number, ratioHeight: number, noImage: "https://example.com/path/to/no-image.png"|false, style: "min-height: <number><units>;" }' name='post.featuredImageBg'/>
</div>

Example:

Width = size, Height = ((size * ratioHeight) / ratioWidth).

<div class='class-name'><!-- Target -->
  <b:include data='{ size: 512, ratioWidth: 16, ratioHeight: 9, noImage: "https://placehold.it/512x288/777/eee/?text=NO+IMAGE", style: "min-height: 288px;" }' name='post.featuredImageBg'/>
</div>

Snippet

Showing summary of posts.

Source

template-src/includable/post/post.snippet.xml

Includable

<b:includable id='post.snippet'>...</b:includable>

Usage

<b:include data='{ length: number, links: true|false, linebreaks: true|false, ellipsis: true|false, notHasJumpLink: true|false, parentDivClass: "class-name" }' name='post.snippet'/>

When using postsjump break andnotHasJumpLink: true then what is shown is<data:post.body/>.

Body

As an alternative <data:post.body/>.

Source

template-src/includable/post/post.body.xml

Includable

<b:includable id='post.body'>...</b:includable>

Usage

<b:include data='{ parentDivClass: "class-name" }' name='post.body'/>

Jump link

To display jump link.

Source

template-src/includable/post/post.jumpLink.xml

Includable

<b:includable id='post.jumpLink'>...</b:includable>

Usage

<b:include data='{ linkClass: "btn btn-primary", parentDivClass: "class-name" }' name='post.jumpLink'/>

Includable - Assets

CSS, JavaScript, icons, na nyingine.

Required CSS

Bootstrap
Boostrablogger
Font Awesome (CDN) - http://fontawesome.io/

Includable

<b:includable id='css.required'>...</b:includable>

Usage

<b:include name='css.required'/>

Required JS

jQuery (CDN) - https://jquery.com/
Popper.js (CDN) - https://popper.js.org/
Bootstrap

Includable

<b:includable id='js.required'>...</b:includable>

Matumizi

<b:include name='js.required'/>

Icons

Blogger

Source

template-src/includable/assets/icons/icons.blogger.xml

Includable

<b:includable id='icons.blogger'>...</b:includable>

Matumizi

<b:include data='{ width: number, height: number, fillBg: "#ff5722", fillB: "#fff", class: "class-name" }' name='icons.blogger'/>

Mfano:

Blogger

<b:include data='{ width: 24, height: 24, fillBg: "#ff5722", fillB: "#fff", class: "align-middle" }' name='icons.blogger'/> Blogger

Mfano hai: CSS and JavaScript

<!DOCTYPE html>
<html>
  <head>
    <b:include name='css.required'/>
  </head>
  <body>
    <h1>Jambo!</h1>

    <b:include name='js.required'/>
  </body>
</html>

Muundo/Layout mode CSS

CSS and Blogger layout.

Be clear look at this picture.

Source

Look template-src/layout-mode.css:

/* Clearfix */
body#layout .container::after,
body#layout .section::after {
  display: block;
  content: "";
  clear: both;
}

/* Container */
body#layout .container {
  max-width: 100%;
}

/* Grid */
body#layout .blogger-col-1,
body#layout .blogger-col-2,
body#layout .blogger-col-3,
body#layout .blogger-col-4,
body#layout .blogger-col-5,
body#layout .blogger-col-6,
body#layout .blogger-col-7,
body#layout .blogger-col-8,
body#layout .blogger-col-9,
body#layout .blogger-col-10,
body#layout .blogger-col-11,
body#layout .blogger-col-12 {
  position: relative;
  float: left;
}
body#layout .blogger-col-1 {
  width: 8.33333333%;
}
body#layout .blogger-col-2 {
  width: 16.66666667%;
}
body#layout .blogger-col-3 {
  width: 25%;
}
body#layout .blogger-col-4 {
  width: 33.33333333%;
}
body#layout .blogger-col-5 {
  width: 41.66666667%;
}
body#layout .blogger-col-6 {
  width: 50%;
}
body#layout .blogger-col-7 {
  width: 58.33333333%;
}
body#layout .blogger-col-8 {
  width: 66.66666667%;
}
body#layout .blogger-col-9 {
  width: 75%;
}
body#layout .blogger-col-10 {
  width: 83.33333333%;
}
body#layout .blogger-col-11 {
  width: 91.66666667%;
}
body#layout .blogger-col-12 {
  width: 100%;
}

/* Lists */
body#layout ul,
body#layout ol {
  padding-left: 0;
  list-style: none;
}

/* Navbar */
body#layout .navbar {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}

Grid usage

Apply for something with a labelb:section. Customize the template template.

Grid behavior	Horizontal at all times
Class prefix	`.blogger-col-`
# of columns	12

<div class='container'>
  <!-- Main -->
  <main class='main blogger-col-8' id='main'>
    <b:section id='b-section-main' maxwidgets='1' name='Main' showaddelement='no'></b:section>
  </main><!-- /.main -->

  <!-- Sidebar -->
  <aside class='sidebar blogger-col-4' id='sidebar'>
    <b:section id='b-section-sidebar' name='Sidebar'></section>
  </aside><!-- /.sidebar -->
</div>

The results will be just as well this picture .

gridi ya Bootstrap :

<div class='container'>
  <div class='row'>
    <!-- Main -->
    <main class='col-md-8 col-lg-9 main blogger-col-8' id='main'>
      <b:section id='b-section-main' maxwidgets='1' name='Main' showaddelement='no'></b:section>
    </main><!-- /.main -->

    <!-- Sidebar -->
    <aside class='col-md-4 col-lg-3 sidebar blogger-col-4' id='sidebar'>
      <b:section id='b-section-sidebar' name='Sidebar'></section>
    </aside><!-- /.sidebar -->
  </div><!-- /.row -->
</div><!-- /.container -->

Default markups

Default Markups These are the features that hold the entire blogger in check because if you have a reset here is where the reset stays and holds records even when the blogger closes and is where the archive of your blogger resides..

Bootrablogger optimizes gadget using tagsb:defaultmarkups na b:defaultmarkup, This tag can be used to create custom gadget models in the template you create.

Usage

<b:defaultmarkups>
  <b:defaultmarkup type='WIDGET_TYPE'>
    ...
  </b:defaultmarkup>
</b:defaultmarkups>

Tag b:defaultmarkupsthis is placed under/body put it before </head> au</body>.
Tag b:defaultmarkups may contain only tags b:defaultmarkup.
Tag b:defaultmarkup may contain only tags b:includable.

Lihat template-src/default-markups learning.

The components used to create a blogger and section in addition are right here

Name	Type
Blog Archive	`BlogArchive`
Blog Search	`BlogSearch`
Contact Form	`ContactForm`
Featured Post	`FeaturedPost`
Follow by Email	`FollowByEmail`
Page Header	`Header`
Image	`Image`
Labels	`Label`
Popular Posts	`PopularPosts`
Translate	`Translate`

This article has been created by Design by BootstraBlogger team included Webublografiki with various help of Code Contributors.

Articles and Codes are owned by license under MIT license conditions.

Articles are under the protection of Creative Commons Attribution-NonCommercial 4.0 International License
The Content and Content of this article is supported by developers of BoostraBlogger (original BloggerTemlate design).

Xml Blogger Materials are collected through Google Blogger, Blogger, Blogger Community and Google Blogger Help from www.google.com

Overview

Blogger version

Page types

Body class

Post

Breadcrumb

Source

Includable

Usage

Status message

Source

Includable

Usage

Posts

Source

Includable

Usage

Comments

Source

Includable

Usage

Pager

Source

Includable

Usage

Usage

Includable - Head

Required meta tags

Source

Includable

Usage

All-head-content

Source

Includable

Usage

Title

Source

Includable

Usage

SERP and social tags

Source

Includable

Usage

Example usage

Includable - Post

Post byline items

Header

Source

Includable

Usage

Footer

Source

Includable

Usage

Post items

Title

Source

Includable

Usage

Author name

Source

Includable

Usage

Author image

Source

Includable

Usage

Dates

Source

Includable

Usage

Number of comments

Source

Includable

Usage

Labels

Source

Includable

Usage

Share

Using HTML `<img>`

Using CSS `background-image`