Documentation
"Dokumentasi template sekolah Colegio by YzTheme."
Purchase Template Colegio versi terbaru Download
Instalasi Template Juyo
Pertama Kali Instal Template
- Login ke Dashboard Blogger > Theme
- Silahkan lakukan proses Backup terlebih dahulu agar Theme lama kamu tidak hilang.
- Pilih Edit HTML > Select all lalu hapus semua isi kode HTML tersebut
-
Paste kode Blank HTML dari Jettheme dibawah ini kemudian Save
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'> <b:attr name='xmlns' value=''/> <b:attr name='xmlns:b' value=''/> <b:attr name='xmlns:expr' value=''/> <b:attr name='xmlns:data' value=''/> <head> <title><data:blog.pageTitle/></title> <b:skin/> </head> <body> <b:section id='1'/> </body> </html> - Kembali ke menu Theme > Restore > Upload > Pilih file juyo.xml
Update Versi Template
- Login ke Dashboard Blogger > Theme
- Lakukan backup template blogmu.
- Buka tools Blogger Template Merger.
- Paste keseluruhan kode template update yang ingin kamu terapkan di bawah.
- Paste keseluruhan kode template backup blogmu di bawah.
- Pilih tombol Merger Template.
- Gunakan update kode hasil Merger ke Template Editor bloggermu.
Silahkan buka url Blog kamu untuk melihat dan memastikan Template telah berhasil dipasang dan tampilan telah berubah.
Kode Lisensi Template
Template Colegio membutuhkan kode lisensi agar dapat mengedit footer credit blogmu. Sehingga hal pertama yang harus dilakukan adalah memiliki kode lisensi.
Setiap pembelian akan mendapatkan 2 lisensi yang bisa dipakai untuk 2 url domain yang berbeda.
Pengaturan kode lisensi dapat dilakukan di halaman Member Area.
Pastikan login menggunakan email pembelian, jika kesulitan bisa menghubungi bantuan melalui kontak WhatsApp atau Telegram.
Script Pengaturan Fitur Template
Pada widget YzSettings terdapat beberapa baris pengaturan template yang dapat kamu sesuaikan sesuai keinginan masing-masing. Berikut ini adalah default kode dan penjelasan masing-masing fiturnya.
// Search icon
var floatSearch = false;
// dark system
var darkSystem = true;
// link comment
var linkComment = false;
// link profile comment
var profileComment = true;
// recent by label
var yzRp_moreText = 'more in ';
var yzRp_desc = true;
- floatSearch (true/false), mengaktifkan fitur tombol icon pencarian atau tidak.
- darkSystem (true/false), mengaktifkan fitur dark mode atau tidak.
- linkComment (true/false), mengaktifkan atau tidak link pada kolom komentar.
- profileComment (true/false), mengaktifkan atau tidak link profile pengirim komentar.
- yzRp_moreText (strings), tulisan pada tombol lihat semua postingan widget recent by label
- yzRp_desc (true/false), menampilkan atau tidak baris deskripsi isi singkat artikel di widget recent by label.
Mengatur Default Warna Tema
Pada template Colegio terdapat 4 warna default yang dapat kalian ubah, yakni:
Caranya merubahnya adalah sbb:
- Buka menu Theme kemudian pilih tombol Customize
- Kemudian pilih dropdown menu Advance dan pilih Color
- Silahkan ubah default warna masing-masing dengan memilih icon palette
Mengatur Urutan Layout Detail Post
Tampilan layout detail postingan (posisi author/tanggal/label/share) dapat kita atur melalui editor widget Blog Post, caranya:
- Masuk ke halaman layout
- Pilih icon pensil pada widget Blog Post
- Scroll ke paling sampai muncul bagian Arrange items
-
Drag posisi items sesuai keinginan atau bisa mengikuti saran seperti gambar
di bawah jika ingin sama.
-
Save untuk menyimpan dan silahkan lihat hasilnya pada halaman postingan.
Mengatur Navigasi Menu dan Submenu
Sama seperti template Infastio, di template PDF Spot juga mendukung navigasi menu dan submenu melalui widget linklist.
Widget LinkList Header
Pada menu Layout edit widget Link List
Berikan underscore _ pada judul link yang ingin dijadikan sebagai submenu.
contoh: _Card Generator (lihat screenshot)
Pastikan diatas submenu harus ada link yang dijadikan sebagai menu utama, contoh dalam screenshot: Tools.
Ukuran link terakhir/paling bawah akan memiliki tampilan dengan background tombol. Sehingga cocok untuk menjadi link Call to Action.
Ukuran Image Ideal Untuk Landing Page Home
Sejatinya seluruh image di template Colegio dapat menggunakan ukuran gambar berapapun karena sudah terdapat auto croping dan responsive, namun agar image tidak pecah berikut ini adalah beberapa ukuran minimum gambar berdasarkan ukuran pixel lebarxtinggi dan aspect ratio yang tepat.
- Logo Header = tinggi = 40px, lebar dan aspect-ratio bebas
- Big Hero Bg = 1600x900 / 16:9
- Kepala Sekolah = 600x600 / 1:1
- Profil Sekolah = 570x380 / 3:2
- Profil 2 (triangle image) = 1. 290x163 / 16:9, 2. 232x155 / 3:2, 3. 290x436 / 2:3
- Extrakulikuler = 254x169 / 3:2
- Testi profile = 100x100 / 1:1
Cara Embed Peta Lokasi dari Google Maps
- Buka maps.google.com
- Ketik lokasi pada kolom pencarian "telusuri google maps"
- Buka lokasi, pilih icon Share, pilih Sematkan Peta
- salin HTML kode embed iframenya
- tambahkan class="lazy" agar tidak memberatkan loading, contoh
<iframe class="lazy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.311....." ....></iframe>
HTML Icon Sosial Media
Contoh kode HTML default untuk daftar icon Sosial Media di top header maupun bottom footer
<ul class="social ai-c">
<li class="instagram">
<a href="#" target="_blank" aria-label="instagram icon" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"></path><path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z"></path><path stroke-linecap="round" stroke-linejoin="round" d="m17.5 6.51l.01-.011"></path></g></svg>
</a>
</li>
<li class="facebook">
<a href="#" target="_blank" aria-label="facebook icon" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21 8v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5"></path><path d="M11 21v-9c0-2.187.5-4 4-4m-6 5h6"></path></g></svg>
</a>
</li>
<li class="tiktok">
<a href="#" target="_blank" aria-label="tiktok icon" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21 8v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5"></path><path d="M10 12a3 3 0 1 0 3 3V6c.333 1 1.6 3 4 3"></path></g></svg>
</a>
</li>
<li class="youtube">
<a href="#" target="_blank" aria-label="youtube icon" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m14 12l-3.5 2v-4z"></path><path d="M2 12.708v-1.416c0-2.895 0-4.343.905-5.274c.906-.932 2.332-.972 5.183-1.053C9.438 4.927 10.818 4.9 12 4.9s2.561.027 3.912.065c2.851.081 4.277.121 5.182 1.053S22 8.398 22 11.292v1.415c0 2.896 0 4.343-.905 5.275c-.906.931-2.331.972-5.183 1.052c-1.35.039-2.73.066-3.912.066s-2.561-.027-3.912-.066c-2.851-.08-4.277-.12-5.183-1.052S2 15.602 2 12.708Z"></path></g></svg>
</a>
</li>
</ul>Temukan icon svg lainnya di website iconify.
More soon..
Sampaikan keperluan dokumentasi berikutnya pada kolom komentar
