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

66 komentar:

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

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

    BalasHapus
  3. Makasih artikelnya cukup membantu saya...

    BalasHapus
  4. trims atas artikelnya. jadi nambah pengetahuan saya.

    BalasHapus
  5. mas,lebih mudah gunakan blogger in draft

    BalasHapus
  6. makasih mas,artikel nya cukup membantu pemula seperti saya.

    BalasHapus
  7. tutorialx keren2 gan..... lam kenal

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

    BalasHapus
  9. makasih tutorialnya...lam kenal....kuereennn

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

    BalasHapus
  11. mantaaf gan..heheheeeeeeeeeee,,,

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

    BalasHapus
  13. ga ketemu kodenya -_-

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

    BalasHapus
  15. wah... lumayan nambah informasi lagi nih...

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

    BalasHapus
  17. aku masih ga' ngerti :((

    BalasHapus
  18. saya masih bngung, masih pemula. ~X(

    BalasHapus
  19. z masih kurang ngerti Maklum peMula :)

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

    BalasHapus
  21. makasih mas artikelnya

    BalasHapus
  22. thank artikelnya....

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

    BalasHapus
  24. admin,apakah semua kode html bisa digunakan di blog?

    BalasHapus
  25. 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,,??

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

    BalasHapus
  27. makasih atas ilmunya

    BalasHapus
  28. Anonim10:54 AM

    thanks sob atas pencerahanya..

    BalasHapus
  29. terimah kasih tipsnya..

    BalasHapus
  30. Anonim1:47 PM

    lengkap juga penjelasannya keren sob

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

    BalasHapus
  32. Anonim11:24 PM

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

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

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

    BalasHapus
  35. thanks infonya gan...

    BalasHapus
  36. maksih infonya
    generasipemula.blogspot.com

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

    BalasHapus
  38. sangan membantu,,, sukses selalu

    BalasHapus
  39. Edit HTML yang mana maksudny agan? mohon pencerahan

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

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

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

    BalasHapus
  43. gimana nih cara bikin blog nya

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

    BalasHapus
  45. kalau setelah blog jadi harus bagaimana lagi.

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

    BalasHapus
  47. kalo cara bikin template biar responsive gimana ya gan?

    Belonomi

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

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

    BalasHapus
  50. Mantap Mas,

    http://savafarma.com

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

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

    BalasHapus
  53. Anonim12:26 AM

    makasih gan info dan tutorialnya yaa

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

    BalasHapus
  55. Perkenalkan kita Sahabat303 Agen Sabung Ayam, Agen Bola Terpercaya, Casino Online, Slot Games.

    Dengan pendaftaran gratis dan mudah tentunya.

    Hanya dengan Minimal Deposit 50 ribu anda sudah bisa bermain dan menikmati Berbagai Bonus Menarik Dari Sahabat303 Berikut Ini :



    » Bonus Deposit 10% Khusus Sportbook

    » Bonus Deposit 10% Khusus Bola Tangkas

    » Bonus Rollingan Live Casino 0,7%

    » Bonus Cashback Casino Games 2%

    » Bonus Cashback Sabung Ayam 5 - 10%

    » Bonus Cashback Sportbook 6 - 16%

    » Bonus Refferal 2%



    Moto kita »

    Kemenangan berapa pun pasti kita bayar lunas.



    Untuk Info Lebih Lanjut Silahkan Hubungi Kami Melalui :

    * Website : Sahabat303

    * Twitter : Sahabat303

    * FB : Sahabat303

    * WA : +85581404247

    * LINE : Sahabat303

    * Layanan Live Chat 24JAM ONLINE



    agen sabung ayam

    agen bola terpercaya

    BalasHapus
  56. """Perkenalkan kita Sahabat303 Agen Sabung Ayam, Agen Bola Terpercaya, Casino Online, Slot Games.
    Dengan pendaftaran gratis dan mudah tentunya.
    Hanya dengan Minimal Deposit 50 ribu anda sudah bisa bermain dan menikmati Berbagai Bonus Menarik Dari Sahabat303 Berikut Ini :

    » Bonus Deposit 10% Khusus Sportbook
    » Bonus Deposit 10% Khusus Bola Tangkas
    » Bonus Rollingan Live Casino 0,7%
    » Bonus Cashback Casino Games 2%
    » Bonus Cashback Sabung Ayam 5 - 10%
    » Bonus Cashback Sportbook 6 - 16%
    » Bonus Refferal 2%

    Moto kita »
    Kemenangan berapa pun pasti kita bayar lunas.

    Untuk Info Lebih Lanjut Silahkan Hubungi Kami Melalui :
    * LIVE CHAT TERSEDIA , LAYANAN 24 JAM NONSTOP
    * Website : Sahabat303
    * LINE : sahabat_303
    * WA 1 : +855882348077
    * WA 2 : +6287705585269
    * Telegram : @sahabat303
    * FB : Sahabat303

    DAFTAR SITUS JUDI ONLINE TERPERCAYA
    Agen Sabung Ayam
    Agen Bola
    Agen Bandarq
    Agen Togel Online"""

    BalasHapus
  57. Kami merupakan penyedia jasa konstruksi yang berdomisili di Sumatera Utara. Dengan kehadiran kami berharap mampu memenuhi segala kebutuhan atas segala permasalahan renovasi rumah, pembangunan dan perawatan rumah anda, dalam pembuatan desain dan pembangunan Kami berorientasi pada efisien, efektifitas dan tentunya tepat sasaran. Kami didukung oleh tim yang sudah berpengalaman dan terbaik di bidangnya.

    BalasHapus
  58. cara menang slot online pragmatic di situs whizzi88

    BalasHapus