Ahmad Dawami
How To Setup Savian Blogger Template
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 label2. In the Feed make it Full
TOP MENU
HEADER SUBSCRIBE LINK
INFORMATION:
<a href='https://www.blogger.com/follow.g?blogID=8313402120450315766' target='_blank'>Subscribe</a> Change Blogger ID
MENU
Normal Link : Dropdown
Sub Link : __Submenu 1 (before the link add "__") 2 underscore
BREAKING NEWS
Access your blog Layout - click Edit icon on Breaking News widget
<span data-type="recent" data-no="5"></span>Label / Tag Ex:<span data-type="label" data-label="News" data-no="5"></span>INFORMATION
Replace with the label to be displayed
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
RECENT FEATURED POSTS
Access your blog Layout - click the Edit icon in the Featured Recent widget
<span data-type="recent"></span>Label / Tag Ex:
<span data-type="label" data-label="News"></span>INFORMATION Replace with the label to be displayed
(The size of the text on the label is very influential, so it must be adjusted)
RECENT SLIDER CAROUSEL 1
Access your blog Layout - click Edit icon on Recent Craousel 1.
INFORMATION:
Slider Teks 1
<span data-type="carousel" data-label="Business" data-no="6"></span>
Place the above code in the widget
Replace with the desired label name
(The size of the text on the label is very influential, so it must be adjusted)
RECENT SLIDER CAROUSEL 2
Access your blog Layout - click Edit icon on Recent Craousel 2.
INFORMATION:
Slider Teks One
<span data-type="carousel1" data-label="Health" data-no="5"></span>
Place the above code in the widget
Replace with the desired label name
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
RECENT 1
Access your blog Layout - click Edit icon on Recent 1.
INFORMATION:
<span data-type="recentlist" data-label="Music" data-no="4"></span>
Place the above code in the widget
Replace with the desired label name
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
RECENT 2
Access your blog Layout - click Edit icon on Recent 2.
INFORMATION:
<span data-type="recentgrid" data-label="Sport" data-no="4"></span>
Place the above code in the widget
Replace with the desired label name
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
RECENT 3
Access your blog Layout - click Edit icon on Recent 3.
INFORMATION:
<span data-type="recentlist" data-label="Technology" data-no="3"></span>
Place the above code in the widget
Replace with the desired label name
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
RECENT 4
Access your blog Layout - click Edit icon on Recent 4.
INFORMATION:
<span data-type="recentgrid" data-label="News" data-no="3"></span>
Place the above code in the widget
Replace with the desired label name
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
RECENT 5
Access your blog Layout - click Edit icon on Recent 5.
INFORMATION:
<span data-type="recentlist" data-label="Economy" data-no="8"></span>
Place the above code in the widget
Replace with the desired label name
Number of articles shown
(The size of the text on the label is very influential, so it must be adjusted)
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>
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"SLOTS IN THE ARTICLE
