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

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.

You may like these posts

27 comments for "Membuat header blog berada di tengah"

Comment Author Avatar
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...
Comment Author Avatar
TTN May 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
Reply Delete
Comment Author Avatar
Lintas Line April 3, 2013 at 3:26 AM
Sob script ini valid tidak untuk HTML 5 ?
Thanks sudah berbagi Cara Membuat nya.
Comment Author Avatar
TTN April 3, 2013 at 6:56 AM
valid sob, cuma css ringan :D
Delete
Reply Delete
Comment Author Avatar
Cepy HR April 20, 2013 at 4:34 PM
akhirnyaa... thank you.. bermanfaat banget :')
Reply Delete
Comment Author Avatar
delviana April 25, 2013 at 12:50 AM
kok nggak bisa ya kak?
Comment Author Avatar
TTN April 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
Reply Delete
Comment Author Avatar
Unknown May 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
Comment Author Avatar
TTN May 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
Comment Author Avatar
TTN May 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
Reply Delete
Comment Author Avatar
Unknown June 1, 2013 at 2:36 PM
Kalau header tanpa gambar di pindahin ketengah bisa ga
Reply Delete
Comment Author Avatar
Unknown June 7, 2013 at 12:33 PM
Sipp masbro. Bermanfaat banget.
Thanks
Reply Delete
Comment Author Avatar
klinik Healty July 12, 2013 at 2:25 AM
thanks atas totorialnya klo sempat berkunjung blog kami ya... makasih
Reply Delete
Comment Author Avatar
Anonymous August 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...^^
Reply Delete
Comment Author Avatar
Haris January 17, 2014 at 11:35 AM
akhirnya bisa juga. makasih banget yak...
Reply Delete
Comment Author Avatar
Bube January 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
Comment Author Avatar
TTN January 7, 2015 at 8:39 AM
maksudnya pingin mencari code /* Content ya? letaknya ada di dalam template bagian atas
Delete
Reply Delete
Comment Author Avatar
Unknown June 13, 2015 at 10:44 PM
Thank's,
Mau tahu tentang cara cari duit Online
Klik disini Hindi-indo.blogspot.com
Reply Delete