Mengubah Background dan Font pada blog

Merubah Background blog

Bila kita mempunyai sebuah blog, pasti warna dari blog itu ingin kita beri warna yang berbeda dengan blog yang lain dan memiliki cirri khas dari si pemilik blog itu sendiri. Lalu bagaimana cara merubahnya?? Bila anda memiliki blog di blogspot maka cara nya adalah :

a.      Pastikan anda berada pada layar Dashboard klik pada link Layout.

b.      Bila sudah tampil layar Template, pilih tab Fonts and Colors dengan cara mengklik pada   link Fonts and Colors.

c.       berikut beberapa pilihan yang bias diatur warna nya sesuai yang anda sukai.

·            Page Background Color untuk merubah warna latar belakang blog.

·            Text Color untuk merubah warna text dari artikel di blog.

·            Link Color untuk merubah warna text yang berupa link.

·            Page Header Background untuk merubah warna latar belakang judul blog.

·            Page Header Text Color untuk merubah warna text dari judul blog.

·            Page Hearder Corners Color untuk merubah warna sudut bagian judul blog.

·            Main Background Color untuk merubah warna utama blog (bagian utama).

·            Border Color untuk merubah warna garis pembatas.

·            Data Header Color untuk merubah warna bagian header (biasanya tanggal arsip).

·            SideBar Title Background Color untuk merubah warna judul pada sidebar.

·            SideBar Title Text Color untuk merubah warna judul text pada sidebar.

·            Text Font untuk merubah jenis huruf (bagian artikel).

·            Page Header Font untuk merubah jenis huruf bagian judul.

d.      untuk mengubah warnanya dan jenis huruf  dengan cara memilih element pada panel paling kiri, lalu pilih warna atau font yang akan digunakan (panel disebelahnya).

e.      Untuk melihat hasil perubahannya bisa dilihat langsung di bagian bawah.

f.        Untuk save perubahan yang dilakukan dengan mengklik save changes

g.      Untuk mengembalikan perubahan ke bentuk awal sebelum dirubah dengan cara klik clear edits

Untuk mengubah backgroun body blog anda bila anda berada pada editor html blog anda dan carilah CSS yang seperti :

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

Bila blog anda emiliki code ($bgcolor), maka anda dapat menggunakan cara diata, namun bila tidak anda harus merubahnya secara manual dengan menambahkan kode warna seperti #000000 berati berwarna hitam, #ffffff berarti warna putih.

Bila anda ingin menggantinya dengan gambar maka caranya pada code CSS yang bertuliskan ( background:#......; ) cukup anda ganti dengan background: url('alamat url foto / gambar yang nada ingin jadikan background');

Untuk merubah background bagian sidebar blog anda maka cari code CSS berikut :

#sidebar-wrapper {

width: 345px;

float: $endSide;

border:2px solid red;

background:#fff;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Bila seperti di atas maka backgroundnya berwarna putih karena kodenya background:#fff;, maka bila ingin mengganti warna dengan cara mengganti kode tersebut bila ingin diganti dengan foto anda cara nya sama dengan cara mengubah backgroun body blog anda.

Begitu juga dengan cara merubah background bagian main hanya tinggal mencari code css seperti di bawah ini :

#main-wrapper {

width: 600px;

float: $startSide;

border:2px solid red;

background:#fff;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Untuk selanjutnya caranya sama.

Merubah font pada blog.

a.       Masuk ke pengaturan dan klik Edit HTML dan cari kode seperti berikut :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-weight:normal;
line-height:1.4em;
border-bottom:1px dashed #ceceae;

b.      Sisipkan kode font-family:Georgia; tepat diatas kode  font-weight:normal;

c.       Kemudian cari kode seperti berikut :

.post-body {
text-align:justify;
margin: 3em 0 .75em;
line-height: 1.6em;
border-bottom:1px dashed #ceceae;

sisipkan kode font-weight:normal;  tepat diatas text-align:justify;

Kemudian save template