Loading...
ucapan
Tools Dahsyat untuk Membuat Konten Artikel Unik Tanpa Batas & Niche Apapun yang Anda Inginkan

Search, Edit, Spin, & Posting Ke Semua Blog Anda Cukup dari Satu Dashboard Saja.

Support WordPress, WordPress.com, Blogspot, Tumblr, & Twitter

Tools untuk Membuat Konten Artikel

Subsrcibe Ya.. Dan Tunggu Tutorial Lewat Video


Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


2015/05/01

Modifikasi Template Bagi Blogger Pemula

Modifikasi Template
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(http://2.bp.blogspot.com/-Hys5LEjGY4c/UcxnR8EVkXI/AAAAAAAAFiY/Spo2yCAHPIs/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

Body, background blog

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)

Wrapper, kolom posting


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 :

Kolom Header

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.

Title : Modifikasi Template Bagi Blogger Pemula
Description : Modifikasi Template Modifikasi Template Bagi Blogger Pemula - Halo sobat Blogger, kali ini saya akan membuat sebuah artikel yang kh...

17 komentar

Pas nih buat saya sob .. terimakasih ilmunya

Oke sob keren nich modifikasinya :)

om pajri kan saya pake template berimagz ,, pas cek validator w3 ada error gini https://lh4.googleusercontent.com/-iHfVbBefNhE/Un9QwBLUeGI/AAAAAAAAChk/btqGD7g94Y8/h69/test.png Mohon solusinya ..

dibagian tag menu search .

baru tau kl background bs diganti gambar :) trims

makasih gan tutorialnya :D pas nih buat nubi kaya saya :)
depermana.com

wah keren gan, izin jambrek
- salam damai

thx info sob..

http://celco-blog.blogspot.com

Aku juga pengen membuat templet sendiri, makasih infonya

tutornya sederhana banget..namun mudah dipahami,,,luarbiasa :-)

mantap deh tutorialnya.. trus berkarya ^_^

kunbal gan http://kumpulan-trikblog.blogspot.com/

untung banget mampir di blog ini, banyak nambah pengetahuan...

Keren nii, Simple dan mudah dipelajari :D

ganti lebar tamplate gmn gan?

boleh share template yang sekarang agan lagi pake? :)

Trims bro, lagi mau ganti ukuran header nih, hehe... blog sy zaenaldesign.blogspot.com

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.