Mengatur Tampilan Blog dengan CSS

Untuk mengatur tampilan blog ini saya gunakan CSS yang digabungkan dengan HTML. Hal-hal yang saya ubah disini adalah warna tulisan, background color, image, border, serta susunan blog saya sehingga susuan blog saya tidak lagi seperti susunan pada tempalate yang disediakan.
Langkah-langkah yang saya lakukan :
1. Login ke blog.
2. Pilih kostumisasi lalu tata letak kemudian pilih template baru.
3. Pada template ini pilih template yang simple.
4. Setelah itu klik edit HTML.

Susunan blog ini diatur dengan konsep tabel-tabel sehingga memudahkan pengaturannya. Untuk menyusun tampilan dalam bentuk tabel digunakan coding sebagai berikut :
<table>
<tr>
<td>
<div class='top-menu-bar' id='top-menu-bar'>
<table align='right'>
<tr>
<td width='100'>
<a href='http://angelinavania.blogspot.com'>Home</a></td>
<td width='100'>
<a href='http://angelinavania
<td width='75'>
<a href='http://www.facebook.com/people/Vania-Angelina/1234124137'>My Facebook</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style='background-color: #FFBBE8; border: 5px solid red;'><b:section class='main-content' id='main-content' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</td>
</tr>
</table>

</td>
<td valign='top'>
<b:section class='side-bar-left' id='side-bar-left' showaddelement='yes'>
<b:widget id='Text1' locked='false' title='Welcome..........' type='Text'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
</b:section>
</td>
<td valign='top'>
<b:section class='side-bar-right' id='side-bar-right' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Image1' locked='false' title='Mashimaro' type='Image'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</td>
</tr>
</table>


Untuk membuat konfigurasi link pada top menu bar digunakan coding sebagai berikut :
<style id='internal-style' type='text/css'>
#top-menu-bar {padding: 3px 3px 3px; background-color: #b47b10; color: #FFFFFF; font-weight: bolder;}
#top-menu-bar a {color: #C3D9FF; text-decoration: none;}
#top-menu-bar a:hover {background-color: transparent; color: #FFFFFF; text-decoration: underline;}
</style>

Untuk membuat border digunakan coding sebagai berikut :
<td style='background-color: #FFBBE8; border: 5px solid red;'><b:section class='main-content' id='main-content' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</td>

Demikianlah penjelasan sekilas tentang coding-coding yang saya gunakan untuk mengatur tampilan blog saya. Semoga bermanfaat :p