"Belajar Bikin Gambar AI dari NOL! GABUNG SEKARANG!
Beranda
Blogger
Template Blog

Panduan Cara Memasang Template Blog CHARON v1.2 Blog & Magazine Blogger Templates

Panduan Cara Memasang Template Blog CHARON v1.2 Blog & Magazine Blogger Templates

 CARA MEMASANG TEMPLATE BLOGGER CHARON


Charon



Charon adalah tema blogger yang bersih, rapi, sangat fleksibel dan sepenuhnya responsif, template blogger responsif yang terorganisir dengan baik untuk majalah, blog, dan situs berita. 

Template ini sepenuhnya responsif, tidak ada widget yang tersembunyi di ponsel, kompatibel dengan ukuran tampilan apa pun dari resolusi rendah hingga resolusi tinggi, hadir dengan desain modern, kecepatan, pengoptimalan iklan, dan banyak fitur lanjutan.

Memang template ini memiliki struktur yang baik di search engine seperti Google, Bing, Yandex dan search engine lainnya karena sudah dioptimasi secara maksimal, dan juga sudah melakukan verifikasi beberapa elemen penting yaitu Valid CSS3, valid HTML5 dan structured data.

Table of Contents

Template ini memiliki fokus yang kuat pada konten dan keterbacaan, yang jelas penting bagi semua pemilik situs web.  Tentunya tema ini sangat dioptimalkan untuk hasil SEO yang lebih baik.  Ada banyak fitur, harap dicatat di bawah ini.


CARA MEMASANG KODE TEMPLATE MANUAL :

  1. Unduh file yang dikirim melalui email atau WhatsApp
  2. Buka menggunakan aplikasi Winrar atau Zip
  3. Kemudian pilih folder template
  4. Pilih salah satu jenis file yang akan diinstal, . xml untuk diunggah langsung dan notepad ganti semua dan tempel di Edit HTML . Rekomendasi ( notepad )
  5. Sebelum install, ada baiknya backup terlebih dahulu template sebelumnya.

PENTING

1. Pastikan semua artikel memiliki label, jangan ada yang tanpa label
2. Di Feed buat Full

TIDAK BISA


Akses (Layout ) Tata Letak blog Anda   - klik  ikon Edit  pada widget Menu 




Tautan Normal :  Drop-down
Sub Link :  __Submenu 1  (sebelum link tambahkan "__") 2 underscore


SOCIAL HEADER

Akses  Layout blog Anda  - klik  ikon Edit  pada   widget Social Header .

Ikon Tersedia  ( facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, lezat, codepen )





FEATURED POSTS

Akses Tata Letak blog Anda - klik ikon Edit di widget Featured Posts dan tentukan artikel yang ditampilkan






RECENT (1)

Akses  (Layout) Tata Letak blog Anda  - klik  ikon Edit  pada   widget Recent (1) .



<span data-type="goomsite" data-label=" News "></span>
INFORMASI:
Tempatkan kode di atas pada widget
            Ganti dengan nama label yang diinginkan



RECENT (2)

Akses (Layout ) Tata Letak blog Anda   - klik  ikon Edit  pada   widget Recent  (2) .




<span data-type="rleft" data-label=" Economy "></span>
INFORMASI:
Tempatkan kode di atas pada widget
            Ganti dengan nama label yang diinginkan




RECENT  (3)

Akses (Layout) Tata Letak blog Anda   - klik  ikon Edit  pada   widget Recent (3) .





<span data-type="carousel" data-label=" Technology " data-no=" 5 "></span>
INFORMASI:
Tempatkan kode di atas pada widget
            Ganti dengan nama label yang diinginkan
            Apakah jumlah artikel yang ditampilkan



LABEL IKON


Akses (Layout ) Tata Letak blog Anda   - klik  ikon Edit  pada   widget CSS Kustom .



span.Economy:before {content: "\f0e7";}
span.News:before {content: "\f580";}
INFORMASI
          Adalah nama label postingan, Nama Label harus sesuai dengan jenis teks di artikel (kasus di label artikel sangat berpengaruh)
          Apakah jenis Icon pada label (Icon menggunakan FontAwesome Icon)

Untuk melihat jenis icon silahkan akses situs https://fontawesome.com/v5.15/icons
Dan untuk melihat jenis icon css lihat link berikut  https://kit-pro.fontawesome.com/releases/v5.15.3/css/pro.min.css



SOURCE CODE

(TABLE OF CONTENTS) DAFTAR ISI

<aside id="toc"><b class="toc"></b></aside>
Tempatkan kode TOC di atas pada paragraf yang diinginkan (Letakkan di halaman POST HTML)


DROP 1

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


DROPUP 2

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


DROPUP 3

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

SYNTAX

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


TABLE

TABLE 2 COLUMS

<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 COLUMS

<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 COLUMS

<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 COLUMS

<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) TOMBOL


<a class="button" href="#">Tombol</a>
<a class="button red" href="#">Tombol merah</a>
<a class="button orange" href="#">Tombol oranye</a>
<a class="button green" href="#">Tombol hijau</a>
<a class="button blue" href="#">Tombol biru</a>
<a class="tombol ungu" href="#">Tombol ungu</a>
<a class="button yellow" href="#">Tombol kuning</a>
<a class="button mint" href="#">Tombol mint</a>
<a class="button aqua" href="#">Tombol aqua</a>
<a class="button pink" href="#">Tombol merah muda</a>
<a class="button white" href="#">Tombol putih</a>
<a class="button grey" href="#">Tombol abu-abu</a>
<a class="button dark-grey" href="#">Tombol abu-abu tua</a>
<a class="button transparent" href="#">Tombol</a>
<a class="button transparent red" href="#">Tombol merah</a>
<a class="button orange transparan" href="#">Tombol oranye</a>
<a class="button transparent green" href="#">Tombol hijau</a>
<a class="button transparent blue" href="#">Tombol biru</a>
<a class="button transparent purple" href="#">Tombol ungu</a>
<a class="button transparent yellow" href="#">Tombol kuning</a>
<a class="button transparent mint" href="#">Tombol mint</a>
<a class="button transparent aqua" href="#">Tombol aqua</a>
<a class="button transparent pink" href="#">Tombol merah muda</a>
<a class="button transparent grey" href="#">Tombol abu-abu</a>
<a class="button transparent dark-grey" href="#">Tombol abu-abu tua</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Tombol</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>Tombol merah</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>Tombol oranye</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>Tombol hijau</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>Tombol biru</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>Tombol ungu</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>Tombol kuning</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>Tombol mint</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>Tombol aqua</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>Tombol merah muda</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>Tombol putih</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>Tombol abu-abu</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>Tombol abu-abu tua</a>



(GALLERY) GALERI



<section id="box-gallery">

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJ-S5EfPyEes0gumK_-3C_NSju3lgH7pbajsE-fTsYC3VrxnHuFcmVYoFIi7cP7X6nF3m7tG2-CXBGTA5iyTh2ffWaqF0_d7lpYCI8ZVTHy4hOtLfZ6QO3foecPduh4MiEnZF253QO7vk/s1600/9.jpg"><img class="lazyload" data-sizes="auto" src ="https://1.bp.blogspot.com/-HzACOYzK4Mc/XPDRR_V8H6I/AAAAAAAAAAeA/bwOMdck5t8IACsIlK_7ZghfYIfh-wJgvACLcBGAs/s1600/9.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimw0wLXAejNWEVvk3udpvLlTad4DxWFKNLTOGwOaC42JhIz9SO9lLgbGw2mlfGoGqBMexxSCwgwLpJsOeT2stCHol7KRzroYngHZA1SZNgl7WnSl9bC8SgkfSMuRXK-sKbAGwxCSnNF26/s1600/10.jpg"><img class="lazyload" data-sizes="otomatis " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimw0wLXAejNWEVvk3udpvLlTad4DxWFKNLTOGwOaC42JhIz9SO9lLgbGw2mlfGoGqBMexxSCwgwLpJsOeT2stCHol7KRzroYngHZA1SZNgl7WnSl9bC8SgkfSMuRXK-sKbAGwxCSnNF26/s1600/10.jpg" /></a>

</bagian>




(ALERT) PERINGATAN

<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 

Setiap mau menambahkan gambar di artikel atau dimana saja harus memasukan kode Lazyload Image di dalamnya untuk mempercepat loading di blog

Contoh:


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



SLOT DALAM ARTIKEL 


Baca Juga
Selanjutnya kalian mau dibuatkan artikel tentang apa? Tulis dikolom komentar ya!!!

Posting Komentar