Cara Optimalkan Inline CSS Atribute Agar Blog Valid HTML5

Cara Optimalkan Inline CSS Atribute Agar Blog Valid HTML5

Untuk menghindari terjadinya duplikasi css (cascading style sheet) atribut dalam blog anda. Sebisa mungkin jangan inline css atribut dalam elemen html. Dampak yang mungkin ditimbulkan jika kita melakukan ini adalah blog menjadi tidak valid HTML. Karena Inline css atribut dalam elemen HTML akan membuat css atribut yang telah di inline akan di blokir karena hal ini tidak sesuai dengan kebijakan keamanan konten.

Ketentuan tentang inline css atribut ke dalam elemen html tidak sesuai dengan pagespeed rules developer google insights tentang Optimize CSS Delivery. Inline CSS atribut ke dalam elemen HTML berdampak pada speed loading Blog kita. Karena  browser memerlukan waktu tambahan untuk membaca atribut CSS yang terdapat di dalam dokumen HTML blog kita atau secara umum dokumen html di artikan sebagai halaman suatu blog atau situs. Bentuk yang umum di jumpai seperti berikut ini:

< div style=' ini atau itu' > kode js atau kode lain< /div >, atau < p style='...' >pernyataan/kalimat ini itulah< /p >.

Berikut ini adalah contoh inline CSS atribute dalam elemen HTML

Contoh paling sederhana dan hampir bisa dipastikan ada di setiap html template blogger kita.

1. < div style='clear: both;' / >
Jika anda temukan kode ini di html template anda. Hampir bisa saya pastikan akan muncul errors untuk kode diatas saat anda cek blog anda di http://validator.w3.org/. Hal ini terjadi karena terdapat atribute CSS di dalam tag HTML (div).

Cara agar kode < div style='clear: both;' / > valid html5

Lantas bagaimana cara membuat kode diatas valid html5 dan tidak lagi terdapat atribut css dalam tag html template. Ganti kode di atas dengan kode < div class='clear'/ > serta tambahkan kode CSS .clear{clear:both} ini sebelum kode ]] >< /b:skin > di dalam HTML template anda.

2. < div style='float:left atau right atau none' >< /div >

Kode umum digunakan blogger untuk memasang iklan (dibawah judul postingan). Padahal fungsi kode ini secara umumnya bisa lebih banyak dari hanya sekedar memasang iklan. Sebagai contoh anda bisa memasang iklan di bawah postingan blog anda dengan memasang kode:

< div style='float:left atau right atau none' > ( pilih salah satu antara left, right atau none )
Kode iklan yang sudah di parse
< /div >
sebelum kode < data:post.body/ >.

Menurut BLOGGINGPASURUAN kode di atas memiliki sedikit kekurangan karena dengan memasang di kode ini di blog kita sama saja dengan inline CSS Atribute di elemen HTML.

Cara agar kode < div style='float:left atau right atau none' >< /div > valid html5

Untuk membuat kode ini valid html5, ganti kode di atas dengan < div class='tentukan-nama-untuk-elemen-ini' >...< /div >. Serta jangan lupa untuk menambahkan kode CSS .tentukan-nama-untuk-elemen-ini{float:left atau right atau none} sebelum kode ]] >< /b:skin > di HTML Template anda.

Masih banyak contoh tentang bentuk inline CSS dalam dalam elemen HTML. Bagaimana cara mengetahui berapa jumlah CSS Atribute yang sudah kita inline di elemen HTML. Untuk cek CSS Blog Anda silahkan masuk ke  situs milik Patrick Sexton yang menyediakan Tools Check CSSDelivery


Semoga bermanfaat………..


Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

8 comments

Write comments
March 26, 2015 at 1:32 AM delete

Manteep sob untuk informasinya :)
http://goo.gl/Z14H3K

Reply
avatar
February 2, 2016 at 9:14 AM delete

Sangat membantu cara mengubah inline css tapi sedikit mudeng nih :(


animecewekindo.com

Reply
avatar
May 4, 2016 at 12:03 PM delete

atrikelnya sangat bermanfaat

http://agenpulsatermurah.net
http://kakandyberbagi.blogspot.com
http://kursusbelajarbahasainggrisonline.blogspot.com

Reply
avatar
May 4, 2016 at 12:04 PM delete

atrikelnya sangat bermanfaat

http://agenpulsatermurah.net
http://kakandyberbagi.blogspot.com
http://kursusbelajarbahasainggrisonline.blogspot.com

Reply
avatar
October 8, 2017 at 7:09 AM delete

Nice post
Thanks for information
Thx for share
Please visit my blog

Music for your life will provide an easy way to sing professionally. Included 6 easy practice techniques in basic singing tips. It is suitable for anyone who wants to learn to sing. Please click to learn more.

MUSIC FOR YOUR LIFE

See also

BASIC SINGING TIPS

And

HOW TO WRITE A SONG IN EASY FIVE STEPS

Reply
avatar