wiblogger

Atribut HTML title: Membuat Text Tampil Saat Kursor pada Elemen

Atribut HTML title: Membuat Text Tampil Saat Kursor pada Elemen

Kegunaan atribut title html

Definisi dan penggunaan atribut title

Atribut title memberikan keterangan tambahan pada elemen. Text yang dimasukkan pada atribut title ini akan terlihat ketika kursor diletakkan diatas elemen yang bersangkutan.

Tipe atribut title

Atribut global HTML

Sintak

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

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


Best Practice Atribut title

Atribut title banyak digunakan untuk banyak kasus. Berikut adalah contoh-contoh penggunaan atribut title yang sering diterapkan oleh para developer:

  • 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>

    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'/>
Jasa Optimasi Blog: Optimalkan Template dan SEO Blog

Jasa Optimasi Blog: Optimalkan Template dan SEO Blog

Jasa optimasi blog seo dan template

Butuh bantuan seputar blogging? Ragu dengan konfigurasi yang telah anda terapkan di blog anda? Anda bisa mempercayakan pekerjaan kepada kami untuk berbagai kebutuhan seputar blogging di blogger.com. Melalui Jasa Optimasi Blog ini, beberapa layanan yang kami tawarkan diataranya adalah:

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 aktivikasi 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

Biaya yang kami berikan bervariasi sesuai dengan tingkat kesulitan. Adapun rentan biaya yang kami berikan adalah sekitar Rp30.000 - Rp120.000


Metode pembayaran

Pembayaran dilakukan setelah pekerjaan selesai melalui Gopay atau Dana


Selengkapnya

+62 822 8956 2022 (Chat Whatsapp)
Cara Membuat Judul Postingan Berbeda Dengan Hasil Pencarian Google

Cara Membuat Judul Postingan Berbeda Dengan Hasil Pencarian Google

Membuat judul postingan blog berbeda dengan di google


Target Membuat judul postingan dan judul yang tampil di hasil pencarian Google berbeda. Contoh penerapan metode ini bisa dilihat pada ganbar diatas.

Kegunaan:
  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
    trik judul blog beda

    Format penempatan encoded
    judul postingan blog tidak sama dengan google

    Berikut adalah contoh pemasangan script pada tag penutup body standar. Untuk tipe encoded, sesuaikan!

    judul postingan blog tidak sama dengan google
  • 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

Untuk mengatur judul yang tampil di google, letakkan HTML berikut dimanapun di dalam postingan (dengan metode penulisan HTML).

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

Kurang lebih seperti berikut:

cara agar judul postingan beda dengan di google

Fitur pembuatan judul berbeda ini bisa diterapkan baik itu pada postingan maupun pada pembuatan laman.
Apakah Boleh Menulis Tag HTML dan Body di dalam Postingan Blogger?

Apakah Boleh Menulis Tag HTML dan Body di dalam Postingan Blogger?

Menulis tag html body di dalam postingan blogger

JAWABAN: Umumnya (99% kasus), kode HTML di antarmuka editor blogger akan dimasukkan ke bagian tertentu di dalam body (sesuai template, melalui tag <data:post.body/> pada XML blogger). Jadi, yang dimaksud dengan mode penulisan HTML di antarmuka post editor (termasuk laman) bukan untuk HTML keseluruhan. Mudahnya, di dalam post editor, kita tidak boleh menuliskan tag-tag yang sejatinya merupakan tag-tag minimum HTML. Beberapa tag ini adalah HTML, head, body, atau tag-tag lainnya yang hanya boleh terletak di dalam tag head (Misal tag title dan meta).

TAMBAHAN Untuk penulisan tag HTML, head dan body, sistem blogger akan secara otomatis mengabaikan tiga tag ini (akan terhapus ketika postingan diterbitkan). Selain tiga tag tersebut, tag tetap akan dimasukkan di dalam postingan. Hal ini dapat menyebabkan HTML blog menjadi tidak valid. Oleh karena itu, pastikan untuk tidak menyertakan tag-tag yang telah disebutkan diatas dalam pembuatan postingan dengan mode penulisan HTML.
Javascript: Fungsi Parameter dan Kapan Harus Menggunakan Parameter?

Javascript: Fungsi Parameter dan Kapan Harus Menggunakan Parameter?

Mengenal javascript parameter


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


PERSYARATAN AWAL: Untuk memahami tentang parameter, pastikan anda sudah mengerti tentang scope di Javascript. Poin dari materi scope adalah kita tidak dapat merubah variable yang terdapat di dalam fungsi melalui/dari sisi luar fungsi itu sendiri.


Apa itu Parameter ?

Parameter adalah data-data yang sifatnya tidak tetap (bisa berubah-ubah) yang dimasukkan dan diolah dalam sebuah fungsi Javascript.

Contoh Kasus

Kita misalkan pada perancangan suatu program, kita membutuhkan sebuah fungsi yang dapat membulatkan bilangan menjadi ribuan. Targetnya misal seperti berikut:
  • 1300 menjadi 1000
  • 1600 menjadi 2000

Fungsi yang harus kita buat kurang lebih seperti dibawah (gak usah bingung dengan kode keseluruhannya, fokus aja ke parameter) !

// 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

Pada kode diatas, dengan membuat angka sebagai parameter, fungsi tersebut dapat digunakan untuk angka-angka yang berbeda (Lihat bagian PEMANGGILAN FUNGSI).

Agar lebih paham, sekarang kita buat juga fungsi serupa seperti diatas namun langsung meletakkan angkanya kedalam fungsi (bukan sebagai parameter).

// 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

Dengan pembuatan fungsi diatas, kita hanya bisa melakukan pemanggilan fungsi dengan cara bulatkanKeRibuan() saja. Kita tidak dapat memasukkan data angka lainnya kedalam fungsi. Oleh karena itu, pemanggilan fungsi hanya dapat menghasilkan nilai 1000 sesuai dengan angka yang telah kita atur didalam fungsi tersebut (1300). Jadi sudah jelas sekarang, fungsi yang kita buat jadi gak guna. Khususnya untuk kasus dimana kita membutuhkan fungsi pembulatan ini berkali-kali dan untuk data angka yang berbeda-beda.

Masih kurang jelas ?

Agar lebih paham lagi, dengan masih memanfaatkan kerangka fungsi sebelumnya, kita bisa menambahkan parameter tambahan untuk membuat fungsi menjadi lebih serbaguna. Fungsi yang akan kita buat bakalan bisa membulatkan angka tidak hanya ke ribuan saja. Poin perubahannya adalah meletakkan variable basis menjadi parameter, kurang lebih jadi seperti berikut:

// 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)

Atribut HTML class: Memberikan Kategori/Karakteristik Pada Elemen

Definisi dan penggunaan

Atribut class adalah salah satu atribut yang sering digunakan pada elemen HTML. Atribut class umumnya digunakan untuk kemudahan dalam mengakses elemen baik itu untuk kebutuhan konfigurasi CSS (CSS Selektor) ataupun untuk kebutuhan javascript (getElementsByClassName).


Type atribut

Atribut Global HTML


Sintak

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

Keterangan
  • 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

Berikut adalah kasus umum yang sering diselesaikan dengan 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.
Mengatasi muncul <div dir="ltr" style="text-align: left;" trbidi="on"> pada pembuat Posting dan Laman Blogger

Mengatasi muncul <div dir="ltr" style="text-align: left;" trbidi="on"> pada pembuat Posting dan Laman Blogger



Masalah

Muncul <div dir="ltr" style="text-align: left;" trbidi="on"> setiap kali hendak membuat Posting dan Laman baru.

Menghilangkan <div dir="ltr" style="text-align: left;" trbidi="on">



Penyebab

Fitur Transliterasi diaktifkan.


Solusi

  1. Nonaktifkan fitur Transliterasi. Caranya, menuju menu Setelan > Bahasa dan Pemformatan > Aktifkan transliterasi > pilih Dinonaktifkan.

    Solusi <div dir="ltr" style="text-align: left;" trbidi="on">
  2. Simpan pengaturan.
  3. Refresh browser dengan cara tutup tab browser dan kembali buka Dashboard blog anda.
  4. Selesai !


CSS priority: Mengetahui konfigurasi CSS yang dipilih oleh browser

CSS priority: Mengetahui konfigurasi CSS yang dipilih oleh browser

Pada konfigurasi CSS, suatu properti terkait elemen tertentu mungkin terdapat pada lebih dari 1 blok kode. Perhatikan contoh CSS berikut:

p {
  color:blue;
  text-decoration:underline;
}

p {
  color:red;
}
<p>Paragraf</p>

Paragraf


Pada CSS diatas, terdapat 2 blok kode yang mengatur elemen p. Pada setiap blok kode, terdapat properti yang mengatur warna text (color). Berkaitan dengan kasus diatas, kode CSS tetap valid (benar), namun, browser hanya akan menerapkan 1 konfigurasi yang paling diprioritaskan. Seperti yang terlihat pada tab hasil, browser memilih konfigurasi yang terdapat pada blok kode ke-2 untuk menentukan warna text (red).

CSS priority


Pada halaman ini, kita akan mengetahui tentang mana konfigurasi CSS yang akan digunakan oleh browser terkait elemen tertentu.

Prioritas CSS ditentukan berdasarkan beberapa hal, beberapa hal ini adalah penempatan, selektor, dan !important suffix pada value.


Prioritas 1: !important suffix

Bowser akan memilih properti yang memiliki suffix (akhiran) !important sebagai prioritas utama.

p {
  color:green;
}

p {
  color:red!important;
  text-decoration:underline;
}

p {
  color:blue;
}
<p>Paragraf</p>

Paragraf



Bagaimana kalau tidak terdapat satupun properti dengan akhiran !important ?

Browser akan menerapkan aturan selanjutnya yaitu mengecek Inline CSS.



Prioritas 2: Inline CSS

Ketika terdapat inline CSS pada elemen, konfigurasi lainya (Internal dan eksternal) akan diabaikan.

Contoh:
p {
  color:blue;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}
<p class='myparagraf' style='color:red'>Paragraf</p>

Paragraf




Prioritas 3: Selektor yang lebih spesifik

Seberapa spesifik selektor ditentukan oleh jenis selektor itu sendiri serta berapa banyak selektor yang terlibat.

Berdasarkan jenis selektor

Setiap jenis selektor memiliki tingkat (score) prioritas yang berbeda. Berikut adalah tingkatan prioritas berdasarkan jenis selektor.

  1. Selektor berdasarkan ID (#id)
  2. Selektor berdasarkan class atau atribut (.class atau [atribut="value"])
  3. Selektor berdasarkan nama elemen (elemen)


Contoh:
#myparagraf {
  color:red;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}
<p class='myparagraf' id='myparagraf'>Paragraf</p>

Paragraf



.myparagraf {
  color:green;
}
#myparagraf {
  color:red;
  text-decoration:underline;
}
<p class='myparagraf' id='myparagraf'>Paragraf</p>

Paragraf



Keterangan Seperti yang terlihat pada tab hasil, konfigurasi yang terpilih adalah konfigurasi yang terdapat pada blok kode dengan selektor berdasarkan ID. Ya, karena selektor berdasarkan ID memiliki prioritas lebih tinggi dibandingkan selektor berdasarkan class, tidak peduli penempatan blok kode, selektor dengan ID akan diterapkan.


Berdasarkan jumlah selektor yang terlibat

Pedefinisian suatu selektor dapat dilakukan secara spesifik dengan cara menggabungkan beberapa selektor yang relevan terkait elemen yang dikehendaki. Terkait prioritas browser, konfigurasi dengan jumlah selektor yang lebih banyak akan diterapkan.

Contoh:
.myparagraf {
  color:green;
}
p.myparagraf {
  color:red;
}
<p class='myparagraf'>Paragraf</p>

Paragraf



Keterangan Pada blok kode pertama, jumlah selektor yang didefinisikan adalah satu (berdasarkan class). Pada blok kode ke-2, jumlah selektor adalah dua (berdasarkan elemen dan class). Sesuai dengan aturan prioritas CSS, karena selektor ke-2 didefiniskan lebih spesifik (lebih banyak selektor yang terlibat), konfigurasi pada blok kode ke-2 akan dipilih.



Prioritas 4: Berdasarkan penempatan

Ketika browser belum mendapatkan prioritas dengan aturan-aturan yang telah diuraikan sebelumnya, aturan selanjutnya yang akan dijalankan adalah melihat penempatan konfigurasi. Dalam hal ini, konfigurasi yang diletakkan paling akhir akan menjadi prioritas.

Contoh:
.myparagraf {
  color:green;
  text-decoration:underline;
}
.myparagraf {
  color:red;
}
<p class='myparagraf'>Paragraf</p>

Paragraf


Keterangan Pada kode diatas, browser akan memilih konfigurasi pada blok kode ke-2, hal ini karena blok kode ke-2 didefinisikan paling akhir.


Prioritas 5: Default CSS

Ketika tidak terdapat konfigurasi yang mengatur elemen tertentu, browser akan menggunakan default CSS dalam mendekorasi elemen. Adapun default CSS ini mungkin berbeda antara browser satu dan browser lainnya.

Butuh bantuan ?
Bagi anda yang memiliki pertanyaan seputar blogging atau hal lainnya yang masih berhubungan dengan situs wiBlogger.com ini, anda bisa menghubungi kami melalui email.

Khususnya untuk Blogger Template, anda bisa bergabung ke grup facebook untuk belajar dan diskusi bersama para pengguna blogger.com lainnya.

Blogger Template

×
Jangan tampilkan lagi