Tutorial bahagi header blog kepada dua

Tutorial bahagi header blog kepada dua

Baca Juga

Selamat sejahtera kepada semua rakan. Moga sihat dan ceria selalu :)

Hari ini Sop dihubungi rakan bertanya tentang header blog Sop yang diletakkan iklan disebelahnya. Beliau cuba mencari tutorial tentang membuatnya malangnya Sop belum pernah lagi berkongsi. Untuk membantu menjadikan header mempunyai iklan disebelahnya, Sop berkongsi cara ini melalui entry. Boleh juga rakan lain yang berminat buat juga :)

Kelebihan meletak iklan disebelah header ialah peratusan pelawat untuk klik lebih tinggi kerana kedudukan iklan yang strategik, mudah nampak dan jelas. Blog juga lebih kemas dan tersusun :)

Untuk menjadikan ruang iklan berada di sebelah header, kita perlu membahagikan header tersebut. Kebiasaan header hanya mempunyai 1 element sahaja [Namun banyak juga template yang tersedia ada dengan pecahan ini]

Header asal

Header telah dibahagikan kepada 2

Perkara pertama yang perlu dibuat sebelum memulakan kerja mengubah ialah back up template anda. Sediakan payung sebelum hujan :)

Pergi ke Template > Edit HTML
Cari #header-wrapper tengok saiznya. Kebiasaan ialah 900px. Tujuan dia untuk proses membahagikan header itu nanti. Contoh iklan Nuffnang akan bersaiz 728px maka header hanya bersaiz 172px [900px-728px].

Cari #header hingga kod } dan gantikan dengan kod di bawah:

#header {width:170px;display:inline-block;float:left;padding:auto;
}
#header2 {width:728px;display:inline-block;float:right;padding:auto;
}

Seterusnya, cari kod di bawah:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAMA BLOG ANDA (Header)' type='Header'/>
</b:section>

Paste kod di bawah selepas kod di atas:

<b:section class='header2' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>

Preview untuk semak template anda. Sekiranya tiada masalah, sila Save Template.

Sila ke Layout > Add a gadjet > HTML > Masukkan kod iklan anda

Header blog [gambar] anda juga perlu ditukar kerana saiz dari asal telah diubah kepada 170px. Jika guna text header, ayat perlu dikurangkan, yer :)

Selesai.

Mudah sahaja bukan? Jika ada sebarang masalah, sila tinggalkan komen anda. Terdapat template yang mungkin ada sedikit perbezaan. Tapi asasnya sama sahaja :)

Bagi yang rasa entry ini sangat berguna dan hendak belanja Sop minum, sangat dialu-alukan. Jika tidak, sekurang-kurangnya tekan lah butang like itu.. heheheh