Menghilangkan Inline CSS di Artikel : Menulis Artikel SEO Friendly

Tutorial ini adalah kelanjutan dari artikel cara membuat tulisan yang rapi di blog bisa dibaca disini 

Harus diakui, bahwa kebanyakan blogger pemula malas dalam belajar, lebih suka berangan angan mendapatkan penghasilan.

Tutorial kali ini kurang lebih merupakan “Test Kesungguhan”, didalam studi kasus kali ini secara tidak langsung akan membuat teman teman meakukan praktek SEO (Search Engine Optimization)

Namun sayangnya Guru Blogger hanya akan memberikan instruksi tanpa contoh bagaimana cara melakukannya.

Di akhir ada tools yang bisa digunakan untuk melakukan test apakah teman teman sudah melakukannya dengan baik atau masih gagal dan harus mencaritahu sendiri dimana letak kesalahannya.

 

Studi Kasus Menulis Artikel

Bahan Studi Kasus :

menghilangkan-inline-css

 

Instruksi Menulis :

  1. Buat Postingan Baru
  2. Beri judul : Latihan 5 : Membuat Postingan Tanpa Inline CSS
  3. Pastikan berada di tampilan menulis
  4. Tulis kalimat baris pertama
  5. Pindahkan ke mode normal
  6. tekan enter untuk menulis baris kedua dan selanjutnya
  7. Bila sudah selesai kemudian publikasikan

Instruks dalam bentuk animasi :

menghapus-inline-css

Inline CSS dan HTML Yang Rumit

Waktunya melihat hasil karya teman teman :

 

  1. Kembali ke dasbor postingan kemudian edit
  2. Lihat di tampilan html (bukan mode menulis)
  3. Alangkah kacaunya kode di dalam sana…. betul begitu?

Untuk sedikit merapikan kode tersebut, lakukan langkah pemformatan html seperti dalam tutorial sebelumnya (Html formatter & Beautifier)

Kemudian pastekan kembali ke postingan dan klik tombol perbarui.

Inline CSS

Walaupun sudah terlihat lebih rapi, banyak kode html yang teman teman tidak pahami, diantaranya adalah :

<div style=”text-align: left;”> tulisan </div>

<p style=”text-align: left;”> tulisan </p>

Yang dimaksud dengan inline css adalah kode yang diblok tebal (style=”text-align: left;”), itu adalah kode css yang dipanggil kedalam postingan setelah semua kode css default selesai dipanggil.

TRENDING :  Menambahkan dan Mengedit Sidebar Blogger (menu Samping)

Endingnya adalah bermasalah dalam hal rendering ketika me load website. Kode tersebut dapat mengurangi performance website (kecepatan) tergantung banyaknya inline css.

Semua inline css harus dihapus, silahkan gunakan notepad untuk mereplace semua inline css.

Kode HTML DIV

Div adalah sebuah elemen kontainer tempat elemen lain bisa diletakkan didalamnya, dapat berupa elemen html maupun tulisan biasa.

DIV bisa diibaratkan sebuah ruangan didalam rumah

Rumah = Postingan

Ruangan = Div

Ruangan bisa digunakan untuk meletakkan meja, kursi, lemari atau barang apapun, demikian juga div.

Elemen html lainnya termasuk <p>, text dll dapat diletakkan didalam div

Contoh :

<div> <p>ini paragraf</p> </div>

Atau

<div> ini tulisan </div>

Teman teman dapat menghapus div didalam postingan yang baru saja dibuat

Tag DIV tidak akan berpengaruh apapun dalam artikel (jangan lupa hapus openingnya dan hapus juga klosing tagnya jangan hanya openingnya saja atau closingnya saja)

Merombak Postingan

Sampai di tahap ini, teman teman telah memiliki pengetahuan tentang :

 

  1. Dasar mode menulis dan mode HTML
  2. Memahami fungsi tag <p>
  3. Memahami fungsi tag <br/>
  4. Sedikit tau tentang <div>
  5. Mengerti bahwa inline css boleh dihapus

Dari pengetahauan yang telah miliki, silahkan edit kembali postingan latihan 5 agar terlihat rapi untuk dibaca manusia dan juga untuk search engine engine

Bagaimana caranya?

Silahkan coba sendiri, karena kita sedang membuat gaya menulis personal kita sendiri (yang akan kita gunakan selamanya)

Goal dari tutorial ini adalah menciptakan gaya tulisan sendiri, hasil latihan dari gurublogger bisa diakses disini

Di artikel artikel selanjutnya semua postingan yang teman teman buat seharusnya selalu rapi,

Bila belum menguasai topik ini 100% disarankan untuk mengulang kembali membaca dari atas, bila perlu silahkan habiskan 1 atau 2 hari khusus untuk membuat gaya menulis teman teman sendiri.

TRENDING :  Perbedaan Template Gratis dan Berbayar (versi pembuatnya)

Gunakan paragraf dan kombinasi break atau format normal bila diperlukan… Goalnya adalah tulisan teman teman terlihat rapi.