Modifikasi Template Bagi Blogger Pemula - Halo sobat Blogger, kali ini sukmagie akan membuat sebuah artikel yang khususnya bagi pemula untuk memodifikasi Template agar lebih keren, wow, dan enak di pandang mata.
 |
| Modifikasi Template |
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/AVvXsEiVloCVDZane2qkf-QAwlw4F-2twXjXIhNi3pdy8wujB5z-S7y3IDA2Sf1Rb20hLfVZEMhfv6GAPoP-KCT1v1njODXGSDnpa4WfqvzVcDspW8F6LC7tSBCsQnHzzxcDXzMfz_UJ9ebUA44i/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 -> ColorSchemerOuter-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-wrapperatau#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 Tutorial Blogger 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.
0 Comments
EmoticonEmoticon