Perintah CSS (2)

Oktober 1, 2007 — prim

Sebelumnya kami sudah menjelaskan sedikit tentang beberapa perintah CSS. Baiklah sekarang kita akan membahas beberapa perintah CSS yang lain.

Membuat format CSS sendiri
Anda bisa membuat sebuah format CSS yang nantinya tinggal di hubungkan dengan bentuk yang akan ditampilkan. Misalnya Format Sidebar kiri dan Isi / Main

Bentukya sebagai berikut :

#main {
margin:0 0 0 10px;
width:410px;
float:right;
padding:0 8px 10px 8px;
border:1px solid #999;
}
#sidebar-left {
background:#66CCFF;
margin:0;
width:150px;
float:left;
padding:0 5px 100px 5px;
font:#663333;
font-size:85%;
border:1px solid #000;
}

Beberapa penjelasan perintah diatas:
Margin = batas dari main / Sidebar
Width = lebar dari area sidebar atau main
Float = Letak dari pada Sidebar dan Main bisa di Left atau right
Background = format warna atau gambar dari background
Font = format warna tulisan
Font-size = Ukuran tulisan
Padding = Ketebalan sisi area dengan textnya
Border = garis yang ada di sekeliling text

Kemudian untuk menghubungkan perintah CSS ke bentuk yang di inginkan sebagai berikut :

<!– Begin #sidebar –>
<div id=”sidebar-left”><div id=”sidebar2″>

Isi Sidebar / sisi

</div></div>
<!– End #sidebar –>

<!– Begin #main –>
<div id=”main”><div id=”main2″>

Isi dari pada Postingan / main

</div></div>
<!– End #main –>

Ketrangan :
<div id=”sidebar-left”> adalah untuk mengambil format yang dibentuk oleh side bar kiri
<div id=”main”> adalah untuk mengambil format yang dibentuk oleh main / postingan

Bila anda ingin mempelajari perintah HTML untuk memformat peritah-perintah CSS, saya rekomendasikan anda ke situs ini http://www.htmldog.com

Mau template blogger gratis,Klik disini
Ditulis dalam CSS. 3 Komentar »

Mengenal perintah CSS (1)

September 21, 2007 — prim

CSS kepanjangannya adalah Cascading Style Sheet, yaitu perintah untuk memformat atau membentuk berbagai macam variasi baik text maupun variasi lain dengan melepaskan perintah HTML yang begitu banyak dan diulang-ulang. Jadi dengan CSS ini satu perintah sudah bisa mewakili perintah-perintah lainnya. Saat ini perintah CSS sudah mendominasi dalam pembuatan blog maupun layout blogger. Kalau anda lihat source kode blogger layout, rata-rata menggunakan perintah CSS.

Perintah CSS ada 2 yaitu perintah external dan internal. CSS eksternal ditulis menggunakan text editor biasa seperti halnya HTML dan disimpan dalam file tersendiri yang ber ekstensi CSS, misalnya SATU.CSS, sedangkan CSS internal perintahnya bergabung dengan source kode yang kita buat langsung dengan perintah HTML, jadi CSS internal ini kita cukup punya satu file.

CSS internal
Perintah ini diletakkan diantara perintah <head> dan </head> kemudian perintah tersebut diawali dengan <style type=”text/css”> dan diakhiri dengan </style>

Kemudian masing-masing perintahnya mempunyai bentuk sebagai berikut :
nama perintah {

format perintah
}

Lihat contoh dibawah ini


<head>

<style type=”text/css”>

a:link {
color:#0033ff;
text-decoration:bold
}

</style>
</head>

Coba kita perhatikan perintah a:link { , ini adalah nama perintah untuk text yang mempunyai link ke halaman lain. Dan mempunyai 2 jenis format perintah yaitu warna color:#0033ff; dan format text tebal text-decoration:bold .

Masih banyak perintah CSS yang lain yang dapat anda gunakan, misalnya :
a:visited adalah untuk text link yang pernah dikunjungi
a:hover adalah text link bila mouse diarahkan kesana
body adalah untuk memformat halaman utama

Mau template blogger gratis,Klik disini
Ditulis dalam CSS. 1 Komentar »

Variabel data dari blogger

September 20, 2007 — prim

Dalam membuat Layout kita harus memahami bahwa yang kita desain adalah tampilan atau kulinya saja, makanya layout disebut juga skin. Artinya data yang diiput baik berupa posting, judul atau koementar-komentar harus tetap disediakan. Untuk menghubungkan antara data yang diinput tersebut supaya tampil diblog, maka diperlukan media penampung yang disebut database.

Kelompok-kelompok media penampung data itulah yang disebut variabel. Variabel ditandai dengan lambang <$nama variabel$> dan variabel tidak boleh ada spasi, misalnya <$BlogURL$>, <$BlogDescription$>, <$BlogDateHeaderDate$> dan sebagainya. Jadi varibel tersebut tidak boleh dihapus.

Berikut contoh Variabel dan pembagian kategorinya

  1. Bagian Header
    <h1 id=”blog-title”>
    <itempage><a href=”">”></itempage>
    <$BlogTitle$>
    <itempage></a></itempage>
    </h1>
    <p id=”description”><$BlogDescription$></p>
    </div>

  2. Bagian Side bar / sisi

    <!– Begin #profile-container –>

    <$BlogMemberProfile$>

    <!– End #profile –>

    <MainOrArchivePage>
    <h2 class=”sidebar-title”><$I18NLinks$></h2>
    <ul>
    <li><a href=”http://news.google.com/”>Google News</a></li>
    <li><a href=”http://help.blogger.com”>Edit-Me</a></li>
    <li><a href=”http://help.blogger.com>Edit-Me</a></li>
    </ul>
    </MainOrArchivePage>

  3. Bagian Main / isi
    Untuk bagian ini tidak semua dapat kami tulis, karena Kode HTMLnya terlalu banyak, jadi saya ambil seagian saja, contohnya dibawah ini

    <div class=”post”><a name=”<$BlogItemNumber$>“></a>
    <BlogItemTitle>
    <h3 class=”post-title”>
    <BlogItemUrl><a href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
    <$BlogItemTitle$>
    <BlogItemUrl></a></BlogItemUrl>
    </h3>
    </BlogItemTitle>

    <div class=”post-body”>
    <div>
    <$BlogItemBody>
    amp;gt;
    amp;gt;
    amp;gt;
    amp;gt;
    amp;gt;
    </div>

Dan masih banyak lagi variabel yang digunakan dalam blogger tersebut. Kalau anda lihat source kode sebuah blogger baik milik anda maupun milik rekan blogger, biasanya sudah anda penegelompokan apakah itu bagian header, bagian sidebar, bagian main, maupun bagian footer. Kemudian ada satu perintah <Div> dan </Div> . Ini adalah perintah untuk mengambil perintah CSS yang sudah disiapkan, kita akan pelajari lebih lanjut di postingan lainnya.

Kemudian ada satu perintah lagi yaitu <!– Begin #profile-container –> , perintah ini adalah supaya antara <!– dan –> tidak tampil di blog anda.

Mau template blogger gratis,Klik disini
Ditulis dalam CSS. 1 Komentar »

Mengenal layout blogger

September 17, 2007 — prim

Baiklah untuk kali ini, kita akan mengenal bagaimana memulai membuat layout atau template blogger. Secara umum layout untuk blogger dapat dibagi 3 bagian utama, yaitu :

  1. Bagian atas (Header), berisi Title blog dan description blog
  2. Bagian Isi (main) , berisi tanggal posting, judul posting, isi posting dan komentar
  3. Bagina sisi (sidebar), berisi profil, Link, Pengelompokan postingan, tampilan shoutbox dan lain-lain
  4. Bagian bawah (Footer), berisi text seperti Desain by, link, powered by dan lain sebagainya.

Dalam pembahasan ini, saya menggunakan perintah dasar HTML, memang sekarang sudah ada perintah yang lebih praktis yaitu XML. Tapi perintah dasar HTML ini juga sangat perlu diketahui sebelum melangkah ke perintah yang lebih tinggi tersebut. Jadi saya anggap anda sudah mengetahui perintah HTML. Jika belum anda bisa pelajari dulu disini.

Dalam membuat layout blogger, ada 2 jenis pilihan background, yaitu :

  1. Background berupa kotak, contohnya dibawah ini.
  2. Background berupa desain bebas, contohnya dibawah ini.

Perbedaan dari kedua bentuk diatas yaitu, untuk bentuk kotak, kita tidak memerlukan program desain lainnya, cukup gunakan perintah HTML dan dan digabung dengan perintah CSS (Cascading style sheets), yaitu perintah untuk memformat perintah dengan cepat. Untuk background desain bebas, kita perlu membuat terlebih dahulu di program desain lain, misalnya photoshop, setelah itu di transfer ke program editor dan tambahkan variabel dari blogger.

Ini artikel awal untuk membuat layout, nantikan artikel berikutnya.

Mau template blogger gratis,Klik disini
Ditulis dalam CSS. 1 Komentar »
« Tulisan-tulisan yang lebih lama