cleansy documentation

cleansy DocumentationRilis latest

Agt 04, 2017

Pengaturan Dasar

1 Optimasi Dasar 31.1 Aktifkan Preferensi Penelusuran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Membuat Paragraf Baru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.3 Optimasi Gambar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Matikan Tampilan Mobile 11

3 Iklan AdSense 133.1 In-Article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.2 In-Feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4 Laman 174.1 Menambahkan Laman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.2 Menghapus Laman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5 Menu Navigasi 21

6 Sosial Media 23

7 About Us 277.1 Deskripsi Situs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277.2 Alamat E-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307.3 Nomor Telepon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307.4 Alamat Fisik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317.5 Tambahan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

8 Mailing List 338.1 Pemasangan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338.2 Deskripsi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

9 Twitter Stream 39

10 Aktifkan atau Nonaktifkan Bayangan 43

11 Butuh Bantuan? 45

i

cleansy Documentation, Rilis latest

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

Fitur KetersediaanAdSense In-Feed dan In-Article ScriptGTmetrix Optimized (Skor 97, 82 jika tanpa iklan)Google Page Insights (Skor 87, 91 jika tanpa iklan)Mobile Friendly cekOptimized SEO on chkme.com 100% cekValid HTML5 cekValid Microformats cekValid & Optimized Structured Data cekResponsive Design cekBreadcrumb di SERP cekValid Sharing Facebook cekAuto Readmore + ThumbnailCustom BayanganFontawesome IconFooter LinksGood Styled Blogger Comment SystemKonsultasi Template (tanpa modifikasi)Related ArticleSticky SidebarSticky MenuSticky social sharing buttonsTwitter Latest Tweets WidgetValid Sharing Google+Valid Sharing Twitter

Dokumen ini akan membimbing Anda untuk mengkonfigurasi Template Cleansy dengan mudah dan cepat.

Pengaturan Dasar 1

https://www.pandukode.com

https://search.google.com/test/mobile-friendly?id=FIU-5e1mDrA8yEcvp9LUnQ

http://chkme.com/seo-pandukode-cleansy.blogspot.com

https://validator.w3.org/nu/?doc=https://pandukode-cleansy.blogspot.com

http://pin13.net/mf2/?url=https%3A%2F%2Fpandukode-cleansy.blogspot.com

https://search.google.com/structured-data/testing-tool#url=pandukode-cleansy.blogspot.com

http://www.responsinator.com/?url=pandukode-cleansy.blogspot.com

https://www.google.com/search?q=inurl%3Apandukode-cleansy

https://www.facebook.com/kangzoel.95/posts/257885911372629

https://pandukode-cleansy.blogspot.com/ncr


2 Pengaturan Dasar

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”.

3


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 kananpostingan.

4 Bab 1. Optimasi Dasar


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 sepertiberikut ini:

1.1. Aktifkan Preferensi Penelusuran 5


Membuat Paragraf Baru

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



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.

1.3. Optimasi Gambar 7


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

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

Hapus Teks:



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.

1.3. Optimasi Gambar 9

BAB 2

Matikan Tampilan Mobile

Tampilan Moile perlu dimatikan agar template dapat ditampilkan dengan sempurna.

1. Buka menu Tema > Ikon Gerigi di dasbor Blogger.

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

11

https://www.blogger.com


12 Bab 2. Matikan Tampilan Mobile

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 (lihatgambar).

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

13


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.

14 Bab 3. Iklan AdSense


5. Simpan.

3.2. In-Feed 15


16 Bab 3. Iklan AdSense

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 dasbor Blogger.

2. Klik Edit pada widget Pages.

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

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

17

https://www.blogger.com/


4. Simpan.

Menghapus Laman

1. Lakukan langkah 1 dan 2 seperti pada bagian Menambahkan Laman.

2. Klik tanda “X” untuk menghapus laman yang Anda inginkan.

18 Bab 4. Laman


3. Simpan.

4.2. Menghapus Laman 19


20 Bab 4. Laman

BAB 5

Menu Navigasi

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

1. Buka menu Layout/ Tata Letak di dasbor Blogger.

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

21

https://www.blogger.com


4. Simpan.

22 Bab 5. Menu Navigasi

BAB 6

Sosial Media

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

23


2. Klik sembarang pada kotak HTML Editor

24 Bab 6. Sosial Media


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:

25


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:

<a href='#' title='a'><i class='fa fa-instagram'/>

</a>

26 Bab 6. Sosial Media

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


27



28 Bab 7. About Us


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.

7.1. Deskripsi Situs 29


</p><dl class='addresses-info'>

<div class='inf-item'><dt class='l-ico'>

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

</dt><dd class='r-inf'>

[email protected]</dd>

</div><div class='inf-item'>

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


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

</div><div class='inf-item'>

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


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 di Deskripsi Situs.

2. Ubah [email protected] dengan Alamat E-Mail yang anda inginkan.

Contoh:

[email protected]<br/>[email protected]

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

Nomor Telepon


30 Bab 7. About Us


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


2. Ubah 4986 Woodside Circle<br/>Fort Walton Beach, FL 32547<br/>United Statesdengan 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 <divclass='inf-item'> sampai </div> terdekat.

Contoh:

Untuk menghilangkan widget alamat fisik, hapus kode berikut ini:

<div class='inf-item'><dt class='l-ico'>

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


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

</div>

7.4. Alamat Fisik 31


32 Bab 7. About Us

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 kodeFeedBurner saya adalah Cleansy.

33


3. Klik tombol Batal.


34 Bab 8. Mailing List



8.1. Pemasangan 35


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

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



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 artikelterbaru via e-mail.

8.2. Deskripsi 37

BAB 9

Twitter Stream

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


39



40 Bab 9. Twitter Stream


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

41


42 Bab 9. Twitter Stream

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.

43


4. Preview bayangan aktif:

44 Bab 10. Aktifkan atau Nonaktifkan Bayangan

BAB 11

Butuh Bantuan?

Jika Anda memerlukan bantuan terkait edit template ini, silakan hubungi pembuat template pada kontak berikut.

• Facebook: Samsul Arif

45

https://fb.com/kangzoel.95

cleansy documentation

Documents