Modifikasi Template Bagi Blogger Pemula

wahab

Template Hack

2015/05/01

15 Komentar

Modifikasi Template

Modifikasi Template Bagi Blogger Pemula - Halo sobat Blogger, kali ini saya akan membuat sebuah artikel yang khususnya bagi pemula untuk memodifikasi Template agar lebih keren, wow, dan enak di pandang mata.

kali ini saya hanya memberikan dasar-dasarnya sebuah Template, untuk tampilan/template sangat berpengaruh untuk Blog sobat, dimana template yang enak dipandang mata juga bisa membuat blog kita menjadi lebih terkenal, dan di favoritkan oleh para pengunjung.

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

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

Body

Pada dasarnya template akan menampilkan warna maupun gambar yang dijadikan Background, karena background ini adalah tampilan utama dari blog sobat, untuk mengganti warna atau gambar pada background cari kode body{ atau body { , jika tidak ditemukan keduanya, fokuskan pencarian pada kode body

, biasanya kode tadi akan ditemukan pada awal-awal CSS di template sobat, CSS body { akan terlihat seperti ini pada template sobat :

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBo57I-jw6BWJEfOKchxKlBtkVJa8Ale5FlqC3TlAdUDMN4QREeF713_UjH3O3eJw0P4Iuv53tKHOZsF6LmKcmHP7uyHdvpUgJVg67hAD5zw3QXVW1nTPKGzxNZtN_fs9R76IFNldddeO/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 adalah background yang menggunakan gambar, yaitu CSS template blog saya sendiri

Untuk memodifikasinya : pada Background diatas tadi saya menggunakan image (gambar), jika sobat ingin mengganti dengan warna saja buat kodenya seperti ini :

body{background:#FFFFFF...}

di atas kode tadi membuat background blog sobat berwarna putih, jika sobat ingin mengganti warna yang lain ganti kode #FFFFFF diatas, dan ganti dengan warna sesuai keinginan sobat, untuk mencari HTML warna klik disini -> ColorSchemer

Outer-Wrapper atau Wrapper

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

Biasanya kode Outer Wrapper akan nampak seperti 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 membuat kolom wrapper seperti template blog saya sendiri (agak berbeda sedikit)

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

Header

Header adalah kolom tempat dimana terdapat logo blog kita atau text blog kita :

Biasanya css Header template sobat akan nampak seperti ini :

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

itu adalah kandang dari beberapa kolom di header, untuk memodifikasinya sangan mudah, mengubah tinggi header, lihat kode height di atas, gantilah ukuran 130px dengan 140px/120px sesuai keinginan sobat, dan jika ingin mengganti warna background, tambahkan saja kode background:#ff6666 , lalu ganti dengan warna background keinginan sobat,

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

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

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

Pengelola Blog : ABDUL WAHAB

Judul : Modifikasi Template Bagi Blogger Pemula
Ditulis oleh :Blog Shiro pada hari 2015/05/01
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Modifikasi Template Bagi Blogger Pemula
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2013/11/modifikasi-template-blogger.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.