cleansy Documentation Rilis latest

(1)

cleansy Documentation

Rilis latest

(2)

(3)

Pengaturan Dasar

1 Optimasi Dasar 3

1.1 Aktifkan Preferensi Penelusuran . . . 3

1.2 Membuat Paragraf Baru . . . 6

1.3 Optimasi Gambar. . . 7

2 Matikan Tampilan Mobile 11 3 Iklan AdSense 13 3.1 In-Article . . . 13 3.2 In-Feed . . . 14 4 Laman 17 4.1 Menambahkan Laman . . . 17 4.2 Menghapus Laman . . . 18 5 Menu Navigasi 21 6 Sosial Media 23 7 About Us 27 7.1 Deskripsi Situs . . . 27 7.2 Alamat E-mail . . . 30 7.3 Nomor Telepon . . . 30 7.4 Alamat Fisik . . . 31 7.5 Tambahan. . . 31 8 Mailing List 33 8.1 Pemasangan . . . 33 8.2 Deskripsi . . . 37 9 Twitter Stream 39

10 Aktifkan atau Nonaktifkan Bayangan 43

11 Butuh Bantuan? 45

(4)

(5)

cleansy Documentation, Rilis latest

Cleansy adalah sebuah Template Blogger sederhana yang dibuat oleh adminPandu Kode. Berikut adalah fitur-fitur yang tersedia di template ini:

Fitur Ketersediaan

AdSense In-Feed dan In-Article Script

GTmetrix Optimized (Skor 97, 82 jika tanpa iklan) Google Page Insights (Skor 87, 91 jika tanpa iklan) Mobile Friendly cek

Optimized SEO on chkme.com 100%cek

Valid HTML5 cek

Valid Microformats cek

Valid & Optimized Structured Data cek

Responsive Design cek

Breadcrumb di SERP cek

Valid Sharing Facebook cek

Auto Readmore + Thumbnail Custom Bayangan

Fontawesome Icon Footer Links

Good Styled Blogger Comment System Konsultasi Template (tanpa modifikasi) Related Article

Sticky Sidebar Sticky Menu

Sticky social sharing buttons Twitter Latest Tweets Widget Valid Sharing Google+ Valid Sharing Twitter

Dokumen ini akan membimbing Anda untuk mengkonfigurasiTemplate Cleansydengan mudah dan cepat.

(6)

(7)

BAB

1

Optimasi Dasar

Untuk membuat postingan yang enak dilihat dan SEO Friendly, Anda perlu melakukan tahap-tahap berikut ini: • Aktifkan Preferensi Penelusuran

• Membuat Paragraf Baru

• Optimasi Gambar

Aktifkan Preferensi Penelusuran

Atur Deskripsi Situs

1. Buka menu “Setelan > Preferensi Penelusuran > Edit”.

(8)

2. Aktifkan deskripsi penelusuran, isi dengan deskripsi pendek situsmu (maksimal 150 karakter), lalu simpan.

Deskripsi Penelusuran Postingan

1. Saat membuat postingan, pastikan untuk mengisi “Deskripsi Penelusuran” pada bilah menu di samping kanan postingan.

(9)

2. Caranya, klik “Deskripsi Penelusuran”.

3. Isi “Deksripsi Penelusuran”

4. Dengan mengisi “Deskripsi Penelusuran” seperti di atas, maka jika kita lihat di SERP akan muncul seperti berikut ini:

(10)

Membuat Paragraf Baru

1. Saat membuat postingan, jika ingin memisahkan paragraf, silakan tekan Enter pada keyboard 2 kali sehingga muncul jarak diantara paragraf seperti berikut:

(11)

Optimasi Gambar

Untuk mengoptimasi gambar agar lebih mudah dikenal oleh mesin pencari, silakan lakukan cara berikut untuk me-nambahkan setiap gambar:

1. Upload gambar seperti biasa.

(12)

2. Setelah gambar ditambahkan, masuk ke “Tampilan HTML”.

3. Hapus teks yang saya tandai pada gambar yang telah anda tambahkan.

Hapus Teks:

(13)

imageanchor="1" style="margin-left: 1em; margin-right: 1em;" dan

border="0"

4. (a) Masuk ke “Tampilan Compose”. (b) Klik gambar yang tadi diedit. (c) Tentukan Ukuran.

(d) Klik “Properties”.

5. Isi deskripsi singkat gambar. Lalu klik “OK”.

6. Isi artikel seperti biasa.

(14)

(15)

BAB

2

Matikan Tampilan Mobile

Tampilan Moile perlu dimatikan agar template dapat ditampilkan dengan sempurna. 1. Buka menu Tema > Ikon Gerigi di dasborBlogger.

2. Centang Radio button ke-2 (lihat gambar), lalu simpan.

(16)

(17)

BAB

3

Iklan AdSense

Jika Anda ingin memasang kode AdSense (in-article ad dan in-feed ad) untuk blog Anda, silakan ikuti cara berikut.a • In-Article

• In-Feed

In-Article

Iklan jenis ini akan ditempatkan di tengah-tengah artikel pada setiap postingan yang anda buat. 1. Cari kata in-article-script di dalam HTML Editor menggunakan Ctrl+F 2. Scroll sedikit ke bawah dan Anda akan menemukan blok kode seperti berikut:

3. Letakkan kode AdSense Anda tepat di bawah baris yang mengandung kata in-article-script (lihat gambar).

4. Sebelum menyimpan, pastikan utuk mengubah tulisan async menjadi async='' agar script iklan bisa di-simpan.

(18)

5. Simpan.

In-Feed

Iklan jenis ini akan ditempatkan di halaman index (daftar postingan) sesuai dengan urutan yang Anda tentukan. 1. Cari kata in-feed-script di dalam HTML Editor menggunakan Ctrl+F

2. Scroll sedikit ke bawah dan Anda akan menemukan blok kode seperti berikut:

3. Letakkan kode AdSense Anda tepat di bawah baris yang mengandung kata in-feed-script (lihat gambar). 4. Sebelum menyimpan, pastikan utuk mengubah tulisan async menjadi async='' agar script iklan bisa

di-simpan.

(19)

5. Simpan.

(20)

(21)

BAB

4

Laman

Posisi widget laman berada pada pojok kiri-atas header. Widget ini bisa berisi link internal ataupun eksternal.

Menambahkan Laman

1. Buka menu Layout/ Tata Letak pada dasborBlogger. 2. Klik Edit pada widget Pages.

3. (1) Centang laman yang ingin ditambahkan; atau

(2) Klik “+ Tambahkan tautan eksternal” jika ingin menambahkan URL Eksternal.

(22)

4. Simpan.

Menghapus Laman

1. Lakukan langkah 1 dan 2 seperti pada bagianMenambahkan Laman. 2. Klik tanda “X” untuk menghapus laman yang Anda inginkan.

(23)

3. Simpan.

(24)

(25)

BAB

5

Menu Navigasi

Posisi widget ini berada di samping logo. Menu Navigasi akan diposisikan di atas laman apabila telah di-scroll sampai batas atas menu.

1. Buka menu Layout/ Tata Letak di dasborBlogger.

2. Edit Gadget Daftar Link yang memiliki judul Navigation.

3. (1) Isi form untuk menambahkan link.

(2) Klik Delete untuk menghapus salah satu link yang Anda inginkan

(26)

4. Simpan.

(27)

BAB

6

Sosial Media

1. Buka HTML Editor dengan cara klik menu Tema > Edit HTML.

(28)

2. Klik sembarang pada kotak HTML Editor

(29)

3. Tekan Ctrl+F pada keyboard. Kemudian ketik connect</h2>, lalu tekan Enter. 4. Scroll ke bawah, maka Anda akan menemukan blok kode seperti berikut:

(30)

5. (a) Ganti # menjadi url Facebook Anda. (b) Ganti # menjadi url Twitter Anda. (c) Ganti # menjadi url Google+ Anda. (d) Ganti # menjadi url Pinterest Anda. (e) Ganti # menjadi url Instagram Anda.

6. Jika ingin menghapus salah satu ikon sosial media, maka hapus dari <a sampai </a> terdekat. Contoh: Jika saya ingin menghapus ikon instagram, maka yang saya hapus adalah:

(31)

BAB

7

About Us

Widget ini menampilkan informasi situs seperti deskripsi situs, alamat e-mail, nomor telepon dan alamat fisik. • Deskripsi Situs • Alamat E-mail • Nomor Telepon • Alamat Fisik • Tambahan

Deskripsi Situs

(32)

(33)

3. Tekan Ctrl+F pada keyboard. Kemudian ketik about us, lalu tekan Enter.

4. Scroll ke bawah, maka Anda akan menemukan blok kode seperti berikut:

<h2 class='widget-title'>About Us</h2> <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt

˓→magna eu purus porta tempor.

(34)

</p>

<i aria-hidden='true' class='fa fa-envelope'/> <span class='sr'>e-mail address</span>

</dt>

<dd class='r-inf'> admin@example.com </dd>

</div>

<i aria-hidden='true' class='fa fa-phone'/> <span class='sr'>phone number</span>

</dt>

62-8XXXXXXXXXX<br/>62-8XXXXXXXXXX </dd>

</div>

<i aria-hidden='true' class='fa fa-home'/> <span class='sr'>address</span>

</dt>

4986 Woodside Circle<br/>Fort Walton Beach, FL 32547<br/>United States </dd>

</div> </dl>

5. Ubah Teks berikut:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt magna eu purus porta tempor. Menjadi deskripsi singkat blog Anda.

Alamat E-mail

1. Lakukan langkah 1-4 seperti pada langkah-langkah diDeskripsi Situs. 2. Ubah admin@example.com dengan Alamat E-Mail yang anda inginkan.

Contoh:

support@example.com<br/>cs@example.com

Catatan: Jika alamat e-mail lebih dari 1, pisahkan dengan <br/>.

Nomor Telepon

1. Lakukan langkah 1-4 seperti pada langkah-langkah diDeskripsi Situs.

(35)

2. Ubah 62-8XXXXXXXXXX<br/>62-8XXXXXXXXXX dengan Nomor Telepon yang anda inginkan. Contoh:

62-838-2839-2918<br/>62-838-6281-7712

Catatan: Jika nomor telepon lebih dari 1, pisahkan dengan <br/>

Alamat Fisik

1. Lakukan langkah 1-4 seperti pada langkah-langkah diDeskripsi Situs.

2. Ubah 4986 Woodside Circle<br/>Fort Walton Beach, FL 32547<br/>United States dengan Alamat Fisik yang anda inginkan.

Contoh:

Jalan HS.Ronggo Waluyo, Puseurjaya<br/>Kabupaten Karawang - 41361<br/>Jawa Barat

Catatan: Gunakan <br/> untuk memberikan efek garis baru.

Tambahan

Tip: Jika anda ingin menghapus salah satu detail di widget About Us silakan hapus dari <div class='inf-item'>sampai </div> terdekat.

Contoh:

Untuk menghilangkan widget alamat fisik, hapus kode berikut ini:

<i aria-hidden='true' class='fa fa-home'/> <span class='sr'>address</span>

</dt>

4986 Woodside Circle<br/>Fort Walton Beach, FL 32547<br/>United States </dd>

</div>

(36)

(37)

BAB

8

Mailing List

Posisi widget ini berada di bagian footer. Digunakan untuk menyediakan layanan ** Subscribe ** untuk pengunjung.

Pemasangan

1. Buat Gadget Ikuti lewat E-Mail.

2. Copy kode FeedBurner Anda yang terletak setelah http://feeds.feedburner.com/. Di sini kode FeedBurner saya adalah Cleansy.

(38)

3. Klik tombol Batal.

(39)

(40)

6. Tekan Ctrl+F pada keyboard. Kemudian ketik "Cleansy$quot;, lalu tekan Enter.

7. Ubah Cleansy menjadi kode FeedBurner yang tadi Anda copy.

(41)

8. Simpan.

Deskripsi

1. Di HTML editor temukan teks berikut dengan menggunakan Ctrl+F.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt magna

˓→eu purus porta tempor.

2. Ubah Teks tersebut menjadi deskripsi/ kata-kata untuk mengundang pengunjung agar mau berlangganan artikel terbaru via e-mail.

(42)

(43)

BAB

9

Twitter Stream

Posisi widget ini berada di pojok kanan-bawah footer. Fungsinya untuk menampilkan tweet terbaru dari salah satu user di twitter.

(44)

(45)

3. Tekan Ctrl+F pada keyboard. Kemudian ketik TwitterDev, lalu tekan Enter.

4. Ganti TwitterDev yang ditemukan dengan akun twitter milikmu (tanpa @) Contoh: @SamsulAZ

Maka ganti dengan SamsulAZ

(46)

(47)

BAB

10

Aktifkan atau Nonaktifkan Bayangan

Anda bisa mengaktifkan/ menonaktifkan bayangan untuk ditampilkan di sekitar box postingan, sidebar, komentar, dll. 1. Buka HTML Editor template.

2. Cari <b:with value='0' var='shadow'> di template. 3. Ganti 0 menjadi 1 jika ingin menampilkan bayangan.

(48)

4. Preview bayangan aktif:

(49)

BAB

11

Butuh Bantuan?

Jika Anda memerlukan bantuan terkait edit template ini, silakan hubungi pembuat template pada kontak berikut. • Facebook:Samsul Arif