Modifikasi Template Bagi Blogger Pemula

Modifikasi Template

Modifikasi Template Bagi Blogger Pemula - Halo sahabat Blogger, kali ini saya akan menciptakan sebuah artikel yang khususnya bagi pemula untuk memodifikasi Template semoga lebih keren, wow, dan yummy di pandang mata.

kali ini aku hanya menunjukkan dasar-dasarnya sebuah Template, untuk tampilan/template sangat besar lengan berkuasa untuk Blog sobat, dimana template yang yummy dipandang mata juga sanggup menciptakan blog kita menjadi lebih terkenal, dan di favoritkan oleh para pengunjung.

OK, kita pribadi saja ketahap dimana kita memodifikasi sebuah Template.

Memodifikasi Dasar-Dasar CSS Template Blog
Untuk memodifikasi sebuah template sangatlah gampang disini aku telah membagikan dasar-dasar pada Template sobat, silahkan disimak. 

Body

Pada dasarnya template akan menampilkan warna maupun gambar yang dijadikan Background, sebab background ini yaitu tampilan utama dari blog sobat, untuk mengganti warna atau gambar pada background cari instruksi body{ atau body { , bila tidak ditemukan keduanya, fokuskan pencarian pada instruksi body

, biasanya instruksi tadi akan ditemukan pada awal-awal CSS di template sobat, CSS body { akan terlihat ibarat ini pada template sahabat :

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupRiBNOYfGlK0qnRGsYuHXuf7_IOEuDnP2jn3T8k3wnG3Eoz0OjcjYxZzpn3GEFrIj2PUSO264SllxRL4VHTgM29S00NAlCkbJzmKZ_ox9Ynz4EJsMHe5l5kobqnTA4uGsET_st8sM12m/s80/blogmodifus-bg.jpg) repeat;margin:0;padding:0 0 0 0;color:#555;font:x-small Arial,Geneva,sans-serif;font-size/* */:/**/small;font-size:/**/small;text-align:center;}

kode body diatas tadi yaitu background yang memakai gambar, yaitu CSS template blog aku sendiri

Untuk memodifikasinya : pada Background diatas tadi aku memakai image (gambar), bila sahabat ingin mengganti dengan warna saja buat kodenya ibarat ini :

body{background:#FFFFFF...}

di atas instruksi tadi menciptakan background blog sahabat berwarna putih, bila sahabat ingin mengganti warna yang lain ganti instruksi #FFFFFF diatas, dan ganti dengan warna sesuai cita-cita sobat, untuk mencari HTML warna klik disini -> ColorSchemer

Outer-Wrapper atau Wrapper

Outer-Wrapper ini yaitu CSS untuk kolom body pada Template sobat, bukan body ibarat instruksi diatas tadi, tapi body disini yaitu body yang menampung kolom postingan, header, sidebar, dll.

Biasanya instruksi Outer Wrapper akan nampak ibarat ini :

#outer-wrapper{width:980px;background:#fff;position:relative;border:5px solid #d9d9d9;margin:0 auto 20px;padding:0 0 20px 0;font-size:14px;text-align:left;overflow:hidden;}

Kode diatas tadi menciptakan kolom wrapper ibarat template blog aku sendiri (agak berbeda sedikit)

Untuk memodifikasinya gampang saja cari instruksi #outer-wrapper bila tidak ditemukan cari instruksi ibarat ini #wrapper , bila sudah ditemukan, lihat lah instruksi width yang berarti lebar, bervariasi lebar wrapper ini pada template-template, untuk mengganti lebar instruksi wrapper tadi ganti width:980px dengan width:690px yang berarti lebar wrapper akan mengecil, atau sebaliknya, bila ingin menambahkan lebar nya buat css ibarat ini width:1000px , atau sanggup sahabat variasikan sendiri ingin berapa lebar kolom wrapper pada template blog sobat.

Header

Header yaitu kolom kawasan dimana terdapat logo blog kita atau text blog kita :

Biasanya css Header template sahabat akan nampak ibarat ini :

#header-wrapper{overflow:hidden;height:130px;padding:0 20px}

itu yaitu sangkar dari beberapa kolom di header, untuk memodifikasinya sangan mudah, mengubah tinggi header, lihat instruksi height di atas, gantilah ukuran 130px dengan 140px/120px sesuai cita-cita sobat, dan bila ingin mengganti warna background, tambahkan saja instruksi background:#ff6666 , kemudian ganti dengan warna background cita-cita sobat,

untuk memodifikasi gambar logo pada header cari saja instruksi #header img { dan silahkan sahabat sesuaikan dengan header-wrapper tadi.

Untuk melengkapinya cari instruksi #post-wrapper atau #posting , instruksi tersebut yaitu css untuk kolom postingan, dan cari instruksi #sidebar { atau #sidebar-wrapper , instruksi tersebut yaitu css untuk kolom sidebar.

Selesai sudah artikel satu ini, maaf bila aku tidak sanggup memasukan semua inti dasar-dasar dari template blog, hanya itu saja yang sanggup aku beritahukan, untuk segala kekurangan aku ucapkan maaf, Wassalam.

Tweet

Subscribe to receive free email updates: