Caranecom : Cara membuat judul blog di tengah
Salam Blogger,
Pada kesempatan kali ini Caranecom akan membahas tentang cara membuat atau mengatur agar judul blog berada di tengah.
Mungkin bagi kalian yang baru selesai membuat sebuah blog melihat judul blog anda tidak berada di tengah melainkan hanya berada di pinggir, tentunya tidak begitu masalah jika judul blog berada di pinggir, namun anda mungkin merasa kurang rapi karena judul blog tidak berada ditengah.
Memang dari pihak Blogspot untuk bawaan terbilang sangat standard, tapi kelebihannya oleh blogspot para blogger diberi keleluasaan untuk mempercantik blog masing-masing agar tampil semenarik dan secantik serta setampan para bloggernya masing-masing.
Ok. kita langsung action saja mulai dengan masuk ke dashboard anda.
Kemudian pilih Template kemudian pilih sesuaikan seperti pada gambar dibawah ini :
Setelah klik sesuaikan maka anda akan di bawa pada laman penataan template blog, selanjutnya anda langsung saja menuju pada pilihan Tingkat Lanjut kemudian gulir cursor ke paling kebawah untuk menemukan Tambahkan CSS.
Kemudian pada sisi kanan anda kode copy script dibawah ini :
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color); text-align:center; }
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color); text-align:center; }
Kemudian pastekan seperti terlihat pada gambar di bawah ini :
selanjutnya klik Terapkan ke Blog yang terletak di pojok kanan atas, dan lihat hasil judul blog anda apakah sudah berubah? jika sudah berubah berarti anda sudah berhasil.
Sekedar info ya, jika pada box sebelah kanan Tambahkan CSS sudah terdapat script lain, maka sebaiknya anda membuat spasi dengan jarak tertentu antara script lainnya.
Terima kasih semoga bermanfaat.
Caranecom cara mengatur lebar blog serta bilah pinggir kiri bilah pinggir kanan sebenarnya sangat mudah, namun tidak ada salahnya kita buat artikel ini jika ternyata masih ada diantara newblogger yang masih belum mengetahui atau sedang mencari-cari tentang cara mengatur lebar badan postingan serta lebar pada bilah kiri dan kanan.
Maka anda sudah tepat karena membaca artikel ini.
Untuk melihat lebar kolom suatu template, kita bisa mengenalinya
melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara template standard serta template dengan template yang lainnya, yang tentu akan berbeda, untuk template yang bukan bawaan atau free template yang kita unduh dari google ini tergantung
kepada para Designer template nya masing-masing. Sebagai contoh untuk bagian
header, jika menurut standar template blogger di dalam style sheet CSS
nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner
ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan
berpengaruh terhadap hasil yang di dapatkan, karena nama ini dipakai hanyalah supaya mudah untuk di ingat atau di kenali oleh sang pemakai template
apabila ingin melakukan editting template.
Jadi untuk mengatur lebar postingan atau bilah sisi kiri dan kanan yang pertama atau pada template setandard adalah dengan cara :
Silahkan anda masuk terlebih dahulu pada Dashboard blog anda lalu klik Template kemudian klik Sesuaikan maka setalah tampil pada laman perancangan template blog, maka akan ada pilihan untuk mengatur beberapa settingan seperti :
- Template
- Latar Belakang
- Sesuaikan Lebar
- Tata letak
- Tingkat Lanjut
Untuk menyesuaikan lebar anda tinggal klik Sesuaikan lebar maka anda tinggal menggeser lebar blog, lebar bilah pinggir dan bilah kanan blog sesuai selera anda seperti yang terlihat pada gambar dibawah ini :
bila sudah anda mengatur lebar sesuai keinginan selanjutnya jangan lupa untuk klik Terapkan pada blog yang terletak di pojok kanan atas, maka untuk pengaturan lebar sesuai keinginan anda sudah selesai. anda sudah bisa melihat hasilnya.
Untuk cara yang kedua adalah dengan menggunakan script.
Pertama-tama silahkan anda masuk pada laman Dashboard blog anda lalu klik edit HTML, kemudian anda cari kode seperti dibawah ini :
#header-wrapper
atau jika kita lihat secara keseluruhan kode tersebut tampilanya seperti dibawah ini :
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
} #main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
Pada kode - kode diatas kita sudah dapat melihat nilai-nilai ukuran lebar masing-masing, sebagai penandaan kita sudah buat warna merah :
Ok kita uraikan satu persatu ya.
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Penjelasan : menyatakan bahwa header-wrapper mempunyai lebar 900px, heder-wrapper adalah nama untuk kepala sebenarnya header-wrapper hanyalah penamaan saja alias tidak mutlak, dan mempunyai border 1px, border adalah garis tepi atau bingkai, sebesar 1 pixel dengan garis yang solid (solid =
garis penuh. dashed = garis putus-putus. dotted = garis berupa
titik-titik) dengan warna border yang bisa di ubah-ubah [pada bagian
font dan warna] jika anda pengguna microsoft word tentu tau arti border.
Header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px;
berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang
bisa di ubah sesuai keinginan anda, mau ditambah nilainya biar lebih
lebar, atau di kurangi biar lebih kecil, namun untuk mendapat tampilan yang menarik pada blog nilai lebar header di sesuaikan lebar body, jika mau terlihat menarik,
Border adalah lebar garis pada tepi header atau bingkai, border:1px solid $bordercolor; berarti lebar atau tebal garis tepi atau bingkai header adalah sebesar 1px disini anda bisa mengubah nilai garis tepi lebih lebar/tebal atau sesuai keinginan anda, tapi border atau garis tepi ini tidak masalah kita hapus jika kita tidak menginginkanya.
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
Penjelasan : menyatakan bahwa outer-wrapper mempunyai lebar 900px jarak sela/padding sebesar 10 pixel dengan text-align justify [rata kiri-kanan] dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna. outer-wrapper adalah sama halnya dengan header merupakan penamaan saja,
width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila anda memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila anda ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.
width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila anda memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila anda ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
Penjelasan : menyatakan bahwa main-wrapper mempunyai lebar 435px Main-wrapper adalah kolom halaman posting, semua yang kita posting maka akan masuk ke halaman ini, dan menyatakan bahwa lebar margin kiri sebesar 20px dan lebar margin kanan sebesar 20px, width: 435px; berarti lebar kolom ini
sebesar 435 pixel, tapi karena menggunakan margin-left dan
margin-right, maka lebar kolom sebenarnya adalah sebesar 475px.
#sidebar-wrapper {
width: 220px;
float: right;
}
Penjelasan : menyatakan bahwa sidebar-wrapper mempunyai lebar 220px dan float:right; yang berarti ditempatkan pada sisi sebelah kanan, sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px;
berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit
atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja.
jika dalam percobaan pengeditan menemukan kendala atau permasalahan jangan sungkan untuk berkomentar semoga kita bisa perbaiki bersama-sama,
Terima kasih.