CARA MEMPERLEBAR HALAMAN TEMPLATE

M
ungkin para sobat yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template sobat hingga menjadi lebih lebar? Bagaimana caranya..? Mungkin ada beberapa cara untuk merubah halaman template. Dan saya biasa menggunakan cara sebagai berikut,yang saya anggap paling sederhana.

Dan tidak perlu panjang lebar lagi kita mulai saja caranya.
Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita
bisa ubah ukurannya:

Outer-wreper : Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah

Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:

Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper

#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.
Selamat mencoba...!!!



69 komentar:

QLU_anas mengatakan...

tulisan tutorialnya baguss,,
tp saya masih bingung bagaimana cara peletakannya d edit HTML-nya,,
mungkin bisa d lengkapi krna berhubung sy masih pemula,,
tenks,,,

Darmasena mengatakan...

@QLU_anas: trmksh atas kunjungan dan koreksinya kita tinggal mengganti text yg berwarna merah dan meyesuikan ukurannya.

Yayan mengatakan...

Makasih artikelnya cukup membantu saya...

ibnu mengatakan...

trims atas artikelnya. jadi nambah pengetahuan saya.

yahaya mengatakan...

mas,lebih mudah gunakan blogger in draft

KARUNIA 82 mengatakan...

makasih mas,artikel nya cukup membantu pemula seperti saya.

SMPN 21 Samarinda mengatakan...

tutorialx keren2 gan..... lam kenal

syarifuddin mengatakan...

wah gue suka nih blogg ini yang gue cari hehehheh cari di gramedia blom lengkap men ...:) trims ya tips nya

bangun permadi mengatakan...

makasih tutorialnya...lam kenal....kuereennn

farrahbanget mengatakan...

nyarii outer wrapper.a d mana yaah .??
ko d blogg ku gga ada .??

CURAHAN HATI ANAK NEGRI mengatakan...

mantaaf gan..heheheeeeeeeeeee,,,

Smpk Yohanes Don Bosco mengatakan...

kodenya gak ada ~x( udah gue cari jg pake F3 gak ada

blogging mania mengatakan...

BLOGGERspherepedia Like this posts, thanks. http://bloggerspherepedia.blogspot.com

morningside mengatakan...

thk... :)

Dita Orange mengatakan...

ga ketemu kodenya -_-

Kris-kebumen mengatakan...

Nice info....

Ramzi mengatakan...

kebetulan pas login di blogger, akan aku pergunakan tutorial ini
trims

adanz mengatakan...

wah... lumayan nambah informasi lagi nih...

jul apri mengatakan...

maaf saya masih pemula ni di blog,cara masukiny gimana?soalnya ssetiap masuk di blog yang langsung keluar setelan aj

reska putry mengatakan...

aku masih ga' ngerti :((

Erma Novia mengatakan...

saya masih bngung, masih pemula. ~X(

purnama azizah mengatakan...

z masih kurang ngerti Maklum peMula :)

Obat Kanker Serviks mengatakan...

mengunjungi blog yang bagus dan penuh dengan informasi yang menarik adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi

Ardian Haryo P mengatakan...

makasih mas artikelnya

yayasan sayap sehat mengatakan...

thank artikelnya....

Dar Mawan mengatakan...

saya masih bingung bagaimana cara memakai atau mengguanakan blog ini,,
saya pusingnya tentang bagaimana cara meletakkan tulisan saya disana,merubah cover & foto bagroundnya..
kadih solusinya donk,,??
:-O

rachmad septiawan mengatakan...

admin,apakah semua kode html bisa digunakan di blog?

Supriadi lingga mengatakan...

saya masih bingung bagaimana cara memakai atau mengguanakan blog ini,,
saya pusingnya tentang bagaimana cara edit HTML, dan memperlebar template..Bagaimana sih? apakah semua blog bisa dibuat kayak gini?
kasih solusinya donk,,??

Ali's Blog mengatakan...

ak nemu yg ada wreppernya gmna gan? share info y dn trmksih

ainizaa mengatakan...

makasih atas ilmunya

masterz-seo mengatakan...

thanks sob atas pencerahanya..

mangkasara mengatakan...

terimah kasih tipsnya..

it-jurnal.com mengatakan...

lengkap juga penjelasannya keren sob

Dongeng Anak mengatakan...

makasih banget gan sangat membantu, tp aku blom berhasil tolong dibantu ya..

allinoneupdown mengatakan...

Bagus nih .. cantik bangat .. lawat2 link ni yah http://friendlyinformer.blogspot.com/ dan http://allinoneupdown.blogspot.com/

Juan Valerian Delima mengatakan...

thank's gan sangat membantu (y)
visit balik ya >>>>>> http://juanvalerian17.blogspot.com/

Kyuudaime Hokage mengatakan...

Terima kasih banyak gan.
postingan yg sangat membantu. khususnya bagi saya yg masih pemula

Imam Wahyudi Pramutoro mengatakan...

thanks infonya gan...

Seijuro Alharis mengatakan...

maksih infonya
generasipemula.blogspot.com

aiy ub mengatakan...

makasi gan artikelnya, sangat membantu, maju terus (y)
http://aiyubf.blogspot.com/

Sahrul,S.Pd mengatakan...

sangan membantu,,, sukses selalu

Sahrul,S.Pd mengatakan...

Edit HTML yang mana maksudny agan? mohon pencerahan

alfi olshop mengatakan...

ggdgdgsdxbgdgcbnbatik piyama anak

Frans Newman mengatakan...

Belajar online di Ai-learn.com

mumu mulyadi mengatakan...

http://bodyrafting-pangandaran.blogspot.com/p/bagi-para-pengunjung-yang-ingin.html

cheep mantap mengatakan...

sy mah puyeeng bangeet nyari kode bosss
malum masih belajar,tepak jidat melulu

cheep mantap mengatakan...

sy mah puyeeng bangeet nyari kode bosss
malum masih belajar,tepak jidat melulu

dafa difa mengatakan...

gimana nih cara bikin blog nya

Muhammad Pamungkas mengatakan...

sangat berguna sekali.
saya juga membuat blog tapi masih sederhana, ada masukan?
blog saya di sini:
http://tipsandasemua.blogspot.com

DEREKJINGGO mengatakan...

kalau setelah blog jadi harus bagaimana lagi.

Kelas Dosen Jualan mengatakan...

Bagus artikelnya sangat bermanfaat salam dari konsultan internet marketing

Anang ridwan mengatakan...

Tips yang sangat bermanfaat terutama untuk web bisnis supaya sukses. Cara bisnis online tanpa modal

Aditya Juniarto Pradipta mengatakan...

kalo cara bikin template biar responsive gimana ya gan?

Belonomi

mahjong mengatakan...

In your blog I was happy to see your article, better than last time, and have made great progress, I am very pleased. I am looking forward to your article will become better and better. kizi | hulk games | mickey mouse games | sniper games

Aditya Juniarto Pradipta mengatakan...

keren nih caranya, blog jadi bisa kita optimasi dengan baik untuk ukurannya. makasih gan.
www.belonomi.com

satria mengatakan...

Mantap Mas,

http://savafarma.com

imam mengatakan...

Mantab

obat jantung koroner
obat asam urat
semut jepang
semut jepang
obat diabetes
obat stroke

diah wulandari mengatakan...

Terima kasih untuk informasinya Gan, salam kenal ya...
Software Pulsa PPOB | Software Pulsa Murah | Pulsa Elektrik Murah | Pulsa Murah | Pulsa PPOB Murah

Adi Cahyo mengatakan...

Terima kasih untuk informasinya, jika berkenan mampir juga di website kami ya..
Bisnis Pulsa Murah
Token PLN Murah
Software Pulsa IRS
Software PPOB
Stok Pulsa Murah
Stok Pulsa H2H
Token Listrik Murah
Daftar VTRI
Transaksi Pulsa Dengan Jabber XMPP

Pak Oles mengatakan...

KONDOM
KONDOM GETAR
KONDOM SAMBUNG JUMBO

Klg club mengatakan...

Obat Pembesar Penis
Selaput Dara Buatan
Obat Penggemuk Badan
Obat Perontok Bulu
Obat Peninggi Badan
Peninggi Badan
Obat Pelangsing Badan
Kondom Getar
Obat Kuat VIAGRA
Penis Mutiara
KLG
Vagina Getar Goyang Suara
Obat Kuat V9
Pemutih Badan
Kondom Bergerigi
Kondom Crystal
Vakum Pembesar Penis
Penis Maju Mundur
Procomil Spray
Kondom Sambung
Obat Perangsang Wanita
Penis Ikat Pinggang
Penis Tempel
Vibrator
Obat Perangsang Serbuk
VigRX-plus
Pembesar Penis
Vagina Pantat
Ring Penis
Kondom Urat

cRystaL mengatakan...

Tambahan penghasilan minimal 100rb/hari.

PLAYING GAME AND GET REAL MONEY !!

http://marketglorypenghasiluang.blogspot.co.id/

Ga ada salahnya dan rugi buat Mencoba.

Bisa Googling testinya para players indo yg uda sukses mainin game Marketglory ini.

no hoax di JAMIN !!!

Kholis Putra mengatakan...

terimakasih infonya ya
kondom sambung
obat hernia

celana hernia

obat peninggi badan

magic tissue
vmen plus

vigrx plus

boneka full body

obat pembesar payudara

pro extender

obat penumbuh rambut

obat penyubur sperma

obat penggemuk badan

obat penghilang bekas luka

pemutih wajah tensung

obat ambien

obat kuat cialis

vakum pembesar payudara

vibrator capsule

capsul penggeli

obat pembesar alat vital

Muhammad Riza mengatakan...

sangat bermanfaat.
Kumpulan Informasi terbaru tentang dunia teknologi dan informasi
http://iza-net.blogspot.com/

Agen Wisata Karimunjawa mengatakan...

OKeee Mencoba browsing mencari Info Paket Backpacker Karimunjawa yang menyediakan Paket Wisata Karimunjawa Murah dan mau nyari barang-barang funiture HD Furniture Jepara

Update Berita mengatakan...

Sangat membantu. Sebelumnya saya bingung gimana cara memperlebar template. Kebetulan blog saya jika dibuka via mobile kurang lebar, tidak pas dengan layar hape

kentungweb mengatakan...

makasih gan info dan tutorialnya yaa

Obat Pembesar KLG PIL mengatakan...


Obat Pembesar Payudara



Cara Memperbesar Payudara



Obat Pembesar Payudara Herbal



Obat Pembesar Payudara Permanen



Obat Pembesar Payudara Cepat



Obat Kuat

Obat Kuat Pria

Obat Kuat Viagra Usa

Obat Kuat Viagra

Obat Kuat Viagra Original

Obat Kuda Hitam Jantan

Cream Pembesar Penis

Obat Pembesar Penis Oles




AgaricPro3 mengatakan...

Sharing Jika anda menderita penyakit Hernia Pada Anak yang terdapat benjolan di sekitar pusar atau di bagian yang lain segera atasi dengan Herbal AgaricPro Celana Hernia Pada Bayi Sangat Nyaman Solusi Terbaik Atasi Hernia Pada Anak Tanpa Operasi

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Posting Komentar