Cara Mengatur Tataletak Elemen Pada Template Blog

Kalau kau berniat untuk membuat desain blog sendiri,harus mengetahui dasar HTML dan Dasar CSS sehingga dapat mengatur atau menambah tata letak dari susunan elemen yang ada didalam template blog.
Sebuah desain blog yang rapi,biasanya selalu lengkap dengan papan navigasi yang disebut dengan sidebar.Sidebar dapat diletakkan disebelah kiri ataupun kanan dari elemen konten.Bagaimana caranya biar elemen elemen tersebut dapat berada pada posisi yang rapi sesuai dengan keinginan?,,,,,
Marilah kita bahas bersama sama secara simple biar gampang dimengerti.

Turorial berikut hanyalah membahas mengenai teknik untuk menatur tataletak elemen pada bog.Untuk selanjutnya kau dapat mengembangkannya sendiri,misalnya memberi border,background berwarna warni sesuai dengan kehendak.Baca: Cara menentukan warna yang cocok untuk template blog

1.Membuat posisi elemen induk sempurna berada ditengah screen,jika layar monitor komputer pengguna bertype monitor "wide".

Kita akan mengatur posisi elemen induk (biasanya para desainer menggunakan id "blog-wrapper"),hal ini dimaksudkan untuk mempermudah  identifikasi setiap elemen yang ada pada template blog.
Kalau "body" yaitu tag HTML yang menunjukkan seluruh halaman sebuah situs/blog.Seluruh elemen yang berada di bawah body yaitu elemen elemen yang akan ditampilkan di web browser pengguna.Seperti pada tag HTML yang lain,body dapat dijadikan sebagai selector pada CSS untuk diatur/dimanipulasi.

Pertama kita buat dahulu elemen induk,boleh kita sebut sebagai blog-wrapper.

--------------
<body>
<div id='blog-wrapper'>
---------
---------
---------
</div> <!-- End Of Blog Wrapper-->
</body>


Sekarang kita buat CSSnya untuk mengatur letak blog wrapper (elemen induk) biar posisinya berda ditengah body.ID HTML-nya yang kita buat yaitu blog-wrapper,dan akan kita atur posisinya dengan menambahkannya sebagai CSS selector,penulisan:

div#blog-wrapper{
border: 1px solid #333333;
margin:0 auto;
padding:0;
text-align:center;
width:980px;
position:relative;
}

Perlu diketahui,declarator CSS yang memungkinkan elemen berada ditengah body yaitu margin:0 auto.Namun width juga dilarang dilupakan,jika tidak ditetapkan maka percuma saja pengaturan ini.Contoh gambar ilustrasi dari hasilnya:
ID dan Class HTML nya:

<div id='elemenfooterwrapper'>
<div class='elemenfooter>
Isi elemen
</div>
<div class='elemenfooter>
Isi elemen
</div>
<div class='elemenfooter>
Isi elemen
</div>
</div> <!--End elemenfooterwrapper-->

Penulisan CSSnya:

div#elemenfooterwrapper{width:980px;
margin:0 auto;
padding-top:10px;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc
}

div.elemenfooter{float:left;
width:32.2%;
text-align:left;
line-height:1.3em;
overflow:hidden;
margin:2px;
padding:0 0 5px
}

Sedikit klarifikasi CSS:
Pada elemen kita menggunakan width bukan satuan px,namun menggunakan satuan persen(%).Hal ini sebab kita bermaksud biar ketiga elemen tersebut mempunyai ukuran yang sama.Dalam rujukan diatas width yang digunakan yaitu 32.2%,artinya jikalau dikalikan tiga akan sama dengan kebutuhan.Dengan begitu lebar ketiga elemen lebarnya akan otomatis menyesuaikan dengan lebar elemenfooterwrapper sebagai elemen induk.Jika elemen tidak tertata secara horizontal,bisa dipastikan bahwa width elemen (dalam %) tersebut terlalu banyak.
Gambar:

 sehingga dapat mengatur atau menambah tata letak dari susunan elemen yang ada didalam  Cara mengatur tataletak elemen pada template blog

Code code diatas hanyalah sebagai media klarifikasi saja biar lebih gampang dipahami.Jadi code diatas hanyalah dasar pembuatan tataletak elemen dari sebuah template blog.

Belum ada Komentar untuk "Cara Mengatur Tataletak Elemen Pada Template Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel