Membuat Template Terletak Ditengah

Membuat template Terletak di tengah yang saya maksud adalah layout template anda akan selalu terlihat di tengah oleh pengunjung walaupun menggunakan monitor dengan resolusi yang berbeda.

mytemplate

Sebenarnya postingan ini khusus bagi anda yang suka mengutak-atik template ataupun yang suka mendesain sebuah template baik itu untuk di pakai sendiri ataupun untuk di pakai oleh orang lain.

Untuk membuat agar layout template anda tampak di tengah sangat lah mudah karena anda tinggal mengubah nilai kode margin ke mode auto, Contoh kodenya seperti ini :

margin: 0 auto;

Keterangan :

0 --> margin sebesar 0px ( pixel ) untuk batas atas dan batas bawah. Jika batas atas dan batas bawah ingin ada jaraknya, maka tinggal anda tambahka nilainya, misal : 10px.

auto --> agar batas kiri dan batas bawah bisa selalu seimbang, sehingga layout template anda akan selalu terlihat di tengah.

Dengan menambahkan kode tersebut ke template anda, maka layout template anda akan tampak selalu berada di posisi tengah walaupun resolusi monitor pengunjung anda berbeda-beda.

Contoh :

Dalam kode template kang Rohman, layout terluar kang Rohman di namakan #wrap :

#wrap {
    width: 966px;
    margin: 0 auto;
    padding: 0;
    line-height: 18px;
    word-wrap: break-word;
     font-family: Arial, Tahoma, Verdana;
     font-size:12px;
     overflow: hidden;
      background:$wrapcolor;      
      }

Dengan kode yang saya beri warna merah, maka layout template akan tampak berada di tengah. Lain halnya jika anda menyimpan kode seperti ini :

 

#wrap {
    width: 966px;
    margin: 0 ;
    padding: 0;
    line-height: 18px;
    word-wrap: break-word;
     font-family: Arial, Tahoma, Verdana;
     font-size:12px;
     overflow: hidden;
      background:$wrapcolor;      
      }

Layout template anda akan terlihat mepet ke kiri, semakin besar resolusi monitor pengunjung maka template anda akan terlihat semakin mepet ke kiri :

leftylayout

Tapi ini adalah masalah selera, situs sebesar kompas.com pun lebih suka terlihat mepet ke kiri di banding terlihat di tengah seperti halnya situs detik.com

centerlayout

 

Semoga anda jadi bingung dengan postingan ini !

Share on Google Plus

About Admin

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar

Labels

blogspot tutorial ( 112 ) blog tutorial ( 110 ) blogging tutorial ( 34 ) download gratis ( 27 ) guest post ( 26 ) free tool ( 24 ) free template ( 23 ) SEO ( 17 ) wordpress ( 17 ) blogger tutorial ( 9 ) the mez template ( 9 ) Belajar SEO Blogger ( 8 ) freeware ( 8 ) Blogging relax Tips ( 7 ) Dokumentasi The Mez template ( 7 ) download template ( 7 ) website info ( 7 ) google adsense ( 6 ) google service ( 6 ) modifikasi blog ( 6 ) aksesori blog ( 5 ) asal posting ( 5 ) blogger isu ( 5 ) browser ( 5 ) free icons ( 5 ) menu navigasi css ( 5 ) sahabat ( 5 ) software gratis ( 5 ) Blog ( 4 ) SEO khusus blogger ( 4 ) cool website ( 4 ) edit template ( 4 ) komputer ( 4 ) Blogspot ( 3 ) Firefox ( 3 ) Kampanye Damai Pemilu Indonesia 2009 ( 3 ) Riset Keyword ( 3 ) SEO Contest ( 3 ) Tanya Saja ( 3 ) anti virus ( 3 ) google docs ( 3 ) kotak komentar ( 3 ) navigasi dengan css ( 3 ) opera ( 3 ) template 3 kolom ( 3 ) Bisnis Online ( 2 ) Iklan anda ( 2 ) PhotoShop ( 2 ) SEO Khusus blogspot ( 2 ) Template support ( 2 ) Yahoo ( 2 ) add-on ( 2 ) alexa rank ( 2 ) backup widget ( 2 ) blog tools ( 2 ) drop down menu ( 2 ) fitur blogger ( 2 ) hosting ( 2 ) read more ( 2 ) tutor wordpress ( 2 ) uang gratis ( 2 ) unek-unek ( 2 ) virus ( 2 ) weatern union ( 2 ) wordpress tutorial ( 2 ) yahoo icon ( 2 ) Biisnis Internet ( 1 ) English ( 1 ) Google chrome ( 1 ) HUT RI ( 1 ) I'm is back ( 1 ) Info Browser ( 1 ) Jasa Pembuatan Blog ( 1 ) Link Building ( 1 ) avatar ( 1 ) banner ( 1 ) bisnis ( 1 ) cari duit di internet ( 1 ) domain ( 1 ) ebook ( 1 ) favicon ( 1 ) free ebook ( 1 ) google talk ( 1 ) hiasan blog ( 1 ) internet business-RM ( 1 ) kasus ( 1 ) kontes ( 1 ) langka tapi nyata ( 1 ) membuat navbar ( 1 ) membuat readmore ( 1 ) mencari uang di internet ( 1 ) menu dropdown ( 1 ) panduan bisnis online ( 1 ) panduan blogger ( 1 ) pasang iklan ( 1 ) plugin wordpress ( 1 ) rss button ( 1 ) search engine ( 1 ) shoutbox ( 1 ) sosok favorit ( 1 ) table of content ( 1 ) uang kopi ( 1 ) video ( 1 ) video comedy ( 1 ) wallpapers ( 1 ) wordpress plugin ( 1 )