Cara Mengatasi Scroll ke Atas Otomatis di XML Editor Blogger

Cara Mengatasi Scroll ke Atas Otomatis di XML Editor Blogger

Beberapa waktu yang lalu, blogger melakukan update seputar sistem XML editor. Hal yang paling mencolok dari update ini adalah perubahan prilaku XML Editor dalam menyimpan dan memvalidasi kode XML. Pada sistem yang sekarang, semua kegiatan pemrosesan kode dilakukan secara langsung. Seperti misalnya mengurutkan atribut berdasarkan abjad, memparse karakter-karakter khusus, dan lain sebagainya.

Pada sistem yang sekarang, ketika proses penyimpanan selesai, kode yang kita lihat di XML editor sudah berupa kode final. Ini tidak seperti sistem sebelumnya yang melakukan pemrosesan kode setelah antarmuka editor ditutup.


Masalah
Pada sistem baru ini, terdapat masalah berkaitan dengan prilaku XML editor ketika proses penyimpanan XML selesai. Antarmuka editor akan secara otomatis melakukan scroll ke bagian atas setiap kali proses penyimpanan selesai. Hal ini tentu sangat mengganggu karena kita harus bolak-balik ke posisi editing terakhir. Terlebih untuk kode XML yang sudah melibatkan puluhan ribu kode, ini akan sangat menghambat kegiatan editing.


Solusi
Masalah ini bisa diatasi dengan cara menginjek kode javascript untuk mencegah efek event auto scroll blogger. Sederhananya, ketika auto scroll berjalan dan posisi scroll berada di paling atas, fungsi ini akan meriset kembali posisi scroll ke posisi terakhir sebelum di simpan. Penginjekan fungsi dilakukan dengan menggunakan sistem bookmark browser.

Bookmark script
javascript:(()=>{/*Bookmark script by wiBlogger.com: Prevent Auto Scroll Up Blogger XML Editor*/const e=window,l=document,t=e=>l.getElementsByClassName(e),n=(e,...l)=>{for(const t of l)e.appendChild(t)},r=e=>l.createElement(e),s=t("xLh0Gb"),o=t("CodeMirror-scroll"),a=s?s[s.length-1]:null,c=o?o[o.length-1]:null;if(a&&c){let t,s,o,i;{const e=r("style"),t=l.getElementsByTagName("head")[0],s=[".{{s}}{background:#f5f5f5;color:#f57c00;font-size:12px;padding:10px 15px;border-radius: 60px;margin-right:10px;transition:all .3s;font-weight:bold}"];n(e,l.createTextNode(s.join("").replace(/{{s}}/g,"w-prevent-reset-scroll"))),n(t,e),(i=r("div")).className="w-prevent-reset-scroll",i.innerHTML="AUTO SCROLL DISABLED",((e,l)=>{const t=e.firstElementChild;t?e.insertBefore(l,t):e.appendChild(l)})(a,i)}const d=()=>c.scrollTop,p=()=>c.scrollLeft,f=()=>{if(!t){(e=>{const t=l.getElementsByClassName(e)[0];return t||null})("aGJE1b")&&(s=d(),o=p(),0!==s&&(t=!0,c.onscroll=g,e.clearInterval(f)))}},g=()=>{c.scrollTo(o,s),c.onscroll=m,t=!1,e.setInterval(f,500)},m=()=>{};e.setInterval(f,500)}})();



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:

    Mengatasi Scroll ke Atas di eDIT HTML Blog



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

    Cara mengatasi Scroll ke Atas otomatis di XML HTML  Editor Blogger



    Dukungan browser
    Fungsi ini telah diuji dan dapat berjalan dengan baik pada browser Google Chrome versi terbaru. Untuk browser lainnya, silahkan dicoba.

    Cara Mengatasi Gambar Widget Artikel Terkait Blog Tidak Muncul

    Cara Mengatasi Gambar Widget Artikel Terkait Blog Tidak Muncul

    PENYEBAB
    Masalah ini bukan disebabkan oleh template atau kode pada postingan. Ini muncul murni karena bug blogger. Bug ini muncul sejak blogger melakukan update antarmuka post editor (tahun 2020).


    PEMICU
    Tidak ada satupun gambar di dalam postingan yang menggunakan parameter size dengan prefix s


    WIDGET YANG TERPENGARUH Masalah ini tidak hanya berdampak pada widget artikel terkait saja, semua widget berbasis JSON feed (widget yang mengambil konten dengan cara meload feed blogger menggunakan Javascript) juga akan terpengaruh. Adapun beberapa widget yang menggunakan sistem ini adalah:
    • Recent posts (Postingan terbaru)
    • Posts by label (Postingan berdasarkan label)
    • Related posts (Postingan terkait/Artikel terkait)


    SOLUSI BAGI BLOGGER

    Berikut adalah 2 solusi untuk mengatasi gambar thumbnail widget yang tidak muncul di blogger. Cukup pilih salah satu dari 2 solusi berikut:

    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 artikel terkait tidak muncul

    Gambar sesudah:
    Mengatasi gambar thumbnail widget tidak tampil

    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 di related posts blogger tidak muncul

    Gambar sesudah:
    Thumbnail widget blog tidak tampil


    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.

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

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


    Metode pembayaran

    Pembayaran dilakukan setelah pekerjaan selesai via Gopay


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