Documentation Charon

How To Setup Charon Blogger Template

DEMO

Method of Installing Manual Template Code:

Download files sent via email or WhatsApp
Open it using the Winrar or Zip application
Then select the template folder
Select one file type to be installed, .xml to be uploaded directly and notepad replace all and paste it in the Edit HTML. Recommendations (notepad), how to install notepad can be seen here.
Before installing, it's a good idea to first backup the previous template.

URGENT

1. Make sure all articles have a label, don't any without a label

2. In the Feed make it Full

SOCIAL HEADER

Access your blog Layout - click Edit icon on Social Header widget.

Icons Avaliables (facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen)

FEATURED POSTS

Access your blog Layout - click the Edit icon in the Featured Posts widget and specify the articles that are displayed

RECENT (1)

Access your blog Layout - click Edit icon on Recent (1) widget.

<span data-type="goomsite" data-label="News"></span>

INFORMATION:

Place the above code in the widget

Replace with the desired label name

RECENT (2)

Access your blog Layout - click Edit icon on Recent (2) widget.

<span data-type="rleft" data-label="Economy"></span>

INFORMATION:

Place the above code in the widget

Replace with the desired label name

RECENT (3)

Access your blog Layout - click Edit icon on Recent (3) widget.

<span data-type="carousel" data-label="Technology" data-no="5"></span>

INFORMATION:

Place the above code in the widget

Replace with the desired label name

Is the number of articles displayed

ICON LABEL

Access your blog Layout - click Edit icon on Custom CSS widget.

span.Economy:before {content: "\f0e7";}
span.News:before {content: "\f580";}

INFORMATION

Is the name of the post label, the Label Name must match the type of text in the article (cases on the article label are very influential)

Is the type of Icon on the label (Icon using FontAwesome Icon)

To see the types of icons, please access the site https://fontawesome.com/v5.15/icons

And to see the type of CSS icon, look at the following link https://kit-pro.fontawesome.com/releases/v5.15.3/css/pro.min.css

SOURCE CODE

TABLE OF CONTENTS

<aside id="toc"><b class="toc"></b></aside>

Place the TOC code above in the desired paragraph (Place it on the POST HTML page)

DROCUP 1

<span class="text-dropcap dcap1">P</span>

DROPCUP 2

<span class="text-dropcap dcap2">P</span>

DROPCUP 3

<span class="text-dropcap dcap3">P</span>

SYNTAX

<pre><code> ...... </code></pre>

TABLE

Table 2 Columns

<table class="charon-table">
  <tbody>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
    <tr>
      <td>Example 1</td>
      <td>Example 2</td>
    </tr>
    <tr>
      <td>Example 6</td>
      <td>Example 7</td>
    </tr>
  </tbody>
	</table>

Table 3 Columns

<table class="charon-table">
  <tbody>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
    </tr>
    <tr>
      <td>Example 1</td>
      <td>Example 2</td>
      <td>Example 3</td>
    </tr>
    <tr>
      <td>Example 6</td>
      <td>Example 7</td>
      <td>Example 8</td>
    </tr>
  </tbody>
	</table>

Table 4 Columns

<table class="charon-table">
  <tbody>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
    </tr>
    <tr>
      <td>Example 1</td>
      <td>Example 2</td>
      <td>Example 3</td>
      <td>Example 4</td>
    </tr>
    <tr>
      <td>Example 6</td>
      <td>Example 7</td>
      <td>Example 8</td>
      <td>Example 9</td>
    </tr>
  </tbody>
	</table>

Table 5 Columns

<table class="charon-table">
  <tbody>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
    </tr>
    <tr>
      <td>Example 1</td>
      <td>Example 2</td>
      <td>Example 3</td>
      <td>Example 4</td>
      <td>Example 5</td>
    </tr>
    <tr>
      <td>Example 6</td>
      <td>Example 7</td>
      <td>Example 8</td>
      <td>Example 9</td>
      <td>Example 10</td>
    </tr>
  </tbody>
	</table>

BUTTON

<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>white Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>dark-grey Button</a>

GALLERY

<section id="box-gallery">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2J-jETtFEuYSw6LXuaqWyMEEgjqr3dRjSFbCJlWhO1xYd1lsW4V1YCj1rccP1UaqJaz_vrgp-Ww5yMsQKECSnc_bC5qGQzgMyY3zvvXVUO9vR4XEcCn2qRwz9aN5ieVnX2jFWoNFijTPF/s1600/8.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2J-jETtFEuYSw6LXuaqWyMEEgjqr3dRjSFbCJlWhO1xYd1lsW4V1YCj1rccP1UaqJaz_vrgp-Ww5yMsQKECSnc_bC5qGQzgMyY3zvvXVUO9vR4XEcCn2qRwz9aN5ieVnX2jFWoNFijTPF/s1600/8.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90kxBQ7pXcj32FS6-qooqB8UnweapHoc0hFPNiOHy6-yCr6RpHSz8y1ROpl9ZjTYq7yOaxiIMl6bxrXUgb4a0DF7_0B495Y4r_h85IJkW14Av5y_nV13ItBYIg_Iin6oVYcgrqCv7NCge/s1600/9.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90kxBQ7pXcj32FS6-qooqB8UnweapHoc0hFPNiOHy6-yCr6RpHSz8y1ROpl9ZjTYq7yOaxiIMl6bxrXUgb4a0DF7_0B495Y4r_h85IJkW14Av5y_nV13ItBYIg_Iin6oVYcgrqCv7NCge/s1600/9.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-Mp5G00PP-wBBRXvT2bUxpe4CC0tohCHbpjg-t7Wezl9z71ZGr5AY-CExXAXDQb_WiKN_4aqeA9PZ7JXB33kYko2u8GBmNhBvmVdq-SNEH5wnyJKAEGxWfTV07cXENgPLTfPYJvEQzXn/s1600/10.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-Mp5G00PP-wBBRXvT2bUxpe4CC0tohCHbpjg-t7Wezl9z71ZGr5AY-CExXAXDQb_WiKN_4aqeA9PZ7JXB33kYko2u8GBmNhBvmVdq-SNEH5wnyJKAEGxWfTV07cXENgPLTfPYJvEQzXn/s1600/10.jpg" /></a>

</section>

ALERT

<h2>Success Message</h2>
<div class="alert-message success"><i class="fa fa-check-circle"></i> success message : You successfully read this important message</div>

<h2>Alert Message</h2>
<div class="alert-message alert"><i class="fa fa-info-circle"></i> Alert message : This alert needs your attention.</div>

<h2>Warning Message</h2>
<div class="alert-message warning"><i class="fa fa-exclamation-triangle"></i> Warning message : Warning! Best check yo self.</div>

<h2>Error Message</h2>
<div class="alert-message error"><i class="fa fa-exclamation-circle"></i> Error message : Oh snap! Change a few things up.</div>

LAZYLOAD

Every time to add an image in an article or anywhere you have to insert the Lazyload Image code in it to speed up loading on the blog

Example:

class="lazyload" data-sizes="auto"

AULIAN V2

Documentation Charon

Table 2 Columns

Table 3 Columns

Table 4 Columns

Table 5 Columns

Documentation Charon

Pesan via WhatsApp!

Pengiriman Fleksibel

Metode Pembayaran Lengkap

Toko WA+

Hubungi Kami

Documentation Charon

How To Setup Charon Blogger Template

Method of Installing Manual Template Code:

URGENT

MENU

SOCIAL HEADER

FEATURED POSTS

RECENT (1)

RECENT (2)

RECENT (3)

ICON LABEL

SOURCE CODE

DROCUP 1

DROPCUP 2

DROPCUP 3

SYNTAX

Table 2 Columns

Table 3 Columns

Table 4 Columns

Table 5 Columns

BUTTON

GALLERY

ALERT

LAZYLOAD

SLOTS IN THE ARTICLE

Documentation Charon

Pesan via WhatsApp!

Pengiriman Fleksibel

Metode Pembayaran Lengkap

Toko WA+

Hubungi Kami