Back to TopBack to Bottom

Cara Memperlebar Halaman Blog

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.
Attention

ATTENTION PLEASE!

Untuk memperbaiki dan mengembangkan blog ini menjadi lebih baik, mari bersama - sama kita bangun, caranya? Apabila kamu menemukan link yang mati/sudah tidak berfungsi atau gambar yang sudah tidak muncul/expire, silahkan hubungi kami disini. Laporan anda sangat berpengaruh pada perkembangan blog ini. Terima kasih atas perhatiannya thanks

Trik menarik lainnya yang mungkin ingin anda baca :

56 comments

pertamaxxxx..
thank tipsnya..

Balas | January 27, 2010

bagus isinya...
comen balik

Balas | January 27, 2010

Ini kalau pake template minima kan..ehehe

Balas | January 27, 2010

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

Balas | January 28, 2010

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

Balas | January 28, 2010

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

Balas | January 29, 2010

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

Balas | January 30, 2010

perlu di coba,,

Balas | January 30, 2010

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

Balas | April 24, 2010

pertamax....sangat membantu..

Balas | May 17, 2010

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

Balas | May 21, 2010

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

Balas | May 23, 2010

bagus sekali blog ini...
terima kasih ya.

Balas | May 30, 2010

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

Balas | June 06, 2010

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

Balas | June 07, 2010

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

Balas | June 07, 2010

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..

Balas | June 09, 2010

@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 ^_^

Balas | June 09, 2010

mampir balik boz...thank ya.

Balas | June 22, 2010

makasih infonya....

Balas | June 26, 2010
Anonymous

resulusi tiap komputer kadang mempengaruhi tampilan..katanya

Balas | July 10, 2010

@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 ^_^

Balas | July 11, 2010

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?

Balas | October 15, 2010

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

Balas | October 15, 2010

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

Balas | October 17, 2010
Anonymous

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

Balas | November 10, 2010

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

Balas | November 16, 2010

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

Balas | November 16, 2010

mantap gan, izin ctrl+d.:D

Balas | December 10, 2010

thnaks gan ^_^

Balas | December 11, 2010

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

aku jadi tambah ngerti nih

Balas | January 30, 2011

isinya sangat menarik

Balas | February 23, 2011

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

Balas | February 23, 2011

Thank you gan!!!

Balas | March 19, 2011

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

Balas | June 30, 2011

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

Balas | July 04, 2011

wah mantep nih infonya

Balas | July 10, 2011

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

Balas | July 10, 2011

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

Balas | July 11, 2011

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

Balas | July 11, 2011

@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;}

Balas | July 11, 2011

Makasoh ya,ione udah praktekin ^_^

Balas | July 12, 2011

Mantep nih gan,, jadi tambah pengetahuan

Balas | July 12, 2011

kereeeeeeeeeennnnnnn...
makasih ya kakak

Balas | July 26, 2011

sip sama sama :)

Balas | July 26, 2011

kak, terima kasih tips nyah..

kalo ada waktu maen ke blog aq ea,,

http://desmansadegha.blogspot.com

salam kenal..

Balas | August 09, 2011

Mantab sob infonya, ane udah coba n semuanya lancar tuh

Balas | September 14, 2011

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

Balas | September 22, 2011

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

Balas | September 23, 2011

thx infox gan..

sangat membantu...

Balas | November 01, 2011

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

Balas | December 14, 2011

@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)
}

Balas | December 15, 2011

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

Balas | December 22, 2011

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

Balas | December 29, 2011

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

Balas | January 05, 2012

Post a Comment

Segera Laporkan apabila kamu menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini

 
Di Like sama Follow ya biar tambah Semangat >>