Pisahkan header dari blog untuk template designer

Assalamualaikum dan hai kepada korang yang sedang membaca belog ini! HAHA. Dah nak dekat seminggu juga aku tak update belog ni ya? Aku tengok semua orang busy update itu ini. Dalam sehari banyak gila entry yang keluar. Dari pagi ke malam aku tengok asyik ping entry aje. Daripada orang yang sama pulak tu. Hmm. Bergeliga sangatlah otak tu kan, baguslah tu,HEHE.

By the way, aku ada buat belog baru, khas untuk dunia novel, yeah! Nama pun novel kan? Mestilah novel aje,HAHA. Dah lama jugak sebenarnya aku menulis ni tapi tak pernah serius dan tak pernah habis cerita. So, kira kali ini aku dah seriuslah konon nak menulis cerita kan. Korang semua amat dialu-alukan untuk membaca. Boleh klik gambar kat sidebar tu. 

Akey, berbalik pada tajuk kita ni. Banyak juga yang tak dapat nak buat header tu terpisah, terutama bagi pengguna template designer, di mana mereka menggunakan template yang telah disediakan oleh pihak blogger sendiri. Mesti banyak yang teringin nak buat macam blog- blog lain kan? Buat header transparent yang cantik dan blog yang menawan juga! Tapi malangnya tak dapat buat semua tu sebab template korang lain dan blog korang kelihatan seperti ini.

Mesti sia- sia kan kalau dah buat header transparent tapi bila letak kat blog jadi macam tu pulak. So, aku nak tanya, korang nak buat header korang terpisah tak dari blog post korang? Nak? Jom..

Mula- mula sila Sign in ke dashboard korang terlebih dahulu. Pergi ke Design --> edit Html. Sekarang ni korang klik Expand widget pulak. Tengok contoh dalam gambar kat bawah ni.

Sekarang, tekan Ctrl + F atau F3 kat keyboard korang untuk memudahkan pencarian k. 

Cari code ni.

 /* Mobile  

 

Kalau dah jumpa code tu, sila copy code bawah ni pulak.

 .header-outer, .content-inner { background-color: transparent; }

.main-outer, .tabs-outer { background-color: $(content.background.color);}  

Paste code tadi ( code kat atas ni ) sebelum code   /* Mobile    .

Dah? Cuba preview dahulu. Header korang mesti dah terpisah kan? 

Tapi nampak tak ada shadow kat tepi- tepi tu? Siapa tak nampak memang ada tanda- tanda dah tu. Hehe. Akey, sekarang ni kita nak buang shadow tu sebab nampak tak cantik. Ini terpulang kalau korang nak buat atau tak. Bagi yang nak buang tu, sila cari code ni k.

 .content-outer {  

Mesti korang akan nampak code macam ni kan?

 .content-outer {

  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);

  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;

  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;

}

  

Akey, sekarang ni, korang padam atau buang code tu semua. Cuba preview kalau shadow tu ada ke tak. 

Jeng! Jeng! Shadow is gone forever!

Kalau dah tak ada shadow ( bayang- banyang ) dan error pun kosong, korang boleh dah save template korang. Yeahh.. sila tepuk tangan sekarang. ^^

Terima kasih kerana sudi meluangkan masa untuk bertutorial dengan saya! Jangan lupa jenguk blog " Dunia Novelaku " . Lalala....  :D


updated :  aku tak pasti kalau code template lain macam ini. Ada yang tak dapat cari code mobile tu. Mula- mula akupun macam itu. Tapi bila aku scroll dan cari perlahan- lahan, eh jumpa pulak. So, kalau still tak ada, cuba pakai template ini untuk memudahkan korang k =) trimazz.