SOFTWARE FULL VERSION 2013: CSS Series

Showing posts with label CSS Series. Show all posts

Javascript HTML CSS membangun blog website

1:19 AM | Labels: CSS Series, HTML Series, Javascript, Script HTML CSS Code

Integration of source codes

Website merupakan perpaduan aplikasi source code – Javascript, HTML dan CSS. Mau bukti, silahkan buka source code HTML Editor www.blogger.com. Pada dasarnya source kode dalam Editor Template Blogger merupakan integrasi antara program penulisan dokumen HTML (file html), penulisan presentasi dokumen (file css) dan Javascript (file js) dari JAVA Runtime Environment. Perpaduan ketiga macam kode diilustrasikan seperti berikut :

Javascript

Fungsi javascript digambarkan seperti ilustrasi berikut (berdasarkan pengalaman pribadi) :

Dini hari jam 02.00 di bulan November 2010 saya membuka blog, ingin edit HTML, namun ada masalah, hasil pengeditan HTML tidak bisa di-SAVE sama sekali. Saya segera mengirim email pengaduan ke Blogger. Sehari kemudian saya terima notifikasi dari Blogger ke alamat Gmail bahwa :

fungsi Javascript untuk Editor Template Blogger sedang mengalami masalah dan dalam Maintenance.

Saya menduga. Mungkin saya melakukan pelanggaran Term of Services Blogger tanpa disadari?

Namun saat mencoba Login dengan 2 akun Blog saya yang lain ke Blogger.com ternyata mengalami hal sama. Ada apa dengan 3 akun Gmail saya?. Saya pikir Blogger mungkin sedang Maintenance. Apalagi beberapa teman sesama blogger senasib dengan saya.

Benar dugaan saya. Blogger mengirim Notifikasi bahwa :

Editor Template Blogger sengaja mematikan sementara fungsi Javascript untuk tombol Save Template, tombol Bersihkan Template dan tombol Preview.

Hal ini beberapa kali terjadi sepanjang tahun 2010-2011. Pada bulan Maret 2011, selama 3 hari Blogger ditutup. Berulang lagi pada 1 september 2011. Setelah itu memang ada format me nu yang baru. Fitur Blogger mengalami perombakan. Misalnya fitur Live on Blog berdampingan dengan fitur Mobile (View blog dan View di HP). Di bawah Live on Blog ada fitur Customize dan Edit HTML.

Terkait pemberitahuan Blogger diatas, saya lebih menyoroti pesan tentang keberadaan fungsi Javascript untuk tombol menu Blogger. Artinya tombol tersebut menyiratkan fungsi Javascript.

Mengenal HTML

Hyper Text Markup Laguage seperti teks biasa tetapi memungkinkan dibaca semua Browser (FireFox, IE, Google, Opera) sehingga isi konten berupa kode dapat dibaca dan dieksekusi oleh semua Browser. HTML hanyalah salah satu bahasa penulisan file. Selain HTML juga ada XML dan XTML. Hampir semua penulisan Tag dilengkapi tag awal dan tag akhir. Setiap dokumen file HTML memiliki struktur dasar ini :

<!DOCTYPEhtml>
<html>
<head>
<title>'''Selamat Datang di Blog Saya'''</title>
</head>
<body>
<p>Nama saya Yusuf The Doublehorn!</p>
</body>
</html>

HEAD

Header section diapit tag <HEAD> dan </HEAD>. Snippet ini memuat tag TITLE yang menampilkan judul webpage pada browser. Tag title digunakan untuk memberi suatu mark pada website. Browser menyimpan “title” sebagai bookmark. Dalam searching, title digunakan sebagai keywordnya. Header memuat tag META yang berguna untuk menentukan informasi tertentu mengenai file HTML, misalnya menentukan author name dan keywords pada tag META. Contoh :

<meta name="Yusuf" content="Bisnis takaful online">

ELEMEN BODY

BODY Section diapit tag <BODY> & </BODY> sebagai tubuh (isi) file HTML dimana diletakkan informasi yang akan ditampilkan pada browser.

TAG

HTML tidak membedakan huruf besar atau kecil suatu elemen. Elemen HTML terdiri tag-tag beserta teks yang ada di dalamnya. Tag dinyatakan dengan tanda awal < dan tanda akhir > dan biasanya merupakan pasangan :

1. Tag awal, dinyatakan dalam bentuk <nama tag>
2. Tag akhir, dinyatakan dalam bentuk </nama tag>.

Contoh Format :

<nama tag> teks yang ditampilkan </nama tag>

ATRIBUTE

Tag awal bisa memiliki beberapa atribut yang menyatakan karakteristik tag tersebut. Misal, pada atribut ALIGN : Saat dinyatakan karakteristik alinea rata kiri dan rata kanan. Tag yang digunakan :

<p align=”justify”></p>

Nilai yang bisa menyertai atribut ALIGN ada 4, yaitu : Center, Left, Right dan Justify.

Mengenal Cascading Style Sheet

Isi atau konten blog terdiri 2 bagian :

1. Konten dokumen berupa teks, gambar, video, film, foto, audio dan sebagainya.
2. Berupa format desain untuk presentasi dokumen blog.

Awalnya tampilan dokumen blog diatur dengan membuat tag HTML. Namun kemudian tag tampilan ini dikembangkan lebih jauh menjadi bahasa penulisan kode untuk presentasi dokumen blog yang berdiri sendiri. Dalam praktek 2 penulisan ini - HTML dan CSS - kadang terpisah dan bisa pula terintegrasi. Dalam satu file kode pada website dapat digunakan bahasa HTML dan CSS secara bersamaan.

Jika penulisan terpisah maka akan ada file HTML dan file CSS sendiri-sendiri. Kelebihan penulisan secara terpisah adalah bisa menguraikan kerumitan (kompleksitas) penulisan kode dan juga lebih fleksibel dalam menuangkan ide dalam rekayasa website. Dan lebih memudahkan bagi yang memilki akses ke kode tersebut. Kelebihan lain adalah file CSS bisa direferensikan oleh file HTML.

Cascading Style Sheet merupakan bahasa pemrograman web untuk mengatur style halaman Website sehingga lebih terstruktur dan seragam. CSS merupakan bahasa penulisan kode sama seperti HTML menggunakan teks biasa. Penulisan CSS digunakan untuk mendefinisikan LAYOUT blog, pilihan huruf, warna dan aspek presentasi lain.

Sama seperti styles pada aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, seperti heading, sub-bab, bodytext, footer, images, dan style lainnya untuk digunakan bersama-sama dalam beberapa file. Biasanya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS mengatur size gambar, warna bagian tubuh teks, warna tabel, size border, warna border, warna hyperlink, warna mouseover, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lain.^[1] CSS adalah bahasa style sheet C yang digunakan untuk setting tampilan dokumen blog sehingga memungkinkan kita tampilkan halaman sama dengan format beda.

User HTML, CSS dan Javascript adalah webmaster, web developer, web designer dan pengakses kode Website lainnya. CSS memang diciptakan untuk memecah kerumitan penulisan kode blog atau website dengan memisahkan dan membagi menjadi penulisan file dokumen yang menggunakan HTML dan penulisan bentuk presentasi.

Read User's Comments(0)

Menambahkan jenis font baru pada blog Blogspot

1:45 AM | Labels: CSS Series, Newbie in the Blog, Script code, Script HTML CSS Code, Tutorial Blog

Font adalah jenis atau gaya tulisan.

J ika Anda user blog blogspot (blogger), Anda bisa mengganti font template blog. Sebenarnya ada beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Sayangnya tipe huruf bawaan Blogger jumlah jenis font sangat terbatas. Sementara mungkin Anda menginginkan font gaya tersendiri - lebih stylis dan elegan.

Font huruf untuk website blog

Kebanyakan template hasil download tidak bisa diedit di perancang template. Tapi jangan khawatir, Anda tidak perlu melakukan sejauh itu untuk menambahkan tipe font pada blog blogspot Anda. Simaklah tutorial berikut ini :

Memilih Jenis Font

Buka halaman http://www.google.com/webfonts/ dan periksa pilihan tipe font (617 font families)

Jika Anda sudah menemukan huruf yang anda sukai, misalnya, saya memilih Tangerine (seperti gambar diatas). Maka lakukan klik tombol biru “Add to Collection” pada bagian sudut kanan bawah sampel huruf yang Anda pilih. Silahkan pilih lebih dari satu huruf jika diperlukan.
Jika anda sudah selesai memilih huruf, silahkan klik tombol Use

Anda akan dialihkan ke halaman baru. Pada halaman baru ada 2 hal yang harus anda lakukan
- Pertama, pilih jenis ketebalan huruf yang diinginkan. aaberi centang diantara 2 kotak pilihan. Jika Anda beri tanda centang kotak Normal dan kotak Bold, maka akan semakin berat loading halaman anda nantinya.

1. Choose the styles you want:

Normal 400
Bold 700

2. Choose the character sets you want:

Latin (latin)

Kemudian kopi kode dari Google Font (seperti gambar di bawah ini, kode ini hanya contoh saja tidak perlu anda kopi).

Menambahkan Font Pada Blog

Jika sudah menyelesaikan tahapan di atas sekarang masuk ke account blogger Anda.
Pilih menu Template > Edit HTML
Ikuti instruksi ini:

Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

Maksudnya : Letakkan snippet yang didapat (seperti gambar diatas) atau paste kode yang tadi anda copy tepat dibawah <head>
Jangan lupa untuk menambahkan kode / sebelum penutup > kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<head>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'/>

Simpan Template

Penggunaan Font Baru

Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memanfaatkan font baru. Saya akan mengganti jenis huruf pada nama blog saya – “WEBSITE DESIGN” dengan membuka dokumen HTML di bagian ini :

Semula :
#header h1{color:ff38b3;margin-top:-14px;margin-left:450px;margin-right:200px;padding:0px 0px 0px 10px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:60px;line-height:50px}

Menjadi :

#header h1{color:ff38b3;margin-top:-14px;margin-left:450px;margin-right:200px;padding:0px 0px 0px 10px;font-family:Tangerine, Helvetica, Sans-serif;font-weight:bold;font-size:85px;line-height:50px}

Good luck!

Read User's Comments(0)

SEO website blog: convert inline CSS style to external style

8:48 PM | Labels: CSS Series, Search Engine Optimization, SEO by Google, Trick of SEO

Deklarasi CSS menentukan format, tata-letak dan tampilan elemen halaman web. Anda dapat menyertakan deklarasi CSS di beberapa lokasi dalam file dokumen HTML, termasuk metode inline, internal, inner page dan opsional dalam file eksternal. Aturan setting CSS Inline Style ditunjukkan sebagai bagian <head> menggunakan atribut "style." Anda boleh saja menyertakan Internal style sheet di bagian "style" section di daerah <head>.

Anda juga dapat membuat link ke file style sheet eksternal di daerah <head> untuk mengubah Inline style sheet ke external style sheet.

Internal Style Sheet dan External Style Sheet, pilih mana?

Jika Anda setting CSS style untuk setiap alinea website, bisa dilakukan cukup satu kali dengan, misalnya, 5 baris code CSS Inline Style pada dokumen HTML website. Konsekuensinya akan menambahkan style ini ke setiap alinea. BAYANGKAN! – Jika ada 5 baris CSS, maka 5 baris ini akan terduplikasi untuk setiap alinea website blog. Akibatnya pemakaian bandwidth akan tiba-tiba membengkak.

Penulisan Inline Style juga sangat tidak baik untuk SEO karena menjadikan ukuran dokumen menjadi besar melewati batas toleransi standar ukuran dokumen (125KB).

Seperti contoh kasus di bawah ini.

Hasil Analisa SEO website design menggunakan BING Webmaster tools sebagai berikut :

Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached.

Recommended Action:
Ensure that the page source does not contain large amounts of CSS or code at the top of the page. Consider moving code and styles into separate files.

SEO Explanation:
Search engines may not fully acquire the content on a page if the page is contains a lot of code. Extraneous code can push the content down in the page source making it harder for a search engine crawler to get to. A soft limit of 125 KB is used for guidance to ensure all content & links are available in the page source to be cached by the crawler. This basically means if the page size is too big, a search engine may not be able to get all of the content or may end up not fully caching it.

Instruksi

Buat file eksternal CSS. Buat file baru dalam teks editor (seperti Notepad) dan simpan dengan ekstensi ".css." - Misalnya, "mypagestyle.css" atau nama yang Anda inginkan. Tambahkan link ke style sheet Anda di bagian <head> halaman HTML.

Buka dokumen HTML dan cari tag penutup "</ head>". Tambahkan berikut ini sebelum tag penutup :

<link rel="stylesheet" type="text/css" href="mypagestyle.css" />
Ubah nilai atribut "href" jika Anda menyimpan file Anda dengan nama yang berbeda. Kode ini mengasumsikan file CSS disimpan di lokasi yang sama seperti halaman HTML.
Cari deklarasi CSS yang ingin Anda pindahkan ke style sheet eksternal. Jika deklarasi style bersifat inline, mereka akan tampak seperti dalam “opening tag” elemen seperti berikut ini :
<div style="color:#0000ff; background-color:#000;">Here is some text in an element</div>
Ini adalah contoh sederhana di mana ditunjukkan teks berwarna biru (#0000ff) dan latar belakang warna hitam pekat. Sorot teks yang terdaftar diantara tanda kutip (warna teks merah) sebagai atribut "style" copy dan paste ke file CSS Anda. Hapus atribut style dari seluruh elemen HTML ketika Anda “style” tersebut telah disalin ke file style sheet Anda.
Tambahkan atribut class dan ID elemen HTML Anda untuk mengidentifikasi mereka dalam file CSS. Ubah saja opening "div" tag, kali ini tercakup di dalamnya atribut ID :
<div id="content">Here is some text in an element</div>
Jika elemen sudah ada atribut ID, Anda dapat menggunakannya. Atau, Anda dapat menggunakan atribut class seperti berikut ini:
<div class="content">Here is some text in an element</div>
Ubah kode CSS untuk merefleksikan atribut ID atau atribut class yang Anda tambahkan. Di sekitar deklarasi CSS yang Anda copy ke file CSS, tempatkan sebuah blok yang mengidentifikasi atau ID yang Anda pilih.

Untuk atribut ID, gunakan sintaks berikut :

#content
{ color:#FF0000; background-color:#000000; }

Dan jika Anda menggunakan atribut class, gunakan sintaks berikut ini :

.content atau (dot)content
{ color:#FF0000; background-color:#000000; }

Copy kode CSS dari internal style sheet ke file eksternal. Jika Anda punya kode dalam “internal CSS
section” di area <head> halaman dokumen HTML, Anda dapat transfer kode tersebut ke file CSS.

      Kode tersebut biasanya ditunjukkan sebagai berikut:

                          <style type="text/css">
                         div {font-weight:bold;}
</style>
Copy kode diantara tag style seperti terlihat diatas, dan paste ke file CSS. Hapus semua area style dari laman HTML setelah berhasil disalin. Simpan file dan buka halaman di browser untuk menguji.

Tip dan Peringatan

Read User's Comments(0)

Membuat border style mengelilingi script code

6:48 PM | Labels: CSS Series, HTML Series, Script code, Tips Blogger

kita akan membuat kotak Script yang menjadi bagian dari teks content (teks artikel) blog atau website. Tujuan pembuatan kotak mengelilingi script code ini adalah agar dapat memperjelas dalam membaca code tersebut karena ada efek highlight. Tentu saja ini menjadi lebih menarik bila dibandingkan latar belakang tulisan script polos apa adanya.

Caranya mudah. Anda hanya perlu menambahkan code CSS dan HTML di bawah ini ke dalam template, maka setiap kali ada posting yang akan ada di dalamnya script, maka script tersebut akan berada di dalam kotak.

Bagaimana caranya?

Login dulu ke blogger
Pilih Design/Rancangan
Klik Edit HTML
Cari Kode ]]></b:skin> dengan cara sangat mudah, yaitu Klik CTRL – F dan ketik ]]></b:skin>
Letakkan kode dibawah ini persis diatas ]]></b:skin>

/* Alert */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Anda dapat mengubah-ubah letter berwarna biru (dashed dan #e0ffff) dengan pilihan lain sesuai selera dan warna latar belakang website atau blog. Untuk pilihan selain “dashed” Anda bisa memilih diantara alternatif-alternatif dibawah ini (beserta contoh Border Style yang akan ditampilkan).

Agar kode tersebut berfungsi, maka script atau kode yang akan Anda posting pada halaman Source atau Sumber harus diapit dengan kode <p class="alert"> dan </p>

atau seperti di bawah ini :

<p class="alert"> ISI / SCRIPT KODE DALAM KOTAK</p>

ISI / SCRIPT KODE DALAM KOTAK misalnya ini :

/* Alert */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Silahkan melihat hasilnya seperti Script yang pertama (diatas gambar Border Style) dengan pilihan “border-style: inset” Dan jika Script tidak diapit dengan <p class="alert"> dan </p>, maka hasil tampilan script akan sama seperti tampilan Script persis diatas, yaitu POLOS tanpa border style sama sekali.

Selesai.

Tag Technorati: {grup-tag}Script

Read User's Comments(0)

Install Facebook Comments on each Post Page of Blog

3:02 PM | Labels: CSS Series, HTML Series, Script code, Script HTML CSS Code, social media, Tips Blogger, Tutorial Blog

Anda berminat memiliki komentar FB di setiap artikel blog Blogspot? Anda hanya perlu memasukkan snippet code kotak komentar Facebook di area data:post.body (atau sekitarnya). Tidak sampai setengah jam kotak komentar social network milik Mark Zuckerberg akan ditampilkan tepat dibawah setiap posting. Dengan menyediakan ruang berkomentar di setiap halaman artikel blog, kita dapat meningkatkan popularitas posting dengan sangat cepat.

Bagaimana penjelasannya?

Ketika pengunjung blog dalam status LOGIN ke Facebook dan membaca salah satu halaman posting, jika mereka berkomentar, maka secara otomatis posting tersebut langsung dalam status LIKE.

Dengan demikian posting kita seketika ditampilkan pada profil user Facebook, selain itu posting kita akan langsung mendapat LIKE (meskipun pengguna FB memberi tanda centang (check) atau tidak memberi centang (uncheck), postingan artikel tersebut tetap mendapatkan LIKE ). Ini cara bagus meningkatkan jumlah LIKE di setiap laman artikel blog.

Hasilnya dapat dilihat di area komentar di bawah artikel ini, seperti terlihat pada gambar ini.

Bagaimana mendapatkannya?

Tutorial

Login ke Blogger(dot)com dengan Gmail address Anda
Buka Dashboard Blogger
Pergi ke Template >>> Edit HTML >>> Expand Widget Templates.
Tekan kombinasi tombol keyboard Ctrl – F untuk mencari kode ini.

<div class='comments' id='comments'>
Letakkan snippet code dibawah ini tepat di bawahnya.

<div class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Tekan kombinasi tombol keyboard Ctrl – F untuk mencari kode ini : /* Comments atau #comments atau yang mirip diantara keduanya. Pada halaman HTML Editor blog, saya hanya menemukan baris seperti di bawah ini sebagai satu-satunya yang bisa saya temukan.

/* Comments----------------------------------------------- */
Letakkan barisan kode CSS berikut tepat dibawahnya.

.comments-page { background-color: #f2f2f2;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
}
Letakkan script code berikut tepat di atas </head>

CATATAN PENTING

Maafkan! Script diatas hanya image untuk mengurangi loading time dan memperbesar prosentase Text/HTML Ratio, karena ini sangat baik bagi SEO blog ini. Jika setiap script code harus saya ketik, akibatnya akan memperbanyak script dan menurunkan prosentase Text/HTML Ratio.

Script ASLI untuk langkah nomor 7 dapat Anda download dengan klik link :

Script Komentar Facebook di blog Blogger

Letter yusufzulkarnain pada script diatas harus diganti dengan ID Facebook Anda sendiri.
SIMPAN template
SELESAI.

Read User's Comments(0)

Pengenalan Types of CSS Styles : CSS Inline Style

11:09 PM | Labels: CSS Series, Referensi, Website Development

CSS merupakan bahasa pemrograman untuk mengkontrol komponen website sehingga lebih terstruktur dan seragam. Dengan Cascading Style Sheets memungkinkan ditampilkan page yang sama dengan format berbeda. Penempatan rule (kode) style CSS diletakkan terpisah dari isi halaman kode HTML. Isi halaman kode HTML diletakkan dalam file HTML, sedangkan kode style CSS dapat berupa file lain, yaitu file .css atau bisa juga sebagai salah satu bagian dari file HTML yang ditaruh dalam tag <head>.

CSS adalah kumpulan batasan (Rule) untuk memformat dan mengendalikan tampilan isi suatu halaman website (webpage).

Ada 3 bentuk (type) CSS styles :

INLINE STYLES
Inline styles adalah styles CSS yang ditulis langsung ke suatu tag pada dokumen HTML. Inline styles HANYA berpengaruh ke tag tertentu saja (hanya untuk tag dimana inline stlyles dituliskan).

Contoh syntax yang bisa digunakan :

:<a href="" style="text-decoration: none;">
EMBEDDED STYLES
Embedded styles adalah styles CSS yang embedded (tertaman) di bagian head documen HTML. Embedded styles HANYA berpengaruh ke tag-tag pada halaman-halaman web tertentu yangmana Embedded styles ditanamkan di dalamnya.

Contoh syntax yang bisa digunakan :

<style type="text/css"> p { color: #00f; } </style>
EXTERNAL STYLES
External styles adalah styles CSS yang ditulis dalam suatu file CSS yang terpisah dan kemudian terpasang pada Web document. External style sheets berpengaruh pada dokumen apapun yang ada dalam web document.

Contoh syntax yang bisa digunakan :

<link rel="stylesheet" type="text/css" href="styles.css" />
Para prakttisi CSS terbaik menyarankan agar kita memprioritaskan (terutama) menggunakan external style sheets untuk styling halaman-halaman Web (webpages) sehingga Anda akan mendapatkan manfaat terbaik dari penggunaan cascade dan inheritance.

How to Write an Inline Style

Inline styles merupakan CSS styles yang diterapkan HANYA untuk SATU elemen SAJA. Penulisannya menggunakan style attribute. Adapun cara penulisannya sebagai berikut :

Tulislah style property Anda dengan cara yang sama seperti Anda akan menuliskannya di sebuah Style Sheet. Tapi perlu menjadi semuanya dalam satu baris. Beberapa properti terpisah dengan semi-kolon (;) seperti yang Anda lakukan dalam style sheet. Lihat Syntax dibawah ini.

background:#ccc; color:#fff; border: solid black 1px;
Tempatkan baris styles tersebut dalam atribut style dari elemen yang Anda inginkan untuk ditata. (misalnya elemen paragraf (p) pada content teks seperti dibawah ini).

<p style="background:#ccc; color:#fff; border: solid black 1px;">

Kelebihan dan Kekurangan Inline Style

Kelebihan Inline Style

Cascade, inline styles (CSS Inline Styles) ini memiliki hak untuk didahulukan dibanding dengan kedua tipe CSS lain. Itu berarti Inline Styles akan diterapkan tidak peduli apapun * Satu-satunya styles yang memiliki prioritas lebih tinggi daripada Inline Style adalah user styles.

Jadi jika Anda mengalami kesulitan mendapatkan perubahan untuk menerapkan mererapkan CSS, maka SOLUSI Anda dapat mengatur dengan menggunakan Inline Style pada elemen yang Anda inginkan (Misalnya penerapan CSS untuk elemen PARAGRAF (p) pada content teks). Jika masih tidak ada perubahan, berarti ada sebab lain dan harus Anda cari tahu..

Inline Style mudah dan cepat untuk ditambahkan. Anda tidak perlu untuk membuat dokumen baru (seperti dengan style sheet eksternal) atau mengedit elemen baru di bagian header dokumen web Anda (seperti dengan style sheet internal). Anda hanya perlu menambahkan atribut style yang berlaku pada hampir setiap elemen XHTML.
Kekurangan Inline Style

Masing-masing inline style bersifat spesifik dalam Cascade, konsekuensinya akan melelahkan karena setiap inline style harus Anda setting. Inline styles harus diaplikasikan pada setiap elemen yang Anda inginkan. Misalnya Anda ingin seluruh paragraf harus menggunakan font family “Arial.” maka Anda harus menambahkan sebuah inline style ke setiap <p> tag pada dokumen web.

Inline Style menambahkan beban pemeliharaan (pengeditan) untuk web designer dan juga waktu download untuk pengunjung (reader) blog.

Tidak mungkin melakukan style terhadap pseudo-elements dan -classes dengan inline styles.

Sebagai contoh, dengan external dan internal style sheets, Anda dapat mengatur style warna anchor tag untuk visited, hover, active, dan link. Tetapi dengan inline style semua yang dapat Anda atur style-nya adalah HANYA untuk masing-masing link itu sendiri. karena memang seperti itulah ATRIBUT STYLE ditambahkan.

Rekomendasi

Disarankan JANGAN GUNAKAN inline styles untuk web pages Anda karena mereka akan mendatangkan masalah dan membuat halaman-halaman webpage terlalu banyak hal yang harus dilakukan untuk pemeliharaan blog.

Satu-satunya cara terbaik menggunakan Inline style adalah ketika saya menginginkan pemeriksaan style (check) style dengan cepat selama proses pengembangan situs. Namun setelah terlihat beres – tidak ada masalah untuk elemen bersangkutan, maka segera saya memindahkannya ke external style sheet saya.

SELESAI – Happy Blogging!

Catatan untuk tanda bintang *

* Pada beberapa kasus Inline Style dapat ditimpa, seperti dengan atribut penting atau dengan style sheet user. Tetapi prinsipnya dengan penggunaan CSS yang khas, Inline Style akan memiliki prioritas tertinggi.

Source : What is a CSS Inline Style?

Read User's Comments(0)

Add jQuery Scroll to Top to Bottom for Blogger

1:41 AM | Labels: Animation, CSS Series, Javascript, Navigation, Script code

Posting lama tombol jQuery back to top hanya menawarkan satu arah ke laman ATAS webpage. Kali ini saya ingin posting tombol jQuery back to top lain, yaitu tombol Back to Top plus tombol Back to Bottom disertai fade-In and fade-Out effect. Pengunjung blog dapat segera kembali ke atas dan ke bawah halaman. Dengan efek fade-In dan fade-Out ini, kedua tombol akan memudar sedikit ketika kita menggulir ke atas atau ke bawah halaman.

Ada dua tombol dengan posisi FIXED di bagian kanan-tengah webpage, masing-masing dengan fungsi untuk bergerak sebagai pintasan baik ke paling bawah atau ke paling atas webpage secara otomatis. Jika Anda menggulir halaman, kedua tombol akan lenyap, yang memberikan efek bagus dan halus. Saya menemukan widget bagus ini dari Helpblogger, maka penghargaan penuh layak diberikan kepadanya.

How To Install This Widget To Blogger?

Buka Blogger–>Template—>Edit HTML
Tekan tombol keyboard CTRL + F untuk mencari ]]></b:skin> dalam HTML Editor blog
Copy dan paste kode CSS berikut ini, dan letakkan tepat diatas ]]></b:skin>
/* Up and Down Buttons with jQuery */
.button_up{ padding:7px;    /* Distance between the border and the icon */
background-color:white; border:1px solid #CCC;   /* Border Color */

position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_bhXT4rVDVo0tDfS-c5Ws9TjsiETjWuVDq4glGCZfzY8_ja3iMoWJopXG_FapFjgnrGGSh2TTo5u98lYFYII7CtN7ShCdNauygNxUyDYSsXTcPSdi2bphk2NA3q0TNMGgIJx-GZYMTY/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px;   /* Button's width */
height:20px;      /* Button's height */
bottom:280px;   /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

.button_down{ padding:7px; /* Distance between the border and the icon */
background-color:white; border:1px solid #CCC;     /* Border Color */

position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_qq_jUPjlRY7ZsI2sDh562XeNJ7ou8S5M2lPMtdxPY4SGXH4u7NLuFJskb1acD7E9lV0M-fVFTmpHxM2khp8LugueRHZ0OBpj5vAQn6nRhtbrqwRyo_OqB_4iHT1uWUqq4GPhM6PuMs/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

CATATAN
Kedua tombol akan ditampilkan disisi kanan halaman web. Jika Anda ingin menampilkannya di sisi kiri, maka ganti saja teks berwarna merah right yang ada di dua tempat dengan Left. Demikian juga Anda bisa mengganti image tombol Arrow-Up (link warna biru … /arrow_up.png) dan Arrow-Bottom (… /arrow_down.png) dengan URL image lain yang Anda miliki.

The Javascript

Script Javascript dibawah ini akan berfungsi menggulung (scroll) halaman blog menuju ke atas dan bisa juga ke bawah dengan menggunakan jQuery.
Kemudian Tekan tombol keyboard CTRL + F untuk mencari </body>
Copy dan paste script code di bawah ini dan letakkan tepat diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script> //<![CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); $(function() { var $elem = $('body'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]>
</script>

CATATAN PENTING
Jika blog Anda sudah memiliki jQuery plugin, silahkan HAPUS baris teks berwarna merah di atas.
SAVE TEMPLATE
SELESAI!

Source : http://www.makingdifferent.com/add-jquery-back-to-top-and-go-to-bottom-buttons-to-blogger/

DEMO : Dapat Anda lihat di blog ini di sebelah kiri bagian tengah halaman web.

Read User's Comments(0)

Cara Penggunaan

Login ke Blogger >>> Design (Rancangan) >>> Edit HTML
Backup template.
Mengubah xHTML di bagian <body> punya resiko kegagalan yang mungkin menimbulkan kerusakan template, maka lakukan backup template seperti dibawah ini demi keamanan.
- Klik Download Full Template
- Simpan file template di folder computer (misalnya di folder My Document)
- File backup ini digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara upload kembali ke blogger.
- Cara upload :
  Klik browse. Temukan file backup di folder computer dan lanjutkan dengan klik upload.

Kembali ke Edit HTML dan Cari kode ]]></b:skin>

Letakkan kode CSS (snippet pada box 1) tepat di atas kode tersebut
Letakkan Javascript (snippet pada box 2) tepat di BAWAH kode tersebut
Sehingga :

kode ]]></b:skin> akan berada diantara kode css dan javascript

SAVE TEMPLATE
Lanjutkan kembali dengan klik Expand Widget Template dan cari kode <data:top.authorLabel/>

Di atas kode <data:top.authorLabel/> ada beberapa kode lain seperti berikut

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>

Letakkan xHTML (lihat isi Box 3) tepat di atasnya. Sehingga tersusun seperti berikut

posisi box XHTML Related Posts with CSS3 Effects

SAVE TEMPLATE

Keterangan

Angka 10 merupakan jumlah posting ditampilkan di widget related posts. Anda dapat mengubahnya sesuai jumlah yang diinginkan.
Jika ingin merubah tampilan related posts, perubahan cukup dilakukan pada kode css.

SELESAI - Jika kurang jelas atau ada masalah klik [Source]

Read User's Comments(0)

Tutorial CSS : Dasar-dasar penulisan CSS tampilan web

7:56 PM | Labels: CSS Series, Newbie in the Blog, Website engineering

Cascading Syle Sheets pada website merupakan program style sheet yang mengatur dan mengendalikan gambar, bagian body, tabel, border, warna hyperlink, mouseover, paragraf, spasi, margin kiri/kanan/atas/ bawah dan parameter lain. Nama Cascading Syle Sheets didapat dari fakta bahwa setiap deklarasi style yang berbeda-beda bisa diletakkan secara berurutan, membentuk hubungan parent-child pada setiap deklarasi style.

CSS merupakan bahasa pemrograman untuk mengkontrol komponen website sehingga lebih terstruktur dan seragam. Dengan CSS memungkinkan ditampilkan page yang sama dengan format berbeda.

Sintax Dasar Kode CSS

Awalnya semua penulisan kode - termasuk pengaturan presentasi - ditulis dalam tag HTML. Kemudian dirintis penulisan kode PENGATURAN PRESENTASI tampilan dokumen website secara tersendiri dan dikenal sebagai bahasa kode CSS untuk style tampilan webpage (halaman web).

Bentuk penulisan dasar CSS

selector {property : value}

Selector      =   merupakan tag HTML atau elemen (baik class maupun id) yang akan diatur.
                           Bagian yang diapit '{}' disebut declaration terdiri 2 unsur, property dan value.
Property      =   merupakan atribut elemen yang ingin ditentukan nilainya.
Value          =    merupakan nilai dari atribut elemen, bisa berupa angka dan text.

Untuk menjelaskan lebih jauh, perhatikan contoh di bawah ini. Sering dijumpai kode berikut :

h1 { color: #ff0000;
}

kode warna pada color: #ff0000; bisa ditulis dalam bentuk color: red. (Disarankan menggunakan code warna). Sehingga menjadi :
- h1 { color: red;
  }
  
  Penjelasannya :
  tag header yaitu h1 merupakan selector
  color merupakan property
  #ff0000 atau red#ff0000 merupakan value
  
  Perhatikan pendefinisian property dan atribut berada diantara tanda ini { … dan … }. Pendefinisian value dengan tanda ":" dan diakhiri tanda ";"

Penulisan CSS

CSS Internal memiliki 2 cara penulisan dan 1 cara penulisan CSS Eksternal.

A. Metode Penulisan CSS Internal

(1). Metode Inline Style Sheet

CSS didefinisikan langsung pada tag HTML bersangkutan. Cara penulisan dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style ini hanya berlaku pada tag bersangkutan, dan tidak berpengaruh pada tag yang lain. Contoh Metode Inline Style Sheet :

(2). Metode Embedded Style Sheet

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body> . Pada pendefinisian ini disebutkan, atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag yang bersangkutan (tag-tag yang ada diantara<body> … </body>.

LATIHAN

Sisipkan snippet CSS di bawah ini di bagian head, diantara <head> … </head> dokumen HTML :

CSS tampilan font Tangerine website design

Kemudian setiap huruf pertama atau kata pertama atau frase pertama pada posting baru diatur seperti ini : (misalnya pada frase pertama) :

<span class="dropcap">Cascading Syle Sheets  </span>pada website bla bla bla

Maka hasilnya terlihat seperti pada baris pertama artikel ini (lihat gambar di bawah ini).

B. Metode Linked Style Sheet (Untuk CSS Eksternal)

Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian :

tag<style> ... </style>

dibuat file terpisah dari file HTML yang membutuhkan CSS. File tersebut disimpan dalam format.css.

File HTML yang akan menggunakan file CSS, harus dibuat tag<link> yang dituliskan di antara :

tag <head> ... </head>

Contoh seperti dibawah ini (simpanlah dengan nama file contoh.css :

Penggunakan CSS

* Telah didukung oleh kebanyakan browser versi terbaru.
* Fleksibel dalam penempatan posisi layout.
    Dalam layouting CSS ada Z-Index untuk menempatkan objek dalam posisi yang sama.
* Menjaga HTML dalam penggunaan tagdengan jumlah minimal.
    Hal ini berpengaruh terhadap ukuran berkas dan speed pengunduhan.
* Bisa menampilkan konten utama terlebih dahulu, sementara tampilan gambar menyusul.
* Penerjemahan CSS setiap browser berbeda, layout akan berubah jika dilihat dari berbagai browser.
    CSS layouting "Masa Depan" dengan penggabungan bersama XHTML.

Read User's Comments(0)

Apa artinya tag (atribut) dinyatakan usang oleh W3C?

4:29 AM | Labels: CSS Series, HTML Series, Script code, Search Engine Optimization, SEO by Google

Tag dan atribut HTML sering dinyatakan usang (deprecated) dalam HTML4 oleh W3C - konsorsium yang menetapkan standar HTML, ketika kita memeriksa hasil evaluasi suatu situs dengan www.woorank.com. Kemudian disarankan sebaiknya digantikan dengan alternatif lain yang lebih fungsional atau fleksibel (baik sebagai HTML atau sebagai CSS). Browser seharusnya terus mendukung tag dan atribut ini, tetapi akhirnya tag ini cenderung menjadi usang sehingga dukungan di masa depan tidak dapat dijamin.
Berikut ini daftar atribut dan tag yang dianggap usang oleh W3C dan alternatif lain untuk penulisannya:

Apa perlunya kita mengganti “tag dan atribut usang - deprecated tag / attribute?

Pada halaman hasil evaluasi SEO atas blog website design seperti ditunjukkan gambar di bawah ini :

Review for website download blogspot by WooRank dot com

pada aspek penilaian “Deprecated HTML” dikatakan bahwa :

Deprecated HTML tags are HTML tags that are no longer used. It is recommended that you remove or replace these HTML tags because they are now obsolete.

Tag dan atribut HTML ini akan berpengaruh negatif terhadap nilai score SEO sebuah website, maka ganti seperti yang disarankan pada tabel di atas. Lalu prakteknya seperti apa?
Contoh DEPRECATED tag :
This example centers a heading on the canvas.

<H1 align="center"> How to Carve Wood </H1>

Tag diatas dianggap usang dalam HTML4 oleh W3C. lalu alternatifnya seperti apa?
Gunakan CSS, seperti contoh di bawah ini untuk mendapatkan efek yang sama dengan contoh tag yang dianggap usang pada snippet di atas.

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css"> H1 { text-align: center} </STYLE>
<BODY>
<H1> How to Carve Wood </H1>

Kita juga bisa mengurangi ruang lingkup style dengan menetapkan atribut class pada elemen. Seperti contoh di bawah ini.

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> How to Carve Wood </H1>

Untuk contoh-contoh penerapan lain, silahkan kunjungi :

http://www.w3.org/TR/REC-html40/present/graphics.html#h-15.1.2

Ada juga atribut usang, namun hanya atribut untuk tag yang sudah dimasukkan ke daftar yang dikecualikan seperti di bawah ini:

Adapted from Web Design in a Nutshell by Niederst

Read User's Comments(0)

Tips SEO : Hindari penggunaan Inline Style CSS

1:25 AM | Labels: CSS Series, Script code, Search Engine Optimization, SEO by Google

Cascading Style Sheet (CSS) untuk mengendalikan size, gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.^[1] CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.^[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.^[2]

Hal ini sama halnya dengan styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).^[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.^[1]

Bolehkah menggunakan Inline Style CSS?

Jika Anda gunakan inline style CSS dalam dokumen HTML, ini bukan cara terbaik menjaga SEO blog. Hindari penggunaan inline style CSS untuk setiap style pada halaman Web.

Daripada menggunakan inline style CSS, gunakan style sheet eksternal. Style sheet eksternal memberikan semua manfaat dari praktek-praktek CSS terbaik dan mudah digunakan. Jika Anda harus menempatkan style dalam dokumen HTML tertentu, tempatkan mereka dalam embedded style sheets dalam <head> dokumen HTML Anda. Dengan begitu, setidaknya mereka masih terpisah dari konten.

Misalkan pada artikel posting dalam source code ditulis seperti ini:
<p id="contoh1">
Ini adalah contoh tag P tanpa diformat menggunakan inline style CSS</p>

<p>Hindarkan penulisan diatas dengan menyisipkan unsur inline style, seperti ini :</p>
<p id="contoh2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="contoh3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
Solusinya :
1. Embedded Style Sheet, seperti ini.

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style> <body>
<h1 id="contoh1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="contoh2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="contoh3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

              Kode warna : #ff0000   (merah) warna tag h1 pada contoh diatas
             Kode warna    #ffff00     (biru) untuk warna paragraf (p)

2.     Gunakan file CSS style Eksternal.

Hindari penggunaan Inline Style CSS pada dokumen HTML

Penggunaan inline style CSS dalam dokumen HTML, itu tidak baik bagi SEO. Hal ini terlihat pada review hasil analisa SEO dengan bantuan www.WooRank.com seperti di bawah ini :

Perhatikan tanda silang merah pada komentar hasil analisa SEO :

x Too bad, your website is using inline styles.

Dan perhatikan pula komentar pada kotak orange yang teks tertulisnya seperti di bawah ini :

Website speed has a huge effect on SEO. ‪‬‬Speed-up your website so search engines will reward you by sending more visitors. Also, conversion rates are far higher for websites that load faster than their slower competitors.

Inline Styles Are Not Best Practice

Inline styles don't separate content from design
Inline styles sama seperti embedded font tag dan tag-tag desain lain yang saat ini dicoba untuk dihentikan penggunaannya. Style ini hanya mempengaruhi tag yang benar-benar mereka terapkan, dan untuk sementara mungkin memberikan Anda kontrol lebih, membuat aspek lain dari desain dan namun pengembangan ke depannya menjadi lebih sulit.
Inline styles cause more maintenance headaches
Ketika Anda bekerja dengan style sheet, kadang-kadang bisa sangat sulit untuk mencari tahu di bagian mana style sedang diatur. Dan jika Inline Style Anda semakin banyak, maka semakin membuat Anda pusing kepala. Ketika Anda menambahkan campuran inline style, Embedded style, dan eksternal style dan Anda punya lebih banyak lagi lokasi untuk dilihat, maka tidak terbayangkan pusingnya kepala.

Dan jika Anda bekerja pada tim desain web atau harus mendesain ulang atau memelihara situs yang dibangun oleh orang lain, maka Anda akan mengalami jauh lebih banyak kesulitan. Kemudian, setelah Anda menemukan gaya dan menyingkirkan itu, Anda harus menyingkirkan itu pada setiap elemen pada setiap halaman di mana itu telah ditempatkan. Yang dapat meningkatkan volume pekerjaan pemeliharaan astronomis.
Inline styles are not as accessible
While a screen reader or other assistive device might be able to handle the attributes and tags effectively, some of the older devices don't and can result in some strange Web pages. Plus, the extra characters and text can affect how your page is viewed by a robot such as a search engine, so your page optimization would not do as well as a page with external style sheets.
Inline styles make your pages bigger
Jika Anda setting sebuah CSS style untuk setiap alinea website, Anda bisa lakukan cukup satu kali saja dengan, misalnya, 5 baris code atau dengan external style sheet. Namun jika Anda lakukan dengan inline style – INGAT! – konsekuensinya akan menambahkan style ini ke setiap alinea. BAYANGKAN! – Jika Anda punya 5 baris CSS, maka 5 baris ini akan terduplikasi untuk setiap alinea website. Akibatnya pemakaian bandwidth dapat meningkat pesat dalam waktu singkat.

What Is the Best Practice for CSS Instead of Inline Styles

Gunakan External Style Sheets dan hindari penggunaan CSS Inline Style. External style sheets memberikan semua manfaat dari praktek-praktek CSS terbaik dan mudah digunakan.

Jika Anda harus meletakkan elemen CSS dalam dokumen HTML, disarankan menggunakan Embedded Style Sheet di bagian <head>. Setidaknya CSS style tetap terpisah dari content.

Contoh kasus (Hasil Analisis BING Webmaster tools):

Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached.

Recommended Action:
Ensure that the page source does not contain large amounts of CSS or code at the top of the page. Consider moving code and styles into separate files.

SEO Explanation:
Search engines may not fully acquire the content on a page if the page is contains a lot of code. Extraneous code can push the content down in the page source making it harder for a search engine crawler to get to. A soft limit of 125 KB is used for guidance to ensure all content & links are available in the page source to be cached by the crawler. This basically means if the page size is too big, a search engine may not be able to get all of the content or may end up not fully caching it.

Categories

SOCIAL MEDIA

TIPS

Archives

Integration of source codes

Javascript

Mengenal HTML

HEAD

ELEMEN BODY

TAG

ATRIBUTE

Mengenal Cascading Style Sheet

Font huruf untuk website blog

Memilih Jenis Font

Menambahkan Font Pada Blog

Penggunaan Font Baru

Internal Style Sheet dan External Style Sheet, pilih mana?

Instruksi

Tip dan Peringatan

Bagaimana caranya?

Bagaimana penjelasannya?

Bagaimana mendapatkannya?

Tutorial

How to Write an Inline Style

Kelebihan dan Kekurangan Inline Style

Kelebihan Inline Style

Kekurangan Inline Style

Rekomendasi

Catatan untuk tanda bintang *

How To Install This Widget To Blogger?

Cara Penggunaan

Keterangan

Sintax Dasar Kode CSS

Bentuk penulisan dasar CSS

Penulisan CSS

A. Metode Penulisan CSS Internal

(1). Metode Inline Style Sheet

(2). Metode Embedded Style Sheet

LATIHAN

B. Metode Linked Style Sheet (Untuk CSS Eksternal)

Penggunakan CSS

Bolehkah menggunakan Inline Style CSS?

Hindari penggunaan Inline Style CSS pada dokumen HTML

Inline Styles Are Not Best Practice

What Is the Best Practice for CSS Instead of Inline Styles

KESIMPULAN