JetTheme Docs - Panduan Penggunaan Jettheme Lengkap
Ini merupakan halaman dokumentasi jettheme yang akan membantu pengguna untuk mengatur dan menggunakan tema blogger jettheme. Panduan lengkap penggunaan template jettheme ini akan selalu diupdate kedepannya.
Ikuti semua arahan penggunaan dengan baik!
Memulai dengan JetTheme Premium Blogger Template
Jettheme merupakan template blogger premium gratis yang dapat digunakan untuk berbagai topik atau niche blog. Template blogger jettheme didesain khusus agar ringan dan SEO serta responsive
Download
Unduh file template jettheme versi terbaru dengan menggunakan link berikut.
Install Template JetTheme di Blogger
Jika kamu baru pertama kali menggunakan blogger, ikuti langkah berikut untuk menginstal template jettheme di blogger.
- Buka Blogger > Pilih Blog
- Pilih menu Tema > Edit HTML
- Hapus semua kode yang ada dan ganti dengan kode berikut
- Simpan perubahan
- Kemudian Kembali pada menu Tema > Pemulihan/Restore > Pilih file template yang sudah didownload sebelumnya yang berformat .xml
- Klik OK
<?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>
Tujuan kode diatas adalah untuk mereset semua settingan template blog yang sudah ada sebelumnya
Dengan demikian kamu sudah berhasil menginstal template jettheme dan menerapkannya di blog, klik lihat blog untuk melihat perubahan
Mengupdate Framework CSS dan JavaScript
Perlu diketahui, template jettheme tidak menggunakan tag dari blogger. Jettheme juga menggunakan framework CSS Bootstrap sebagai pondasi tampilan tema blogger ini. Jadi kamu bisa mengupdate file CSS ataupun script java menjadi versi yang lebih baru.
File template yang kamu download masih menggunakan bootstrap versi 5.1.3, silahkan ganti ke-versi terbaru jika dibutuhkan.
Cari kode 5.1.3 di HTML template, ganti menjadi 5.3.3 atau silahkan menerapkan kode berikut
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
Setting/Pengaturan Dasar Template JetTheme
Langkah selanjutnya untuk kostumisasi tema blogspot premium jettheme adalah mengikuti pengaturan dasar dan menyesuaikan settingan untuk meningkatkan peforma blog dan meningkatkan SEO blog. Ikuti beberapa pengaturan yang ada berikut
Pengaturan Logo dan Favicon
Kamu bisa mengganti logo di menu tata letak pada bagian judul blog. Dan ganti URL yang ada menjadi url gambar logo situs kamu, gunakan ekstensi svg untuk peforma yang lebih bagus
Untuk mengganti logo icon atau favicon dapat dilakukan pada menu pengaturan > Favicon > dan Upload icon blog
Sitemap JetTheme
Untuk membuat halaman sitemap blogger pada template jettheme, gunakan code berikut dan pastekan pada halaman blog pada bagian HTML
<div class="custom-posts sitemap-posts" data-label="false" data-func="sitemap_temp" data-callback="sitemap_cb" data-items="1"><div class='text-center'><div class='spinner-grow text-light' role='status'><span class='visually-hidden'>Loading...</span></div></div></div>
Contact Form Jettheme
Untuk membuat halaman contact, buat halaman baru > Pilih HTML mode > Pastekan script contact form jettheme > Publikasikan
<form class='contact-form-blogger'>
<div class='contact-form-wrap row'>
<div class='col-md-6 mb-3'>
<label class='form-label fs-7 fw-bold' for='field-name'>Your Name</label>
<input class='form-control bg-transparent jt-border-light text-reset' id='field-name' name='name' required='' type='text' placeholder='Enter Name'/>
</div>
<div class='col-md-6 mb-3'>
<label class='form-label fs-7 fw-bold' for='field-email'>Email Address</label>
<input class='form-control bg-transparent jt-border-light text-reset' id='field-email' name='email' required='' type='email' placeholder='Enter Email'/>
</div>
<div class='col-12 mb-3'>
<label class='form-label fs-7 fw-bold' for='field-message'>Message</label>
<textarea class='form-control bg-transparent jt-border-light text-reset' id='field-message' name='message' required='' rows='3' placeholder='Enter Message'></textarea>
</div>
<div class='col-12 mb-3'>
<button class='btn btn-sm fw-bold py-2 px-5 jt-btn-primary' type='submit'>SEND</button>
</div>
</div>
<div
data-success="Thank you message sent successfully."
data-error="Message failed to send. Please try again an hour later."
class="contact-form-msg d-none border border-3 rounded text-center p-3 fs-7">
</div>
</form>
Componen Desain
Berikut beberapa item componen yang dapat diterapkan di template jettheme
Accordion
Text accordion memungkinkan untuk menciutkan tulisan dan paragraf dan memunculkannya ketika diklik. Berikut contoh penggunaan
Placeholder content for this accordion, which is intended to demonstrate the
.accordion-flush class. This is the first item's accordion body.
Placeholder content for this accordion, which is intended to demonstrate the
.accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
Placeholder content for this accordion, which is intended to demonstrate the
.accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
Allerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> A simple success alert—check it out! </div> <div class="alert alert-danger" role="alert"> A simple danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> A simple warning alert—check it out! </div> <div class="alert alert-info" role="alert"> A simple info alert—check it out! </div> <div class="alert alert-light" role="alert"> A simple light alert—check it out! </div> <div class="alert alert-dark" role="alert"> A simple dark alert—check it out! </div>
Carousel
Komponen tayangan slide untuk menelusuri elemen—gambar atau slide teks—seperti carousel.
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Spinner Loading Animation
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
List Group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Basic List --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<!-- Active Item --> <ul class="list-group"> <li class="list-group-item active">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
Typography
Lead paragraph.
highlight text.
Deleted text.
Underlined text.
Small text.
Bold text.
Italicized text.
<p class="lead">Lead paragraph.</p> <p><mark>highlight</mark> text.</p> <p><del>Deleted text.</del></p> <p><u>Underlined text.</u></p> <p><small>Small text.</small></p> <p><b>Bold text.</b></p> <p><i>Italicized text.</i></p>
Blockquote
A well-known quote, contained in a blockquote element.
Someone famous
<blockquote class="ps-3 border-start border-3 text-reset">
<p class="blockquote">A well-known quote, contained in a blockquote element.</p>
<figcaption class="blockquote-footer">Someone famous</figcaption>
</blockquote>
Table
| First | Second |
|---|---|
| Mark | Otto |
| Jacob | Thornton |
| Larry | the Bird |
<div class="table-responsive">
<table class="table table-bordered jt-border-light text-reset">
<thead class="table-dark">
<tr>
<th scope="col">First</th>
<th scope="col">Second</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
</div>
Navbar dan Tabs
Kamu juga bisa menerapkan atau menambahkan bentuk navbar baru pada template ini, tapi harap perhatikan penempatan scipt menu agar tidak terjadi error. berikut contoh header navigasi nya
Sedangkan widget tabs bisa diterapkan pada postingan artikel jika memerlukan pengelompokan data yang rapi.
<!-- offcanvas -->
<div class="position-relative">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand fs-3" href="#">Offcanvas
navbar</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end"
tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title"
id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close
text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end
flex-grow-1 pe-3 mb-2">
<li class="nav-item">
<a class="nav-link active"
aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Docs</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2"
type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success"
type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
</div>
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
<!-- javascript behaviour -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
...isi tab 1
...isi tab 2
...isi tab 3
...isi tab 4
<!-- javascript behavior vertical pills -->
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
silahkan berikan Pertanyaan tentang costumisasi template jika ada hal yang kurang dipahami.
Pediaku ID
Halo, saya penulis Pediaku ID yang suka membahas semua hal tentang tips, interne, dunia blogging dan pendidikan. Ikuti juga media sosial penulis
