 |
| HTML Dasar |
Melanjutkan belajar blog dari dasar sesuai posting saya sebelumnya, sekarang kita akan belajar tentang HTML dasar sebuah blog. Di bawah akan saya tampilkan satu persatu dan secara detil bagaimana sebuah blog bekerja dengan HTML. Ada beberapa seksi atau bagian tentang belajar HTML dasar pada sebuah blog yang wajib diketahui para sobat blogger terutama bagi pemula yang akan mendalami blogspot. Awalnya memang terasa agak sedikit rumit, namun jika kita mengikuti alur sebuah HTML akan sangat mengasyikan apa lagi buat sobat yang suka utak-atik blog sehingga anda tidak akan merasa puas belajar mengenai blog, seperti seorang montir yang ahli dalam bongkar pasang mesin yang awalnya belajar secara otodidak.
<?xml version="1.0" encoding="UTF-8" ?><br />
<!DOCTYPE html ...>
<html ...>
<head>
<title><data:blog.pageTitle/></title> Judul dari blog yang akan tampil pada browser sobat
<b:skin><![CDATA[/*
Semua style atau CSS sobat akan berada di sini. Dibahas pada Part 1-10
]]></b:skin> Part 11
</head>
<body> Open Tag
<!-- Kolom dan widget pada Part 12 --><br />
</body> Close Tag
</html>
Part 1 - Content
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link { Colour of a link
text-decoration:none;
color: $(link.color);
}
a:visited { Colour of a link when clicked on
text-decoration:none;
color: $(link.visited.color);
}
a:hover { Colour of a link when mouse rolls over it
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}
Bagian HTML ini untuk mengendalikan bagaimana keseluruhan tampilan pada blog anda. Background, huruf, warna, tulisan and link. Kebanyakan dari ini yang ditulis seperti. $(_____); berhubungan dengan pengaturan template. Anda bisa menggantinya secara manual atau ke Template > Pengaturan.
background: $(body.background); seperti yang di atas berhubungan dengan pengaturan template. Juga terkadang akan ditulis seperti: #color; yang mana dapat diganti menggunakan hex colours (#FFFFFF) atau kata tanpa "#" (white). Saya akan tunjukan satu persatu penulisanya dibawah ini.
a:link { text-decoration:none; color: $(link.color);
} a:visited { text-decoration:none; color: #666666;
} a:hover { text-decoration:underline; color: purple;
Ikuti terus blog ini, untuk posting berikutnya tentang Header pada bagian 2
Add to Cart
Belajar HTML Dasar Blog Part 1
0 comments:
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.