Tutorial Sidebar with Header / Photo

Assalammua'laikum.
Sebelum nak buat sidebar dengan header, ubah background, border, shadow sidebar kepada transparent supaya tak nampak. Kalau nak sidebar terapung, tambah code position:fixed; macam berikut :


1. Layout > Add a Gadget > HTML / Javascript
2. Copy mana-mana code di bawah dan paste di ruangan HTML tadi.
3. Save.
Sidebar's content. Cbox. etc.

<center><img height="auto" src="URL Header" width="Width header" style="margin:-10px" /></center>
<center><div style="border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-shadow:0px 0px 0px #eaeaea; background: #FFF ; padding: 5px; width: Width sidebar px;">
<center>
<div style="width:170px;color:#ccc; padding:5px;font:11px arial; letter-spacing:1px;">
Sidebar's content. Cbox. etc.</center></div></center>

Sidebar's content. Cbox. etc. Sidebar's content. Cbox. etc. Sidebar's content. Cbox. etc. Sidebar's content. Cbox. etc. Sidebar's content. Cbox. etc.

<center><img height="auto" src="URL Header / Photo" width="Width header" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 200px; border-top-right-radius: 200px; margin:-10px" /></center>
<center><div style="border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; border-top-left-radius: 0px; border-top-right-radius: 0px; box-shadow:0px 0px 0px #eaeaea; background: #FFF ; padding: 5px; width: Width sidebar px;">
<center>
<div style="width:170px;color:#ccc; padding:5px;font:11px arial; letter-spacing:1px;">
Sidebar's content. Cbox. etc.
</center></div></center>
Aku rasa sidebar versi kedua tu hanya untuk Google Chrome. Width header, sesuaikan dengan width sidebar. Ubah mana perlu.
Kalau ada masa, aku buat freebies header untuk sidebar. Comment kalau guna code ni. CREDIT atas nama "Nafaa" dan link-kan blog ini kalau guna untuk blogskin. Re-tutorial adalah tidak dibenarkan sama sekali *serious* ._. Lama aku coding walaupun benda sakai je.
CLICK HERE FOR FREEBIES

3 comments:

  1. kt sidebar content tu nk tulis apa?
    hasil dia mcm kt blog nafa ni ke?

    ReplyDelete
  2. Kak Nafaa, thanks for tuto ! Btw, kreatif sgad. Mne akak belajar tuto ni ?

    ReplyDelete

I don't approve harsh comments (: