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.
waduh mas saya cari kodenya gak ketemu ketemu susah mas
ReplyDeletecoba pakai CTRL+F kemudian tulis kode yang dicarinya di kolom hasil CTRL+F nya
DeleteGan video nya dong
ReplyDeletenyusul gan, belum bikin hehe
DeleteGan #outer-wrapper ga ada di brosense
ReplyDeleteada mas, ini buktinya punya saya bisa di edit.
Deletepake 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
ReplyDeletenanti saya coba repost mbak
DeleteA'.. ane bingun.. blog ane pict di header gan bisa pull sama ukuran kaya body.. tak cari2.. malah bingung sendiri.. gimana a'?? bisa bantukah?
ReplyDeleteni blognya.
https://dikyannajah.blogspot.co.id/
gan saya izin copy template editan agan dari wrapper sampai sidebar-wrapper nya, soalnya saya kurang paham tentang html :-D makasih
ReplyDeleteMantap http://mamorpublicate.wordpress.com
ReplyDeletegan cara menambah menu di Brosense gimana ya
ReplyDeleteMantap http://mamorpublicate.blogspot.com
ReplyDeletesaya masih bingung gan untuk ngedit nya
ReplyDeletehttp://duniapenemu.blogspot.com
kak gimana cara ngilangin post date sama post labelnya biar kaya punya kakak jd kliatan simple dan rapi dibuka di hp. mohon bantuannya kak
ReplyDeleteDownload Lagu MP3 Gratis STAFABAND
ReplyDeleteWah Download Lagu enak cepat dan mudah
ReplyDeletesepertinya sangat membantu. Thanks infonya Gan.. salam dari TV Online
ReplyDeleteDownload Lagu
Stafaband
Stafaband
Terimakasih ya infonya
ReplyDeleteVisit juga ya >>> Dewa Lautan
Thankz kakak :)
Terima kasih tutorialnya.
ReplyDeleteTutorialnya bagus.
ReplyDeleteLagu Baru free new song grastis tercepat dan terlengkap tinggal klik tulisan lagu baru
ReplyDeleteklik free song Lagu Baru Gratis terlengkap dan tercepat
ReplyDeletedi coba dlu gan tengkyuu
ReplyDeleteDownload Lagu MP3
Download Lagu
Download Lagu
ReplyDelete