Cara Merapikan Tata Letak Layout Blog dengan cepat

hello sobat pada posting kali ini saya akan membagikan Cara Merapikan Tata Letak Layout Blog dengan cepat. untuk masalah ini anda akan mengalaminya entah saat berganti template baru, ataupun saat mulai membuat sebuah template blog baru.

tak jarang pasti anda sempat kebingungan untuk bagaimana mengatasinya agar tata letak layout blog anda menjadi rapi, dan mudah untuk meletakkan bagian-bagian dari widget yang akan ditambah, masalah ini pernah saya alami juga ketika awal mula saya baru tau mendesign sebuah template.

sekiranya saya salah dalam meletakkan bagian-bagian HTML blog saya. ternyata bukan itu masalahnya.

masalah utamanya terletak pada layout-layout yang tidak mempunyai nilai CSS body layout pada template. sehingga saat anda membuka tata letak, mereka menjadi bertumpuk mengikuti nilai HTMLnya.

bagaimana cara merapikan ataupun cara mengatasinya agar lebih mudah saat anda meletakkan beberapa widget di header, sidebar maupun di footer. berikut bisa anda simak, cara-caranya :

Cara Merapikan Tata Letak Layout Blog.

  • untuk Cara Merapikan Tata Letak Layout Blog dengan cepat anda cukup menuju ke TATA Letak Layout BLOGGER ANDA.
  • klik kanan pada keyboard dan pilih inspek elemen. seperti anda lihat gambar saya dibawah ini, terlihat inspek elemen yang telah terbuka, dan pada gambar di bawah ini anda bisa lihat TATA Letak LAYOUT blog saya yang berantakan, atau tidak pada tempat sebagaimana mestinya.
Cara Merapikan Tata Letak Layout Blog dengan cepat
Cara Merapikan Tata Letak Layout Blog dengan cepat
  • untuk merapikannya usahakan dari atas. disini saya mulai dari HEADER. terlebih dahulu anda gunakan tool yang berada pada inspek elemen, gunakan tool Pick element lihat pada gambar dibawah ini Tool yang saya beri lingkar merah, gunanya untuk menyeleksi atau memilih element TATA LAYOUT BLOG ANDA. seperti gambar dibawah ini.
Cara Merapikan Tata Letak Layout Blog dengan cepat
  •  jika sudah terseleksi (ingat seleksi dibagian luar saja) cobalah anda ketikkan code berikut ini tepat di element inspek element .seperti gambar berikut ini, lihat yang saya beri lingkar merah. kegunaan inspek element disini untuk kita mengetest sebuah nilai code CSS.
Cara Merapikan Tata Letak Layout Blog dengan cepat
  • setelah itu, lihatlah apakah ada perubahan pada TATA LETAK LAYOUT HEADER anda. jika sudah didapat perubahan ukuran maupun tempat pada TATA LETAK LAYOUT HEADER, copy code yang berada dielement, kemudian simpan di notepad atau dimana saja. 
  • karena disini yang kita edit adalah TATA LETAK LAYOUT HEADER jadi penerapan CSSnya seperti ini.
  • tambahkan body#layout setelah itu baru #header selanjutnya nilai code tersebut. seperti dibawah ini.
body#layout #header {
    float: left;
    width: 250px;
}

perlu diketahui setiap element id pada template berbeda-beda. disini saya memakai template buatan saya sendiri dengan header saya beri nama id : HEADER , anda dapat menemukan nama id tersebut ketika menyeleksi element pada tahap diatas, nama id tersebut setelah code div .

  • untuk selanjutnya anda dapat terapkan pada semua elemen seperti cara diatas, pada TATA LETAK LAYOUT masing-masing element. saya beri tips agar lebih mudah. 
  • untuk main-wrapper atau pada bagian elemen layout artikel-wrapper, cukup beri code width:500px; tidak perlu lagi anda menerapkan Float:left; .
  •  dan untuk sidebar atau sidebar-wrapper anda dapat memberikan code width:300px; dan float:right;.jika anda menggunakan sidebar pada sebelah kiri artikel-wrapper ganti right dengan left.
    • bagi anda yang menggunakan template dengan 3 footer widget. agar semua menjadi rapi. terapkan dengar ukuran width yang sesuai mungkin 255px pada setiap widget-footer element, dari pertama, kedua, maupun ketiga. seperti contoh yang saya gunakan.dan berikan float:left tiap-tiap element.
    • jangan lupa sertakan body#layout pada tiap-tiap element, anda bisa melihat contoh dari code body#layout yang saya gunakan dibawah ini pada tutorial cara membuat template blog.
    bagi kalian yang mengikuti tutorial saya tentang cara membuat template blog, maka jika masih bingung untuk mengatur dan merapikan tata letak blog, langsung saja copy code dibawah ini, dan letakin di bawah garis keterangan template anda. seperti gambar dibawah ini atau dibawah code "<b:skin><![CDATA[" :
    Cara Merapikan Tata Letak Layout Blog dengan cepat
    Tampilan HTML dan CSS Coding Di Blog.

    body#layout #header {
        float: left;
        width: 250px;
    }
    
    body#layout #header-ads {
        float: left;
        width: 500px;
    }
    
    body#layout #artikel-wrapper {
        width: 495px;
        float: left;
    }
    
    body#layout #sidebar-wrapper {
        float: right;
        width: 300px;
    }
    
    body#layout #footerbar1 {
        width: 255px;
        float: left;
    }
    
    body#layout #footerbar2 {
        width: 255px;
        float: left;
    }
    
    body#layout #footerbar3 {
        width: 255px;
        float: left;
    }
    lihat lagi ukuran-ukuran ataupun id tiap-tiap element, koreksi lagi menggunakan inspek element jika dirasa ukuran body layout masih kurang pas.

    saya rasa ini hal yang tidak terlalu suli dan rumit , cukup menerapkan elemen baru pada layout blog serta mulai memperbaiki tata letaknya, jika anda belum berhasil memperbaikinya anda boleh tanya saya dikotak komentar dibawah ini.

    demikian artikel tentang Cara Merapikan Tata Letak Layout Blog dengan cepat semoga apa yang saya bagikan kepada anda dapat bermanfaat, terimakasih ^_^.

    16 komentar

    Gan Cara mengatasi tata letak yang hanya terlihat separuh giman ya,jadi tulisan edit nya kga ada,,

    coba besarkan saja lebarnya, untuk mengetahui id elementnya bisa gunakan inspek element seperti cara diatas.

    Saya Kan Mengikuti Cara Mas Membuat Template Dari Nol Trus Saya Mau Atur Tata Letak nya Dan Cara Diatas Sudah Saya Coba Tapi Tidak Berhasil

    Saya sudah mengikuti tutorial buat blog dari nol, dan berhasil
    saya mencoba bagian tata letak layout. dan gagal total -_-

    Udah ane update, sihlakan di copy codingnya, untuk agan yang belajar membuat template.

    ok Udah ane update/fix, sihlakan di copy codingnya di atas, untuk agan yang belajar membuat template dan masih gagal di tata letaknya.

    terima kasih saya sempat kebingungan awal nya

    sama" gan. thanks juga telah mampir. :)

    mas kenapa artikel saya tulisannya terpotong

    Terpotong gmn ya ?, coba test pake inspect element tool , jangan salah di element cssnya dan pada nilai width Dan height

    Komentar ini telah dihapus oleh pengarang.

    Berbagi pengalaman aja mas, sebenernya permasalahan itu timbul gara gara menambahkan beberapa css baru di bawah "skin"
    Saya juga pernah mengalami hal seperti itu, jadi saya coba memindahkan posisi css yang baru saya tambahkan yang tadinya dibawah "skin" dan saya coba pindahkan diatas "/skin" dan hasilnya normal kembali seperti semula.
    Soalnya kan style dari setiap template berbeda beda, jadi jika ditambahkan lagi body # layout yang baru malah ukuran yang sudah di atur sebelumnya menjadi ganda.
    Jadi disini yang saya mau tanyakan, jika ada css yang ganda apa tidak masalah pada speed blog?
    Dan terimakasih mas saya jadi dapet trik baru dari artikel mas.

    Ok sama" gan, untuk permasalahan CSS ganda dengan speed blog tergantung brp banyak ├žss yang ganda, dan ini juga berpengaruh dengan speed blog karena semakin banyak element Css maka pemuatan html semakin lambat juga. Jadi speed blog akan lambat ketika dibuka.

    Oh gitu ya gan, tapi emang susah juga ya kalo nyari ada script yg ganda, mau coba hapus yg ganda dan salah dikit tampilan blog kacau haha
    Makasih banyak gan atas masukannya.
    Senang bisa dapet pelajaran baru disini.

    - Berkomentarlah dengan sopan.
    - No Link Aktif, SPAM, SARA P#RN.
    - Jangan membalas yang tidak sesuai tema.
    - Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
    EmoticonEmoticon