Cara Mengatur Ukuran Lebar Blog (Template BroSense Mas Sugeng)

Pengalaman kemarin yang saya alami saat menggunakan template dari Mas Sugeng yang bernama BroSense Seo Fast ini, saya sedikit kecewa dengan tampilan blog (lebar blog) yang sangat sempit, kemudian karena saya berasal dari perguruan tinggi tekhnik informatika, saya sedikit mengerti dengan pengkodean HTML, saya coba terapkan pada template ternyata sama saja dan berhasil, menjadikan template Bro Sense Seo Fast ini menjadi lebar yang saya inginkan. Hasil yang saya kerjakan Lihat Disini
Pasti banyak sekali template yang sangat anda sukai, tetapi dari segi ukuran lebar blog tersebut kurang pas dihati anda, mulai dari lebar keseluruhan blog, slidebar yang tidak seimbang dll.

Bagi anda yang sedang mencari tau bagaimana cara mengatur lebar template, berikut saya akan berikan arahan dan bisa di setting sesuai ukuran yang anda inginkan.

Untuk proses pelebaran badan blog anda, tentunya anda harus mengetahui sedikit atau pengkodean dasar HTML, tetapi jika anda yang tidak mengerti sama sekali, mari ikuti petunjuk yang akan saya berikan.

Langkah 1 (Masuk Ke Menu Pengkodean HTML)
  • Pastinya login dulu ke blogger.com milik anda
  • Pilih menu << Template >>
  • Klik Edit HTML
Langkah 2 (Mengatur Ukuran Header Blog)

Anda cari terlebih dahulu kode seperti ini #header-wrapper, Kode tersebut adalah menu header anda atau bagian kepala blog anda.

Lihat contoh dibawah ini:
#header-wrapper {
width:920px;
margin:0 auto 10px;
border:1px solid $bordercolor;}
Keterangan:
Warna yang berwarna biru adalah kode untuk header template blog anda.
Warna Merah adalah Ukuran lebar Header template blog anda.

Catatan:
Untuk kode berwarna merah bersifat variatif setiap template mempunyai ukuran yang berbeda, dan kode merah itu adalah untuk mengatur lebar header blog anda, saya sarankan 920px, karena itu adalah ukuran yang disukai google.

Langkah 3 (Mengatur Lebar Keseluruhan Blog)

Anda kemudian cari kode #outer-wrapper Kode ini adalah untuk mengatur lebar keseluruhan blog. Kode #outer-wrapper didalamnya biasanya dan pasti berisi ukuran #main-wrapper (Kolom isi postingan blog), #sidebar-wrapper (Kolom Sidebar Blog).

Lihat contoh dibawah ini:
#outer-wrapper {
width: 920px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;}
Keterangan:
#outer-wrapper adalah kode untuk mengatur keseluruhan body blog anda.
width: 920px; nilai ukuran blog anda, kenapa saya berikan 920px, seperti yang dikatakan diatas ini adalah nilai minimalis terbaik untuk blog, dan harus sama dengan nilai header blog tersebut.

Langkah 4 (Mengatur Ukuran Lebar Postingan Blog)
Anda kembali cari kode #main-wrapper Ini adalah kode untuk mengatur lebar postingan blog anda, anda bisa mengatur nya dengan sangat mudah, jangan samakan ukurannya dengan ke 3 ukuran diatas.

Lihat contoh dibawah ini:
#main-wrapper {
width: 318px;
margin-left: 20px;
margin-right: 20px;
float: left;}
Keterangan:
#main-wrapper adalah kode untuk bagian postingan anda, sementara ;
width: 318px; adalah ukuran besar atau lebar kolom postingan anda.

Langkah 5 (Mengatur Ukuran Lebar SlideBar Blog)
Kemudian anda cari #sidebar-wrapper, kode tersebut adalah kode untuk mengatur slidebar anda yang berada disamping blog anda, slidebar ini yang menampung widget pada blog anda.

Lihat contoh dibawah ini:
#sidebar-wrapper {
width: 300px;
float: right;}
Keterangan:
#sidebar-wrapper Kode untuk bagian slidebar blog anda.
width: 300px; ukuran lebar slidebar blog anda.

Seperti itulah cara saya memperlebar blog miliknya mas sugeng BroSense, dan itulah ukuran yang saya terapkan pada template yang saya gunakan saat ini, semoga bermanfaat bagi anda yang ingin mengubah ukuran-ukuran blog anda.

Semoga berhasil.
Tags :

Related : Cara Mengatur Ukuran Lebar Blog (Template BroSense Mas Sugeng)

16 Responses to "Cara Mengatur Ukuran Lebar Blog (Template BroSense Mas Sugeng)"

  1. waduh mas saya cari kodenya gak ketemu ketemu susah mas

    ReplyDelete
    Replies
    1. coba pakai CTRL+F kemudian tulis kode yang dicarinya di kolom hasil CTRL+F nya

      Delete
  2. Gan #outer-wrapper ga ada di brosense

    ReplyDelete
    Replies
    1. ada mas, ini buktinya punya saya bisa di edit.

      Delete
  3. pake pict dari html nya dong gan. yang dibagian header, widhtnya ada banyak, bingung mau yang mana? banyak juga bagian yang enggak ketemu. saya pake brosense v2

    ReplyDelete
  4. A'.. ane bingun.. blog ane pict di header gan bisa pull sama ukuran kaya body.. tak cari2.. malah bingung sendiri.. gimana a'?? bisa bantukah?
    ni blognya.
    https://dikyannajah.blogspot.co.id/

    ReplyDelete
  5. gan saya izin copy template editan agan dari wrapper sampai sidebar-wrapper nya, soalnya saya kurang paham tentang html :-D makasih

    ReplyDelete
  6. Mantap http://mamorpublicate.wordpress.com

    ReplyDelete
  7. gan cara menambah menu di Brosense gimana ya

    ReplyDelete
  8. Mantap http://mamorpublicate.blogspot.com

    ReplyDelete
  9. saya masih bingung gan untuk ngedit nya

    http://duniapenemu.blogspot.com

    ReplyDelete
  10. kak gimana cara ngilangin post date sama post labelnya biar kaya punya kakak jd kliatan simple dan rapi dibuka di hp. mohon bantuannya kak

    ReplyDelete

PERHATIAN !!!

Terima Kasih Telah Berkunjung.
Saya sangat senang dengan pengunjung saya yang memberikan komentar setiap kali selesai membaca artikel saya, itu adalah cara untuk memberitahu saya bahwa dia telah membaca artikel saya, dan membuat saya dengan senang hati akan mengunjungi blog pengunjung tersebut (jika pengunjung mempunyai blog)

- Berkomentar Dengan Baik Dan Sopan
- No Link Aktif
- Boleh Rekomendasi
- Suka ? Bagikan !