Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Rabu, 27 Januari 2010

Cara Memperlebar Halaman Blog

Kategori :
Mungkin sekarang waktunya untuk mengoprek Template kita sob agar tampilan blog kita sesuai dengan kemauan kita. Disini saya akan menjelaskan tentang Memperlebar Halaman Blog agar lebih dinamis dan nyaman untuk baca-baca, sebelum mengoprek Template kita saya akan menjelaskan sedikit tentang elemen yang perlu di lebarkan.

Sebelum saya menjelaskan dari masing-masing elemen-elemennya saya mau minta maaf kepada master-master blogger klo saya sok tahu atau sok pintar, saya hanya ingin membagikan ilmu kepada sobat setia blog saya.Okey simak masing-masing penjelasannya y sobat :
  1. Body ==>> elemen/area yang ada di paling belekang yang mencakup keseluruhan sebuah template
  2. #outer-wrapper ==>> elemen ini letaknya di depan body yang berisi elemen-elemen seperti #header, #main, #sidebar-wrapper, dan #footer-Wrapper
  3. #header ==>> karena namanya header ya berarti kepala artinya tempat atau areanya ada di atas Template yang berisi Judul blog dan Deskripsi Blog
  4. #main ==>> elemen yang satu ini isinya tentang artikel yang kita tulis atau post dan kotak komentar
  5. #sidebar-wrapper ==>> klo elemen yang satu ini isinya ya widget-widget yang biasa sob pakai seperti buku tamu trus statistik dll.
  6. #footer-wrapper ==>> elemen ini letaknya ada di paling bawah Template yang berguna untuk meletakkan Widget atau pun yang lain

Nah kalau sobat kurang mengerti tentang penjelasan di atas, nih saya kasih contoh gambarnya :


Nah sekarang sudah jelaskan Bagian-bagian dari Template. kalau memang ada yang kurang, maaf y sobat semua karena elemen-elemen tersebut saya ambil dari Template saya sendiri.

Oke Penjelasan sudah, Contoh gambar sudah sekarang apa lagi y?? oiya Cara Memperlebar Halaman Blog, ikuti y langkah-langkah di bawah ini :
  1. Login ke blogger dengan id sobat
  2. Masuk ke Tata Letak ==>> Edit HTML
  3. Sebelum mengoprek Backup dulu y Template sobat dengan cara Download Template Lengkap
  4. Setelah selesai membackup Template sobat cari kode yang akan di lebarkan, saya kasih contoh : #Outer-Wrapper, apabila sobat menggunakan Mozilla tekan Shift+F3 agar lebih mudah dalam pencarian
  5. Nah setelah ketemu akan ada tampilan kurang lebih seperti di bawah ini



    #outer-wrapper {
    background:#000;
    width:973px;
    margin:0 auto;
    padding:0;
    text-align:left;
    border:2px solid #1A1A1A;
    }


  6. Nah sobat perhatikan tulisan yang bercetak tebal dan miring, tulisan tersebut yang mempengaruhi lebar dari #outer-Wrapper. Apabila sobat ingin di perlebar tinggal ganti saja angka yang bercetak Tebal dan miring menjadi angka yang lebih tinggi dari semula.
  7. Nah kalau kira-kira sudah cukup jangan dimpan dulu takut tidak sesuai keinginan maka sobat harus melihat Preview-nya dengan mengklik Pratinjau
  8. Nah kalau sobat sudah lihat dan sesuai kenginan baru dech sobat Simpan
  9. Kalau untuk elemen yang lain ingin sobat perlebar sobat bisa coba sendiri ya, caranya sama seperti itu qo tanpa ada perbedaan.
  10. Nah sekarang selesai dech.

Apabila Sobat mengalami kesulitan dalam Memperlebar Halaman Blog sobat bisa tanyakan kepada saya, Ingat malu bertanya tersesat di jalan loh, Mungkin hanya sekian dari Trik kali ini. Tunggu ya Trik-trik selanjutnya Terima Kasih.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

84 Komentar untuk Cara Memperlebar Halaman Blog

pertamaxxxx..
thank tipsnya..

Ini kalau pake template minima kan..ehehe

Wah info dan trik yang oke... memang bener oketrik nih...

nah ini yag saya cari,tapi untuk menghaousnya gimana ya?soalnya di tempat saya di samping postingan ada sidebar yg eror dipakai gimana ya hapusnya?thnxs n good luck

@Dhana/戴安娜 ==>> cari id widgetnya sob, mungkin bisa....

Makasih ya sob....kebetulan banget aku lagi mau lebarin halaman blogku...Moga2 aja bisa maklum masih newbie nih....

tnaks browww!!!!!!! sangat membantu :4:

pertamax....sangat membantu..

bos linkback ya : www.annoevers.co.cc
thxx

Nice Post, Bos...
Makasih udah mampir...

bagus sekali blog ini...
terima kasih ya.

munatap. ajip niwh posting, bagus buat kita para newbie yang pengen ngoprek blog. Kapan-kapan mampir di blog saya ya... http://ddxrp.blogspot.com

Maaf nih mas, saya mau nanya, untuk membuat link menjadi seperti pelangi gimana caranya ya...

Mohon tips nya ya ms, ini blog aku: (http://www.indramurdianto.co.cc/)

saya sudah berkali-kali coba untuk hal itu tapi selalu tidak berhasil, menurut you dimana kesalahan saya? soalnya saya pernah mengikuti langkah yng diberikan oleh rekan blogger kita di tip trik blog, kesulitannya ketika saya harus mencari sidebar wrapper, dan tidak ketemu..

@usi2506 => memang sobat mau memperlebarkan apa? klo menurut saya setelah melihat blog anda, saya sarankan untuk mencari main-wrapper saja untuk memperlebarnya tinggal besarkan saja nominal px-nya. Terima kasih ^_^

mampir balik boz...thank ya.

makasih infonya....

resulusi tiap komputer kadang mempengaruhi tampilan..katanya

@Anonymous >> memang kang, setiap PC resolusinya berbeda-beda dan hal tersebut akan mempengaruhi-nya apabila nilia value-nya menggunakan persen (%) bukan pixel (px). menurut saya loh hehehehehe...

Terima kasih ^_^

ko kode yang sobat cantumkan saya cari di template saya gak ada pa sudah di kehapus ya?cara mengembalikan nya ada yang tau gak gimana caranya?

saya tidak bisa menemukan kode diataa ada solusi nya gak boss?

@Sholeh'sBlog >> ada, memang yang mau dibesarkan bagian mana? sebenarnya kode diatas saya ambil dari template minima untuk di jadikan contoh saja.

sakalian kalu mau liat2 blog saya yang masi pemula sapa tau ada yang menarik monggo di http://yoenanteam.blogspot.com/ blog juga tentang warung saya D'Coffee Indonesia

outer-wrapernya ndk ada mas, gimana nih
http//:pasaronlineforall.blogspot.com

@Andrewherata >> memang yang mau di perlebar bagian mana? tutor diatas hanya contoh qo dengan menggunakan template minimalist...

makasih banget ya kaka atad infonnya..........

aku jadi tambah ngerti nih

isinya sangat menarik

kunjungi juga dong blog saya dan kasih saran soanya saya ini pemula

msh bingung cari #Outer-Wrapper ya bos?
udah d shift+F3 tp html #Outer-Wrapper gak muncul.
mohon pencerahannya....

@agus : klo ga ada coba #outer-wrap {

wah mantep nih infonya

keren infonya
maen ke blog saya ya teman - teman...

saya mau melebarkan outer-wripper tapi kok gak ada tulisan width di html ya? jadi gimana

selamat pagi, oke deh penjelasannya mantap, nanti akan saya coba praktekkan, terima kasih triknya.

@I-one >> lebih baik pada css-nya agar lebih mudah mengaturnya, apabla dalam outer-wrapper tidak terdapat properties width, tambahkan properties tersebut kedalam tag outer-wrapper, misal :

outer-wrapper {width:980px;}

Makasoh ya,ione udah praktekin ^_^

Mantep nih gan,, jadi tambah pengetahuan

kereeeeeeeeeennnnnnn...
makasih ya kakak

kak, terima kasih tips nyah..

kalo ada waktu maen ke blog aq ea,,

http://desmansadegha.blogspot.com

salam kenal..

Mantab sob infonya, ane udah coba n semuanya lancar tuh

wah saya juga berencana meletakkan halaman postig saya di tengah gan, kira2 bisa gak ya?

bisa mas bisa, tinggal maenkan properti "float" pada CSS dan jangan lupa seimbangkan dengan element di sampingnya agar tampilannya lebih menarik :)

cara memindahkan sidebar blog ada tutornya gak bro? saya tertarik sama suatu templates tapi pengen sidebar berada di kanan, bukan di kiri..
Thanks :)

@Blog Berita kayanya ane g punya deh gan, klo mau di rubah posisinya tinggal cari aja kode:

#main-wrapper {
float:right; (ubah jadi left)
..............
}

#sidebar-wrapper {
float:left; (ubah jadi right)
}

thanks gam/.....udah ku coba.... kunjungi balik ya.......................

Gan aku coba edit halaman pagenya, cari kode #outer-wrapper'nya kok gak ketemu ya? tolong jelasin dong, perlu bimbingan neh...! thank's sebelumnya

Boz di setingan template sy gak ketemu yang namanya #Outer-Wrapper, kira2 solusinya gimana yah?

Wah, info yang bagus nih buat pemula. makasih juga dah berbagi. Oh ya, jangan lupa mampir balik yah, moga" kita bisa lebih dekat

Salam Blogger

Tahnks Banget Brooo,,,,

thanks mass broww.....!

Berhasil gan akhirnya ane bisa ngelebarin tempat postingan ane... thanks

Mampir yukk ke blog saya >> anggalatte.blogspot.com

Saya pelajari dulu gan ilmunya.

mantap tutornya gan....

Wah abang blog'a keren bngt.. (>o<) trimakasih infonye 'ye..
semoga halaman blogQ berhasil di perlebar ^o^
[www.blognyamichun.blogspot.com]

*o* Kak oxg d edit HTML'q gak da tulasan'a (#outer-wrapper).padahal an udah tak (ctrl f),tapi masih gak ketemu... gimana nich... ('T'_'T') ??!

Thanks,saya dapet bukan karena kode ente ^_^

mas, punya saya tidak sama isi HTMnya dengan yg mas contohkan di atas, jd agak kesulitan n ribet, sy merubahnya tidak bisa... mhon bantuannya..he. trimakasih.. salam kenal.

Trimakasi skali tipsnya....

Trimakasi skali tipsnya....

Thanks,,
Kunjungi http://ariimam.blogspot.com/

TERIMA KASIH BANYAK GAN
COME ON VISIT http://kampusnongkrong.blogspot.com

Terima kasih atas tips nya mas,, sudah saya coba dan hasilnya sukses

http://sdit-mutiarahatibanjarnegara.blogspot.com/

gan, thanks gan infonya :)
http://la-udza.blogspot.com/

Mohon maaf sebelumnya gan. Ane masih newbi soalnya. Ane cari2 tuh code kok gak ada ya. Apa code tersebut ada di template blog yang lama. Soalnya sekarang sudah mengalami perubahan. Seperti expand code skrg tidak pakai centang lagi. Soalnya sudah ada tanda panah di sebelah kode HTMLnya.
Mohon pencerahannya
Terima kasih

kok di tata letak gak ada tulisan edit HTML ya,, maaf baru pemula,,

berhasil sob mantapp, thanks ..