Home / Tutorial Blog

Membuat header blog berada di tengah

27 comments
Membuat header blog berada di tengah



 Ini adalah tutorial men-center-kan header  pada awal membuat blog dari template pembawaan blogger pasti header atau judul blog yang kita buat akan berada di tepi pinggir sebelah kiri. Sebenarnya header itu bisa diletakkan ke tengah hanya dengan sedikit coding dengan memasukkan kode tertentu. Aku akan menulis tutorial membuat header blog berada di tengah ada dua cara untuk template simple seperti di blog aku ini. Alternatif kalau tidak berhasil karena setiap template berbeda, pergilah ke SINI

Cara pertama seperti di blogku:

1.Login > Dashboard > Template > Edit HTML Expand template widget
2.Tekan CTRL + F cari kode berikut ini:

/* Content

3.Copy paste kode di bawah ini dan letakkan di atas kode no 2

.Header img {margin-$startSide: auto;margin-$endSide: auto;}
4.Jadinya seperti ini:

.Header img {margin-$startSide: auto;margin-$endSide: auto;}
/* Content

5.Tekan preview dan save/tekan pratinjau dulu baru save template.

Cara yang kedua (mungkin ada yang template nya seperti ini):

1.Cari kode berikut:

#header-inner {

2.Letakkan kode di bawah ini tepat setelah kode no 1 di atas:

 background-position: center; margin-left: auto; margin-right: auto;} 
Membuat header blog berada di tengah
HEADER DI TENGAH
3.Untuk membuat header berada di tengah kodenya jadi seperti berikut:
#header-inner {background-position: center; margin-left: auto; margin-right: auto;} 

Membuat header blog berada di tengah
HEADER DI SEBELAH KIRI
background-position: left; margin-right: auto;} 

Membuat header blog berada di tengah
HEADER DI SEBELAH KANAN
background-position: rigt; margin-left: auto;}

Jadi header atau judul blog mau diletakkan di tengah, tepi kiri atau kanan kodenya tinggal menambahkan sendiri seperti di atas.

27 comments for "Membuat header blog berada di tengah"

  1. Nama pena, Puteri Nur Cahaya @ Cikgu iEta. Suri rumah sepenuh masa. Penulis Lifestyle Blogger berpengalaman Social Media Marketing Coach.March 11, 2013 at 6:13 PM

    Asalnya header sy nampak suku sahaja. Sy dah cuba pelbagai cara dari lain2 tuto termasuk tuto dari cik ni. Kod dalam blog sy ialah #Header1 { Sy adjust nombor dari 1500 kepada yg lebih besar dan cuba ikut tuto dalam blog ini yg ke 3. Sekadar boleh paparkan header tetapi dikanan tidak ditengah. Tak tahu dah nak buat macamana. huhu...

    ReplyDelete
    Replies
    1. ALICEMay 6, 2013 at 10:52 PM

      ye lah tu,kadang setiap template berbeda,jadi mungkin solusinya pakai haeader dengan kode html saja yang diletakkan dalam header tata letak :D

      Delete
  2. Lintas LineApril 3, 2013 at 3:26 AM

    Sob script ini valid tidak untuk HTML 5 ?
    Thanks sudah berbagi Cara Membuat nya.

    ReplyDelete
  3. UnknownApril 7, 2013 at 9:11 PM

    kok ga bisa ya -___-"

    ReplyDelete
  4. Cepy HRApril 20, 2013 at 4:34 PM

    akhirnyaa... thank you.. bermanfaat banget :')

    ReplyDelete
  5. delvianaApril 25, 2013 at 12:50 AM

    kok nggak bisa ya kak?

    ReplyDelete
    Replies
    1. ALICEApril 25, 2013 at 7:14 AM

      hmmm iya memang banyak kasus pada gagal karena mungkin template nya berbeda,coba cari cara dengan yang memakai kode html

      Delete
  6. UnknownMay 5, 2013 at 4:35 PM

    min blog sayakan latarx transparant gitu kaya gambar no 2 tapi utk background postingx nggak , itu bisa diganti gak ya backgroundnya , biar nggak transparant gitu , kalo bisa ada tutorialnya nggak ?? mhon bantuannya. tks

    ReplyDelete
    Replies
    1. ALICEMay 5, 2013 at 9:34 PM

      itu namanya di bagian main seperti tutorial di blog saya yang judulnya cara membuat border melengkung keliling blog, ini contoh kodenya kalau mau ngasih background, taruh di bawah kode Main:

      .main-outer {
      background: #FFF url(ISI DENGAN URL BACKGROUND);
      border: 1px dotted #fff;

      Delete
    2. ALICEMay 5, 2013 at 9:40 PM

      kalau background di postingan,letakkan kodenya di bawah kode:
      .post-outer {
      background: #FFF;
      border: 1px solid #FFF;
      padding: 15px 20px;
      margin: 0-20px 20px;
      }

      itu contoh kodenya :D

      Delete
  7. UnknownJune 1, 2013 at 2:36 PM

    Kalau header tanpa gambar di pindahin ketengah bisa ga

    ReplyDelete
  8. UnknownJune 7, 2013 at 12:33 PM

    Sipp masbro. Bermanfaat banget.
    Thanks

    ReplyDelete
  9. klinik HealtyJuly 12, 2013 at 2:25 AM

    thanks atas totorialnya klo sempat berkunjung blog kami ya... makasih

    ReplyDelete
  10. AnonymousAugust 3, 2013 at 7:22 AM

    salam ramadhan...thanks for sharing tutor sy dh buat menjadi...nti singgah blog sy ye ada entry pasal awk...^^

    ReplyDelete
  11. UnknownAugust 20, 2013 at 12:20 PM

    Iya, aku juga nggak bisa Kak...

    ReplyDelete
  12. HarisJanuary 17, 2014 at 11:35 AM

    akhirnya bisa juga. makasih banget yak...

    ReplyDelete
  13. UnknownJune 1, 2014 at 10:22 PM

    kok aq gk ad ya, kodenya?

    ReplyDelete
  14. AnonymousJuly 12, 2014 at 5:40 AM

    Tks infonya Gan.

    ReplyDelete
  15. BubeJanuary 6, 2015 at 10:22 PM

    Edit HTML Expand template widget dari mana kok gk ada

    tp yg ada cuma Edit HTML doang gan tolong di bantu

    ReplyDelete
    Replies
    1. ALICEJanuary 7, 2015 at 8:39 AM

      maksudnya pingin mencari code /* Content ya? letaknya ada di dalam template bagian atas

      Delete
  16. UnknownJune 9, 2015 at 5:58 AM

    mkasi ^_^

    ReplyDelete
  17. UnknownJune 13, 2015 at 10:44 PM

    Thank's,
    Mau tahu tentang cara cari duit Online
    Klik disini Hindi-indo.blogspot.com

    ReplyDelete
  18. DeluluJune 18, 2015 at 11:32 PM

    Thank youuu ^^^

    ReplyDelete
  19. Achmad MuhdorJuly 2, 2016 at 3:54 PM

    thank mas bro..

    ReplyDelete
  20. UnknownFebruary 8, 2017 at 12:38 PM

    Terimakasih gan....

    ReplyDelete
  21. UnknownMarch 23, 2017 at 10:38 AM

    alhamdulillah berhasil...

    Rental ELF Jakarta
    Rental ELF Jakarta Selatan

    ReplyDelete