Reading
1 Comment
Beberapa langkah awal yang harus di pahami
Langkah pertama dan wajib adalah niat yaitu saya berniat tidak akan pernah memposting di editor blogspot di mode compose, jika saya sampai mengkliknya maka saya akan menghapus postingan saya.
Langkah kedua dan wajib juga, saya akan mempelajari apa itu selector dalam CSS. Karena ini sharing satu metode saja maka saya akan memberikan dokumentasi di artikel ini tentang penekanan CSS yaitu display none !important.
Langkah ketiga saya harus dan wajib mengetahui struktur HTML di template saya, seperti lebar dari body, post, sidebar, header, footer.
Langkah ke empat saya harus dan wajib mengetahui di mana letak javascript di dalam template saya dan apa fungsi dari javascript tersebut.
Langkah kelima saya harus mengetahui id dan class dari widget di dalam template saya.
Langkah ke enam saya harus mempelajari apa itu div=division apa itu section apa itu style dan apa itu embed CSS.
Memahami masalah dan mulai membuat konsep
CSS adalah pendukung tampilan visual dalam sebuah website.
Dinamis website lebih baik daripada static website.
Menghindari dan memperkecil pengunjung untuk mengikuti alur ke halaman depan, dalam artian bagaimana pengunjung dapat menelusur tanpa harus ke halaman depan.
Merumuskan tag semantik HTML yang di gunakan dalam postingan nantinya.
Mengindari sedikit line-break
akan tetapi bagaimana line-break itu di gunakan dalam tag paragraph
, jadi posting tetap bernilai semantic.
Reset CSS.
Memahami bahwa float berbeda dengan text-align dengan itu kita bisa membuat side bar berbeda pula.
Penentuan satuan dalam CSS apakah presentase, em, px, pt.
Penentuan layout apakah berupa grid, multi column CSS3, multi kolom dengan penentuan float, margin dan pading, fleksible, fixed, simple kolom seperti blog ini, berpindah hentry atau post.
Menentukan background halaman apakah di berikan fixed dengan html atau di body
Jika ingin berfungsi lagi yaitu mengenal javascript.
Proses
Langkah awal adalah saya akan memasukan style reset CSS dari eric meyers dan memasukannya di bawah <b:skin><![CDATA[
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: ?????;
} */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Kemudian langsung saya save
Lalu saya mulai melihat struktur dari CSS di dalam template saya, jika saya masih menggunakan variable maka saya akan menghilangkannya dan menggantinya, sebagai contoh default template blogspot sudah mempunyai variable agar dengan mudah kita mengeditnya, tapi itu bisa menjadi masalah jika saya mau menerapkan konsep halaman berbeda. Misalkan di dalam comments saya menemukan variable
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
Maka hal yang harus saya perbuat adalah melihat di mana variable itu color: $sidebarcolor; saya akan menggantinya nilai tersebut sesuai variable:
<Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999">
Nah, akhirnya ketemu valuenya maka saya akan menggantinya dengan default color:#999; kemudian saya akan menghapus kode variable di atas karena saya sudah menemukan default color.
Lalu saya akan mempersiapkan sebuah notepad atau wordpad untuk menyusun selector yang nantinya akan di berikan di dalam postingan kita. Sebagai contoh di dalam kode CSS ada body{bla, bla, bla..wek,wek..pret!!hehe} Setelah saya menemukan berarti selectornya adalah body. Maka saya akan menyimpan di notepad body{display:none !important}. Lalu saya akan menjamah selector yang lainnya tapi saya tidak memberikan value agar bertujuan bisa lebih mudah mengeditnya nanti. Misalkan #sidebar{}footer{}#header{}html{}blockquote, q {} dan seterusnya sesuai keinginan saya, lalu saya simpan di dalam notepad dengan style jadi sepeti ini:
<style>body, .post-body {}.post-body {}wrappper{}body{display:none !important}#comments{}#sidebar{}footer{}#header{}html{}blockquote, q {}<style>
Hehehehe, panjang kan? yups lanjut! sekarang kita akan menyusun tag HTML yang nanti memudahkan saya ketika memposting. Saya akan membuat standar seperti ini:
<---ini untuk penyusunan paragraph-->
<p></p><p></p>
<---tag ini untuk memanggil CSS dari id maupun class--->
<div id=''></div>
<---Tag ini untuk memasukan link tautan--->
<a href=''></a>
<---tag ini untuk membuat list tanpa nomor--->
<ul>
<li></li>
<li></li></ul>
<---tag ini untuk membuat list dengan nomor--->
<ol>
<li></li>
<li></li></ol>
<---tag ini untuk membuat definisi berdasarkan list--->
<dl>
<dt></dt>
<dd></dd>
</dl>
<---ini adalah style css yang akan di modifikasi--->
<style>body, .post-body {}.post-body {}wrappper{}body{display:none !important}#comments{}#sidebar{}footer{}#header{}html{}blockquote, q {}</style>
Bagaimana menerapkannya?
Pertama-tama saya akan menuju setting-->formatting--> post template.
Kemudian saya akan memasukan baris kode yang telah saya susun di dalam post template.
<---ini untuk read more atau baca selengkapnya--><!--more-><---ini untuk penyusunan paragraph-->
<p></p><p></p>
<---tag ini untuk memanggil CSS dari id maupun class--->
<div id=''></div>
<---Tag ini untuk memasukan link tautan--->
<a href=''></a>
<---Tag ini untuk membuat multikolom CSS3--->
<div id='multikolom'></div>
<---tag ini untuk membuat list tanpa nomor--->
<ul>
<li></li>
<li></li></ul>
<---tag ini untuk membuat list dengan nomor--->
<ol>
<li></li>
<li></li></ol>
<---tag ini untuk membuat definisi berdasarkan list--->
<dl>
<dt></dt>
<dd></dd>
</dl>
<---ini adalah style css yang akan di modifikasi--->
<style>#multikolom{width:auto;-moz-column-count:2;-moz-column-gap:.80em;-moz-column-rule: 1px solid black;-webkit-column-count: 2;-webkit-column-gap:.80em;-webkit-column-rule: 1px ;}body, .post-body {}.post-body {}wrappper{}body{display:none !important}#comments{}#sidebar{}footer{}#header{}html{display:none !important}blockquote, q {}</style>
Kemudian saya akan mengklik save settings nya
Sebenarnya ini sudah selesai, untuk membuktikan saya akan berangkat ke posting baru.
Nanti di dalam editor sudah ada tag yang saya masukan maka tugas saya adalah merancangnya. Untuk mencobanya saya akan mengklik tombol preview, eng..ing..eng..gubrak!!! ternyata halaman kosong! karena saya memberikan body{display:none !important}html{display:none !important}. Nah, sekarang itu semua tergantung dari saya, bagaimana memodifikasinya, dan catatan bahwa saya harus mengetahui Id dari widget juga class nya. Jika saya berminat untuk menggantinya.
Keuntungan menggunakan konsep ini
Menurut saya menggunakan konsep ini ada beberapa keuntungan lebih di bandingkan mengandalkan conditional tag yang ada di blogspot di antaranya adalah:
Saya jadi bisa memahami embed CSS.
Saya pun memahami penetapan class, id dan satuan yang di berikan.
Bisa membuat halaman berbeda-beda tanpa harus mengganggu sumber kode template default.
Bisa banyak mengetahui fungsi template dan javascript.
Bisa memposting dengan HTML dan menerapkan CSS paragraph.
Bisa menaruh iklan semau saya, di mana iklan tersebut saya hilangkan atau saya munculkan.
Pokonya banyak deh..heheh. Bahkan bisa belajar pelan-pelan membuat template.
http://hendro-prayitno.blogspot.com/2011/03/blogger-admin-konsep-membuat-setiap.html
1 comments
tesss
ReplyDeleteBerkomentarlah dengan baik dan sopan