Skip to content Skip to sidebar Skip to footer

Membuat header blog berada di tengah

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. 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. 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. Sob script ini valid tidak untuk HTML 5 ?
    Thanks sudah berbagi Cara Membuat nya.

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

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

      Delete
  5. 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. 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. 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
  6. Kalau header tanpa gambar di pindahin ketengah bisa ga

    ReplyDelete
  7. Sipp masbro. Bermanfaat banget.
    Thanks

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

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

    ReplyDelete
  10. akhirnya bisa juga. makasih banget yak...

    ReplyDelete
  11. Tks infonya Gan.

    ReplyDelete
  12. Edit HTML Expand template widget dari mana kok gk ada

    tp yg ada cuma Edit HTML doang gan tolong di bantu

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

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

    ReplyDelete