Inilah Cara Termudah Mengenal Ukuran Panjang dan Lebar Template Blog Kita

Apa yang harus kita lakukan pertama kali untuk mengetahui ukuran panjang dan lebar blog kita?
Bagi blogger pemula, mengetahui ukuran panjang dan lebar template blog merupakan hal yang cukup membingungkan. Hal ini karena kita sebagai blogger pemula merasa awam dengan begitu banyaknya kode HTML yang termuat dalam template blog.


Kalau kenyataannya sudah begini, apa akibat masalah yang kita hadapi karena edit HTML yang sulit?
Waktu akan terbuang percuma hanya untuk mencari kode HTML yang menunjukan ukuran bagian template yang tidak juga ditemukan. Selain itu, jika kode HTML ini lama tidak ditemukan juga akan membuat kita merasa kesal dan bosan bukan?

Nah, untuk mari kita perhatikan bersama bagaimana cara untuk mengetahui ukuran template blog milik kita.

Pertama, masuk ke dalam akun blogger kita masing-masing.
Klik rancangan.
Klik edit HTML.
Klik expand template widget.
Cari kode HTML berikut ini.
(hanya contoh, cari kode HTML yang dicetak tebal)

Mengetahui ukuran lebar keseluruhan template.

#outer-wrapper {
margin:20px auto;
padding:0 10px;
text-align:justify;
width:900px;
}

Mengetahui ukuran header.

#header-wrapper {
height:119px;
width:900px;
}

Mengetahui ukuran sidebar.

#sidebar-wrapper {
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Mengetahui ukuran main kolom.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}

Keterangan:

  1. Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian kode HTML.
  2. Width merupakan ukuran lebar, sedangkan height merupakan ukuran tinggi.


Setelah mengetahui kode HTML dan fungsinya, maka proses editing ukuran template blog kita menjadi lebih mudah. Hemat waktu dan tidak membuat jenuh. Akan tetapi, selalu ingat jika kita perlu untuk download template blog kita terlebih dahulu sebelum memulai proses editing sebagai backup jika nanti terjadi kegagalan.

58 komentar:

  1. sangat membantu untuk yang baru mengenal template blogger...

    BalasHapus
  2. seepp... sanagt bermanfaat buat saya nih sobat,,,,,
    bisa digunakan untuk merubah ukuran blog biar lebih pas dan ada space buat iklan....

    BalasHapus
  3. @Asis Sugianto:

    silakan dicoba. jangan lupa download template blog kita terlebih dahulu sebagai antisipasi kegagalan dalam editing template blog ini.

    BalasHapus
  4. tetapi tidak semua template sama isinya sob, ada template yang tidak punya footer.

    BalasHapus
  5. Wah mantap mas,bertambah lagi ilmu ngeblog saya disini..matur tengkyu ilmu nya..oia saya sudah sukses juga folback blog ini

    BalasHapus
  6. Apakah Semua Template Bisa Di Atur Mas Panjang Dan Lebarnya.?

    Oh Ya Mas Kalu Mau Menghapus Kolom Di bawah foter Gimana Ya Mas.

    Salam Dodol

    BalasHapus
  7. oke sob, berguna banget nih, kemarin aku buat header pake photshp. tapi susah ngepasinnya sama ukuran template... :D

    tapi sedihnya template yg sekarang ngak bisa dipasang header yang gede.

    BalasHapus
  8. Post yang menarik Sob..ini hal kecil tapi terkadang njelimet kalo gak tahu triknya...nice share and happy blogging!

    BalasHapus
  9. @Farixsantips:

    betul. tergantung bagaimana kondisi tata letak template blog kita.

    BalasHapus
  10. @Jocky:

    trims atas follow backnya. silakan baca artikel lainnya untuk meningkatkan pengetahuan bloggingnya. semoga bermanfaat!

    BalasHapus
  11. @Yan Muhtadi Arba:

    coba diubah saja ukuran lebar/width dari header dan outernya.

    BalasHapus
  12. @Iskaruji dot com:

    semoga bisa membantu teman2 kita yang masih pemula dalam blogging agar tidak bingung ketika ingin mengubah ukuran templatenya.

    BalasHapus
  13. Sep-Sep Mas Oidre Tunggu..

    Salam Dodol

    BalasHapus
  14. seep... uda dicoba sob,, terima kasih banya sob...

    BalasHapus
  15. Keren sobb....satu pertanyaan saya...Kenapa yah di blog sya komentarnya muncul 2x???

    Check disini sob...http://lutfibts.blogspot.com/2011/11/windows-8-developer-preview-x86-32-bit.html
    Butuh bantuan nihh....

    BalasHapus
  16. Saya selama ini gak pernah ngurusi gituan, nemu tempe eh templet yang cocok langsung pake aja. mau ngurusi gituan males banget, tapi oke banget nih jadi nyadarin aku tentang pentingnya desain

    BalasHapus
  17. siip sob jd bisa meng otak atik ukuran blog kita byar gak berat

    BalasHapus
  18. matap-mantap sob,, nambah ilmu lagi ane disini, makasih untuk ilmunya :)

    BalasHapus
  19. tanya lagi:
    ngubahnya nilai yang ini aja:#header-wrapper atau ada lagi yang musti nilainya diubah?

    BalasHapus
  20. @Oidre:

    trims atas kunjungannya selalu.

    BalasHapus
  21. @Asis Sugianto:

    semoga bermanfaat ya.
    senang bisa membantu. :)

    BalasHapus
  22. @Lutfhi:

    mungkin terjadi kesalahan pada pengeditan author comment. coba diperbaiki lagi atau dihapus editan yang telah dilakukan untuk author comment.

    BalasHapus
  23. @keyword terkenal:

    saya juga sebenarnya malas dengan editing template. tapi, saya juga harus melakukan beberapa editing kecil akan template yang saya gunakan lebih "ngepas" dengan selera saya.

    BalasHapus
  24. @bopfive5:

    ini cuma masalah utak-atik ukuran templatenya saja bro, belum masalah kompres agar template ringan dan loadingnya cepat.

    BalasHapus
  25. @Aldio:

    semoga bermanfaat ya. silakan dipraktikan.

    BalasHapus
  26. @Yan Muhtadi Arba:

    nilai width/lebar pada #header-wrapper dan #outer-wrapper disamakan.

    BalasHapus
  27. punya ane mah 860px aja witdh nya, kecil ya kalau pake pc mbuka nya..

    BalasHapus
  28. standart, header blog punya saya juga 900px.

    BalasHapus
  29. Follower 161.. selamat malam kawan.. :)

    BalasHapus
  30. makasih gan jelas ini menambah ilmu saya hehehe

    BalasHapus
  31. @BojaLinuxer Blog:

    trims atas follow baliknya bro.

    BalasHapus
  32. @Edy Sant:

    senang bisa membantu. semoga bermanfaat.

    BalasHapus
  33. @Multi Informasi Trik dan Tips:

    silakan dicoba, semoga berhasil ya eksperimennya.

    BalasHapus
  34. wah sangat membantu y sob buat pemula seperti saya. makasih sob.
    sekalian membalas follow

    BalasHapus
  35. trims atas kunjungan dan follow baliknya. ditunggu untuk kunjungan selanjutnya ya.

    BalasHapus
  36. hehehehe,, keren bgt tipsnya masbro :)

    BalasHapus
  37. trims sudah berkunjung ya om. saya tunggu untuk kunjungan2 berikutnya. :)

    BalasHapus
  38. pusing sob,tempe ku kepanjangan n ga bisa2 ,apa akunya yang bloon x ya...!heheheh .tolooong dnk...~!

    BalasHapus
  39. ingin merubah bagian template apa bro? mungkin bisa dibantu. :)

    BalasHapus
  40. gan,..itu buat template apa,.klasic bsa gk,.cz,ane gk nemu kode yg kya gtu,..hheeee

    BalasHapus
  41. semua template bro. coba cari lagi kode yang mirip dengan kode yang dimaksud.

    BalasHapus
  42. nice info sob..terimakasih dah banyak membantu...aku jd bisa utak-atik soal ukuran nih, tapi kenapa saya masih gagal ubah ukuran panjangnya ya. tolong di cek ya sob .. tuh sebelum footer kan banyak space yg rencananya mau aku pendekin biar ngepas di bawah slide .. kira-kira bisa gak ya sob? caranya gimana? ini blog saya .. http://dealsnpromotions.blogspot.com/

    BalasHapus
  43. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  44. salam kenal mas.. saya msih bisa dibilang belum tau apa2 tentang template,, dengan postingan mas saya bisa mengenali sedikit demi sedikit tentang template blog..
    thenkyu mas..

    BalasHapus
  45. terimakasih,ini sangat membantu saya dalam mengedit template

    BalasHapus
  46. terimakasih infonya,,

    BalasHapus
  47. thanks trik nya ya gan, BTW folback dong hehe :D

    BalasHapus
  48. Mantap akhirnya bisa juga.

    BalasHapus
  49. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus