INSTALASI

Poin dari proses instalasi ini adalah menambahkan sebuah Bookmark pada browser dengan meletakkan script diatas sebagai URL. Panduan instalasi ini menggunakan browser Google Chrome dengan langkah-langkah sebagai berikut:

Pada bagian Bookmark bar browser, klik kanan dan pilih Add page.

Beri nama bookmark sesuai keinginan pada bagian Name. Copy dan Paste semua kode Bookmark script diatas ke bagian URL. Terakhir, simpan bookmark untuk menyelesaikan proses instalasi.

Jika tidak ada kesalahan, harusnya bookmark yang anda tambahkan sudah terdapat pada Bookmark bar browser. Kurang lebih seperti berikut:

PENGGUNAAN

Pada tab XML editor, Klik Bookmark yang telah dibuat. Anda akan melihat elemen indikator baru yang ditambahkan pada bagian atas XML editor yang menginformasikan bahwa fungsi pencengahan auto scroll ini telah aktif.

• Recent posts (Postingan terbaru)
• Posts by label (Postingan berdasarkan label)
• Related posts (Postingan terkait/Artikel terkait)

SOLUSI BAGI BLOGGER

Metode 1:

Menambahkan Gambar Khusus Thumbnail

Cara ini merupakan metode yang paling aman, efektif, dan fleksibel. Metode ini dapat mengatasi masalah tanpa menimbulkan efek samping.

Caranya? Tambahkan gambar dengan parameter size berprefix s di bagian atas postingan (minimal di atas gambar pertama) dan letakkan gambar tersebut di dalam elemen HTML <!--komentar-->

Gambar sebelum:

Gambar sesudah:

Keterangan: Pada kedua HTML diatas, kode HTML gambar khusus thumbnail (hijau) diambil dari gambar pertama (merah) dengan melakukan sedikit perubahan. Beberapa perubahan yang dilakukan adalah:

• Menambahkan <!-- diawal dan --> di akhir HTML gambar khusus thumbnail.
• Mengubah parameter size yang semula adalah w320-h180 mejadi s0

s0 merupakan parameter size yang akan memanggil gambar dalam ukuran original.

Dengan metode ini, blog akan tetap meload gambar seperti sebelum melakukan perubahan, namun, untuk urusan thumbnail, gambar yang terbaca oleh sistem blogger adalah yang terdapat pada tag komentar. Kelebihan metode ini adalah kita dapat dengan leluasa mengatur gambar mana yang akan dijadikan thumbnail. Custom thumbnail ini akan berlaku secara global, baik itu pada widget yang digenerate dengan Ekspresi XML (Blog posting misalnya), maupun widget yang berbasis JSON Feed. Lebih jauh tentang ini akan anda jumpai pada metode ke-2.


Metode 2:

Sertakan setidaknya 1 gambar dengan parameter s

Metode ini lebih simpel dibandingkan dengan metode pertama. Hanya saja, untuk urusan fleksibilitas, metode ini mengharuskan kita untuk tetap menggunakan gambar pada urutan pertama sebagai thumbnail.

Caranya? Pada gambar urutan pertama, ganti parameter yang sebelumnya menggunakan w[lebar]-h[tinggi] menjadi s[lebar].

Gambar sebelum:

Gambar sesudah:

PENTING...! Pada metode 2, pastikan gambar yang dipilih adalah gambar yang terletak pada urutan pertama. Ketika gambar yang dipilih tidak terletak pada urutan pertama, thumbnail widget berbasis JSON feed akan berbeda dengan thumbnail yang ditampilkan pada widget Blog posting. Hal ini karena pada widget Blog, umumnya konten postingan langsung diambil menggunakan Tag/Ekspresi XML. Pengambilan gambar thumbnail dengan Ekspresi XML akan mengacu pada gambar pertama, tidak peduli apakah itu parameter s atau lainnya. Jika anda risih dengan masalah ini, pastikan gambar yang diubah ukurannya selalu terletak pada urutan pertama!

SOLUSI DEVELOPER TEMPLATE

Untuk sekarang, tidak ada solusi lainya yang saya temukan selain dengan cara mengekstrak URL gambar melalui property content pada JSON feed. Ini karena ketika tidak terdapat gambar berparameter s di dalam postingan, property media$thumbnail tidak akan tersedia pada object entry.

Efek samping dari metode ekstrak via property content bisa dikatakan cukup "mahal". Selain harus melakukan ekstrak, metode ini juga mengharuskan pengambilan JSON feed dengan menggunakan directory full atau minimal default. Dengan kata lain, pengambilan JSON feed tidak bisa dilakukan dengan directory summary yang pada kebanyakan kasus akan jauh lebih optimal dibandingkan dengan kedua directory sebelumnya.

Karena alasan diatas dan merujuk pada besarnya efek samping yang ditimbulkan, dibandingkan dengan melakukan fix dengan cara merubah sistem pengambilan thumbnail melalui property content, saya sendiri lebih memilih mengarahkan pengguna template untuk melakukan perubahan pada postingan dengan 2 metode yang telah diuraikan sebelumnya.

Definisi dan penggunaan atribut title

Tipe atribut title

Sintak

<elemen title='value'>
  <!-- konten -->
</elemen>

• value adalah berupa text apa saja yang mendeskripsikan/menjelaskan elemen.

Best Practice Atribut title

• Pada elemen link Atribut title banyak digunakan pada elemen a (membuat link). Atribut ini sangat direkomendasikan dalam pembuatan link dengan anchor text (text yang tampil untuk mewakili link) yang tidak begitu mendeskripsikan tujuan link. Perhatikan contoh berikut:
  
  

  <a href='https://www.wiblogger.com' title='Kunjungi wiBlogger.com'>
    Klik di sini
  </a>

  Klik di sini
  
  Pada kode diatas, anchor link adalah berupa text Klik di sini. Ini tentu kurang mendeskripsikan apa yang terdapat pada link. Dengan mendefinisikan link melalui atribut title, kita dapat membantu mesin pencari dalam memahami apa yang terdapat pada link. Praktek ini juga salah satu praktek SEO On-Page yang selalu diterapkan para pelaku SEO.
  
  
  Bagaimana jika anchor link yang dibuat sudah mendeskripsikan link tujuan?

  
  

  Direkomendasikan tetap mendefiniskan atribut title
  
  
• Pada elemen img (gambar) Praktek atribut title yang lebih umum lagi digunakan adalah pada pembuatan gambar. Seperti yang telah saya disinggung pada artikel Belajar SEO Pemula, dibutuhkan praktek tambahan untuk dapat membuat mesin pencari mengerti "tentang apa" gambar yang ditampilkan pada sebuah halaman. Untuk tujuan ini, selain menggunakan atribut alt, atribut title juga akan sangat membantu. Umumnya kedua atribut ini (alt dan title) didefinisikan pada elemen gambar untuk memperkuat SEO On-Page.
  
  

  <img src='/blogger.png' title='Logo blogger' alt='Logo blogger'/>

Layanan Template

• Instalasi Menginstal template tertentu baik itu template yang berasal dari wiBlogger.com maupun yang berasal dari penyedia template lainnya. Jasa ini cocok bagi anda yang hendak mengganti template pada blog yang sudah berumur dan memiliki banyak postingan. Kami bisa mengintegrasikan template yang anda kehendaki dengan berbagai penyesuaian terhadap pengaturan-pengaturan khusus yang sudah anda terapkan pada template sebelumnya untuk mentiadakan/meminimalisir efek-efek buruk yang mungkin timbul akibat pergantian template.
• Perbaikan dan penyesuaian Termasuk didalam kategori ini adalah perbaikan-perbaikan ringan yang disebabkan oleh aktivitas koding tertentu. Diantaranya:
  • Memperbaiki error template
  • Menyesuaikan tampilan bagian tertentu sesuai keinginan
  • Menambahkan elemen atau fitur tertentu
  • dan lain sebagainya

Layanan Webmaster

• Konfigurasi awal dan Pengoptimalan SEO blog Bagi anda yang benar-benar baru, ada banyak hal yang mungkin akan membuat anda bingung seputar konfigurasi-konfigurasi yang harus diterapkan pada blog baru. Berberapa konfigurasi ini seperti misalnya Konfigurasi di dashboard blogger, Konfigurasi di Google Search Console, dan konfigurasi terkait pengoptimalan SEO blog. Optimasi ini juga termasuk pada penambahan berbagai kode template yang bertujuan untuk mengoptimalkan SEO blog. Kami akan menambahkan atau mengurangi koding tertentu untuk membuat SEO blog lebih optimal.
  
  Perlu juga menjadi catatan bahwa tidak ada ilmu pasti mengenai SEO, apa yang akan kami terapkan merupakan praktek-praktek umum yang memang sudah dipercaya oleh para pakar SEO dalam mengoptimasi blog dari sisi internal (SEO On-Page). Hal ini seperti menambahkan berbagai informasi tambahan melalui tag meta, setting robots.txt, tag header, dan lain sebagainya.
• Custom domain Layanan ini mencakup semua pekerjaan yang diperlukan dalam mengcustom domain, mulai dari tahap pembelian domain hingga melakukan berbagai konfigurasi dan proses redirect ke domain baru sampai domain benar-benar terintegrasi ke blog.

Biaya

Metode pembayaran

Selengkapnya

1. Membuat Judul SEO dengan lebih leluasa
2. Untuk beberapa tipe blog, trik ini dapat membuat judul postingan blog menjadi lebih profesional dengan tanpa mengesampingkan faktor SEO.

Pemasangan ke Template

• Pemasangan XML dan Javascript
  

  <b:comment><!-- CUSTOM DOCUMENT TITLE BY wiBlogger.com --></b:comment>
  <b:if cond='data:view.isSingleItem'>
    <script>
      /*<![CDATA[*/
      ((elementId)=>{
        const elem = document.getElementById(elementId);
        if(elem){
          const title = elem.textContent.replace(/\r?\n|\r/g, " ").replace(/\s+/g, " ").trim();
          if(title){
            document.title = title;
          }
          elem.parentNode.removeChild(elem);
        }
      })("custom-doc-title");
      /*]]>*/
    </script>
  </b:if>

  
  Poin dari pemasangan ini adalah meletakkan xml script tepat sebelum tag penutup body. Caranya, Buka HTML Editor, cari /body.
  
  (Panduan terkait: Cara mencari kode tertentu di antarmuka HTML Editor blogger )
  
  Ada 2 tipe tag penutup body, yaitu tag penutup tipe standar dan tag penutup tipe encoded. Letakkan xml script diatas sesuai dengan format tag penutup untuk template yang anda gunakan. Kurang lebih seperti berikut:
  
  Format penempatan standar
  
  
  Format penempatan encoded
  
  
  Berikut adalah contoh pemasangan script pada tag penutup body standar. Untuk tipe encoded, sesuaikan!
  
  
  
• Menambahkan CSS
  

  /* CUSTOM DOCUMENT TITLE BY wiBlogger.com */
  #custom-doc-title{
    display:none;
  }

  
  Cari kode </b:skin>, letakkan kode CSS diatas tepat sebelum ]]></b:skin>. Kurang lebih seperti berikut:
  
  

Penerapan di postingan

<div id='custom-doc-title'>
  Judul khusus google disini...
</div>

• Mengetahui fungsi parameter pada function
• Mengetahui kapan harus menggunakan parameter
• Mengetahui mengapa harus menggunakan parameter

Apa itu Parameter ?

Contoh Kasus

• 1300 menjadi 1000
• 1600 menjadi 2000

// PEMBUATAN FUNGSI
const bulatkanKeRibuan = (angka)=>{
    const basis = 1000;
    let pengali = Math.floor(angka);
    if(angka % basis >= basis / 2){
        pengali += 1;
    }
    return pengali * basis;
};

// PEMANGGILAN FUNGSI
bulatkanKeRibuan(1300); // hasil: 1000 
bulatkanKeRibuan(1600); // hasil: 2000

// PEMBUATAN FUNGSI
const bulatkanKeRibuan = ()=>{
    const angka = 1300;
    const basis = 1000;
    let pengali = Math.floor(angka);
    if(angka % basis >= basis / 2){
        pengali += 1;
    }
    return pengali * basis;
};

// PEMANGGILAN FUNGSI
bulatkanKeRibuan(); // hasil: 1000 
bulatkanKeRibuan(); // hasil: 1000

Masih kurang jelas ?

// PEMBUATAN FUNGSI
const bulatkan = (angka, basis)=>{
    let pengali = Math.floor(angka);
    if(angka % basis >= basis / 2){
        pengali += 1;
    }
    return pengali * basis;
};

// PEMANGGILAN FUNGSI
bulatkan(1356, 1); // basis satuan, hasil: 1356  
bulatkan(1356, 10); // basis puluhan, hasil: 1360
bulatkan(1356, 100); // basis ratusan, hasil: 1400
bulatkan(1356, 1000); // basis ribuan, hasil: 1000
bulatkan(1356, 10000); // basis puluhan ribu, hasil: 10000

Kesimpulan tentang parameter

• Fungsi parameter
  • Memasukkan data yang sifatnya dinamis (berubah-ubah) untuk dikelolah dengan prosedur tertentu didalam sebuah fungsi
  • Membuat suatu fungsi menjadi lebih serbaguna dan flexible
  
  
• Kapan dan mengapa harus menggunakan parameter ?
  • Ketika sebuah fungsi memiliki data yang sifatnya dinamis
  • Ketika fungsi membutuhkan data ekternal (data dari luar fungsi itu sendiri)

Definisi dan penggunaan

Type atribut

Sintak

<elemen class='nama-class'>
  <!-- konten -->
</elemen>

• nama-class adalah berupa kombinasi karakter huruf (a-z), underscore (_), hyphen (-), dan nomor (0-9).
• nama-class harus dimulai dengan huruf, underscore, atau hyphen.
• Jika karakter pertama adalah hyphen, karakter kedua harus berupa huruf atau underscore. Contoh: -redcolor, -_redcolor
• nama-class setidaknya terdiri dari 2 karakter
• Setiap elemen bisa memiliki beberapa class yang dipisahkan dengan spasi (spasi, tab, dll). Contoh: redcolor bluecolor
• Berbeda dengan atribut ID, nama-class tertentu bisa digunakan pada lebih dari satu elemen.

Best Practice Atribut class

• Menerapkan konfigurasi style tertentu untuk banyak elemen.
  Untuk kebutuhan ini, class digunakan sebagai selektor dalam konfigurasi CSS. Pada contoh berikut, class digunakan pada element-elemen yang hendak diatur dengan warna text merah.
  
  

  <div class='redcolor'>Konten</div>
  <p class='redcolor'>Konten</p>
  <p>Konten</p>

  .redcolor {
    color:red;
  }

  Konten

  Konten

  Konten

• Menambahkan identitas tambahan pada elemen
  Selain digunakan sebagai pemegang banyak elemen, class juga sering digunakan untuk memberikan identitas tertentu pada elemen. Misal, pengembang hendak menambahkan class tertentu yang mengidentifikasikan jumlah kolom pada elemen.
  
  

  <b>Tabel 2 kolom</b>
  <div class='tabel-like col2'>
    <div>Konten 1</div>
    <div>Konten 2</div>
    <div>Konten 3</div>
    <div>Konten 4</div>
  </div>
  
  <b>Tabel 4 kolom</b>
  <div class='tabel-like col4'>
    <div>Konten 1</div>
    <div>Konten 2</div>
    <div>Konten 3</div>
    <div>Konten 4</div>
  </div>

  .tabel-like {
    display:flex;
    flex-wrap:wrap;
  }
  .tabel-like > *{
    border:1px solid #000;
    box-sizing:border-box;
    text-align:center;
  }
  .tabel-like.col2 > * {
    width:50%;
  }
  .tabel-like.col4 > * {
    width:25%;
  }

  Tabel 2 kolom

  Konten 1

  Konten 2

  Konten 3

  Konten 4

  
  Tabel 4 kolom

  Konten 1

  Konten 2

  Konten 3

  Konten 4
  
  Dengan contoh penerapan diatas, kita bisa memberikan konfigurasi CSS berbeda untuk class col2 dan col4 yang mengatur jumlah kolom untuk elemen yang bersangkutan.
  
  
  Bukankah bisa dengan menggunakan ID ?

  
  

  Ya bisa. Namun, ID harus bersifat unik dan hanya boleh digunakan pada satu elemen saja. Penggunaan class untuk mengatasi keterbatasan ini, jadi identifier yang bersangkut bisa digunakan lagi pada elemen lainnya jika dibutuhkan.