Cara Membuat Jarak Header Dan Body Dengan CSS. Buat pengguna platform blogger (blogspot) terutama yang masih pemula (newbie) seperti Admin. Mungkin kamu saat ini sedang memikirkan tampilan template blog yang rasanya masih kurang sesuai dengan keinginan. Misalnya saja tentang jarak antara header dan body pada tema blog yang kamu pakai.
Jika jarak header (kepala blog) terlalu mepet akan terlihat kurang sedap. Dan sebaliknya, jika terlalu renggang antara body dengan header juga kurang indah. Maka untuk menjawab masalah ini, Admin akan coba berikan solusinya menurut pengalaman pribadi.
Pada kasus yang serupa, seperti menghilangkan garis bawah (bottom) pada header. Cara yang akan kami bagikan ini nanti juga bisa mengatasinya. Dan mungkin saja masalah ini juga terjadi pada tema yang kamu pakai. Terutama template blogger layout versi-2.
Cara Simple Membuat Jarak Header Dan Body Pada Tema Blogger
Tema blog yang di gunakan oleh blogger terbagi menjadi tiga bentuk tampilan. Ada yang satu halaman, 2 halaman dan 3 halaman. Kalau di perinci satu persatu, maka akan terbagi menjadi beberapa kotak. Lihat perinciannya di bawah ini.
01#. Template Satu Halaman
Template satu halaman, ini artinya tema tersebut hanya terdiri dari header, body dan footer saja. Tema semacam ini juga banyak yang menggunakannya. Jika di buka lewat versi mobile atau dekstop, tampilannya tetap satu halaman.
02#. Template Dua Halaman
Tema jenis ini paling umum dan banyak sekali blogger yang menggunakannya. Template ini terdiri dari header, body content postingan, sidebar kanan, dan footer. Template jenis ini, jika di buka via mobile tampilannya cuma satu halaman. Jika di buka versi dekstop, maka akan tampil dua bentuk halaman, yaitu body content dan sidebar kanan.
03#. Template Tiga Halaman
Untuk tema jenis tiga halaman, ini terdiri dari header, body content, sidebar kanan, sidebar kiri, dan footer. Pengguna template jenis ini tidak terlalu banyak, sebab mayoritas blogger suka yang lebih simple. Yaitu menggunakan 2 halaman yang sudah bisa menampilkan berbagai widget, seperti popular post atau related post dan menu lainnya.
Selanjutnya tentang mengatasi masalah jarak antara header dan halaman body template blogger. Jika terjadi pada tiga jenis tampilan tema di atas, maka tutorial sederhana di bawah ini nanti mungkin bisa di terapkan pada tema-tema tersebut.
Tapi sebenarnya, tip ini lebih spesifik untuk tema tampilan dua halaman. Dan jika kamu pengguna template 1 dan 3 halaman, cara ini bisa kamu coba. Siapa tahu bisa berhasil.
Cara Mengatasi Masalah Jarak Header Dan Body Di Blogger Dengan CSS
Pengguna blogger secara umum dan paling banyak menggunakan tema dua halaman. Dan rata-rata tema tersebut hasil modifikasi dari template asli (induknya) yaitu tema Simple dan sejenisnya. Tampilan asli tema tersebut belum responsive dan memenuhi standard Seo.
Agar tema tersebut bisa responsive dan Seo, maka banyak sekali blogger yang merubahnya. Agar tema tersebut bisa menyesuaikan lebar berbagai perangkat seperti mobile smartphone dan dekstop.
Dalam proses modifikasi template tersebut, kadang mengalami masalah. Seperti memberi jarak antara header, body postingan dan sidebar (halaman samping). Atau mungkin kamu hanya sebagai pengguna tema hasil modifikasi tersebut ingin merubahnya.
Maka, untuk solusinya silahkan baca artikel ini sampai tuntas. Agar tidak gagal paham dan bisa menerapkannya pada template yang kamu gunakan.
Di bawah ini merupakan cara membuat dan solusi mengatasi jarak header dan body konten dengan kode CSS.
1. Masuk dashboard blogger ->. 2. Cari menu Tema ->. 3. Cari menu Edit HTML ->. 4. Cari kode </b:skin> atau </head>..
Selanjutnya silahkan copy kode CSS di kotak hijau bawah ini. Lalu tempel di atas kode: </b:skin>.
.content-inner {margin-top: -32px !important; } .main-inner {padding-top:0px} .main-inner .column-center-inner {margin-top:8px;} .main-inner .column-right-inner {margin-top:8px;}
Untuk alternatif pemasangan kode CSS, bisa juga di atas kode: </head>. Silahkan copy kode CSS di bawah ini.
<style type='text/css'> .content-inner {margin-top: -32px !important; } .main-inner {padding-top:0px} .main-inner .column-center-inner {margin-top:8px;} .main-inner .column-right-inner {margin-top:8px;}</style>
Selanjutnya, tentang CSS di atas fungsinya adalah mengurangi halaman body content pada bagian atas. Untuk penyesauaian membuat jaraknya silahkan di rubah angka pada kode CSS dengan sesuka kamu.
Kemudian, ada juga cara lain yang lebih simple. Yaitu dengan kode Css juga, tapi beda susunan scriptnya. Silahkan di Copy kode di bawah ini, lalu tempel di atas kode: </head> pada Editor Html template.
<style>header{margin-bottom:-30px;}</style>
Fungsi CSS simple di atas adalah untuk mengurangi bagian bawah header. Misalnya pada header bagian bawah terdapat garis horizontal, maka garis tersebut akan di tarik ke atas. Dan untuk jumlah angka pada kode tersebut, silahkan di rubah menurut kesukaan kamu. Tergantung dengan jarak yang kamu inginkan.
Demikian Cara Membuat Jarak Header Dan Body Di Blogger Dengan CSS. Semoga bermanfaat..
Tidak ada komentar:
Posting Komentar