Diecast Model Car Collectibles
When you want to buy collectibles, what is your guide? Guidelines could include, where to buy, the authenticity of collectibles, reasonable price and purchasing procedures.
One place that became my favorite guides in the search for collectibles is shopwiki.com. There is a complete guide to buying any collectibles, something like Memorabilia, Documents and Currency, Toys, Collectible Cards, Cigars and Pipes, Decorative Items, Natural World and Other Interests.
I really like Diecast Model Car Collectibles. And all available in shopwiki.com, with various types such as Classics Cars, Fire Engines, Trucks, Buses and Street Cars. For the purposes of display, various sizes and packaging are also available. You should first determine what type of car to search for, then look for collector's stores or websites that sell them.
Interested to find your favorite collectibles now? Immediately find shopwiki.com.
One place that became my favorite guides in the search for collectibles is shopwiki.com. There is a complete guide to buying any collectibles, something like Memorabilia, Documents and Currency, Toys, Collectible Cards, Cigars and Pipes, Decorative Items, Natural World and Other Interests.
I really like Diecast Model Car Collectibles. And all available in shopwiki.com, with various types such as Classics Cars, Fire Engines, Trucks, Buses and Street Cars. For the purposes of display, various sizes and packaging are also available. You should first determine what type of car to search for, then look for collector's stores or websites that sell them.
Interested to find your favorite collectibles now? Immediately find shopwiki.com.
CSS untuk Background
Properti CSS Background digunakan untuk menentukan efek latar belakang suatu elemen. Biasanya adalah :
Background color adalah properti untuk menentukan warna latar suatu elemen. Background color sebuah halaman didefinisikan oleh body selector seperti di bawah ini:
Background image adalah properti untuk menetapkan sebuah gambar sebagai latar sebuah elemen. Secara default, gambar diulang sehingga meliputi seluruh elemen. Gambar latar belakang untuk halaman dapat diatur seperti ini:
Standar property background image adalah pengulangan gambar baik secara horizontal maupun vertikal. Beberapa gambar hanya diulang horizontal atau hanya vertikal, karena jika tidak background akan terlihat aneh. Jika tidak diulang maka kodenya akan terlihat seperti dibawah ini:
Pada contoh-contoh di atas, teks dan gambar berada dalam tempat yang sama. Jika kita ingin meletakkan gambar pada posisi yang berbeda kita dapat mengaturnya sehiga kodenya akan terlihat sebagai berikut:
Pada contoh di atas, beberapa property dibuat secara terpisah-pisah. Sebenarnya property itu dapat dibuat ringkas dalam satu baris yang dinamakan shorthand property. Shorthand property untuk background biasa diringkas dengan 'background'. Contoh penggunaannya sebagai berikut:
Tidak masalah jika nilai/value dari property itu kosong, sepanjang ditulis dengan berurutan seperti urutan di atas.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background color adalah properti untuk menentukan warna latar suatu elemen. Background color sebuah halaman didefinisikan oleh body selector seperti di bawah ini:
Pendefinisian background color lebih spesifik bisa dengan perintah sebagai berikut:body {background-color:#b0c4de}
- name - a color name, like "red"
- RGB - an RGB value, like "rgb(255,0,0)"
- Hex - a hex value, like "#ff0000"
h1 {background-color:#6495ed}
p {background-color:#e0ffff}
div {background-color:#b0c4de}
Background image adalah properti untuk menetapkan sebuah gambar sebagai latar sebuah elemen. Secara default, gambar diulang sehingga meliputi seluruh elemen. Gambar latar belakang untuk halaman dapat diatur seperti ini:
body {background-image:url('paper.gif')}
body {background-image:url('bgdesert.jpg')}
Standar property background image adalah pengulangan gambar baik secara horizontal maupun vertikal. Beberapa gambar hanya diulang horizontal atau hanya vertikal, karena jika tidak background akan terlihat aneh. Jika tidak diulang maka kodenya akan terlihat seperti dibawah ini:
body
{
background-image:url('gradient2.png');
}
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Pada contoh-contoh di atas, teks dan gambar berada dalam tempat yang sama. Jika kita ingin meletakkan gambar pada posisi yang berbeda kita dapat mengaturnya sehiga kodenya akan terlihat sebagai berikut:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
}
Pada contoh di atas, beberapa property dibuat secara terpisah-pisah. Sebenarnya property itu dapat dibuat ringkas dalam satu baris yang dinamakan shorthand property. Shorthand property untuk background biasa diringkas dengan 'background'. Contoh penggunaannya sebagai berikut:
body {background:#ffffff url('img_tree.png') no-repeat top right}
Tidak masalah jika nilai/value dari property itu kosong, sepanjang ditulis dengan berurutan seperti urutan di atas.
Belajar menggunakan CSS
Secara garis besar, ada 3 jenis cara untuk menggunakan CSS dalam sebuah halaman HTML:
- External style sheet
- Internal style sheet
- Inline style
- External style sheet
External style sheet cocok untuk style yang akan diaplikasikan pada beberapa halaman. Dengan external style sheet, kita dapat merubah tampilan seluruh Web site dengan merubah satu file. Setiap halaman must link to the style sheet usingarus terhubung dengan style sheet menggunakan kode "link". Kode "link" akan berada di dalam bagian head seperti contoh di bawah ini:
External style sheet dapat dibuat dengan berbagai teks editor. File-nya tidak boleh mengandung kode HTML dan file-nya disimpan dengan ekstension .css seperti contoh di bawah ini.
Jangan membuat spasi antara nilai property dengan unit "margin-left:20 px" (seharusnya seperti ini "margin-left:20px") karena akan menimbulkan masalah pada browser firefox dan opera.hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")} - Internal style sheet
Internal style sheet digunakan ketika sebuah dokumen tunggal memiliki style yang unik/spesifik. Kita dapat menetapkan internal style di bagian head sebuah halaman HTML dengan menggunakan kode "style", seperti contoh di bawah ini:
- Inline style
Untuk menyisipkan inline styles kita harus menggunakan atribut dengan kode yang relevan. Atribut style dapat mengandung berbagi CSS property. Contoh di bawah ini memperlihatkan cara merubah warna dan margin kiri pada sebuah paragraf:
- Multiple Style Sheets
Jika beberapa property telah diset untuk selector yang sama tapi untuk style yang berbeda, nilai untuk property akan diambil dari style yang lebih spesifik.
Sebagai contoh, sebuah external style sheet mengandung beberapa property untuk selector h3 :
Dan sebuah internal style sheet juga memiliki property untuk selector h3 sebagai berikut:h3
{
color:red;
text-align:left;
font-size:8pt
}
Jika sebuah halaman dengan internal style sheet juga terhubung dengan external style sheet di atas, maka property untuk selector h3 akan menjadi seperti di bawah ini:h3
{
text-align:right;
font-size:20pt
}
Dimana, nilai property warna diambil dari external style sheet sementara text-alignment dan ukuran huruf digantikan oleh nilai dari internal style sheet.color:red;
text-align:right;
font-size:20pt
Perintah ID dan CLASS Selector
ID dan CLASS Selector
Dalam penambahan untuk membuat sebuah style pada sebuah elemen HTML, CSS memperbolehkan kita untuk membuat Selector lebih spesifik yang dinamakan dengan ID dan CLASS
ID Selector
ID Selector digunakan untuk menetapkan sebuah style tunggal yang unik. ID Selector menggunakan atribut ID dari elemen HTML, dan ditandai dengan tanda "#".
Style di bawah ini ditujukan pada elemen HTML dengan ID "para1" :
CLASS Selector
CLASS Selector digunakan untuk menetapkan sebuah grup style elemen. Tidak seperti ID Selector, CLASS Selector paling sering digunakan untuk beberapa elemen.
CLASS Selector memperbolehkan kita untuk menetapkan style tertentu untuk beberapa elemen HTML dengan class yang sama. CLASS Selector menggunakan atribut HTML yang ditandai dengan tanda titik ".".
Pada contoh di bawah ini, semua elemen HTML dengan class="center" akan dibuat rata tengah.
Pada contoh di bawah ini, semua elemen p dengan class="center" akan dibuat rata tengah.
Dalam penambahan untuk membuat sebuah style pada sebuah elemen HTML, CSS memperbolehkan kita untuk membuat Selector lebih spesifik yang dinamakan dengan ID dan CLASS
ID Selector
ID Selector digunakan untuk menetapkan sebuah style tunggal yang unik. ID Selector menggunakan atribut ID dari elemen HTML, dan ditandai dengan tanda "#".
Style di bawah ini ditujukan pada elemen HTML dengan ID "para1" :
#para1
{
text-align:center;
color:red
}
CLASS Selector
CLASS Selector digunakan untuk menetapkan sebuah grup style elemen. Tidak seperti ID Selector, CLASS Selector paling sering digunakan untuk beberapa elemen.
CLASS Selector memperbolehkan kita untuk menetapkan style tertentu untuk beberapa elemen HTML dengan class yang sama. CLASS Selector menggunakan atribut HTML yang ditandai dengan tanda titik ".".
Pada contoh di bawah ini, semua elemen HTML dengan class="center" akan dibuat rata tengah.
.center {text-align:center}
Pada contoh di bawah ini, semua elemen p dengan class="center" akan dibuat rata tengah.
p.center {text-align:center}
Perintah dalam CSS (CSS Syntax)
CSS Syntax
Sebuah perintah CSS biasanya mengandung dua bagian utama, yaitu : Selector dan Declarations.
Selector adalah elemen HTML yang ingin dirubah-rubah style-nya, sedang Declaration terdiri dari property dan value. Property adalah atribut style yang ingin dirubah-rubah dan setiap property ini memiliki nilai / value.
Contoh CSS
CSS Declarations selalu diakhiri dengan tanda titik koma ";" dan satu grup declarations selalu berada dalam tanda kurung kurawal "{}". Lihat contoh di bawah ini:
Comments digunakan untuk menerangkan kode/script yang memudahkan kita atau orang lain ketika suatu saat ingin meng-edit source code. Perintah comments ini diindahkan oleh browser. Perintah comments diawali dengan "/*" dan diakhiri dengan "*/". Lihat contoh di bawah ini:
Sebuah perintah CSS biasanya mengandung dua bagian utama, yaitu : Selector dan Declarations.
Contoh CSS
CSS Declarations selalu diakhiri dengan tanda titik koma ";" dan satu grup declarations selalu berada dalam tanda kurung kurawal "{}". Lihat contoh di bawah ini:
Agar mudah dalam membacanya, setiap declaration dapat dibuat dalam satu baris tersendiri, seperti contoh di bawah ini:p {color:red;text-align:center}
CSS Commentsp
{
color:red;
text-align:center;
}
Comments digunakan untuk menerangkan kode/script yang memudahkan kita atau orang lain ketika suatu saat ingin meng-edit source code. Perintah comments ini diindahkan oleh browser. Perintah comments diawali dengan "/*" dan diakhiri dengan "*/". Lihat contoh di bawah ini:
/*This is a comment*/
p
{
text-align:center;
/*Ini adalah contoh comment*/
color:black;
font-family:arial
}
Belajar CSS
Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan dengan mudah.
Pertama-tama kita kenalan dulu dengan CSS. CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan kita untuk mendesain (style) tampilan dokumen (terutama HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.
Memasang CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:
Tanpa CSS:
Apapun yang terjadi, berusahalah untuk selalu menggunakan External CSS dengan memisahkan file CSS dengan file HTML nya
CSS terdiri dari dua bagian utama yaitu: selector, dalam hal ini H1 dan deklarasi yang berada diantara kurung kurawal
Sekarang kita coba mengkombinasikan banyak style. Cobalah kode CSS berikut ini dan simpan dengan nama style.css:
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property
Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:
Scrollbar
Dengan menggunakan CSS anda juga dapat mengubah warna pada scrollbar yang terdapat dikanan browser. CSS memiliki 8 properties untuk mengubah warna pada scrollbar yaitu:
Coba kode berikut ini:
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
Kunjungi sibaho atau google.com
Pada umumnya warna link untuk halaman web yang telah dikunjungi berbeda dengan yang belum dikunjungi. CSS dapat membedakannya dengan yang disebut pseudo-class
Itulah semua dasar CSS, semakin dalam anda mempelajari CSS maka anda akan menemukan hal-hal menarik lainnya. Selamat mencoba.
Sumber : www.dhimasronggobramantyo.com
Pertama-tama kita kenalan dulu dengan CSS. CSS merupakan kependekan dari Cascading Style Sheet yang memungkinkan kita untuk mendesain (style) tampilan dokumen (terutama HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.
Memasang CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:
Tanpa CSS:
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1><font face="Verdana">Belajar CSS</font></h1>
</body>
</html><html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1 { font-family: verdana; }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>h1 { font-family: verdana; }<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html><link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.Apapun yang terjadi, berusahalah untuk selalu menggunakan External CSS dengan memisahkan file CSS dengan file HTML nya
CSS terdiri dari dua bagian utama yaitu: selector, dalam hal ini H1 dan deklarasi yang berada diantara kurung kurawal
{font-family: verdana}. Didalam deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini font-family dan value dalam hal ini verdana. Dalam contoh diatas hanya mengubah sebuah tag yaitu tag <h1> menjadi teks dimana jenis hurufnya menjadi verdana. Kita dapat mengkombinasikan berbagai macam style menjadi satu. Kita akan segera mempelajarinya.Sekarang kita coba mengkombinasikan banyak style. Cobalah kode CSS berikut ini dan simpan dengan nama style.css:
.title {
font-size: 13px;
color: #6095d0;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
.thank {
font-size: 11px;
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
}
p {
font-size: 12px;
color: #000000;
font-family: verdana;
}<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<font class="title">Halo dunia</font>
<p>Saya mau belajar CSS, ini kode CSS saya yang pertama</p>
<font class="thank">Terimakasih</font>
</body>
</html>Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property
font-family, yang mirip dengan tag <font>. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif
font</h1>body {Arial, Verdana, Geneva, Helvetica, sans-serif}body {Times New Roman, Times, Georgia, serif}body {Courier New, Courier, monospace}Scrollbar
Dengan menggunakan CSS anda juga dapat mengubah warna pada scrollbar yang terdapat dikanan browser. CSS memiliki 8 properties untuk mengubah warna pada scrollbar yaitu:
scrollbar-arrow-color, scrollbar-basecolor, scrollbar-face-color, scrollbar-shadow-color, scrollbar-darkshadow-color, scrollbar-3dlight-color, scrollbar-highlight-color dan scrollbartrack-color. Properties-properties ini mengatur warna untuk setiap bagian dari scrollbar.Coba kode berikut ini:
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #8b98b7;
scrollbar-shadow-color: #8b98b7;
scrollbar-3dlight-color: #8b98b7;
scrollbar-arrow-color: #8b98b7;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #8b98b7;
scrollbar-base-color: #ffffff;
}Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}Kunjungi <a href="http://sibaho.blogspot.com"
class="link1">sibaho</a> atau <a href="http://www.google.com" class="link2">google.com </a>Kunjungi sibaho atau google.com
Pada umumnya warna link untuk halaman web yang telah dikunjungi berbeda dengan yang belum dikunjungi. CSS dapat membedakannya dengan yang disebut pseudo-class
':link', ':hover', ':active' dan ':visited' untuk membedakannya::linkpseudo-class merupakan link yang belum dikunjungi.:visitedpseudo-class merupakan link yang telah dikunjungi.:hoverpseudo-class applies merupakan link apabila pointer mouse melewati sebuah link.
Itulah semua dasar CSS, semakin dalam anda mempelajari CSS maka anda akan menemukan hal-hal menarik lainnya. Selamat mencoba.
Sumber : www.dhimasronggobramantyo.com
Belajar XML Template Blogspot
Semua template blogspot terdiri dari bagian-bagian yang selalu mencakup halaman HTML sempurna yaitu bagian header dan body, bagian header juga berisi kode HTML yang standar, maksudnya bisa diisi sama dengan bagian HTML umumnya, Demikian pula dengan bagian body. Beberapa yang perlu diperhatikan paling dulu adalah sebagai berikut:
CSS
Bagian CSS (Cascading Style Sheet) pada blogspot secara standar langsung diintegrasikan dan ditulis langsung pada bagian header template dan selalu dimulai dari kode <b:skin><![CDATA[ dan diakhiri dengan kode ]]></b:skin>.
Isi Body
Body berisi keseluruhan dari halaman yang akan ditampilkan saat blog dibuka dengan browser. Beberapa ID dan Class untuk CSS biasanya berlainan tiap template, karena nama variabel tersebut dibuat sekehendak hati pembuat template, tapi ada bahasa tertentu yang pasti ada disebuah template, karena kode tersebut berkaitan dengan kode dasar atau perintah pemanggilan data pada database blogspot. Nah kode inilah yang harus kita pahami, bukan variabel atai nama-nama Class dan ID dari pembuat template.
Dengan mengerti maksud dari barisa kode, kita bisa membuat macam-macam model dan atau memangkas kode yang tidak perlu agar load terhadap database (query) bisa lebih singkat. Sebagai contoh saja saya gunakan pada kode widget "Arsip (Archive)". Kode standarnya kalau kita memasang widget ini adalah seperti dibawah ini:
Kalau dari kode pendek saja penjelasannya panjang bagaimana mungkin saya jelaskan semua kode diatas? bisa keriting jari saya nanti. Barisan kode panjang diatas itu memiliki kode perintah utama, perintah pendukung dan sub perintah pendukung. Perintah utama adalah yang berwarna biru dan yang warna lainnya adalah perintah pendukung yang akan dilakukan saat salah satu opsi perintah utama dipilih. Perintah utama adalah kode dibawah ini:
Perintah menu-menu ada dibagian yang memiliki warna-warna lain dibawahnya.
Saya sendiri tidak pernah memakai kode lengkap seperti diatas, karena malah membingungkan saya karena panjangnya kode. Selain itu jika ingin membuat template yang "aneh" dan dipaksakan, maka seringkali kode diatas tidak bisa digunakan, harus memanggil dalam bahasa berbeda agar sesuai keinginan. Ini saya lakukan pada banyak kasus berbeda. Sebagai contoh jika saya hanya ingin menampilkan arsip dalam bentuk flat (biasa), maka saya akan mengambil kode untuk flatnya saja tanpa menyertakan yang lain. Sehingga kode menjadi seperti dibawah ini:
Sumber : www.ateonsoft.com
CSS
Bagian CSS (Cascading Style Sheet) pada blogspot secara standar langsung diintegrasikan dan ditulis langsung pada bagian header template dan selalu dimulai dari kode <b:skin><![CDATA[ dan diakhiri dengan kode ]]></b:skin>.
Isi Body
Body berisi keseluruhan dari halaman yang akan ditampilkan saat blog dibuka dengan browser. Beberapa ID dan Class untuk CSS biasanya berlainan tiap template, karena nama variabel tersebut dibuat sekehendak hati pembuat template, tapi ada bahasa tertentu yang pasti ada disebuah template, karena kode tersebut berkaitan dengan kode dasar atau perintah pemanggilan data pada database blogspot. Nah kode inilah yang harus kita pahami, bukan variabel atai nama-nama Class dan ID dari pembuat template.
Dengan mengerti maksud dari barisa kode, kita bisa membuat macam-macam model dan atau memangkas kode yang tidak perlu agar load terhadap database (query) bisa lebih singkat. Sebagai contoh saja saya gunakan pada kode widget "Arsip (Archive)". Kode standarnya kalau kita memasang widget ini adalah seperti dibawah ini:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget><b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>Kalau dari kode pendek saja penjelasannya panjang bagaimana mungkin saya jelaskan semua kode diatas? bisa keriting jari saya nanti. Barisan kode panjang diatas itu memiliki kode perintah utama, perintah pendukung dan sub perintah pendukung. Perintah utama adalah yang berwarna biru dan yang warna lainnya adalah perintah pendukung yang akan dilakukan saat salah satu opsi perintah utama dipilih. Perintah utama adalah kode dibawah ini:
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>Perintah menu-menu ada dibagian yang memiliki warna-warna lain dibawahnya.
Saya sendiri tidak pernah memakai kode lengkap seperti diatas, karena malah membingungkan saya karena panjangnya kode. Selain itu jika ingin membuat template yang "aneh" dan dipaksakan, maka seringkali kode diatas tidak bisa digunakan, harus memanggil dalam bahasa berbeda agar sesuai keinginan. Ini saya lakukan pada banyak kasus berbeda. Sebagai contoh jika saya hanya ingin menampilkan arsip dalam bentuk flat (biasa), maka saya akan mengambil kode untuk flatnya saja tanpa menyertakan yang lain. Sehingga kode menjadi seperti dibawah ini:
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include data='data' name='flat'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
</b:widget><b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>Sumber : www.ateonsoft.com
Subscribe to:
Posts (Atom)
