Panduan Lengkap: Website Sekolah/Pesantren Tampilan Satu By Tokoniaja

DEMO

Daftar Isi Dokumentasi

• 1. Cara Memasang Kode Template Manual
• 2. PENTING...!!!
• 3. Marquee (Teks Berjalan)
• 4. Social Header (Ikon Sosial)
• 5. Menu Navigasi
• 6. Slider Gambar
• 7. Widget Kepala Sekolah
• 8. Sambutan / Visi Misi Sekolah
• 9. Slider Profil (Guru)
• 10. Pengumuman
• 11. Galeri Terbaru
• 12. Teks & Data Statis
• 13. Peta (Maps)
• 14. Gaya Tombol (Button)
• 15. Tabel (1, 2, & 3)
• 16. Pesan Peringatan (Alert)
• 17. Galeri
• 18. Lazyload Gambar
• 19. Slot Iklan/Widget di Artikel

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 untuk dipasang, .xml untuk diunggah langsung (Restore) atau gunakan notepad (copy seluruh kode lalu paste dan replace semua di menu Edit HTML). Direkomendasikan menggunakan cara notepad.
5. Sebelum memasang template baru, ada baiknya lakukan backup template Anda sebelumnya terlebih dahulu.

PENTING...!!!

1. Pastikan semua artikel memiliki label, jangan sampai ada yang tidak berlabel.
2. Pada setelan Feed (Umpan Situs), atur menjadi Penuh (Full).
3. Penulisan teks label yang akan dimasukkan ke widget (recent/terbaru) harus sama persis (huruf besar/kecilnya) dengan teks label pada postingan. Jika penulisan teks label salah, widget tidak akan muncul.

---

MARQUEE (Teks Berjalan)

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

KETERANGAN: Buka widget tersebut dan ketikkan teks pengumuman di dalamnya.

SOCIAL HEADER (Ikon Sosial)

Akses menu Tata Letak blog Anda - klik ikon Edit pada widget Social Header

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

MENU NAVIGASI

Akses menu Tata Letak blog Anda - klik ikon Edit pada widget Menu

KETERANGAN:

• Link Normal: Dropdown
• Sub Link (Tingkat 1): _Multi Dropdown (tambahkan 1 garis bawah "_" sebelum teks link)
• Sub Link (Tingkat 2): __Dropdown 1 (tambahkan 2 garis bawah "__" sebelum teks link)

SLIDER GAMBAR

Akses menu Tata Letak blog Anda - Tambahkan Widget (Add Widget) pada FULL IMAGE SLIDE

KETERANGAN: Tambahkan widget, lalu pilih Gambar (Image)

WIDGET KEPALA SEKOLAH

Akses menu Tata Letak blog Anda - klik ikon Edit pada widget Principal

KETERANGAN: Tambahkan widget, lalu pilih Gambar (Image)

SAMBUTAN / VISI MISI SEKOLAH

Akses menu Tata Letak blog Anda - klik ikon Edit pada widget About School

KETERANGAN: Masukkan Judul dan Teks Visi Misi Sekolah pada form yang disediakan.

SLIDER PROFIL (GURU)

Akses menu Tata Letak blog Anda - Tambahkan Widget pada SLIDE PROFILE

KETERANGAN: Tambahkan widget, lalu pilih Gambar (Image)

PENGUMUMAN

Daftar Terbaru (Recent List)

Akses menu Tata Letak blog Anda - Tambahkan Widget (HTML/JavaScript) pada Recent List

Tambahkan widget HTML/JavaScript di tempat yang disediakan, lalu tempel kode di bawah ini:

<span data-type="rcsimple" data-label="Music"></span>

KETERANGAN: Ganti kata `Music` dengan nama label postingan yang ingin ditampilkan (harus sama persis dengan label aslinya).

Gambar Sampul Terbaru (Recent Cover Image)

Akses menu Tata Letak blog Anda - Tambahkan Widget pada Recent Cover Image

GALERI TERBARU

Akses menu Tata Letak blog Anda - Tambahkan Widget (HTML/JavaScript) pada Gallery

Tambahkan widget HTML/JavaScript di tempat yang disediakan, lalu tempel kode di bawah ini:

<span data-type="rcgallery" data-label="Activity" data-no="6"></span>

KETERANGAN:

• Activity = Ganti dengan nama label postingan yang ingin ditampilkan.
• 6 = Merupakan jumlah postingan gambar galeri yang akan dimunculkan.

STATIS

Teks Statis

Akses menu Tata Letak blog Anda - Tambahkan Widget (Teks) pada Static Text

Data Statis

Akses menu Tata Letak blog Anda - Tambahkan Widget (HTML/JavaScript) pada Static School

Masukkan kode di bawah ini:

<div class="element-counter">
<div class="counter">
<span class="icon-counter"><i class="fas fa-user-graduate"></i></span>
<div class="counter-box">
<span class='timer' data-speed='5000' data-to='4570' id='count'></span>
<span class="counter-plus">+</span>
</div>
<span class="counter-title">Siswa Lulus</span>
</div>
</div>

KETERANGAN:

• <i class...</i> = Kode Ikon Data FontAwesome
• 4570 = Jumlah Data / Angka yang ingin ditampilkan
• Siswa Lulus = Teks Deskripsi Data

PETA (MAPS)

Akses menu Tata Letak blog Anda - Tambahkan Widget (HTML/JavaScript) pada Maps

Masukkan skrip embed iframe Google Maps Anda:

<iframe src="https://www.google.com/maps/..." width="100%" height="450" allowfullscreen="" class="lazyload" title="maps"></iframe>

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

TABEL

Tabel 1

Tabel 2

Tabel 3

PESAN PERINGATAN (ALERT)

<div class="alert-message success">
<i class="fa fa-check-circle"></i> Pesan sukses: Anda berhasil membaca instruksi ini.
<div class="alert-del-btn"></div>
</div>

GALERI

Contoh penambahan gambar pada postingan khusus galeri:

<section id="box-gallery">
<a href="..."><img class="lazyload" data-sizes="auto" src="..." /></a>
</section>

LAZYLOAD (Pemuatan Gambar Lambat)

Setiap kali menambahkan gambar di dalam artikel atau di mana pun pada HTML, sangat disarankan menyisipkan kelas Lazyload ke dalamnya untuk mempercepat waktu loading blog.

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

SLOT IKLAN / WIDGET DI ARTIKEL